Live Notes from React Europe 2018 — Day 2

Palo Otčenáš
May 18, 2018 · 8 min read

I was writing my Live Notes on the conference from Day 1 and Day 2 (below) to keep the links and notes for later use. Hope you’ll find it useful. If it is so, please give it applause 👏👏.

Personally, I recommend to read/watch the following talks below, by priority:

  1. The story of CodeSandbox
  2. Beyond React
  3. Building Games in Expo

ReasonReact and local state

Cristiano Calcagno introduced ReasonML a bit.

ReasonReact wraps React for use by Reason, that is type-safe and with explicit side-effects. Allows easy integration by converting only once component to ReasonReact and keep all the others as-is. JSX is allowed.

Type-safe means the state is always inited with the right types.

With global state the components are updated and re-rendered every time the state changes. Local state allows controlling the re-renders per component.

Animations and composition was presented.Spring component was shown having local state with animation, value and target. updateWithSideEffects() updates state and them the animation is run.

You can find the source code to play with here:

Full Stack React Navigation

Eric Vicenti presented several navigators and the basics of React Navigation. It mimics the working of Redux, uses actions, dispatch, reducers, etc.

URLs are navigation actions to change the state.

Switch Navigator. You configure your routes and initial route name. Then call this.props.navigation.navigate() to go to the route. But for actually keep the history you rather call this.props.navigation.push() so the flow of pages is kept.

Navigation Actions are similar to redux actions and you can call this.props.navigation.dispatch() to actually call the action.

You can use Tab Navigator and Stack Navigator to have a deeper structure.

URLs are navigation actions to change the state. Routes have reducers , and also define URL behaviour.

Custom Navigator can handle router changes via customizing the reducer.

Ie. Fluid Navigator (separate project) allows to share components across routes and do fancy transitions among them.

Lighting Talks

Running JS on Paper + A Programming atelier by Sam Gwilym

  • Talked about awesome collaboration space where the reals world is connected with the digital so you can actually feel it….
  • dynamicland.org or the slides

GraphQL API stitching with Apollo by Christoffer Niska

  • talked briefly about filters that can be used (among other stuff) to rename and transform the schema

The story of CodeSandbox 🔥HOT🔥

Ives van Hoorne is a super funny guy that talked about his story as he started putting down a lot of ideas what to do two years ago. Ended like… you guess… an online web app editor.

CodeSandbox works completely offline. 400k sandboxes and 2.5M files so far.

Showed how the first mocks looked and worked (the following is true till today)…

Ives was very demotivated but started to spread the word and learned some valuable things

  • Seek external feedback
  • Release fast
  • Follow KISS (keep it simple stupid) or better (Keep it simple, stupid!)

Values of CodeSandbox that helped it to be so popular

  • Lower the learninng curve — eg. make errors straight-forward to fix
  • Encourage sharing and discoverability — eg. link other projects that use the same libs
  • Local Editor Experience

CodeSandbox Live 🎉 announced

Just got released and allows you to edit code simultaneously with other people.

Lighting Talks

Refactor. The hard part by Kasia Jastrzębska + 1 (funny girls, worth seeing)

  • Do comments and get rid of jQuery :D
  • optimise bundle size by 0.0004%, or don't
  • don't use the newest lib version right away
  • keep components simple (split concerns)
  • keep it flat, avoid nesting components
  • keep helpers & utils separated

Redux without boilerplate Dr. Jan-Jan van der Vyver

  • redux-observable and epics to the rescue
  • Also suitable for authorisation and error handling

React in Battlefield 1 by Markus Thurlin

  • showed how the Battlefield 1 game UI was completely made in React
  • because they have multiple games, multiple UIs and wanted to share code
  • Custom React renderer for Frostbite game rendering engine and their own JS runtime… browser really…

React: smiling while you’re styling! by Bruce Lawson

  • Funny component “Mr. Potato” styled via stylable.io that is statically typed and has IDE support to make it easy to start with
  • Check the slides

GatsbyJS — building fast modern websites with React Kyle Mathews

Immutable Application Architecture

Lee Byron presented what we actually do every day…

Fetch data (GraphQL) process it and feed the components (React) to render into DOM. And of course use actions for changing the state/data. In addition to that Lee is letting actions to change the state in an immutable way.

Immutability means copying “the thing“ first and changing the copy, rather than changing the original “thing” right away.

Structural sharing makes immutable really efficient.

To prevent race conditions while processing a lot of actions in parallel we can use a Queue…

Tightly control change. How? Memoization, rollbacks and more.

Slides: TODO

WebAssembly becoming the biggest platform

Sven Sauleau presented that WASM is deterministic and safe to execute. Allows to run in near native speed, although interop with JS can be still slow now.

WA loads 3x faster than asm.js. It is compact and streamable.

Interestingly there are a lot of compiler for various languages like C, C++, Java, OCaml, or Brainfuck if you like 😃

Several interesting projects were mentioned

WASM doesn't have access to DOM, but can import any JS function. Plus, garbage collection is planned to be built-in.

  • WASM — the binary format
  • WAST — S-expression-based readable text

Demo showed a small project with .wasm file imported using webpack into web app running in the browser.

Slides: reacteu-2018.ralf.cc

Lighting Talks

Funny code and how to write it by Charlie Jackson

  • Put funny comments everywhere. Eg. total_waste_hours = 42 or // Do not change anything below this point or else...
  • Really funny! Check it out

Redux over the wire by Nicolas Barray

  • Aquedux enables real-time state sync across more JS clients

Beyond React

Devin Abbott is AirBnB guy…

Should we use React Native all the time. Devin thinks YES!

The essence of React that should be brought to other platforms would be: Declarative components and Unidirectional Data Flow.
We can transpile React to any language. Learn Once, Write Anywhere.

  • NOW: React is a data format for designing the components at run-time.
  • FUTURE: React is a data format for designing the components at compile-time.

CLI tool to generate components. JSON is a good representation for components.

Lona Studio (Swift) for Mac + Lona Compiler (ReasonML)

Allows designer to iterate on design faster and keep the code in git. Plus it's cross-platform consistent.

Principles of a good UI builder:

  • Component-based, simpler presentation only
  • Git-based, integrates with existing workflows
  • AST-level API. configurable to work with any codebase
  • Cross-platform/framework/language output
  • Open Source, can fork and it's safer for business

<Title/>

Sunil Pai briefly showed babel-plugins-macros and then talked about UI interfaces and making things easy to start for other devs. Sunil'd like to stop writing code.

Lighting Talks

The Seven Deadly Sins

Sara Vieira had quite offensive speech, not funny to me at all. Check it out for yourself if you need to… https://react-seven-deadly-sins.now.sh/#/

Building Games in Expo

Evan Bacon is pretty funny guy that presented how programming games using OpenGL in Expo app is working. A lot of technologies like WebGL, EXGL, OpenGL ES, Unity, and others were mentioned.

Connected Gaming is much harder, (Cloud saves, Ulockables, Anonymous Authentication, Leaderboards, etc). Tooling like fastlane is usefull to publish apps to app stores.

Augmented Reality is also possible using ARKit and other kits.

Graphics outside gaming… <FilterImage/> component might add any filter to images and use GPU. <Sketch/> component might be useful commercially for signatures.

SVGR or how a simple problem became a 2K stars library

Bergé Greg talked about his library that transforms SVGs into React JSX, automatically.

  • Online + CLI + Node + Webpack
  • Build-in SVGO optimizations
  • React Native support

I like that SVGR supports webpack loader out and optimizations of the box.

Type-safe React Native with ReasonML

Jared Forsyth talked about ReasonML being the best way to write React.

Need a huge community? Use typescript. Next a total safety for the sake of ergonomics? Use Elm.

Key differences to JS

  • No explicit require(). Global namespace for modules.
  • Immutability — lists are immutable.
  • JS is better in terms of community size, package available, binding, async/await

The Future of ReasonML (#hype :)

  • ReasonApollo type-checks query
  • Cross-compilation to multiple platforms 🚀 So that you can compile into Objecive-C or Android's Java directly instead of JS.

Q&A Panel

Palo Otčenáš

Written by

Full-stack developer, husband, dad, entrepreneur, innovation lover... and all of that by heart!