Embed Size (px)
Citation preview
get the code...https://github.com/avi1234/reactjs-presentation
React
Web Evolution Concept Syntax Example
ReactWeb Evolution
DataPresentationLogic
ReactWeb Evolution
DataPresentationLogicM V C
ReactWeb Evolution
M V C
GenerationXXX
ReactWeb Evolution
MVC
Generation1
ReactWeb Evolution
VC
Generation2
MM
M
M
MM
M
M
ReactWeb Evolution
VC
Generation2
M
M DOMControllers Services Routes Resources Directives
ReactWeb EvolutionGeneration2
1. Scale is a Pain
ReactWeb EvolutionGeneration2
1. Scale is a Pain
ReactWeb EvolutionGeneration2
2. Performance
VCDOM
Controllers Services Routes Resources Directives
ReactWeb Evolution
VC
Generation2
I/O
2. Performance
React
Web Evolution Concept Syntax Example
ReactConcept
View Engine - Not a Framework Carpaccio Reach Components
Single Way Data Flow Virtual DOM
ReactConcept
View Engine - Not a Framework
• Just the V from MVC • No routing • No dependency injection • No major logic components (controllers)
ReactConcept
Carpaccio Reach Components• The entire page is split into a tree of V items
• Each V item contains: • State • Render Method
V Show Feeds
List
V Show Feed
V Show
Comments
V Show
Comment
V Add
Comment
V Show Ad
ReactConcept
Single Way Data Flow• Forget about 2 way data binding • The results of V are immutable • Reconcile process - through away the previous layout and recreate it on every change
onChange
ReactConcept
Virtual DOM• The DOM is presented as javascript object • Each reconcile process creates a new revision of the virtual DOM • React will compare the two revisions and create list of execution actions that will be executed on the actual DOM
onChange old
newcompare
execute
ReactConcept
Virtual DOM
VC Minimum I/O
javascriptbrowser DOM
React
Web Evolution Concept Syntax Example
ReactSyntax
State JSX Props Events Mixings Refs
ReactSyntax
State JSX Props Events Mixings Refs
ReactSyntax
State JSX Props Events Mixings Refs
ReactSyntax
State JSX Props Events Mixings Refs
componentWillMount
render
componentDidMount
componentWillUnmount
Before adding to the DOM for the first time
After each change
After render the component for the first time
Before removing the component from the DOM
ReactSyntax
State JSX Props Events Mixings Refs
ReactSyntax
State JSX Props Events Mixings Refs
ReactSyntax
State JSX Props Events Mixings Refs
React
Web Evolution Concept Syntax Example
React
Facebook Wall
Example
Lets Build...
https://github.com/avi1234/reactjs-presentation
React
Thank You
