Report: React.js Conf FEBRUARY 22 & 23, 2016 SAN FRANCISCO, CA

Oliver Zeigermann / @DJCordhose

http://bit.ly/1oMhAss

Summary

Small and Intimate Conference

Only ~ 400 people

Great and funny MC

@notbrent

Day #1

Keynote

  • React is not yet another JavaScript library
  • it is a fundamental advance in web and mobile development
  • React Web & Native
    • not write once, run anywhere
    • learn once, write anywhere
    • share when possible only
    • go native when necessary
    • all abstractions leak
    • well designed abstractions account for this

React: What Lies Ahead

  • Ideas for UX & DX
  • UX
    • Animations
    • Gestures
    • Fast lists (important for native)
  • DX
    • improve new project experience
    • unified API for local state, redux, relay

React 15

Rich Text Editing with React

  • http://facebook.github.io/draft-js/ has been open sourced
  • will be used in Facebook notes
  • build around ContentEditable
  • React controls state and cursor position
  • DOM follows state
  • Support Copy and Paste
  • Support of arbitrary rich text
  • Immutable data structures allow for easy undo/redo

A Cartoon Guide to the Wilds of Data Handling

https://code-cartoons.com/

Web-like Release Agility for Native Apps

React, Meet Virtual Reality

Essence: Use A-Frame by Mozilla

Building a Progressive Web App

  • can a mobile web app compete with native?
  • Context: India: 80% slow 2G, Android
  • Performance
    • App Shell: Static host page for dynamic content to load into
    • React can render host page in loading state
    • fetch content using ServiceWorker
  • Availability: Add to homescreen, requirements
  • Engagement: Push

Jeopardy hardware with React

Panel, end of day #1

Day #2

Team × Technology

  • react native changes the way we organise engineering teams
    • one team per product, all platforms
    • ownership of features and apis
    • coherence
  • Full-Stack Engineer is past
  • Cross-Stack Engineer is the new thing

Universal GL Effects for Web and Native

GL shaders described as compositions of React components

Redux, Re-frame, Relay, Om/next, oh my!

React is V, but how to C and M?

Intermezzo: flow

Survey: How many people would be interested in a talk about flow with react?

Performance Without Compromise

A GraphQL Framework in Non-JS Servers

  • GraphQL in Python
  • REST with React sucks
    • many calls for each type of data
    • many rerenders
    • one Store per Type
  • one Endpoint per use-case also sucks
    • tight coupling
  • GraphQL for the win
    • best of both worlds

Speeding up Startup for Large React Apps

  • Server Rendering is not the answer for Facebook
    • rendering might be faster
    • but being interactive might be slower
  • instead deliver only what is really needed for each URL
  • use ML to optimize packaging

Rethinking All Practices: Building Applications in Elm

  • Elm provides flux/redux style of architecture
  • Elm Language
    • has no runtime errors
    • type system not optional
    • type system similar to Haskell / ML
    • Pure functions
    • statelessness
    • only immutable data
  • All that is the way to go, not optional

Optimising React Native: Tools and Tips

Don't assume, profile!

Back to React

functional programming with React

Cycle.js

reactive data flow using observables

http://rxmarbles.com for making observables visual

pure vs impure

  • React Components
    • pure: render
    • impure: setState, lifecycle methods
    • in between: props passing
  • Cycle
    • pure: main()
    • impure: drivers
    • in between: sources and sinks
  • Elm
    • pure: view, reducer
    • impure: JavaScript
    • in between: ports, tasks, effects

Ligtning talk, end of day #2

@elierotenberg protecting react DOM against external access using react-armor :D <ecb-ec1b6>

Summary (repeated)

  • Videos
  • Overall impression
    • great community and culture
    • technically nothing really new, lots of execution, improvements
    • what can be learned from other technologies?
    • big emphasis on react native