7. What to use for JS Front-End?
● Needed to redo a front-end
– Angular – Seemed to be the
emerging winner,
● Angular 1 versus Angular 2
– Others
● BackBone,
● Ember
● Where to go?
● I am Morpheus - Had to go
find “The One”
9. What is React?
● JavaScript library from
– FaceBook
– Instagram
● “A JavaScript library for building user
interfaces”
● Originally built for Single Page Apps,
● Only the View part of an MVC framework
10. How is React Different?
● Existing frameworks
– add complexity,
– Introduce JavaScript meta-languages,
– Can be slow when number of interactive
components increase
● One way data-binding
● Two way data-binding is expensive and slow
11. React – A New Approach
● Declarative not imperative,
● UI built out of JavaScript defined components,
● One way data binding,
– Immutable UI
● Build components not templates
● Major innovation
– Virtual DOM
– Generates
12. Virtual DOM
● Abstracts away browser DOM,
● Translates from abstract DOM to concrete browser
DOM,
● Power behind one-way binding and UI updates
● Write to Virtual DOM and then “compile” to JavaScript
● On state change generate entire html page and then
generate differences and update
13. Virtual DOM – Update Flow
1)Calculate old and new tree,
2)Diff them:
– Two components of the same class will generate similar trees
– two components of different classes will generate different
trees.
– It is possible to provide a unique key for elements that is
stable across different renders
3) Update changed part of browser DOM
14. Simplified Explanation of React
● Create Virtual DOM components in JavaScript,
● Everything with interactivity is a React
component,
● State, i.e. changes propagate down component
hierarchy,
● Basic approach – file per component
17. JSX
● Optional HTML-like mark-up
● Declarative description of the UI inlined in JS code
● Combines ease-of-use of templates with power of
JavaScript
● Preprocessor translates to plain JavaScript:
● On the fly (suitable during development)
● Offline using the React CLI
19. How is Data/Model Provided to
Components?
● One way data binding means data change in one place,
– i.e only a component responsible for the data can change it,
– All other sub-components can only read it,
– If data is shared between components it is maintained in the
common ancestor
● Props way to pass data from parent to child,→
● State never leaves its containing component→
20. Component Hierarchies
● Breaking your app
into components
hierarchies is key,
● Understanding data
needs of components
determine where
state is kept
21. Data Flow – Data is immutable
● Data passed down hierarchy via
– this.props, properties are immutable,→
– this.state state should be held at the appropriate level in→
component hierarchy
● Parent components maintain state,
● How do child component changes to state propagate to
parent?
– Data passed up the hierarchy via parent event handlers being
called by child components
25. API Methods
● render()
– Return single child element,
– Can return null or false,
– Should not do read or write to the DOM,
– Best for server side rendering
● getInitialState() -
– Used to set the state before component is mounted,
26. API Methods
● getDefaultProps()
– Invoked on class creation then cached,
– Sets default values on missing props
● propTypes
– Used to validate props passed to component,
● statics
– Defines static methods for component
27. Component Life Cycle Events
● componentWillMount
– Invoked on client and server,
– Can be used to set state before render is called,
– Invoked on client and server before rendering
● componentDidMount
– Invoked only on client after rendering,
– Can access refs
● componentWillReceiveProps
– Not called for initial render,
– Used to setState
28. Component Life Cycle Events
● shouldComponentUpdate
– Return false to prevent updating
● componentWillUpdate
● componentDidUpdate,
● componentWillUnmount
29. Challenges to React?
● HTML 5 Web Components
– Custom components in HTML 5,
– Tied to Web browser DOM Model,
– Lots of reusable components will be available?
– How to integrate with React components
● Possible but do you want this?
● If you don't do it will anyone use your framework?