4. Topic
Time
SCHEDULE
13:45-14:30 14:30-15:15 15:15-16:00
React setState React + Redux React + MobX
The Joy of Optimizing
Una Kravets (DigitalOcean)
Coffee.js? How I hacked my
coffee machine using
JavaScript
Dominik Kundel (Twilio)
GraphQL: Data in modern
times
Dotan Simha (The Guild)
6. APP STATE
• Data
• Which user is logged in?
• Which todos did the user create?
• UI
• Which todos is the user looking at (filter - all, complete, incomplete)
8. STATE MANAGEMENT
• What should happen when some data changes?
• Does the UI need to be updated
• Does some other data depend on it?
• Does the app need to make an action (e.g. API call)?
14. Handing an action in the app
• The user checks a todo as complete
• Mark the todo as complete
15. Handing an action in the app
• The user checks a todo as complete
• Mark the todo as complete
• Update the incomplete items count
16. Handing an action in the app
• The user checks a todo as complete
• Mark the todo as complete
• Update the incomplete items count
• What filter is active again?
17. Handing an action in the app
• The user checks a todo as complete
• Mark the todo as complete
• Update the incomplete items count
• What filter is active again?
• Do I need to update the list of todos?
• Add/remove item?
• Sort items?
• Should I show an empty state?
• Should I make an API call?
• Should I save the change into
localStorage?
18. Data Flow in JavaScript Applications - Ryan Christiani
20. EXAMPLE PROJECT
• Tech conference app
• Fetch talk list (async action)
• Favourite talks (simple sync action)
• Filter by location (filtering data from the state)
• To simplify
• No routing
• No forms
• Not responsive
• Only basic styling
• Assumption: Browsers support Fetch API
• 70% of browsers do, polyfill available for the rest
21. EXAMPLE PROJECT - TECH STUFF
• create-react-app as the initial setup
• https://github.com/infinum/shift-2017
23. COMPONENT TYPES
Container Presenter
Usually root components Inside of container components
No UI Only UI
State of children components Dumb component
Handle state changes "Data down, actions up"
25. PREREQUISITES
• A modern IDE (VS Code, Sublime Text, Atom, Webstorm or similar)
• Latest version of Chrome/Chromium for debugging
• Node.js 6 or 7
• npm 4 or yarn
27. REACT + SETSTATE
• No central state
• Every component contains its (and children?) state
• State changes are async! - 2nd argument is a callback
• Component is re-rendered unless shouldComponentUpdate() returns false
• Additional libs
• react-addons-update
28. // Code time!
// setState
// Code used for setup:
create-react-app app-setstate
npm install --save react-addons-update
v1.0
56. SCALING REDUX
• Only one store!
• Multiple (nested) reducers, actions
• Store data nesting === reducer nesting
• "reducers" folder, "actions" folder
• Folders based on functionality
• e.g. "orders" contains a orders reducer, orders actions and all other related stuff
57. THINGS TO KEEP IN MIND
• NEVER mutate the state!
• Immutable.js
81. THINGS TO KEEP IN MIND
• use extendObservable to add properties to an object
• Wrapped objects - isArray(arr) or array.is(toJS(arr))
• Don't be afraid to use observers
• If done right: More observers → better performance
82. SCALING MOBX
• Your code can be object oriented!
• A list of best practices
• Strict mode, actions (transactions)
• Use helper libs
93. Visit infinum.co or find us on social networks:
infinum.co infinumco infinumco infinum
Thank you!
DARKO@INFINUM.CO
@DARKOKUKOVEC
ANDREI@INFINUM.CO
@ANDREICEK