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.