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.
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.
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
The Front-end Landscape
By Cory Brown
