The Front-end Landscape

Angular

React

Redux

Polymer

Vue

Firebase

jQuery

ES6

Babel

Browserify

Webpack

Gulp

Grunt

CSS Modules

Web Components

REST

Services

Interfaces

Events

Async

Promises

FRP

Pure Functions

Reducers

Functors

Monads

Classes

Inheritance

Lodash

Ramda

Underscore

Ember

Flux

Riot

Transpiling

Bootstrap

RxJs

Broccoli

Handlebars

HTMLBars

UMD

AMD

CommonJS

Requirejs

Fetch

So Many Frameworks

  • 21 different javascript frameworks featured.
  • 14 different compile-to-js frameworks.
  • 36 different js frameworks in labs section

 

TodoMVC

A place for comparisons of frameworks against a common application

Why so many?

JavaScript community hasn't matured like other "real" language communites?

The web platform sucks so bad we are desperate for some abstraction?

JavaScript developers suffer from "not created here" syndrome?

The web platform is in a season of rapid advancement.

Rate of Change

The web platform is advancing at an unprecedented rate.

The pace of change does not appear to be slowing down anytime soon.

Rate of Change

This acceleration of change has spawned a balancing desire to simplify and reduce unnecessary complexity where possible.

This has manifested itself in the form of a preference for componintization and composability.

The secret to efficiently building ‘large’ things is generally to avoid building them in the first place

- Addy Osmani

Composition/Componentization

Oct. 10, 2014: Stack team does Amazing presentation on Componentized Architecture.

Oct. 23, 2014: Angular team announces Angular 2 with new componentized architecture featuring "component trees" (composed components).

May, 2013: React initial public release featuring a composed componentized architecture, virtual DOM and one-way data flow.

Nov. 14, 2013: Polymer, a Web Component framework by Google, launches publicly, featuring components.

Aug. 13, 2015: Ember, already using components as a core principle, releases 2.0 featuring "data down, actions up" one-way data flow and a virtual DOM tree.

Composition/Componentization

Not only do modern JavaScript frameworks encourage componentization, they are also componentizing themselves.

Angular2: core + router + zone.js + animate + http

Polymer: ShadowDOM + Custom Elements + HTML Templates + HTML Imports + Polymer Sugar

React: React + ReactDOM + ReactRouter + Redux

Ember: HTMLBars + EmberMetal + EmberRouting

Componentization

Rules of Componentization

  • Singe Responsibility (not single use case)
  • Self containment ("pure" functions)
  • Clear and strict context boundaries (Black boxing)
  • Reusable

Componentization

Single Responsibility Principle

Single responsibility doesn't mean "It does one thing," it means "It does one type of thing." This distinction is the difference between successful and unsuccessful componentization.

State

UI

Component

{}

No external influences.

Self Containment

Componentization

State

UI

Component

{}

Componentization

Strict Context Boundries

Does not influence external things and is blissfully unaware of anything outside it's strict context.

  • Repeatable

  • Configurable

  • Extensible

  • Composable

Componentization

Reusability

I think the lack of reusability comes [with] all this implicit environment... You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.

- Joe Armstrong, creator of Erlang

Composition

Composition is the process of combining problem set solvers to solve more complex and specific problems.

Composition

Composition is facilitated by componentization and in fact is not possible without it.

This is not composition.

Composition

This is composition

Composition

Think of [components] as lego blocks. You don't necessarily care about the details of how it's made. All you need to know is how to use the lego blocks to build your lego castle. By making small focused [components] you can easily build large complex systems without having to know every single detail of how everything works. Our short term memory is finite.

Sindre Sorhus - prolific npm author

A

B

Component

Composition

The philosophy of a front-end applicaiton

Ultimately, composition and componentization are philosophies. Philosophies that can be incorporated into any application regardless of the technology used.

Seperation of Concerns

Interactions

Presentation

State

Domain Model

View Model

View

Fetch

Angular Services

Backbone Model

POJO's

Redux

Handlebars Helpers

Ember

Angular Controllers

Backbone View

Flux Store

POJO's

React

Handlebars

Angular Tempaltes

Vue

Riot

Polymer

HTML Strings