Implementation path 1

Independently developing the new framework for the front end code will create a new CSS, HTML, and JavaScript framework for the presentation layer.

Implementation path 1

Pros

• Ease of implementation
• Time to market will be faster
• A solid infrastructure can be built without interference or collisions from the old code base
• A fresh start

Cons

• Resources will be split between two code base
• Limited feature enhancements to the application

Implementation path 2

Abandon the SPA (single page application) concept and build each major interaction i.e. adding a new element, editing an element, or removing an element on a separately viewed new page.

Implementation path 2

Pros

• Incremental addition to the application
• A solid infrastructure can be built without interference or collision with the old code base
• No SPA​

Implementation path 2

Cons

• No SPA
• Some aspects of the site may not be abstracted easily adding additional time and resources to the project
• Some areas of the requirements , including  responsive and mobile friendliness,  will be delayed. Making the site responsive will have to be done separately
• ​Maintenance and knowledge of two separate code base is necessary
• Increased time to mark

Implementation path 3

Attack the problem areas from the technology point of view. The order of attack points will be:

• JavaScript framework
• UI/UX Design through HTML & CSS

Implementation path 3

Pros

• Incremental migration to the new infrastructure
• The user will not feel any affect of the change and will most likely benefit from it through better user experience and performance

​Cons

• A responsive application will not be available until the HTML and CSS is properly set
• More time and expenses because  the project is shifting into two separate projects

Implementation path 4

Keep the same JavaScript framework and evaluate each individual framework and library and create a migration path to update it to the latest version of the framework/library.

The migration path for going from JavaScriptMVC framework to CanJS (the latest version and evolution of JavaScripMVC framework) will be very hard and time consuming. 

There is still an opportunity to separate the presentation layer from the business layer and it should be part of the process. 

Implementation path 4

Pros

• Keeps essentially the same technology stack, but with  update  to the latest version
• Least amount of distribution to the user

Implementation path 4

Cons

• No significant improvement to the application in regards to performance, UX or UI enhancements 
• Responsive design must be  implemented at a different stage
• Depending the migration path of some libraries or the framework, additional time or effort will be needed
• The API of the framework has drastically changed from JavaScriptMVC to CanJS resulting to a big effort to update the framework

Recommendation

Technology Recommendation

• CSS:
  • SassCSS
  • Atomic Design and Pattern Lab
  • Grid Layout
• HTML:

  • Take advantage of latest HTML5 elements i.e. section, article, aside, nav, header, footer

  • Take advantage of latest HTML5 APIs i.e. notification API, Websocket API

  • Create custom elements when necessary

Recommendation

Technology Recommendation

• JavaScript:
  • ReactJS + Flux architecture. ReactJS’s emphasis on component centric implementation is a strong fit for the need of the “Elements” application. Flux architecture is also a great compliment to this library which will also be a great fit for the application.

Recommendation

Technology Recommendation

• JavaScript:
  • Toolkits:
    • ​Yeoman for scaffolding​
    • Gulp for task management
    • Bower for package management
    • NodeJS
    • Jasmine and Mocha for testing
    • JSDoc and SassDoc for documentation
    • Git for source control and code review

Recommendation

implementation Recommendation

Maintain the following goals:

• Separation of presentation layer from business layer
• Ease of development and quick time-to-market
• Componentize the application 
• Responsive application
• Improve performance
• Improve build process

Recommendation

implementation Recommendation

Option 1 implementation path will be the best fit for the set goals. This approach will allow for a smooth transition from old code to new code with least amount of disruption. The minimal disruption will also allow for quicker time to market of this project, allowing the code base to reach a stable point where addition of feature will become simpler 

Other considerations

resource management

Since there will be a branching of the code and two code bases will be maintained, the task resource management will become very important. The goals will be:

• Ensure that the team will have proper mentorship and guidance
• Ensure proper documentation
• Ensure that all team members are familiar with the infrastructure by participation in development

Other considerations

deployment and testing

With the separation of the front end from the back end, there will be an introduction of a new environment that will require testing and deployment. Although this will create an additional effort, nevertheless this can also be advantageous in handling small development or enhancements followed by a targeted testing and deployment.