Skip to content

Instantly share code, notes, and snippets.

@BrandonBoone

BrandonBoone/ReactConf17.md

Last active March 22, 2017 02:10
Show Gist options
  • Save BrandonBoone/b87e352655778e27cb32998ea5f7b5d2 to your computer and use it in GitHub Desktop.
Save BrandonBoone/b87e352655778e27cb32998ea5f7b5d2 to your computer and use it in GitHub Desktop.
Download ZIP
React Conf 2017 Notes
Raw
ReactConf17.md

React 2017

Our Shop

Immediate Action Items

Look into this

  • react-motion
    • Animation physics engine in the DOM.
  • Prettier - you no longer need a linter. Stop yelling at your developers.
    • Downside - no control over styles.
  • Avoid network waterfalls
    • Can we fetch the data immediatly on load of the APP, before React is even loaded?
    • Can we cache certain API results and invalidate after the fact?
    • best-effort invalidation. Get the current data from cache, then fetch and diff from the server.
  • convert to import(''); via syntax-dynamic-import
    • require.ensure is no longer necessary. We lose module names though... 👎
  • splitting - consolidating common components between routes
  • Slot and Fill for extensibility. (react-slot-fill)
    • Slot - global extension point
    • Fill - fills a slot
  • No flicker refresh. Click the browser refresh button and only the data changes... How?
  • CDN Cache Control Immutable. Is this a standard yet?
  • Avoid transpilation, source map generation, & bundling as much as possible during dev.
  • Off thread JavaScript parsing and prefetching
  • Pre-rendering (shell of application) is better to indicate progress.

Major Themes

Animations

  • Animations. Things don't just pop up!
    • Getting 60 frames per second is hard
  • reliable, fast, engaging
  • Very physical interactions
    • Velocities changing with view transitions
    • friction
    • snap points
  • fiber is all about removing jank and making applications appear faster.

Keep it simple

  • Roll back your tests to the language (make the language invalidate the need for tests: example - immutability built in)

Roll it back.

Whatever your building, see if you can abstract it away 1 level deeper.

  • roll back your blog to your library
  • roll back your library to your framework
  • roll back your framework to your language
  • roll back your language to your os
  • make your problems disappear

Thoughts

  • Consistency in your UI builds user trust
  • Keep up with teams you are training. Check in regularly.
  • Cost of Maintaining vs Cost of Building. Sometimes it's better/cheeper to build new(sunk cost) sometimes it's better to maintain.
  • Don't let the keyboard cover up inputs.
  • Innovative interface designs (the web). We are no longer bound to what the platforms provide (win forms...).
  • Relying on built in features is a bottleneck. You can hack it yourself.
  • Testing: Hard process + Barriers to entry == < tests

Performance

  • Web apps. Slow startup. Native apps. Slow adoption.
    • Network
      • Bundle Splitting (lazy loading)
        • Cache last version
      • Service workers (reuse artifacts)
    • P2P delivery
    • Shared Distribution (CDN)
  • Parse & Compile
    • Butecode / Codegen cache
    • AOT Compilation
  • Heap Init
    • Module Initialization
      • Constant Folding
      • Heap Snapshotting
  • Render (DOM)
    • Smarter Algorithms / APIs
    • Optomizations to compilers
  • I/O vs CPU (Fiber)
    • Not a performance problem. This is a scheduling problem
    • Chunk data and rendering by components.
    • Streaming. Make every component async.
    • Risk of Jank and re-layout. Too many loading states. Showing content as quickly as possible is not a good UX.
      • Defer each section until it is done.
    • Priority problem. More important to process user interaction over incoming data. Need to re-order
      • Animations and gestures are the most important
      • Taps and Clicks are next
      • Last, Network and Timer.
      • Last, Off screen / Hidden
    • Scheduling is a core initiative of UI. Fiber is the solution (React 16)

Fiber

  • New reconciliation algorithm.
  • Fiber is a datastructure
  • Asnychronous updates.
  • Reconciliation is interruptable
  • Commit is not interruptable
  • Work can be derurred (requestIdelCallback - react will polyfill)
  • Streaming Rendering, Parallelizing rendering branches of the tree.

Issues

  • Starvation. Low priority updates may never happen, React tries to re-use work to mitigate this problem.
    • React Core team make this seem like an outstanding issue.
  • componentWillUpdate and componentDidUpdate are no longer symetric.... Did this break anything?

GraphQL <- THIS... so many problems 💨

  • bit.ly/graphql-react
  • graphfront
  • graphfront-ui
  • Push
    • Live queries
      • Stateful channel
      • Know when data changes
      • Reactive backends (challenging to integrate and scale)
    • Subscriptions
      • When pushed, we know why
      • Not every change, only what we care about.
  • Polling
    • Simple, Stateless, intuitive
    • Good solution when data changes at a known frequency.
    • Good for prototyping, fallback solution.
  • Questions:
    • API Design: What does the client expect?
    • Do we send the minimum amount of data? Pub/Sub?
    • Do we send the same data to every subscriber?
    • How do we avoid sending too little or too much data?
  • GraphQL is Wish Drive Design.
    • Design the data how you wish it was displayed.
  • GraphiQL (GraphQL IDE - explore a GraphQL endpoint)

Stuff I don't know

  • AMP (server side rendering?)
  • Instant Articles
  • Fiber
    • You mean my app won't just stop working... 😦
  • React-pdf
  • React-ART
  • Double Buffering
  • Cooperative Scheduling (firefox - project quantum)
  • Route Masking (display links differently in the URL vs the Server)
    • I personally don't like this idea...
  • content-addressable build artifacts.
  • apollo
  • Fetch is a standard API... who knew..!
  • "Tweening" animations...
  • Declarative APIs
  • expo.io
  • .mtl files .obj files (blender exportable files)

Maybe Look at this stuff

  • style jsx - Ahead of time Style Isolation via a Babel Transform
    • Attempts to solve the global CSS injection problem.
    • De-Dupes, Detaches, and Server Renders
  • SERVER LESS
    • serverless movement vimio
  • react-sorcerer
    • Sorcerer is a react component that builds a srcset for your img tags.
  • react-select
    • No JQUERY!!!
  • react-icons
  • react-notifications
  • Victory charts
    • victory-cli
  • react-game kit
    • matter-js
  • react-music
  • react-hardware
  • webflow
  • webvr
  • jest-movie
  • chakra timetravel debugging
  • react-modal

VR

  • Interpupular Distance (Distance between the eyes)
  • Stack
    • WebGL
      • three.js
      • React.vr
        • react-vr-cli
    • WebVR (Experimental)
  • "User's are finally inside our application."
  • Beau Cronin (Hierarchy of needs in VR)
    • Delight
    • Usefulness
    • Interpretability (presence)
    • Comfort (presence)
      • more then .5 less then 20 meters for best comfort
      • font > 20px (pixels per degree ~10ppd)
      • avoid simulation sickness
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment