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.

JBug_React_and_Flux_2015

399 views

Published on

  • Be the first to comment

  • Be the first to like this

JBug_React_and_Flux_2015

  1. 1. React & Flux Developing stateful JavaScript applications with React.js library and Flux application architecture Lukáš Vlček Brno, June 3rd , 2015
  2. 2. React JS library by Facebook (Instagram) https://facebook.github.io/react/ For building visual interfaces
  3. 3. Hello-World http://facebook.github.io/react/docs/getting-started.html
  4. 4. JSX http://facebook.github.io/react/docs/jsx-in-depth.html Does not have to be used (matter of taste)
  5. 5. Virtual DOM 1) Generate whole app DOM with every single change 2) Do DIFF with actual DOM 3) Change only what is needed for transition between states (with optimizations)
  6. 6. Not everything is cheap Some complexity can get in when interacting with a real DOM (necessary compromise) Animations or draggable (possible but you can shop elsewhere) Fortunately it is simple to integrate with other libs
  7. 7. Revolutionary? The idea is probably not genuine (one example: CodeMirror) http://marijnhaverbeke.nl/blog/display-updates-in-codemirror.html But very well put together (good timing) Changing how developers can think about UI development
  8. 8. Data Flow (Re)Think about data flow in your app! And put it into good order Stick to it (there can be exceptions)
  9. 9. Think! Don't drink and drive! Don't code without thinking! http://www.ybrikman.com/writing/2014/05/19/dont-learn-to- code-learn-to-think/
  10. 10. Flux System Architecture pattern How to avoid event chains hell Many come up with Flux clones or different approaches
  11. 11. Flux
  12. 12. Flux https://github.com/facebook/flux https://facebook.github.io/flux/docs/overview.html http://www.code-experience.com/async-requests-with- react-js-and-flux-revisited/
  13. 13. React Starter Kit https://github.com/kriasoft/react-starter-kit
  14. 14. Este.js https://github.com/Steida/este
  15. 15. The END! It is sunny day Go out Enjoy life!

×