react-rally-2018-summary.txt

REACT RALLY 2018

Shirley Wu | @sxywu
Offers courses in Frontend Masters

D3 and React
https://twitter.com/sxywu/status/1030209690880303104

Main takeaway:
Use D3 for layout calculations and React for controlling rendering by passing props to SVG elements



Sunil Pai | @threepointone

React + Unity:
https://www.youtube.com/watch?v=pvi0yUwSBec

Main takeaway:
Focus more on launching code than on the form of your code


 
Shawn Swyx Wang | @swyx

Why React is *not* Reactive 
https://youtu.be/SaO-7Lk5hZ8

Main takeaway: 
Reactive programming works with a push subscription model where as React works with a pull. In other words, reactive programming is not compatible with React and defeats the purpose of all performance enhancements done by the virtual DOM.



Carrie Maxwell | @carofine247
codefor.ca

React(ing) in a Crisis

Main takeaway: 
Consider civic hacking and other ways to contribute code to benefit your community



Brandon Dail | @aweary

Algebraic effects, Fibers, Coroutines...Oh my! 
https://youtu.be/cWY1QzyFhfk

Main takeaway: 
A fiber is a stack frame for the React Call Stack
React Fiber: rewrite of React focused on giving React more low-level control over program execution



Ryan Moore | @panicwhenever

The Life Cycle Methods and The Wolf: A Musicological Romp

Summary of React's lifecycle hook methods
https://www.ryanmoore.party/



Brian Holt | @holtbt

Chaos Monkeys in Your Browser: What Chaos Engineering Means for the Front End

Second law of thermodynamics: order requires energy

Chaos Engineering
principlesofchaos.org

Main takeaway:
There's value in tools to test apps for fault tolerance
- chaos monkey
- gremlin
- Azure fault analysis service (cda.ms/Cr)



Joshua Comeau | @joshwcomeau

Explorable Explanations with React
https://www.youtube.com/watch?v=XjFR9Jc-ras

Spring Physics:
react-motion
react-spring

Main takeaway:
Combine React with SVG plus other UI recommendations to create a great interactive experience for an explorable explanation.



Feather Knee | @featherart

AI For Everybody:
https://www.slideshare.net/slideshow/embed_code/key/tyjaoaxDqbwgeE

AI > Machine Learning > Deep Learning

Recompose: Enhancers for stateless functional components
Recompose + RxJs

Reselect: Cache
Lodash/fp

More tips:
- Use setDisplayName from Recompose
- Don't mount + snapshot
- Lodash/fp: more declarative patterns
- Functional patterns for simplicity at scale



Justin Falcone | @modernserf

One Hundred Years of JavaScript

Main takeaway:
Enforcing good coding practices (e.g. high coesion and low coupling) is important for code maintainability.



Ken Wheeler | @ken_wheeler

ReasonML is Serious Business
https://www.youtube.com/watch?v=lzEweA7RPi0

Reason: New syntax & toolchain for OCaml
Ocaml: General purpose systems programming language

Why use it?
- Fast
- Functional, but side effects, mutation

Target Javascript, Native and Bytecode

Bucklescript: compiless ocaml code to JS
Belt: Makes compiled JS faster

Records: immutable object in Reason
Variants: type anotated structure
Pattern matching
Modules: no import/export; like mini-files or namespaces (every .re is a module)

Opportunity to rethink APIs
reason-react
bs-react-native
reroute: router for reason

Try it out:
repl.it
sketch.sh



Lauren Tan | @sugarpirate_

Swipe Left, Uncaught TypeError: Learning to Love Type Systems
https://youtu.be/y3uXazpAdwo

Types are propositions (something is true/exists)
Programs are proofs

Let the type system suggest the implementation
Total vs Partial Functions

Domains => Codomains
A partial function: not defined for all possible input values
Total function: defined for all possible input values

Lower cardinality = less bugs
Primitive types are not precise

NonNullable<T> prevents use of null & undefined

GraphQL: Types over the network



Jay Phelps | @_jayphelps
thisdot.co

Help me WebAssembly, you're my only hope!
https://youtu.be/6KeDFvdxRZk

Web assembly: efficient low-level bytecode for the web
Web assembly runs in a virtual machine
Javascript is a terrible compilation target

Strict subset of Javascript could be fast to compile to Web Assembly

**Prepack**

When should I target to Web Assembly: heavily CPU-bound number computations
- Games
- Porting desktop apps

Web assembly is a stack machine language: a data-structure with 2 operations (pop/push)

What's missing? 
- Direct access to host APIs (e.g. the DOM)
Long-term goal: Have direct access to host bindings
- Garbage Collection
- Multi-threading

React components (written in react-reason) could also run in Web Assembly.

This is possible right now, but not yet ideal.

Where to start?
github: awesome-wasm

Efficient low level bytecode for the web (not only for the web)
Web Assembly: neither web nor assembly



Michael Chan | @chantastic

Hot Garbage: Clean Code is Dead
https://t.co/PxdWVzwhHO

- Readibility (non-stable)
- Dry (stable)

Main takeaway:
"We aren't builders. We are farmers." i.e. code is organic and it's meant to be constantly changing/evolving
Plus other funny/interesting experiences/lessons on becoming a developer.



Sophia Shoemaker | @wisecobbler
NGO
fullstackreact.com

React: Off the Grid
https://www.youtube.com/watch?v=UHNfv6k_1OQ

Develop app to reunite children from orphanages in Africa with family members

Tech stack: 
- AWS RDS (MySQL)
- AWS Lambda (Python)

Progressive Web App:
- Responsive
- Connectivity independent
- Safe (HTTPS)

Service Workers: Register / Install / Activate

Acceptable for determining online/offline: window.navigator.online
Storing Data Offline: Localstorage

EKAGAI: Combination of the following:
What you love doing
What the world needs
What you can get paid to do
What you're good at



Henry Zhu | @left_pad

Through the (Open Source) Looking Glass
https://youtu.be/h0sfFX7WH1c 

Cons of working on open source projects:
- Pay
- Overworking
- Feeling of entitlement from users

The things we do, do things to us.

Main takeaway:
Have respect and empathy towards other developers (specially those working on projects that you use for free)



Jennifer Wong | @mybluewristband
Product engineer @ Envoy

https://jennz0r.github.io/translating-react/

Main takeaway:
Don't be afraid to explore React's internals



Kent C. Dodds | @kentcdodds
https://simply-react.netlify.com/#0
react-testing-library
downshift

Simply React
https://www.youtube.com/watch?v=AiJ8tRRH0f8

Don't make impossible states possible (use enums!)

Adding a prop per use case:
-bundle size/perf
-maintenance overhead
-implementation complexity
-API complexity

Inversion of control: library calls back into the user code

Main takeaway:
Avoid temptation to over-engineer components. Ship only what's necessary and look to generalize components as demand grows to support more features.



Eve Porcello | @eveporcello

Everything You Need to Know About GraphQL in 3 Components
https://github.com/eveporcello/react-rally

GraphQL is just a spec.

Choose one of the implementations:
Relay, *React-apollo*



Ryan Florence | @ryanflorence

Route Recalculating
https://www.youtube.com/watch?v=X-kA8B2QzjY

Routing and suspense
Put <Placeholders> around resources
ExerciseResource.preload(cache, workoutId)
WorkoutResource.read(cache, workoutId)

Deferred priority gives route change lower priority

Main takeaway:
With the upcoming changes in Suspense, React router will also need to be updated.