React.js

And TweetDeck

Rethinking Best Practises


  • Prequisite
    • Combine DOM generation and display logic

  • React's design
    • Re-render the whole app on every update

  • React's implementation
    • Virtual DOM and synthetic events

Overarching Goal

Minimize Coupling and
maximize Cohesion




Coupling:

The degree to which each program module relies on each of the other modules.

Overarching Goal

Minimize Coupling and
mazimize Cohesion




Cohesion:

The degree to which elements of a module belong together.

Separation of Concerns?





Components and templates are tightly coupled.

DOM-manipulating mixins make it even worse.





Display logic and markup are
highly cohesive.


They both show the UI.







Templates separate technologies, not concerns.










React components


Full power of JavaScript,
not a crippled template language.
That's what it looks like




React.DOM.a(  {href: 'https://twitter.com/' + this.props.name},  'Follow @' + this.props.name);

JSX




React.createClass({  render: function () {    return <a href={'https://twitter.com/' + this.props.name}>      Follow @{this.props.name}    </a>;  }});
(This is completely optional.)

State


  • State exists only in one place
  • No DOM ↔ component mismatch
  • State is immutable and shared
    across  dependent components
  • Data flows top to bottom

Vocabulary


  • Component
    Instance of a React Class
    Corresponds to a DOM node
    WebComponent-like
    Directive-ish
  • State
    Held and managed by one component
  • Props
    Arguments passed to a component
    HTML-attribute-y






Code!







OfflineDeck - Flight app, augmented with React components
ctlmngr - React from the ground up





Thanks.

React.js @ TweetDeck

By Pascal

Made with Slides.com

React.js @ TweetDeck

  • 1,776

More from Pascal