Front-End (Web and Mobile) development workflow

Sharing here my time-tested agile front-end development methodology I have been using in all my greenfield development projects with success with my team comprises of:

  • UI/UX Engineers with business and creative acumen
  • HTML programmers
  • Front-End engineers experienced in building Angular and React.JS mobile and web applications of any size
  • REST API (Backend) developers
  • DevOps engineers.

I pictorially depicted the development process. It has 5 major steps

Web & Mobile App Workflow

  1. Entire application visuals, pages, forms etc. etc. created in Invision with exactly how we wanted the finished application would look like with the ability to navigate each screen by clicking on action buttons as-if we are using the real application. We can collect feedback on each screen within the invision with comments coach marks.
  2. Once the visuals are approved, the base application or skeleton application built in clean HTML and CSS by professional HTML programmers. You need highly skilled HTML programmers, not the ones who can create an APP using Twitter bootstrap or copycats.
  3. Then, build React.JS and REST API simultaneously
    1. Create the React.JS or Angular.JS application using the just created HTML and CSS templates and wire-up each screen with mock JSON Data
    2. Build the REST APIs using the programming language and framework of our choice. I use Node.JS (Sails.JS) or Java (Spring) or Python (Flask) as lambda functions and exposes it thru API gateway. Before the actual development, we finalize every endpoint mapped to the user interface with mock data leveraging integration response in AWS API Gateway. We also use Mockaroo or Facker.js to generate synthetic data to mimic production data.
  4. then, integrate the Front-end and Back-End and continue to deploy and test the application. 90% of the time, there will  (should)  not be any changes in the REST Endpoints between mock and actual REST API. It should be a black box for the front end developers.
  5. Go-live from the day we completed step # 2. Our DevOps automate the build and deployment process and release the packaged code as docker image as well as host it in AWS S3. We create 3 main environments with various configurations (we follow conventions over configuration approach)
    • Development – Every day or alternate days we release current dev. branch version with new web links without destroying previous dev. releases
    • Staging – Every week we release staging deployment for the client to test and collect feedback
    • Production – Case by case basis, we release production version when we do Staging release to make sure the code works in production as expected without any last minute hassles.

 

BUDDY-WORKS-logo-blue

We Use Buddy Works for Continuous Integration workflow from Github code pull to Build to package, version bump, deploy, back-up & roll-back, slack notification and sending emails the build URL to project team members and stakeholders.

 

createlyNote: The diagram I used in this post is created using creatly. You can get the original editable diagram from my GitHub as part of giving back to the opensource community.

 

 

 

 

 

Headstart Microservices Architecture using AWS Lambda in your favorite programming language (Node.js or Python or JAVA)

The way we build software has changed stupendously from Monolithic Architecture (MLA) using single programming language to a Microservices Architecture (MSA) where pieces of code developed in multiple different programming language that fits the problem in hand. Microservice has numerous benefits and encourages Single Responsibility Principle (SLP) with quick deployment and easy to change lifecycle without impacting the fatty software.

AWS offers easy way to implement microservices through RESTful APIs wrapped against AWS Lambda functions in a server less backend that can auto scale with built in security via its IAM. AWS offers 12 months free tier which enable you to get hands-on experience with AWS Cloud Services.

To demonstrate the power of AWS API Gateway & Lambda, I quickly dropped my flicker photo search node.js code as lambda function wrapped in AWS API Gateway and exposed it as REST API Endpoint.

CODE

AWS lambda does not support 3rd party npm so make sure to upload all of your 3rd party node_modules. AWS Lambda & API Gateway Getting Started guide will be your good head start.

API END POINT

POST https://www.getpostman.com/collections/9f4773dd73a512b92e7a

REQUEST BODY

{
"api_key":"4a9d265192929f69631c55b9a5bdf9bc",
"search_tags":"Raspberrypi",
"search_text":"Raspberrypi",
"search_limit":10,
"search_currentpage":1
}

POSTMAN SCREENSHOT

image