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:
- The story of CodeSandbox
- Beyond React
- Building Games in Expo
ReasonReact and local state
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
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.
React Navigation (v2) · Routing and navigation for your React Native apps
Routing and navigation for your React Native apps
Routing and navigation for your React Native appsreactnavigation.org
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.
CodeSandbox: Online Code Editor Tailored for Web Application Development
CodeSandbox is an online code editor with a focus on creating and sharing web application projects
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
- Static site generator: gatsbyjs.org
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.
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.
Funny code and how to write it by Charlie Jackson
- Put funny comments everywhere. Eg.
total_waste_hours = 42or
// 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
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 - A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other…
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
The Seven Deadly Sins
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.
EvanBacon (Evan Bacon) GitRepo
EvanBacon has 87 repositories available. Follow their code on GitHub.
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.
- Try ResonML online: http://reason.surge.sh
- Play with React Native in ReasonML online: http://reason-snack.surge.sh/
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.
Live Notes from React Europe 2018 — Day 1
Just to keep all the resources on one place, so you don't have to…
Did you like it?
Give it a 👏👏 Thank you 🙏