31
React

React

  • Upload
    keena

  • View
    77

  • Download
    1

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

Page 1: React

React

Page 2: React

React

A library for creating user interfaces.

Page 3: React

React

Renders your UI and responds to events.

Page 4: React

React

Plays nicely with your stack

Page 5: React

Build components, not templates.

Page 6: React
Page 7: React

Separation of concerns:

Reduce coupling, increase cohesion.

Page 8: React

Coupling is:

“The degree to which each program module relies on

each of the other modules.”

http://en.wikipedia.org/wiki/Coupling_(computer_science)

Page 9: React

Cohesion is:

“The degree to which elements of a module belong

together.”

http://en.wikipedia.org/wiki/Cohesion_(computer_science)

Page 10: React

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.

Page 11: React

This tool is a React component.

A highly cohesive building block for UIs loosely coupled

with other components.

Page 12: React

Use components to separate your concerns.

With the full power of JavaScript, not a crippled

templating language.

Page 13: React

Abstraction

Composition

Expressivity

Page 14: React

Components are reusable.

Page 15: React

Components are composable.

Page 16: React

Components are unit testable.

Page 17: React

JSX is an optional preprocessor to let you use HTML-like syntax.<a href=“http://instagram.com/jmiller7367”> @jmiller7367 on Instagram</a>

Page 18: React

JSX is an optional preprocessor to let you use HTML-like syntax.React.DOM.a( {href: ‘http://instagram.com/jmiller7367’}, ‘@jmiller7367 on Instagram’)

Page 19: React

With JSX, it’s easy for designers to contribute code.

Page 20: React

Virtual DOM

Makes re-rendering on every change fast.

Page 21: React

So React built a virtual DOM (and events system).

Optimized for performance and memory footprint

Page 22: React

The virtual DOM lets us do fun things.

It can run in Node.js

Page 23: React

The virtual DOM lets us do fun things.

Optimizations based on app structure

Page 24: React

The virtual DOM lets us do fun things.

Testability for free

Page 25: React

The virtual DOM lets us do fun things.

SVG, VML and <canvas> support

Page 26: React

The virtual DOM lets us do fun things.

Running the whole app in a Web Worker (experimental)

Page 27: React

Key takeaways

Page 28: React

Components, not templates.

Page 29: React

Re-render, don’t mutate.

Page 30: React

Virtual DOM is simple and fast

Page 31: React

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