Web Architecture Stack

Criteria

• Managing risk and changing technologies
• Modularity
• Sane state management
• Support rich user interactions
• Standards

Pages/Components

• Angular 1.x
  • no long-term support
• Polymer
  • Browser support
• ReactJS
  • two-way binding
• Angular 2.x
  • Enterprise support

• Aurelia
  • ECMAScript 2015
  • Supports IE9+
  • Two-way binding
  • Enterprise support
  • API management
  • Router

Business Logic

• Functional programming
  • Folktale Data.Task, Data.Maybe, Data.Validation
  • RamdaJS
  • Purescript?
  • Elm?
  • F#?

Data/State Management

• Flux
• FRP (rxjs)
• GraphQL

• Falcor
  • Simple API
  • Easy-to-understand abstraction

Global Styling

• BEM
• SMACSS
• OOCSS

• CSS Modules
  • Local and global scope
  • Exports to bindable object

Styling Language

• LESS
• Sass

• PostCSS
  • Plugins (CSS4, LostGrids, Rucksack)

Animation

• GSAP
• CSS Animations
• Famous

• Velocity
• CSS Animations

Types?

• TypeScript
• Flow

Module/Build Management

• Gulp
• Grunt
• JSPM
• Browserify

• Webpack
  • Aurelia recommended
  • CSS Modules
  • Dead code elimination
  • Bundling