Upload
keena
View
77
Download
1
Tags:
Embed Size (px)
DESCRIPTION
React. React. A library for creating user interfaces. React. Renders your UI and responds to events. React. Plays nicely with your stack. Build components , not templates. Separation of concerns:. Reduce coupling , increase cohesion. Coupling is:. - PowerPoint PPT Presentation
Citation preview
React
React
A library for creating user interfaces.
React
Renders your UI and responds to events.
React
Plays nicely with your stack
Build components, not templates.
Separation of concerns:
Reduce coupling, increase cohesion.
Coupling is:
“The degree to which each program module relies on
each of the other modules.”
http://en.wikipedia.org/wiki/Coupling_(computer_science)
Cohesion is:
“The degree to which elements of a module belong
together.”
http://en.wikipedia.org/wiki/Cohesion_(computer_science)
The framework cannot know how to separate your concerns for you.
It should only provide powerful, expressive tools for
the user to do it correctly.
This tool is a React component.
A highly cohesive building block for UIs loosely coupled
with other components.
Use components to separate your concerns.
With the full power of JavaScript, not a crippled
templating language.
Abstraction
Composition
Expressivity
Components are reusable.
Components are composable.
Components are unit testable.
JSX is an optional preprocessor to let you use HTML-like syntax.<a href=“http://instagram.com/jmiller7367”> @jmiller7367 on Instagram</a>
JSX is an optional preprocessor to let you use HTML-like syntax.React.DOM.a( {href: ‘http://instagram.com/jmiller7367’}, ‘@jmiller7367 on Instagram’)
With JSX, it’s easy for designers to contribute code.
Virtual DOM
Makes re-rendering on every change fast.
So React built a virtual DOM (and events system).
Optimized for performance and memory footprint
The virtual DOM lets us do fun things.
It can run in Node.js
The virtual DOM lets us do fun things.
Optimizations based on app structure
The virtual DOM lets us do fun things.
Testability for free
The virtual DOM lets us do fun things.
SVG, VML and <canvas> support
The virtual DOM lets us do fun things.
Running the whole app in a Web Worker (experimental)
Key takeaways
Components, not templates.
Re-render, don’t mutate.
Virtual DOM is simple and fast
Sources http://facebook.github.io/react/index.html http://www.andrewgreig.com/637
/http://backbonejs.org/
http://nodejs.org/http://www.infoq.com/news/2013/06/
facebook-react