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

Oliver Zeigermann / @DJCordhose

http://bit.ly/1oMhAss

Summary

• http://conf.reactjs.com/
• http://conf.reactjs.com/schedule.html
• 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

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

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

• web :)
  • updates on-demand
  • automated release process
• mobile :(
  • apps offline by design
  • app store delay
• solution: code-push to update cordova and react native apps ok with Apple AppStore regulations

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
  • ServiceWorker
  • TLS (https)
  • Manifest
• Engagement: Push
  • ServiceWorkers can receive push events

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

• Flow is a static type checker, designed to find type errors in JavaScript programs
• not officially part of the conference, but kindly explained to me by @nontrivialzeros
• Special support for React
• There even is a walk through with Flux

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

Performance Without Compromise

• Follow-Up on React.js Conf 2015 - Beyond the DOM: How Netflix plans to enhance your television experience
• Netflix uses React
  • on 600mhz single-core devices in your living room
  • 100ms key-input response and 60fps as requirements
• possible with a number of hacks
  • no refs
  • no mixins or inheritance
  • immutable hierarchical state
  • inline Object Literal creation from React.createElement using Babel

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!

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