React London 2017

notes.md

React London 2017

slideo.com - reactlondon2017

Prettier

Opinionated code formatting

Perude devs to incorporate into existing apps, not force them

Text -> AST -> IR(Intermediate representation - Prettier) -> Text

Amplifr - Logux

Logux (beta) == swarm.js + redux

• Live updates
• Optimistic UI - offline first
• less code
• websockets for updates
• need to integrate into backend, but has escape hatch for legacy systems
• dispatches async actions, no need for intermediate actions (loading)

ReasonML/OCaml

• Modules are first classes citizens
• Every file is a module
• OCaml automatically wraps the code in a file into a module

// myTest.js
// module.exports = {
  function doSomething() {
    // hello
  }
//}

myTest.doSomething()

• uses functors - a function that receives a module as a param and spits one back out

Lightening talks

Snapshots

Takes a snapshot of your raw html code returned from Enzymes rendering, allows you to compare changes (intentional and not)

Use shallow rendering for snapshots so that they're not slow/overly complex

Update snapshops when you intended to change the component (confirmation in cli)

Good

• Regressions/refactoring (identifies where something is being used)
• More test coverage

Bad

• Not TDD
• Merge conflcits (sting comparison)

Realtime Webpack

• HappyPack - paralize load
• Webpack 2 - tree shaking (only works with ES6) - good for our internal tools though
• Rollup - look into again
• Code splitting (bundle splitting)

Offline

• Redux persist
• Redux Optimust
• Redux offline (new)

Next.js

Styled components

• spectrum.chat/~react

• Polished - styles in Javascript (allows you to migrate from sass - lighten, saturate etc)

• auto prefixes your styles

• Preprocessing step - looking into it after perf

Tiny renderer

• We had no clue what was going on here, he showed how to implement a rendered if we wanted to by hooking into Reacts API.

Panel talks

• Release candidate for Immutable is out, should pull and run through applications to test before Release

• Progressive web apps - they don't think will overtake native

• Facebook push with Codepush all the time to update the Facebook app, they worked closely with Apple to make sure this was something Apple would back them on.

• Animations: Animated (ReactNative - secretly on npm but not release). Looking at prioritising keystrokes/animations and pushing async (server reqs) to background thread.

• Rewriting from scratch you lose the ability to AB test, so if your metrics crash, you have no idea what caused it.

• Facebook BigPipe, for prioritising chunks to client, complicated to get setup, not worth the hassle unless you have a high traffic website.

React hardware (crossbow)

• lol