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.

 

 

 

 

 

How to write Techno Commercial proposal for a large software projects?

digital_leftWriting software technical proposal is art and it requires experience and expertise from different skill sets however IMHO any software architects should be able to create such proposals individually but the reality is not true.

In large organizations, there is a dedicated team called “Presales” whose job is to create proposals and respond to RFP & RFI’s, participate in war rooms, running thru proposal presentations, participate in requirements understand and Q&A sessions. Usually the Pre-sales team comprises of Business Development executives, Software Architects / Leads, Engineers / Developers / QA Specialists, Technical Writers, Business Analysts, Business Finance Executives, Project Managers etc. etc. but the role of the Architect is crucial and everything revolves around his deliverables i.e. estimates, solution architecture etc. and based on that the rest of the team arrives with effort, cost and schedule estimates.

Finally, the packaging of the proposal requires documentation, organizing and presentation skills and in my experience many companies and individuals struggle to make one nice proposal due to lack of experience, confidence and finally lack of templates hence I wanted to open source the work I have been doing for many years as Architect and sharing the skeleton proposal template that can be downloaded from my public GitRepo

A preview of the Techno-Commercial  proposal’s Table Of Contents is given here

 

 

How we built our blazing fast promotional website in Angular.JS SPA

I just wanted to share how we built our public facing Radiology website https://www.aztechradiology.com  developed using our homegrown minimalistic, lean & mean CMS framework called as “Helen CMS” built on top of Angular.js and Node.JS libraries

toolsets

Features of our home grown Helen CMS

  • Built for speed of the development
  • Blazing fast
  • Clean code separation
  • Template driven user interface
  • Highly scalable
  • Multilingual
  • No database required
  • Deploy by git / Gulp tasks
  • First class support for AWS Deployment
  • Hosted in server less environment AWS S3
  • Can run in AWS free tier – Zero operating cost
  • App in appliance (Container ready) for xcopy deployment on local server (on-premise) or on the cloud
  • 100% offline capabilities implemented through advances cache, Local Storage and Index DB with automatic cache busting and refresh
  • RESTAPIs can be built on any programming language of your choice, we use Node.JS deployed as Lambda Services and exposed through API Gateway
  • Each lambda services built on SRP (Single responsibility Principle) design principles and they are completely loosely coupled
  • Built on Micro services architecture
  • User actions persisted in lightweight database for analytics
  • Fluid page rendering without freezing the UI

aztechwebshot

React.JS for beginners – Recommended starting point video tutorials

Though I have been using and advocating Angular.JS for nearly 5+ years but fell in love with React.JS due to its simplicity, performance, adoption by developer communities and enterprises. When it comes to teaching newcomers to learn React.JS, always struggled with where to start i.e. Pluralsight video, reactjs.org, google search etc. hence publishing this articles for newcomers and this is purely my personal preference.

As I said, there are hundreds of ways to start learn React.JS for beginners however the following 5 part video tutorial by Telmo Sampaio is my recommendation. This doesn’t cover backend interaction like Restful services but the environment setup, project creation, understanding the folder structure, UI components are covered pretty well.

Prerequisites

1. Windows PowerShell or command line

2. Node.JS https://nodejs.org/en/

3. IDE https://code.visualstudio.com/


 

Back On Blog writing

It’s been few years I didn’t get into blog writing on regular basis which I wanted to cut it out and get back to share all of my technical, business, techno marketing encounters from my past 2 ~ 3 years which helped me, my employer, my team here at onsite and offshore and the clients I worked with. It will be a series of blog posts and I am pretty sure all of them will be useful to the readers from various background and experiences.