Future State
Prepared By: Kianosh Pourian, UI Consultant Cielo Concepts Inc.
Improve the “Elements” application:
Design
The componentization aspect of the design will help in:
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
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.
The key practice in the entire UI re-architecture will be "Componentization"
Advantages of "Componentization":
To implement these changes on the UI, we have broken down the key areas:
Front End Architecture
Framework Evaluation
Framework Evaluation
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.
Framework Evaluation
Pros
Framework Evaluation
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
Framework Evaluation
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.
Framework Evaluation
Pros
Framework Evaluation
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
Framework Evaluation
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.
Framework Evaluation
Pros
Framework Evaluation
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
Framework Evaluation
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.
Framework Evaluation
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
Framework Evaluation
Cons
Small community and support system
Small ecosystem
String based template vs. DOM based templates
Framework Evaluation
Using RequireJS along with other AMD based libraries i.e. jQuery, Rambda or LoDash, jQueryUI, etc.. will allow for a more customized solution.
Framework Evaluation
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
Framework Evaluation
Cons
Requires intimate knowledge of JavaScript and the custom framework
No community support system
Framework Evaluation
This process will involve:
We should also take advantage of development toolsets like:
Also establish these coding standards:
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: