Introduction to React.js

Transcript

1. Yusuke Higashi 07/01/2016 Introduction to React.js
2. What is problem in web application development? • Separate HTML and logic(JavaScript) • Managing DOM is difficult. • DOM has state. • DOM like a global variable • Anyone can update it anytime. • We consider asynchronous action • Ajax
3. Example: TODO application(jQuery) HTML JavaScript
4. Example: TODO application(jQuery) HTML JavaScript We can’t understand application behavior when only see HTML.
5. Example: TODO application(jQuery) HTML JavaScript We can‘t understand action timing and DOM state.
6. Example: TODO application(jQuery) HTML JavaScript <- Todo counter We need to get current count value from DOM.
7. Example: TODO application(jQuery) HTML JavaScript <- Todo counter If count value is changed by other logic, this logic is broken.
8. Example: TODO application(jQuery) HTML JavaScript We need to manage state of DOM for adding and changing function. Maintenance is so difficult…....
9. How do we resolve this problem. • One of solutions about managing DOM state is update all DOM. • Manage state in JavaScript. • If state is changed, updating all DOM • You don’t concern DOM state.
10. Image of update all DOM <Javascript> counter = 1 tasks = [‘task1’] All DOM are updated.
11. Image of update all DOM <Javascript> counter = 2 tasks = [‘task1’,’task2’] All DOM are updated again.
12. But…. • Updating all DOM is very slow…. • If there is many DOM elements, update cost is BIG.
14. What is React.js? • It is made by Facebook. • JavaScript library for UI • React.js provide view function. • React.js has virtual DOM • Calculate diff between DOM and virtual DOM • React.js update only diff. • Component-based • ”Its goal is to be simple, devlarative and composable.” (from wikipedia)
15. Virtual DOM • React.js can render only diff using Virtual DOM • It is on Javascript. • Calculate diff between current DOM and new DOM. • Update only diff • Updating cost is small.
16. Real DOM(Browser) Virtual DOM(Javascript) Virtual DOM Current DOM New DOM Update All DOM.
17. Real DOM(Browser) Virtual DOM Virtual DOM Current DOM New DOM Calculate diff between current and new.
18. Real DOM(Browser) Virtual DOM Virtual DOM Current DOM New DOM Update diff.
19. How virtual DOM change our programming style ? • We can adapt updating all DOM programing style. • We don’t concern state of current DOM. • React.js update diff automatically. we don’t need to concern diff.
20. Component-based • React.js is component based. • You can define component which like a custom tag. • Component has state and logic and view. • Data flow is simple. • Parent components send data to child components.
21. Component-based TodoBox TodoForm TodoCount TodoList The application state is had by this component.
22. Component-based TodoBox TodoForm TodoCount TodoList Parent component send state to child components. Data flow is simple.
23. Component-based TodoBox Initial state Update state View(HTML) Render child components and send state to child components
24. Component-based TodoForm Initial state Update state. Execute parent method. View(HTML) Render child components and send state to child components
25. Component-based TodoCount View(HTML) Receive data form parent component.
26. Component-based TodoList View(HTML) Receive data form parent component. Create all task list. Render all task list.
27. Conclusion • We can adapt updating all DOM programing style. • We don’t concern state of current DOM. • Component oriented • state, logic and view are involved. • Data flow is simple. • Parent component send to child component.
28. Thank you