A Proposal for the Discipline and Practice of Modern Web Development

Application Architecture

What is the 50,000 ft view?

Back end

Rest API Platform

Front End

Single Page Aplication

JSON/JWT's

What is a Single Page Application (SPA)?

Write Only DOM (no state/data is maintained in DOM).
Models/API are Single Source of truth.
Views Observe Model Changes
Decoupled modules that expose small external surfaces
Minimizing DOM dependent-code

For Us??

We haven't exactly been doing things the right way...

Front End Web Development is Hard

The browser is rapidly evolving

ECMAScript 6 && 7
Web Components
Internet Explorer Usage is Dropping
There are a lot of really cool things coming down the pipeline right now
- WebGL 3D
- Isomorphic JavaScript
- Cross Platform Development with JS
- Numerous new techniques for async programming in JS
  - Observables
  - Generator Functions
  - Async Functions

Complexity has shifted from backend to front end

It's Really hard to pick the best practices.

Classes, Objects, Functional
AMD or CommonJS
Dependency Managing
Different Solutions
- Angular Dirty-checking
- React's Virtual Dom

Forget About Picking The right Front End Framework:

Cappuccino
qooxdoo
Spine
Eyeballs

Sammy
Choco
Agility
Knockout

Angular
Meteor
React
Aurelia

ng2?

So what do we do?

Focus on What Browsers can/will support.

Not Guaranteed:

XYZ library/framework will continue to be supported.

Guaranteed:

You will need to support your application beyond the life cycle of your framework.

Proposal

Service-oriented Architecture

Why Services?

What's Wrong With The old approach?

How Do We Quit being addicted to frameworks?

ES6 Classes

'use strict';
import {RequestProvider} from './request-provider';

export class Resource extends RequestProvider{
  constructor(){
  }

  get(path){
    let request = super.create(path, {method: 'GET'});
    return super._fetch(request);
  }

  post(path, payload){
    let request = super.create(path, {method: 'POST', body: JSON.stringify(payload)});
    return super._fetch(request);
  }

  put(path, payload){
    let request = super.create(path, {method: 'PUT', body: JSON.stringify(payload)});
    return super._fetch(request);
  }

  remove(path){
    console.log(this.path)
    let request = super.create(this.path, {method: 'DELETE'});
    return super._fetch(request);
  }

}

Benefits

Easy to reason about
Does not rely on anything framework specific except for rendering
- Highly Portable
- Requires rebuilding views and minimal logic
  - Relatively cheap
Highly Testable
Not Es6 Reliant
- Es6 is a tool to assist in code design
- Can be replicated in ecma5

Downsides

Move into patterns away from framework conventions
- Lose some conciseness
- Lose some optimizations
Little assistance for application architecture
- Requires piecing together application from library
- More low level attention
  - Browser support
  - Implementing already solved problems

What to Do?

That depends...

Business needs

How important is scalability?
How much time do I have?
How disciplined are my teams?

What Does This Look Like?

User Land

Application

API Layer

FE Framework

ng1

Presentation

Layer

BS4

SDK

Business Logic

Why Angular.js?

Why CSS Framework/BS4?

Why SDK?

Framework Agnostic
Highly Testable
Future Proof the Application.
Rapid and Concurrent Development of multiple projects for the platform.
TypeScript
- Optional Typing
- Typing enables intelligent hints to IDE's, helps with auto completion, reduces the need to look at docs, and allows you to write more transparent API's.

Testing
Tooling
Process

Why Test?

Make sure that the app does what it was created to do.
- When we enhance the capability of an existing feature we can do so with confidence that we aren't breaking things.
Users have an uncanny ability to do the one thing you never thought they would do, no matter how unlikely it is.
There are a lot of different devices, browsers, and operating systems out in the wild. The app will run differently in different enviroments.

#1 Reason

What is Testing?

Test small pieces of code in isolation. Tend to create the ideal feedback loop.

Take those small pieces of code and make sure they work together.

Test full areas of the application by runing a test through it's entire stack of operations.

User Land

Application

API Layer

FE Framework

ng1

Presentation

Layer

BS4

SDK

Business Logic

Unit Test
- Karma
- Jasmine
e2e Test
- Protractor

Unit Test

Karma
Jasmine

Tools matter.

Why
Who
What

are these tools?

do we even need dev tools?

should we use?

Web Development is complex

Who is in this space?

What Should we use?

Minify && Concat Javascript
Minify && Concat CSS
Vendor Prefix CSS
Compile SASS?
Transpile es6/Typescript
Run unit tests
Run e2e tests
Run livereload
Lint our Javascript
Dependency Management

What do we want our tools to do?

Process Produces Outcome

Development Enviroment

Development API

FE APP

API team is responsible for making available their API platform to a development environment backed by a loaded database for use in FE development.

FE Dev's are able to run the app in their local enviroment on a livereload server while hitting the Dev API.

Continuous Deployment

Dev

Build

Test