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.

How to embed native Android UI (PDF Viewer) inside PhoneGap mobile application

……This is just a question..if I find answer I will update this post…..

 

 

We used MuPdf library for native pdf reader in our custom built android application. We also leveraging its api to access pdf file meta data i.e. total page count, author etc.,

The application is developed using SenchaTouch 2.1 HTML5, CSS & JavaScript MVC framework packaged as android app using PhoneGap.

The problem we are facing to bridge PhoneGap with Native Android UI (pdf viewer). We built a custom PhoneGap plug-in which opens the mupdf android pdf viewer (we referred the Date Picker android PhoneGap plug-in code).

The below first screenshot is the sample PhoneGap app with blue header and footer and the body is left blank as white (i.e. placeholder to embed the pdf viewer as shown in screenshot 2.)

                Scrrenshot 1                         Screenshot 2

imageimage

 

When we invoke the mupdf PhoneGap plug-in, the viewer opens as separate UI and occupies the complete viewport i.e. Header & Footer are invisible. We need the header & Footer it because we have few action buttons on it for go to a specific page, zoom, etc. How to achieve it?

Embed Adobe Reader in custom Android (or PhoneGap) Application

 

Note:This is the forum post I posted in Adobe & Stack Overflow. I will be updating this post based on the responses and our work.

 

We have a need to embed PDF reader in one of our custom built Android (or PhoneGap Plugins) tablet application from local directory (Sdcard). Embed meaning is not just display pdf document inside the application instead we have to tap the following API functionalities programmatically:

1) Retrieve pdf document meta data i.e. Page Size, Author, Date Created

2) Tap next and previous page click and implement our custom handler code

3) Zoom, Pinch, page swipe etc.

Can someone help us or give direction to achieve the above use cases using Adobe Acrobat reader (Adobe Reader Mobile 9 SDK)?

Whether Adobe Reader Mobile 9 SDK exposes API to program against? The FAQ section doesn’t talk about the API for the above mentioned use case

 

We have spent time  in googling & StackOverflow  mining to find the possibilities but no luck. What was our conclusion after the analysis is we have to go for open source or commercial embeddable pdf sdk’s i.e.

· Mozilla’s Pdf.JS

· Android Pdf Viewer Library

· Foxit pdf viewer library

· Radaee.pdf, Embeddable Mobile PDF SDK

· The Adobe Reader Mobile SDK

We have tried the above mentioned libraries and below are our experience

Mozilla’s Pdf.JS – It is a JavaScript solution and exposes API for all of our need but fails to render the PDF for some cases whenever some special embedded font is missing and in such cases the application crashes. Other than this single issue it very promising and superb. Still it is in beta stage.

Android Pdf Viewer Library – We have built a Custom Intent (PhoneGap Android Plugins) but it is very slow and fails in many cases. We felt PDF.JS is much better than Android Pdf Viewer Library

Radaee.pdf – Currently exploring. The Knowledge base is very poor and not enough samples to move forward

Foxit pdf viewer library – Unable to download the SDK from the URL they sent in the email after registering with Foxit.  Though the link says PDF SDK but it downloads only the pdf reader. We sent an email to their sales team and awaiting their response.

The Adobe Reader Mobile SDK – SDK is not available to download, one need to get it through their re-sellers. We sent a request to them and awaiting for their callback

o Datalogics

o Bsquare

o Bluefire

Note:

Adobe forum post http://forums.adobe.com/thread/1215435

Stack Overflow forum post http://stackoverflow.com/questions/16642573/embed-adobe-reader-in-custom-android-or-phonegap-application

My de-facto standard of Open source Tools, Frameworks and Components for building scalable enterprise class systems.

I have listed my de-facto standard of open source tools, frameworks and components for building enterprise class systems for both Web & Mobile platforms in Microsoft .NET technologies (ASP.NET & MVC). One of our big prospects wanted to know the details of the open source frameworks we would be using in their project hence I wrote it as a small document for them which I thought would be helpful for others hence published here.

I have been using most of these frameworks and tools for many years i.e. Spring.Net, Nhibernate etc. and others are latest additions. So far we have been able to successfully implement these frameworks in our enterprise client projects, the benefits in-terms of productivity gain during development and adaptability to changes and enhancements are awesome.

Sl.No.

Frameworks and Components

Purpose

1

Twitter Bootstrap User Interface Design

2

Jquery User Interface Design

3

Nhibernate Data Access Component

4

Spring.NET Writing Loose Coupled & high cohesion enterprise application. Used in all layer (Presentation, Business, Data Access & Service Agent) for varieties of purpose like Dependency Injection, Exporting Plain .Net code into Web Service, Attaching additional Behaviour in run time through Aspect Oriented Programming, User Interface Templating, Enterprise Scheduling, RESTful API access, Resource Access etc.

5

Log4Net Crosscutting, mainly for debugging & instrumentation.

6

Sencha Touch Mobile User Interface design a.k.a. Cross platform
Mobile Application development

7

PhoneGap Packaging Sencha Touch Mobile Web App into Native App ready to distribute to Apple, Android, Palm, Symbian, and BlackBerry devices
8 NancyFx Writing light weight RESTful services
9 Ravendb Document Database
10 RabbitMQ Queuing & Messging
11 SignalR Adding Real-time web functionalities, it provides a very simple, high-level API for doing server to client RPC.

 

Twitter Bootstrap:


BootstrapTwitter Bootstrap, a front-end toolkit for rapidly developing web applications built at Twitter. The user interface developed using Bootstrap was made to not only look and behave great in the latest desktop browsers, but in tablet and Smartphone browsers via responsive design and CSS. It is packed with loads of features using some of the latest browser techniques, A 12-column responsive grid, dozens of components, JavaScript plugins, typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions

Jquery:


jqueryjQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It offers writing maintainable JavaScript, supports unobtrusive scripting. It compliments with numerous plugins for writing modular and highly loosely coupled JavaScript s.

 

NHibernate:

 

nhibernateNHibernate is an object-relational mapping (ORM) solution for the Microsoft .NET platform: it provides a framework for mapping an object-oriented domain model to a traditional relational database. Its purpose is to relieve the developer from a significant portion of relational data persistence-related programming tasks. It handles persisting plain .NET objects to and from an underlying relational database.

 

Spring.NET:

 

spring.netSpring.NET is an application framework that provides comprehensive infrastructural support for developing enterprise .NET applications. It helps to develop smaller, cleaner and more flexible code base that is significantly easier to test, maintain and extend. Spring.Net has got many modules out of which we will be using the following predominantly

 

  • Spring. Core – To implement Dependency Injection for writing loosely coupled and highly cohesive system.
  • Spring.Aop – To perform Aspect-Oriented Programming (AOP). AOP centralizes common functionality that can then be declaratively applied across the application in a targeted manner
  • Spring.Services – Converting a plain .NET objects into a web Services and WCF services. These services can be configured via dependency injection and ‘decorated’ by applying AOP.
  • Spring.Scheduling.Quartz – Provides integration with the Quartz.NET job scheduler providing declarative configuration of Quartz jobs, schedulers, and triggers as well as several convenience classes to increase productivity when creating enterprise level job scheduling applications.
  • Spring.Template.Velocity – Helper classes to configure a NVelocity template engine in a Spring based application.
  • Resource abstraction – provides a common interface to treat the Input Stream from a file and from a URL in a polymorphic and protocol-independent manner.
  • Expression Language – provides efficient querying and manipulation of an object graphs at runtime.

Log4Net:

 

Log4net is a tool to help the programmer output log statements to a variety of output targets i.e. File system, Sql Table, ASP.NET Trace, Console, Event Log, SMTP Email etc.. In case of problems with an application, it is helpful to enable logging so that the problem can be located. With log4net it is possible to enable logging at runtime without modifying the application binary. The log4net package is designed so that log statements can remain in shipped code without incurring a high performance cost. It follows that the speed of logging (or rather not logging) is crucial. At the same time, log output can be so voluminous that it quickly becomes overwhelming.

Sencha Touch:

 

senchatouchSencha Touch, a high-performance HTML5 mobile application framework, built for enabling world-class user experiences. It is the only framework that enables developers to build fast and impressive apps that work on iOS, Android, BlackBerry, Kindle Fire, and more to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards. The key features are:

  • Built on HTML5 Technology
  • Smoother Scrolling and Animations
  • Adaptive Layouts
  • Native Packaging

 

PhoneGap:

 

PHONEGAPThis is an open-source deployment framework from Adobe Systems which allows packaging Sencha Touch (JavaScript, HTML5 and CSS3, instead of device specific languages such as Objective-C) code and resources into a binary app ready to distribute to Apple, Android, Palm, Symbian, and BlackBerry devices. The framework’s other purpose is to bridge the gap between the APIs that devices expose to native apps, and those which are made available to web apps i.e. File, Accelerometer, Camera, Contacts, Geolocation, Compass, Notification etc.

NancyFX: Writing light weight RESTful services inspired by Sinatra in Ruby

Ravendb: Document Database

RabbitMQ: Messaging and Queuing (Pub/Sub) in building highly scalable and durable systems.

SignalR: Building Real-time applications and push notifications.