About Me
● Solutions integrator at Jumping Bean– Developer & Trainer– Social Media
● Twitter @mxc4● Twitter
@jumpingbeansa● LinkedIn
What Front-End Technology To Use?
● Mobile?– Native vs HTML5
● Desktop?– Thin Client/Fat Client
● Swing
● Web?– HTML5,– ECMAScript 5,6,7– Frameworks
● HTML5/JavaScript– Pros:
● Largest coverage,
– Cons:● Not as fast, slick or
integrated as native apps
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”
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
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
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
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
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
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
React Component Creation - ES6
● Create components extending React.Component,
● Implement render function,● Return UI virtual DOM
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
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→
Component Hierarchies
● Breaking your app into components hierarchies is key,
● Understanding data needs of components determine where state is kept
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
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,
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
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
Component Life Cycle Events
● shouldComponentUpdate– Return false to prevent updating
● componentWillUpdate● componentDidUpdate,● componentWillUnmount
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?
Mark Clarke @mxc4
Jumping Bean @jumpingbeansa
WWW: www.JumpingBean.co.za
Top Related