Solution Breakdown

Design

• Possible re-evaluation of the current design
• Responsive Design
• HTML & CSS implementation

Design "componentization"

Design "componentization"

The componentization aspect of the design will help in:

• Creating new components as needed
• Responsive design
• Re-usable components

Design "componentization"

Responsive Design

• Changing the layout of the application to be more responsive by taking advantage of responsive grid layouts

• Add touch events, where necessary, to the UI so that the functionality of the site can be managed on hand held devices

• HTML and CSS will have to be re-written in order to implement the responsive grid layout

Design "componentization"

Responsive Design

Another issue to keep in mind is that the creation of a responsive application may not eliminate the need for a native app for “Elements”. Considering the complexity of some of the tasks the “Elements” application is performing, a native app would be recommended.

Solution Path

Solution Breakdown

To implement these changes on the UI, we have broken down the key areas:

• Design
• Front End Architecture
• Back End Improvement opportunities

Solution Breakdown

Front End Architecture

• Separation of business logic from presentation logic
• Implementation of new framework
• Implementation of new dev tools

Solution Breakdown

Framework Evaluation

Solution Breakdown

Framework Evaluation

ReactJS + Flux

• React by itself only addresses the “V”iew portion of the MVC (Model-View-Controller).

• React can be used in conjunction with other frameworks or by itself.

• Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. 

Solution Breakdown

Framework Evaluation

ReactJS + Flux

Pros

• Component based way of looking at the view
• Extensible
• Big community support
• Low learning curve for React
• Virtual DOM decreases the need for dirty checking the entire DOM
• If React is used by itself, it can be combined with BackboneJS or AngularJS or any other framework

Solution Breakdown

Framework Evaluation

ReactJS + Flux

Cons

• The need for the “M” and the “C” may require learning a third party library or framework on top of React

• There could be a moderate learning curve for Flux architecture

Solution Breakdown

Framework Evaluation

AngularJS

AngularJS is an open-source web application framework maintained by Google and a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. Its goal is to simplify both development and testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich internet applications.

Solution Breakdown

Framework Evaluation

AngularJS

Pros

• Large community base providing support and implementation examples
• Lot of magic under the covers that will handle commonly used procedures
• Dependency injection allows addition of common services or third party libraries
• Express UI declaratively
• Great state management

Solution Breakdown

Framework Evaluation

AngularJS

Cons

• Heavy learning curve

• Scope management in large applications can be troublesome

• Recognized performance issues with the framework

• Very verbose in component creation.

• 2.0 release may require a significant migration path

Solution Breakdown

Framework Evaluation

EmberJS

Ember.js is an open-source client-side JavaScript web app framework based on the MVC software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.

Solution Breakdown

Framework Evaluation

EmberJS

Pros

• Large community support
• Component centric development features. Ember’s component allow the creation of HTML custom tags using Handlebar to describe its markup and JavaScript to create the behavior
• Partial templates
• Two way data binding
• The magic under the hood manages a majority of the work

Solution Breakdown

Framework Evaluation

EmberJS

Cons

• Steep learning curve

• Opinionated framework that at times can be inflexible

• Comparably smaller development ecosystem

• Requires jQuery and HandlebarJS which makes the total size of EmberJS to be 269KB

Solution Breakdown

Framework Evaluation

CanJS

CanJS is a JavaScript library that makes developing complex applications simple and fast. Easy-to-learn, small, and unassuming of your application structure, but with modern features like custom tags and 2-way binding. Creating apps is easy and maintainable.

Solution Breakdown

Framework Evaluation

CanJS

Pros

• Flexible and can easily integrate with third party libraries

• Lower entry barrier

• Excellent performance as a result of small size and fast rendering engine

• Two way data binding

Solution Breakdown

Framework Evaluation

CanJS

Cons

• Small community and support system

• Small ecosystem

• String based template vs. DOM based templates

Solution Breakdown

Framework Evaluation

Custom framework

Using RequireJS along with other AMD based libraries i.e. jQuery, Rambda or LoDash, jQueryUI, etc.. will allow for a more customized solution.

Solution Breakdown

Framework Evaluation

Custom framework

Pros

• Custom solution for a custom product

• Small size and highly performant

• Taking advantage of asynchronous script loading to reduce initial load and load libraries as needed

Solution Breakdown

Framework Evaluation

Custom framework

Cons

• Requires intimate knowledge of JavaScript and the custom framework

• No community support system

Solution Breakdown

Framework Evaluation

Final Overview

UI "Componentization"

This process will involve:

• Surgical removal of presentation layer from business layer
• Move away from JavascriptMVC and implement a new framework that will support:
  • Component based architecture
  • Future enhancements
  • Browser support
  • Community support

UI "Componentization"

We should also take advantage of development toolsets like:

• Yeoman for scaffolding
• Grunt or Gulp for task management
• JSDoc for documentation
• SassDoc for CSS documentation
• JSNLog or StackTraceJS for logging
• Mocha or Protractor for testing

UI "Componentization"

Also establish these coding standards:

• TDD or BDD
• Linting or hinting your JS code
• Strict coding standards
• Proper documentation

Other considerations

Deployment and Testing

• At the beginning of the project there will be at least two separate code bases that will require deployment and testing.
• The old testing scripts will have to be modified, given the fact that changes to the structure of the HTML, CSS and JavaScript will be inevitable.

Other considerations

Training and learning curve

With the introduction of new framework, toolsets, design patterns, etc…, there will be a period of training and ramp-up time to become familiar with the new tech stack.

Approaches to ease this:

• There will be some level of knowledge sharing through books, tutorials, and videos
• Bi-weekly, monthly, or major milestone presentations 
• Consistent wiki documentation on the process and technology