The State of React

Jason Brown

Founder of Code Daily

@browniefed

browniefed@gmail.com

codedaily.io

No Point

First Some History

• jQuery
• Mootools
• script.aculo.us
• Dojo
• Ext
• Bower
• require.js
• Backbone
• Grunt

The Start

XHP

• Started being used in 2010 to prevent XSS holes
• Jordan Walke resurrected

final class :a:post extends :x:element {
  attribute :a;
  protected function render(): XHPRoot {
    $anchor = <a>{$this->getChildren()}</a>;
    $form = (
      <form
        method="post"
        action={$this->:href}
        target={$this->:target}
        class="postLink"
      >{$anchor}</form>
    );
    $this->transferAllAttributes($anchor);
    return $form;
  }
}

function :example:hello(attrib, children) {
  return (
    <div class="special">
      <h1>Hello, World!</h1>
      {children}
    </div>
  );
}

function jsx_example_hello(attrib, children) {
  return (
    S.create("div", {"class": "special"}, [
      S.create("h1", {}, ["Hello, World!"]),
      children
    ]
  );
}

Instagram

• First to use React outside of Facebook code base
• First to use Webpack/popularize
• Code Splitting (even CSS)
• 2012...

Full History

https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html

React - March 2013

• JSX (HTML in JS)
• No Data Binding
• className
• Shipped with nothing

6-to-5/Babel

• Babel 5 => Everything included. 
• People complained about everything being included
• Babel 6 => Plugins/Presets, nothing included
• People complained about nothing being included

Angular/Ember

• Angular 2 announced in September 2014, released as dev preview in April 30, 2015.
• Angle bracket components
• Ember => Glimmer renderer
• Diffing w/ static analysis for improved perf.

• Preact
• Inferno
• Riot
• Vue
• React-lite
• Aurelia
• Mithril
• ...etc

A non-exhaustive list

CSS

• SASS/SCSS
• Preprocessors
• BEM/OOCSS/SMACSS
• Raw CSS. Just keep writing

Present

What's Good

• JSX (Just use Javascript)
• Virtual DOM
• Diffing
• Pick what you want to use (routers, js libs, utils, etc)
• Competition
• Immutability
• Pure Functions

Webpack/Bundling/Static Assets

• Static Analysis of Everything
• Only include what you use
• Enable Dev Tooling

Dev Tooling

• Hot Module Reloading
• Better error reporting (React redbox, React warnings, etc)
• React Dev Tools in Browser

The World of React

React Native (iOS/Android/Windows)

React Native Windows => UWP => Win 10/Xbox One/HoloLens

React Hardware (Arduino/IOT)

React VR

React Sketchapp

State Management

• setState
• Flux
• Redux
• MobX
• GraphQL (static/declarative)
• Relay/Apollo

Gradual Type Systems

• Flow
• TypeScript

Testing

• Jest
• React Storybook
• Snapshots

CSS-in-JS

• https://github.com/MicheleBertoli/css-in-js
• How large is the run time
• Can it output to static CSS files
• Server Side Rendering
• Animations
• November 8th, 2014

Animations

• react-motion
• react-move
• Animated.js
• Greensock (not react specific)

Integration w/ Design

• StoryBook
• React Sketchapp (interactive design)
• Designers <=> Code

Unsolved

• CSS
• Animations
• Layout

~2014-2017

Future

React

• Fiber Renderer
• Async
• Easier/Better custom renderers
• Error boundaries
• Prioritization
  

• Reason bindings for ReactJS (incremental adoption)
• JSCaml
• React Rebuilt in Reason
• Compiled w/ Bucklescript
• JS in Dev Mode => Native in Prod
• No React Native Bridge

• WebAssembly
• Houdini CSS
• Yoga Layout

Others

Keep Experimenting

Thank you.

Questions?