React Europe '17 Notes

links.md

Stuff worth checking out

• https://developers.google.com/web/tools/lighthouse/
• https://github.com/cpojer/js-codemod
• https://github.com/facebook/jest
• yarn create react-app
• https://github.com/cpojer/js-codemod
• jest-codemods
• https://github.com/facebook/jscodeshift
• https://www.npmjs.com/package/jest-codemods
• https://github.com/facebook/relay
• create react-native-app

Code less js

• https://github.com/gatsbyjs/gatsby

Other stuff

• https://crowdin.com/

Lernzeit

• https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
• https://facebook.github.io/reason/
• http://lamport.azurewebsites.net/pubs/future-of-computing.pdf
• https://github.com/serverless/serverless
• http://elm-lang.org/
• https://github.com/facebook/react-vr
• https://developer.oculus.com/webvr/
• http://mojs.io/
• https://github.com/chenglou/react-motion

notes.md

Roadmap for React - https://github.com/acdlite

• Synch scheduling blocks work, single thread blocks
• Cooperative multitasking can solve this problem
• Split work at component boundaries

React 16 (Fiber)

• Same API, better scheduling
• Will come in React 16
• Support for fragments
  • return arrays from render
  • need to add keys to each child
• Improved error handling
  • Error boundaries - try/catch for components
  • Provides full component stream on error
• Portals
• Async rendering
  • Opt-in per component/sub tree
• Can try using the @next tag

• Offstreen/Hidden Prioritization

  • Can have lower priority as known to be hidden
  • Ex. using Tab A / Tab B
  • High performance list components using windowing

• Better code splitting

  • When split into granular level, get weird cascading loading, but better performance while rendering

• Commit phase

  • no longer render/update, instead renders in a commit phase
  • like a database transaction, limits broken dom

Benchmarking React - https://github.com/trueadm

• How can we increase performance
  • Low level js optimizations
  • Flexible build process
  • Remove legacy APIs
• Rollup, building libraries efficiently
• Deprecated createClass, PropTypes and React.DOM.div()
  • Still around, just not there by default
• Codemods useful for changing APIs
  • https://github.com/cpojer/js-codemod
• Google's Lighthouse
  • https://developers.google.com/web/tools/lighthouse/
  • Analyzes websites, code base and gives feedback
  • Why not us selenium? Not good for benchmarks, need consistent, low-level feedback
• Need consistent tools to

High Quality JS Tools - https://github.com/cpojer

• Testing is an important part of the engineering process, it influences behavior
• Performance, features and adoptability
• toMatchSnapshot() -> Records values produced and stores in snapshot, compares value, you decide if it's intentional
  • Quick way to add coverage to your test without a high overhead, better than NO tests
• Multi-project runner jest --project a b c --watch will run multiple at the same time
• yarn create react-app

La nouvelle Vague - JS frameworks https://github.com/threepointone

• https://github.com/threepointone/rakt

• react view = f(data)
• app = f(code), function in this case is the bundler

Upside of Javascript fatigue - https://github.com/lacker

• Just a good funny talk, but no refernce material :-D

Web Assembly for React

• not so interesting, but speaker good at explaining CS concepts so maybe read other react articles

Typehchecking

• Structural contract, provides static verification
• flow provides typing for React/JS
• Does not come for free
• Flow details
  • Typing goes away at runtime
  • Gives you a use contract
• Structural vs. Nominmal
  • Structural, checks shape of object, nominal would be named
• Maybe types
  • If you have guarded, flow will allow accessing variables
• If you use flow, instead of any, $FlowFixMe
  • This will supress flow errors, but helps you identify places which you'd like to come back and fix

Reason - https://github.com/chenglou

• 80% vs %100, perfection, mathematically

• Pareto principle, 80/20 sweet spot

• React

  • UI is a graph
  • Layout constraints, provide an escape hatch

• Unidirectional data flow

• Some things are not meant to be optimized

• Feature bloat can be contributed by those who don't understand the sweet spot paradigm

• Constaints limit creativity

• Adaptable, wiggle room, unix tools

  • Allows potential organic growth

• Badly done 80%: brittle

  • Cannot build on foundation, standard lib, types

• Hard to compose

  • Mutations, side effects, gradual types
  • Reason types, islands of 100% code

• Type systems are hard to adopt, focus on slowerly 100% typed files when converting versus quickly partially type files

• Philosophy: http://lamport.azurewebsites.net/pubs/future-of-computing.pdf

Modular Apps w/React Native - https://github.com/ericvicenti

• It's a thinkg you can't do yet

How Streaming can Super charge react

• Second load has a lot of tricks,
  • HTTP caches, service workers (look in to service workers)
• Parsing js is often an overlooked expense
• Server Rendering, data loaded on the server side
  • Advantage of React, calls render, gets JSON from server side
  • Faster to get content on screent
  • Need a dynamic webserver, more overall content, send more data technically
  • Long uncanny valley (non interactive)
• HTML Streaming
  • Deals with HTML coming off network slowly
• Break server rendering in to chunks
  • Time to render constants, page more fault tolerant, faster
  • Complex, does not work out of the box with frameworks
• Lessons
  • Problems with performance, not just client rendering
  • React world needs better tooling for fast first page load
• Check out react-server, it starts with this
• React supports streaming as a renderer
  • Can we use this for p2m list? Really should be able to

ReactEU Day 2

Coming Soon

• compose, using ramda to compose orderless calls which end up with the same results
  • rambda, lodash-fp, etc
  • backed by mathematical theory
• creation > compsumption
  • polished, composable color library
• argument order can actually impact the extendability / composability of your function
• (Component) => Component -> JSX || Class (HOC)
  • HOC = Function which takes a component and returns a component
• When using GQL
  • Compose HOC -> withError, withLoading, ActualComponent, handle these scenarios on success/on failure
• HOC normally a cross cutting concern

Twitter Lite

• Guy talked about how great web mobile was, yet app under performed

VR w/React

• https://github.com/facebook/react-vr
• https://developer.oculus.com/webvr/

Functional && Reactive

• Redux - forces purity and predicability
• Functional Reactive
  • Reactive that enforces FP
  • data which is a value over time
  • System in terms of time varying functions
• Cell
  • Continuous value over time

Exploring Relay Modern

• Lib for data driven apps using GraphQL
• Just fetching fetch is OK, when needed
• Dynamic queries
  • Good for desktop, less for mobile
  • Resolve -> Print -> Network -> Write
  • Move to static queries at build time, allows for persisted queries on GQL server
• Relay Modern - Re-wrote relay to work with static queries
• react-relay, thin layer between react/relay
• codemods seem important to keep up

Animating the Virtual Dom - https://github.com/sdras

• Fiber, priority based, animation preferred
• Humans overestimate passive waits by 36%
• Over 4 seconds = HORROR movie
• People want to get started, move to the doctor's office
• Timing, consider timing
  • Create beautiful defaults
• mo.js
• Tools for ani: css-in-js
  • GSAP
  • react-motion
  • GSAP (green sock)* Best in show

React as a Platform

• We write features three times, web, iOS and Android
• React and React native is NOT going for the paradigm... MAYBE?
• What are reacts primivites
  • Native already built for iOS and android
• About 7 APIs cover a huge amount of functionality in react-native
• react-primitaves cover these use cases

https://www.react-europe.org/