react & flux workshop
TRANSCRIPT
![Page 2: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/2.jpg)
OUR PLANREACT 1. Light Intro to React Concepts 2. Demos: Building with React 3. React Details/Summary
(SHORT) BREAK FLUX 4. Light Intro to Flux Concepts 5. Demos: Building with Flux 6. Flux Details/Summary
![Page 3: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/3.jpg)
CODEREPOS AT GITHUB.COM/XMLILLEY
github.com/xmlilley/jschannel-react-demos github.com/xmlilley/jschannel-flux-demos
“WORKSHOP” VS. “HANDS-ON” NORMS ON QUESTIONS
![Page 4: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/4.jpg)
![Page 5: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/5.jpg)
![Page 6: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/6.jpg)
![Page 7: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/7.jpg)
WATCH FOR: THE BIG PICTUREComponents, Components Components
Dumb Components, Decoupled Systems
Location-Transparent Messaging: Actions & Events
Crossover with Node
The Unix Philosophy
Modules & Explicit Dependency Injection
Everything-in-JS
Virtual DOM … which is really about…
Separating Render Context (DOM) from App Architecture
One-Way Flows (data & directed trees), FRP, Immutability
“Being DOM vs. Rendering via DOM”
![Page 8: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/8.jpg)
WATCH FOR: THE BIG PICTURE
DOM —> JAVASCRIPT?
JAVASCRIPT —> DOMor:
![Page 9: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/9.jpg)
WATCH FOR: THE BIG PICTURE
$WATCH & UPDATE?
RE-RENDERor:
![Page 10: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/10.jpg)
WATCH FOR: THE BIG PICTURE
![Page 11: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/11.jpg)
WHAT IS ?‘Library’, not a ‘Framework’
If you start from MVC, React is only the V
(But forget MVC. It’s kind of… over)
Components for interfaces: Make complex components from simpler components
Not a tiny library, but a small API: only for rendering components, not building whole apps
Use basic JS for most things, not API calls
![Page 12: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/12.jpg)
Browser Support: IE 8+ (Needs shims/shams for ES5)
The whole interface is a tree of React components, which mirrors… is mirrored by… the DOM tree
For every DOM element, there’s a component
No templates at runtime: only Javascript *
Data flows only in one direction: down the tree
Conceptually, this means we never ‘update’ or ‘mutate’ the DOM. We simply re-render it.
WHAT IS ?
* YMMV
![Page 13: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/13.jpg)
LET’S SEE A COMPONENT…
![Page 14: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/14.jpg)
COMPONENT STRUCTUREA component is a React ‘class’ instance (but isn’t built with `new` in ES5: it’s functional construction until ES6)
Components have default ‘lifecycle’ methods: hooks for actions at various points in time
has ‘Props’ & ‘State’: props are immutable and inherited, state is mutable and changes trigger re-render
JSX is how you compose the view, combine child elements
Extend with your own methods, or augment existing ones
![Page 15: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/15.jpg)
COMPONENT MIXINSMixins are handy bundles of reusable methods that you can apply to multiple component types
Great for ‘glue’ functions/boilerplate: service interaction, event listeners, dispatching Actions, etc.
Big problem: they’re going away in ES6
Smaller problem: multiple mixins can clash
Good Solution to both: ‘Higher-Order Components’ (functional generators that compose new components by augmenting existing ones)
![Page 16: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/16.jpg)
‘RULES’ ON PROPS & STATE‘state’ vs. ‘props’ isn’t about the kind of thing, instead it’s how thing is used and where it came from
a given thing is ‘state’ in the one place where you can modify it: any child using same thing inherits as a ‘prop’, which can’t be modified
Avoid retrieving same data at different levels of the tree: instead, pass it down as props
Pass functions (as props) so children can trigger updates on ancestor’s state, then render new props
![Page 17: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/17.jpg)
JSX IS XML-LIKE JAVASCRIPTEverything in React is Javascript, including your ‘template’
You can compose a React component’s view in raw Javascript objects, but you don’t really want to.
Plus, we’re really used to HTML. It’s painful for us to imagine creating web interfaces without it.
HTML/XML is actually a really good way to visually model a tree structure of parent-child relationships
Hence, JSX is a syntax that looks like XML/HTML… but isn’t. We transpile it to React’s fundamental JS.
![Page 18: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/18.jpg)
JSX IS XML-LIKE JAVASCRIPT
React.createElement("div", {className: "ideas-wrapper"}, React.createElement("div", {className: "bs-callout bs-callout-warning"}, React.createElement("p", null, “Lorem Ipsum dolor est.…”)
), React.createElement(Button, {bsStyle: "success", bsSize: "small", onClick: this._showNewIdeaModal},"New Idea"), React.createElement(NewIdeaModal, {closeFunc: this.closeModal, show: this.state.showModal}), React.createElement(UserselectedIdea, null), React.createElement(IdeaList, null)
)
INSTEAD OF THIS DEEPLY-NESTED MESS…
![Page 19: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/19.jpg)
JSX IS XML-LIKE JAVASCRIPT<div className="ideas-wrapper">
<div className="bs-callout bs-callout-warning">
<p>Lorem Ipsum dolor est…</p> </div> <Button bsStyle='success' bsSize='small' onClick={this._showNewIdeaModal}>New Idea</Button> <NewIdeaModal closeFunc={this.closeModal} show={this.state.showModal} /> <UserselectedIdea /> <IdeaList />
</div>
…JSX LETS US HAVE THIS:
![Page 20: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/20.jpg)
JSX SYNTAX ESSENTIALSIf your JSX spans multiple lines, wrap in parens
Components are ‘classes’, so uppercase 1st letters
lowercase for traditional html elements
camelCase most attributes
reserved words: ‘class’=‘className’; ‘for’=‘htmlFor’
single curly brackets to interpolate: {obj.prop}
wrap comments: {/*comment in JSX Block*/}
![Page 21: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/21.jpg)
JSX SYNTAX ESSENTIALSRemember: even <div> is just a default React component, called ‘div’, which has a render method that outputs some specific HTML
![Page 22: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/22.jpg)
THE LIFE OF A COMPONENTCreation
Get State & Props
render( )DOM
Interaction: handlers,
:focus, etc.
DOM Events (or store updates)
Action/EventHandler
setState( )
![Page 23: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/23.jpg)
THE LIFE OF A COMPONENTComponent ‘lifecycle methods’ run the process:
Source: javascript.tutorialhorizon.com
![Page 24: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/24.jpg)
THE LIFE OF A COMPONENTcomponentDidMount() add DOM event listeners, fetch async data, animate something, claim focus for an input, etc. Use JQuery or attach stuff from other libraries (only runs on browser, not server)
componentDidUpdate() like componentDidMount, for updates: good for animation hooks, focus grabs, etc.
componentWillUnmount() cleanup: remove event listenters, timers, etc
shouldComponentUpdate() (advanced): to prevent a re-render that would otherwise happen
componentWillReceiveProps (advanced) monitor if props have changed between renders
componentWillMount() (advanced) no DOM yet. Last chance to change state with conditional logic without triggering re-render
componentWillUpdate() (advanced) Like componentWillMount, for updates
![Page 25: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/25.jpg)
RE-RENDERING COMPONENTSsetState() updates are batched, nodes marked as ‘dirty’
Source: Christopher Chedeau - calendar.perfplanet.com/2013/diff/
![Page 26: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/26.jpg)
RE-RENDERING COMPONENTSAll dirty elements & children are re-rendered together
Source: Christopher Chedeau - calendar.perfplanet.com/2013/diff/
![Page 27: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/27.jpg)
RE-RENDERING COMPONENTSIt’s possible to prevent renders: shouldComponentUpdate()
Source: Christopher Chedeau - calendar.perfplanet.com/2013/diff/
![Page 28: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/28.jpg)
CONTROLLER-VIEWSaka: ‘view controller’, ‘owner’, ‘stateful component’
"Try to keep as many of your components as possible stateless. By doing this you'll isolate the state to its most logical place
and minimize redundancy, making it easier to reason about your application.” —React Team
several stateless components that just render data, & a stateful parent component that passes its state to children via propsstateful component encapsulates all of the interaction logic
![Page 29: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/29.jpg)
REACT RECIPES: CONDITIONAL CONTENT
![Page 30: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/30.jpg)
REACT RECIPES: CONDITIONAL CONTENT
![Page 31: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/31.jpg)
REACT RECIPES: CONDITIONAL CONTENT
![Page 32: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/32.jpg)
REACT RECIPES: COLLECTIONS/NG-REPEAT
![Page 33: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/33.jpg)
REACT RECIPES: COLLECTIONS/NG-REPEAT
![Page 34: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/34.jpg)
REACT CONCLUSIONSReact components not so different conceptually than Angular Directives or Ember Components: small, decoupled, easy-to-change
But very different implementation
The only ‘magic’ is really the algorithms for diffing and child-reconciliation, which is a very narrow concern: everything else is right there for you to see
A bit more typing during creation (use tools!)
NOT a full application framework
![Page 35: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/35.jpg)
STRETCH!
![Page 36: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/36.jpg)
WHAT IS ?
![Page 37: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/37.jpg)
WHAT IT’S TRYING TO IMPROVE:
![Page 38: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/38.jpg)
WHAT IS ?"It's more of a pattern rather than a formal framework.” —Facebook
“It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow.” — Scotch.io
“The glue for communicating between your dumb React components” — XML
Very little of ‘Flux’ is a set library or API: most of it you create yourself, or BYO tools
![Page 39: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/39.jpg)
WHAT IS ?Doesn’t even include everything you need: there’s no router, for instance
Basic Javascript conventions wherever possible
Tendency toward the Node/NPM world
Fragmented/Evolving
![Page 40: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/40.jpg)
THE FOUR HORSEMEN: ADSVActions — Users & Services Do ThingsDispatcher — Notify Everyone What Happened Stores — Keep Track of the DataViews — React Components
![Page 41: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/41.jpg)
GO WITH THE (1-WAY) FLOW
![Page 42: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/42.jpg)
A FULLER PICTURE
![Page 43: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/43.jpg)
ENOUGH TALKY-TALK.SHOW CODE!!!
![Page 44: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/44.jpg)
![Page 45: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/45.jpg)
FLUX: ACTIONSDiscrete, atomic bits of app logic: “When X happens, Do Y and Z to data/app state”
As close as it gets to the MVC ‘Controller’
“Fire and Forget”: use events, not callbacks
Usually where server calls are triggered
Then, tell everyone the outcome, via the Dispatcher
Best-practices: separate action types, use ‘action-constants’
![Page 46: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/46.jpg)
FLUX: DISPATCHEROnly one instance per app
Just a dumb pipe: the internet, not the nodes
All subscribers receive all events it dispatches
Only clever trick: waitFor()
![Page 47: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/47.jpg)
FLUX: STORESHow many? Approx. one store per entity type/domain
Or, to model a relationship between entities
Simply accepts incoming changes, fires change events, lets the components worry about what happens next
Smart about data, dumb about interface & interaction
Can also store app-wide user/interface state
![Page 48: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/48.jpg)
FLUX: STORESFlux is completely unopinionated about models: POJOs seem most common
Consider Immutable data-structures
![Page 49: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/49.jpg)
REACT/FLUX RECIPES: TWO-WAY BINDINGS
Do we really use this all that often? :-)
Simple concept:
One component updates state from input
Another component listens for state changes
Can do yourself, or use ‘LinkedStateMixin’
(Only saves a few lines of code…)
![Page 50: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/50.jpg)
FLUX/REACT CONCLUSIONSPowerful patterns make it harder to mingle concerns, create interdependency
Less ‘magic’
Community/docs still growing… quickly
Everything is user-replaceable, many options
Maintainability vs. Creation Speed
Lots of Developer Freedom (too much for some?)
![Page 51: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/51.jpg)
FLUX/REACT CONCLUSIONSNot everyone is ready to give up HTML templating
… yet
Mass-adoption might require a ‘framework’ around it
A sponsor is helpful, too: Facebook?
Clearly the direction our craft is moving… but they’re not the only ones moving that way, nor is it the only way to get there
![Page 52: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/52.jpg)
REACT & VIRTUAL DOMIf you do your whole interface in HTML, what is that? It’s a virtual DOM.
So, we’ve always been doing that. That’s not the magic here.
More powerful ideas: Immutable DOM Optional (Decoupled) DOM
![Page 53: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/53.jpg)
ABOUT PERFORMANCE:The React team talks in frames per second when describing their lightning fast rendering. Examples such as this one show lists of 1500 rows taking 1.35 seconds with AngularJS versus 310ms with ReactJs. This begs questions such as: • should you ever render 1500 rows (can the user
process this much on screen) and • is trimming fractions of a second off of load times on
reasonably designed pages a premature optimization in most applications?
Source: http://www.funnyant.com/reactjs-what-is-it/
![Page 54: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/54.jpg)
ABOUT PERFORMANCE:
Source: aerotwist.com/blog/react-plus-performance-equals-what/
![Page 55: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/55.jpg)
ABOUT PERFORMANCE:The pattern is more important than the hype Properly-optimized, and used normally, other tools (Angular, Ember) perform fairly comparably Go ahead and mix React into your existing apps for performance gains. Keep React (or something similar) for the pattern.
![Page 56: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/56.jpg)
EXTRAS: TESTINGAtomic modules/components == easier testing explicit dependency injection == easier testing JEST: Jasmine +++
automatically mocks dependencies for you includes a runner (kinda like React’s Karma)
Output of a React component is absolute: a string just compare the strings
Type assertion for props is complementary
![Page 57: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/57.jpg)
EXTRAS: ANIMATIONBuilt-In support for CSS animation quite similar to Angular in some ways Much more explicit, non-automatic ReactTransitionGroup: excellent pattern of encapsulating reusable functionality on an invisible wrapper element, rather than augmenting in-view components That said… Javascript animation is sexy again, particularly when all renders are already in requestAnimationFrame()
![Page 58: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/58.jpg)
EXTRAS: NAMESPACINGvar MyFormComponent = React.createClass({...}); MyFormComponent.Row = React.createClass({…});
module.exports = MyFormComponent;
![Page 59: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/59.jpg)
EXTRAS: CSSWhy are inline styles ‘bad’? Not maintainable.
Goals for CSS are narrower scoping, avoiding cascade collisions. (See BEM, OOCSS)
This is very hard with global styles: either single-element classes, or single-rule classes. Neither is convenient.
JS can do anything a CSS preprocessor can do, and more. In JS. No pre-processing.
Not inherently superior, but very attractive.
![Page 60: React & Flux Workshop](https://reader034.vdocuments.site/reader034/viewer/2022052413/55cda7cfbb61eb2b148b4670/html5/thumbnails/60.jpg)
EXTRAS: TOOLS, RESOURCESgithub.com/facebook/react/wiki/Complementary-Tools
React Bootstrap already exists, of course
Redux, Reflux, Alt are hottest Flux replacements
Axios for networking ($http)
React-Router
React-Mount, if you really like DOM —> Javascript
React-Style: CSS-in-JS