Problem Statement

There are a number of frameworks and techniques that are being used across the Internet which aim to aide development of modern front end applications, there is no silver bullet solution.

We currently have a mixture of technologies and approaches that have been used in the past to create front ends.

With the advent of rewriting our applications for the "new world" we need to define a consistent approach and set of tools and standards to enable us to achieve this in the most efficient and effective way.

Phase 1
Trends & Options

• Investigate current market trends
• Establish options available to us

Market Trends

Web Components

• Building blocks of the web
• Think Lego bricks
• Composable / reusable

ECMAScript

• The language standard for JavaScript
• Write tomorrows JavaScript today
• Developer benefits
• ES2015 specification released June 2015
• TypeScript for additional benefits

Options

We picked a handful of what we believe to be the more prominent frameworks and libraries around to get an initial feel for what they were about and whether they are worth investigating in more detail.

As a loose criteria we looked for the minimum of a component based approach, the learning curve, adoption/activity/popularity, professional opinion after use and discussion on pros/cons.

Started with ...

• Angular2
• Aurelia
• Backbone.js
• Breeze
• Ember
• React
• Knockout
• Meteor
• Polymer
• Riot.js
• "No framework"

Refined for detailed investigation ...

• Angular2
• Aurelia
• Backbone.js
• Breeze 
• Ember
• React
• Knockout 
• Meteor 
• Polymer
• Riot.js
• "No framework"

Phase 2
Detailed Investigation

• Closer scrutiny of previous criteria
• Coding examples
• Discussion between group

Backing and Standings

How they position themselves

• Enough direction to get an application going 
• Opinionated infrastructure, but not restrictive
• Consideration for different consumers
• Forward thinking, but respecting the present

What exactly do we want?

Amounted to a framework

Logical choice

Angular 2

Phase 3
Roll-out Preparation

• Department agreement
• Awareness workshops

Primary Steps

complete

• Application Strategy
• Data Strategy
• Error Handling Options
• Mobile Options
• Overall Architecture
• Project Structure
• Styling

Lower Level Implementation

• ngForward - Write for easier migration
• ngUpgrade - Run old and new framework
• Rewrite from the ground-up

Application Strategy Options

ToDo: Department decision to be made

• Data structure inside applications
  Redux, Flux, uni-directional flow
• Data calls to service apis
  Service decomposition out come dependent

Data Strategy

ToDo: Have direction after initial investigation but work still needs doing to create "starter for ten" examples for guidance.

• Needed as we currently have no awareness of errors happening on clients machines
• Review of 3rd party providers (SAAS) to log errors to
• Have preferred option

Error Handling Options

ToDo: Department discussions needed and decision to be made

• Pure Native
• Hybrid
  Have preferred software option (Ionic 2 > Angular2)
• Dedicated
• Responsive
• Shared code base options investigated

Mobile Options

ToDo: Need to make options clear to department and Charity

• Have established starting structure
• Styling project
• Styling components project
• Shared application components project (budget component, api service)
• Package management server
• CDN hosting

Overall Architecture

ToDo: Needs discussing for delivery and server options

• Starting point and future guidance for an application
• May result in using community built version, trying to understand technologies and what our requirements might be
• Includes coding standards, testing capability only (what to test from CID), build packaging, debugging, folder & file structure and naming conventions

Project Structure

ToDo: Example needs completing, comparing with community efforts and both Development teams' buy-in

• Providing technical support for replicating the Visual Style guide (Digital initiative) in a single digital format that all applications use for look and feel
• Need to choose between rolling our own or using 3rd party
• Several meetings held with Digital

Styling

ToDo: Prototype needs progressing, comparing with effort of using a 3rd parety framework and both Development teams' + Digital buy-in