Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React. js
a view library,  n_o’t an MVC
framework
Why use React

Performance
Composable & reusable components
Declarative
No templates
Single responsibility principle
You w...
Virtual DOM

"Fast in-memory representation of the DOM"
Light weight javascript objects
NOT actual DOM nodes
How does it work? 

Diffing
Reconciliation
Diffing & Reconciliation

Calculate the minimum number of DOM mutations and "fix"
Level by level (laterally)

List (keys)
...
Erm,  but whats the bad side? 

React uses a lot more CPU to perform its diff between the virtual
DOM and the current DOM
...
F V F 7 ‘ A,  . ; 
(not the bad side)
inspired by E4X
syntactic sugar - not a runtime for XML

good interpolation mechanis...
l H C M‘ Jr J ; ; hi ljjl will

var Samp1eComponent =  React. createC1ass({
render:  function (){
return (<div>the sample ...
Sample Component Code
Props vs State

Props are defined on initialization - are immutable
State is an internal representation of the component s...
Component Lifecycle

Mounting
(getlnitialstate,  componentWillMount,  componentDidMount)

Updating
(componentwillReceivePr...
Module bundling

CommonJS:  Webpack & Browserify
Testing Components
TestUti| s
Jest
Fluff

.   I

-x--‘ml I[—‘+!11-:3)= .l’(-lira-l}: ’J fililfl }—~: l vn- ‘

 

more of a pattern than a framework
unidirectio...
Dispatcher

Callback registry
Stores registry
Dependency manager
Store

Application store and logic
Domain driven
Views - (Controller views)

Controller Views listens for events that are broadcast by the
stores and pass the data to the ...
Actions

Dispatcher method payload data contains an action
Action consists of the actual data and its type
Actions may com...
Relay & GraphQL

responsibility data fetching

inspired by Flux
one central store (for caching GrapQL data) instead of mul...
isomorphic apps
Thanks
Upcoming SlideShare
Loading in …5
×

JS Belgrade Meetup #4: Intro to React.js by Aleksandar Simovic

1,113 views

Published on

An introduction to React.js at JS Belgrade #4 meetup

Published in: Software
  • Be the first to comment

JS Belgrade Meetup #4: Intro to React.js by Aleksandar Simovic

  1. 1. React. js
  2. 2. a view library, n_o’t an MVC framework
  3. 3. Why use React Performance Composable & reusable components Declarative No templates Single responsibility principle You work at Facebook Spongebob told me to do it -Patrick
  4. 4. Virtual DOM "Fast in-memory representation of the DOM" Light weight javascript objects NOT actual DOM nodes
  5. 5. How does it work? Diffing Reconciliation
  6. 6. Diffing & Reconciliation Calculate the minimum number of DOM mutations and "fix" Level by level (laterally) List (keys) Components (completely different - no checks)
  7. 7. Erm, but whats the bad side? React uses a lot more CPU to perform its diff between the virtual DOM and the current DOM React’s overhead grows linearly with the size of your view
  8. 8. F V F 7 ‘ A, . ; (not the bad side) inspired by E4X syntactic sugar - not a runtime for XML good interpolation mechanism "{ }" needs to be compiled for production
  9. 9. l H C M‘ Jr J ; ; hi ljjl will var Samp1eComponent = React. createC1ass({ render: function (){ return (<div>the sample component</ div>) } });
  10. 10. Sample Component Code
  11. 11. Props vs State Props are defined on initialization - are immutable State is an internal representation of the component state State should be considered private State should be used as less as possible
  12. 12. Component Lifecycle Mounting (getlnitialstate, componentWillMount, componentDidMount) Updating (componentwillReceiveProps, shouldcomponentupdate, componentWillUpdate, componentDidUpdate) Unmounting (componentWillUnmount)
  13. 13. Module bundling CommonJS: Webpack & Browserify
  14. 14. Testing Components TestUti| s Jest
  15. 15. Fluff . I -x--‘ml I[—‘+!11-:3)= .l’(-lira-l}: ’J fililfl }—~: l vn- ‘ more of a pattern than a framework unidirectional data flow - flux pattern
  16. 16. Dispatcher Callback registry Stores registry Dependency manager
  17. 17. Store Application store and logic Domain driven
  18. 18. Views - (Controller views) Controller Views listens for events that are broadcast by the stores and pass the data to the descendants Usually one controller-view per domain / section
  19. 19. Actions Dispatcher method payload data contains an action Action consists of the actual data and its type Actions may come also from the server.
  20. 20. Relay & GraphQL responsibility data fetching inspired by Flux one central store (for caching GrapQL data) instead of multiple no subscriptions warning: not yet released
  21. 21. isomorphic apps
  22. 22. Thanks

×