Skip to content

Instantly share code, notes, and snippets.

@pete2786

pete2786/links.md

Last active June 2, 2017 10:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pete2786/fd72f1187443e0e3adec98cab7acac71 to your computer and use it in GitHub Desktop.
Save pete2786/fd72f1187443e0e3adec98cab7acac71 to your computer and use it in GitHub Desktop.
Download ZIP
React Europe '17 Notes
Raw
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
  • Google's Lighthouse
  • 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

  • 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

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
@pete2786
Copy link
Author

pete2786 commented Jun 2, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment