The document provides an overview of modern web development frameworks and libraries from 2006 to 2015. It discusses:
- Early frameworks like jQuery that provided cross-browser APIs but had tight coupling with HTML.
- AngularJS which introduced two-way data binding but had slow dirty checking.
- Backbone.js which used a true MVC pattern with jQuery-like views but had a complicated data binding system.
- React which introduced one-way data flow and the virtual DOM for improved performance.
- Emerging trends like reactive programming and CSS modules.
The document traces the evolution of front-end development and different approaches to state management, data flow, and component design over the past
4. Pros Cons
Cross browser API
Powerful DOM queries
OOTB Ajax
Plugins system
Tight coupling with HTML tags
Tracking DOM events is hard
Misleading API
("on" might be on or delegate, it
depends)
Slow
6. Pros Cons
Cross browser API
Powerful DOM queries
OOTB Ajax, PJax, etc.
Plugins system
Traversing DOM was slow
Some of the modules were
crappy
Tried to provide everything
Contributing was hard
Loading modules
Widgets
App framework
Designed to serve the old
browsers
8. Pros Cons
Two way data binding
Declarative HTML
Complex concepts
Slow dirty checking
Logic everywhere
Client-side framework
(rendering on the server is possible,
but tricky)
They invented Karma :)
14. Pros Cons
Minimal (view part only)
One-way data flow
Requires change of mindset
Simple concepts
Fast (60 fps)
Isomorphic applications,
client-side applications,
native applications
Abolishes the rules made of
stone
REACT
24. ES6 & 7 main features
Classes
Modules importing
Syntactic sugar over functions
Class and properties decorators (annotations)
Variables and constants
Block scoping
57. Can be dynamically collapsed or uncollapsed along the main
axis while preserving the container’s cross size.
Can be laid out in any flow direction (leftwards, rightwards, downwards,
upwards)
Can have display order reversed or rearranged at the style layer
(i.e., visual order can be independent of source and speech order)
Can be laid out linearly along a single (main) axis or wrapped
into multiple lines along a secondary (cross) axis
Can “flex” element’s sizes to respond to the available space
Can be aligned with respect to their container or each other
Child elements in Flexbox