Skip to content

Instantly share code, notes, and snippets.

@hontas hontas/Edited.md

Last active Jun 11, 2020
Embed
What would you like to do?
Notes from React Europe in Paris 2019

ReactEurope

Thursday 23/5-19

Jared Palmer - State of React

2019 roadmap

  • Suspense for data fetching
  • A new server renderer

React Fire - class instead of className, paused in favour of flare
React Fusion - prepack, compiler optimizations
React Native Fabric - UI-layer re-arch
React Flare - unified event primitives

Joshua Comeau - Saving the Web 16ms at a time

To much focus on onboarding (the initial experience).
FB native app 462Mb... Why aren't web apps dominant? Animations matter.

The pixel pipeline Javascript > Style > Layout > Paint > Composition Layout & Paint being most expensive https://csstriggers.com/

Accordions

https://codesandbox.io/s/reacteuropespring-wf6ls

  1. Rotate chevron
  2. Set content height
  3. fade in and transition content down a few pixels

Makes sense depending on how much content needs to be shifted down and what devices are using it.

Complex animations

use sprites

.move {
  transform: translateX(-100%);
  animation: anim 1000ms steps(34) infnite;
}

Offscreen canvas

https://tinkersynth.com/ offscreencanvas enable paint to canvas from web worker

What if we put the same amount of effort into animations

Alec Larson - Hooks in motion

https://www.react-spring.io/

Animation builds trust.
Inspiring vs distraction.
Guiding the attention of your user

react-spring

Springs are physical, they have mass, velocity and friction

react-use-gesture

https://github.com/react-spring/react-use-gesture

French buffet with wine!

Nick Graf - A Hitchhiker’s Guide to the new ReasonReact

practical typesafe programming language
javascruot friendly syntax

Ocaml syntax, compiles to JS

prettier inspired by refmt

type = species = {
}

[@react.component]
let make = (ñame, ~characteristics, ~population) => {
 let (robots, setRobots) = React.useState(() => "");
 React.useEffect1(() => {}); // 1?

 <div>
  <h1>{React.string("Hello " ++ name)}</h1>
  <span>
   {characteristics
   -> Belt.
   -> }
  </span>
  <button onClick={(_event) => setRobots((r) => r ++ {j|🤖|j})}></span>
 </div>
};
 
 let default = make;

-PPX -type inference!!! -Hooks -genType

Bryan Phelps - Totally Native React with Revery

(https://reasonml.github.io/reason-react/)[https://reasonml.github.io/reason-react/]

(Revery)[https://www.outrunlabs.com/revery/]

Hybrid apps -> Native

  • native code
  • react like concepts
  • built on reason
  • can compile to JS
  • Desktop only
open Revery;
open Revery.UI;

let init = app => {
 let win = App.createWindow()
}

Paul Armstrong - Move fast with confidence (PWA)

Lessons learned from rebuilding Twitter from the ground up as a React.js PWA

Use fast tools

  • Node.js
  • React
  • GraphQL
  • ...

You must have confidence in your ability to move fast
Avoid specific knowledge and manual processes

# before
write locally <-> review -> automated checks
                         -> short life staging -> canary (for measure)
                         -> merge to master -> internal staging (twitter employees)
  • increasing local confidence and speed

Never skip the basics

  • TDD
  • lint
  • prettier
  • static types

Context switching kills productivity

only test/lint related files, auto format and type check (pre-commit + husky)

eslint . --fix
prettier --write
git add
jest --bail --findRelatedTests

automated node_modules install after switch branch/pull/rebase

node inspect webpack build... instrument

replace slow tools/plugins

  • i18
  • css-modules rtl ltr

how do I check the performance of my feature?

  • react-component-benchmark

automate pull-request review

  • run all conformance checks (lint/test/etc)

Performance budget

ErrorBoundaries + logToErrorService()

sentry.io
post errors to slack immediately (sentry/new relic)

Julien Verlaguet - On Skip

DJ Fresh - Coders are the new Rock Stars

Hein Rutjes - Magic Move transitions in React-native

(react-native-magic-move)[https://github.com/IjzerenHein/react-native-magic-move]

Magic Move <- KeyNote, Apple

  • Communicate context
  • Senso of delight

Challenges

  • Router & view interplay
  • Shared element ownership
  • Seamless transitions

FastImage?

<MagicMove.Provider>
 <App />
</MagicMove.Provider>
//-------
<MagicMove.Scene>
 <View>
  <MagicMove.Image />
  <MagicMove.Text />
 </View>
</MagicMove.Scene>

Transitions: Move|Morph|Dissolve|FlipXY|SquashAndStretch|Experimental

Whats next

  • synchronized transitions
  • Enter/leave animations
  • Scene effects
  • Optimisations

Michel Weststrate - Data models all the way; combining GraphQL + mobx-state-tree

MobX and MobX-state-tree

before 1793

  • 1 barleycorn (3bc=1inch)
  • 1 foot = 11.65 inch
  • enter the measure of a thumb

1 meter = 1 / 10.000.000 of the distance from the north pole to the equator

Napoleon, the most important ruler ever

mob-x-state-tree generate models from GraphQl schema, handle optimistic updates and a special syntax for getting data.

must-gql - no. yes.

Lightning talks

Josh Hargreaves - Acheiving great performance in React Native

Bloomberg 2000+ JS developers!!!

  • Redux have been problematic, screens might render twice - keep watch
  • dont ignore performance and platform best practices
  • deeply nested view hierarkies are bad, especially for android. keep it flat.

Material-UI v4v and beyond

  • just released v4

reshadow fron Yandex

https://reshadow.dev

Friday 24/5-2019

John Watson - FBT: An i18n Framework for Supporting Complex Grammar and UI

(fbt)[https://facebookincubator.github.io/fbt/]

<div>
 <fbt desc="A greeting">
  Hello, 
  <fbt:param name="name">{person.getName()}</fbt:param>.
  Click this
  <fbt:param name="button">button</fbt>

  You have 
  <fbt:plural
    name="number of photos"
    showCount="ifMany"
    many="photos"
    count={photos.length}>
    one photo
   </fbt>
 </fbt>
</div>

Ives van Hoorne - Another year of CodeSandbox, tech edition

https://codesandbox.io

what happended the last year

  • themes (with json files)
  • code highligt wasm onigasm
  • vscode extension (VSCode + UI <-> Extension Host)

vscode running in the browser Expose VSCode API not reinvent the wheel

fb or code sandbox? became company, got 2.5M$

Brandon Dail - Scheduling is the Future (of Reactthe WEB)

React Fiber & https://github.com/facebook/react/tree/master/packages/scheduler

Everybody needs CPU time (the main thread)
Is it the solution or a bandaid on top of React?

Why not make React faster? A scheduler increase complexity

work expands as to fill the time available for its completion

  • Parkinson's Law the more money you make the more money you spend

The Web has a spending problem
Expectations grow with performance

  1. Go make a budget
  2. Go use a scheduler

Buing a car, most will be fast enough
Speed alone doesn't define the driving experience

Web apps are often bound by network speed, not CPU speed

Coordination is a scheduling problem. Its about persieved performance.

Just oticable difference JND

the amount something must be changed in order for it to make a difference 10kg vs 11 kg, 1kg vs 2kg

The longer we have waited the longer we can delay an update

How importabt is the update immediate (now) -> user blocking (now) -> normal (soon) -> low (eventually) -> idle (maybe)

Accessibility checking is expensive but can be done using a scheduler

  • reducing the number of loading state
  • do idle work.

Scheduling solves UI problems

But wee need coordination, cause React only knows about its own work.

https://github.com/WICG/main-thread-scheduling

while(workQue.length) {
 if (navigator.scheduling.isInputPending()) {
   break;
 }
 const job = workQue.shift();
 job.execute();
}

dont do this `* { z-index: 999999999 }

⚡️ Lisa Gagarina - Five steps toward your testing dream

  1. Static analysis (syntax, code style)
  2. Gain more value from snapshot testing (false negatives, hard to review, false impression of coverage)
  • only for small static components
  • use inline and diff snapshots
  • jest/prefer-inline-snapshots jest/no-large-snapshots
  1. Build up confidence in your tests (fail to easy, pass when experience is broken)
  • emuklate how real users use your application
  • agnostic to implementation detail
  • react-testing-library
  1. Create reliable E2E tests (hard to setup and write, slaow and can be flaky)
  • run tests in the same run-loop as your application
  • cypress.io
  1. Focus on what works 4 you/your team

hour long talk from london - https://skillsmatter.com/meetups/11781-javascript-matters

⚡️ Jonathan Yung - Building and Maintaining Accessible Experiences at Scale

finding inaccessibility during runtime

<button accessibilityLabel="upload photo">
 <Icon />
</button>

Find accessibility bugs

  • using axe or lighthouse
  • when QA find something

lack of awerness and guidance

fb marks and disables all inaccessible elements with red and provide inline context

we need to make accessibility everyones responsibility

can we leverage this?

⚡️ Vladimir Novick - 3factor app architecture

hasura https://hasura.io https://3factor.app/

app -> graphql -> state -> event system -> microservices -> state

LUNCH

Richard Threlkeld - Security and Data in React

Is security as simple as passing a token in the header of your app?

Cognito user protocol

  • JWT

  • SRP http://srp.stanford.edu (PAKE protocol)

  • calculate complex hex and never send the password over the network.

  • React Native

  • Federation (using google, fb etc)

  • OAuth (redirects, scope)

  • OIDC: Layer on top of OAuth

  • ID- Access- RefreshTokens

 -> amazon/authenticate -> redirect w code
 <- code XYZ
 -> /token/XYZ ->
 <- JWT token

PKCE (Proof of key exchange)

  1. hash(random_key) ->
  2. code <-
  3. random_key, code ->

JWT's are signed, not encrypted

  1. Header
  2. Payload
  3. Signature

HMAC-based auth

hash(hash(hash(hash(credentials), time), service), region)

Is CRUD simple?

owners, groups, public read-only, only creator etc.

Access control matrix (wikipedia)

SDL-first to generta eGraphQL backends.

AWS Amplify framework does all this
use cli or api

Charly POLY - Build forms with GraphQL

forms are a manual and repetetive task

ModuleForm built on top of React-forms

  • to many abstraction
  • not flexible
  • not the "react way"
  1. === 2, introsoection

<Frontier /> - simplicity

Performance by default (Gatsby.js)

make the right thing the easy thing

  1. Get started with no effort (sensible defaults)
  2. Create layers of learning
  3. Provide escape hatches

Lee Byron - on GraphQL

created GraphQL and Immutable.js

1989 - Tim Berners Lee 1993 - Mosaic 1999 - Now!

80% PHP 30% WordPress

The same mental model for 20 yrs

abstractions -> syntax - mental model

Rendering views

Jordan Walk? creator iof react

PHP original one sided data flow pattern using reloads

20 yrs later we program like it's 1999.

Evan Bacon - On React Native and the web

Expo & react native 4 the web

<Text accessibilityRole="link" /> => <link />

Problems

  • Multiple workflows (bundlers)
  • Tree shaking is too fragile
  • Not enough universal libraries

PWA support in build step

Future plans

Get it to work in Expo SDK 33

Storybook

https://native.directory

Ankita Kulkarni - Accessibility 360 - Web to Mobile

Rangle.io

a11y

Permanent, Temporary, SItuational

82% use screen readers in 2014

Make components accessible! Add this to all component wrappers

# web vs nreact native
aria-label <-> accessibilityLabel=""
aria-checked <-> accessibilityStates=['disabled']
accessibilityHint=""
role="" <-> accessibilityRole="button|image|header"
button <-> accessibilityComponentType="button" (TouchableWithoutFeedback)

reakit https://reakit.io/docs/accessibility/

Definition of done

  • tested
  • accessible

Tools RN

  • Accessibility inspector
  • Voiceover
  • Accessibility Scanner
  • Talkback

Tools web

  • Wave
  • Axe
  • eslint-plugin-a11y + jsx-a11y

a11y on egghead.io!

Best practices animations

  • dont flash to much
  • always have a setting for disabling it
  • slow them down when reduceMotion = true

use Storybook to track a11y components

a11y checklist ...somewhare

  • a11y exper
  • use lighthouse for web
  • automate a11y testing

Maël Nison - Yarn 2 - Reinventing package management

Yarn v2

What we got right

  • guranteed strictness (lockfile, yarn-offline-mirror, PnP)
  • workspaces (now native in yarn)
  • developer experience (no run etc)

Why V2

  • inherited too much from npm
  • concepts via shortcuts
  • embrace TS

Takeaways

ReactEurope

Thursday 23/5-2019

Keynote: Jared Palmer - State of React

f(state, props) => ui make it [good|fast|pretty]

Hooks makes React JS again. Refactoring class component to use hooks.

Go into concurrent mode ReactDOM.unstable_root(node).render(<JSX />)

Use Apollo cache, throw a promise that React.Suspense can catch. Enables us to remove all loading state

Suspense

  • Feels sync
  • fast and pretty

2019 roadmap Suspense for data fetching A new server renderer

React Fire - class instead of className ect React Fusion - React Native Fabric - React Flare - unified event primitives

Be welcoming. Let's do our best and be as welcomng as possible.

Joshua Comeau - Saving the WEB 16ms at a time

Airplane boarding vs performance (to much focus on boarding) FB native app 462Mb... Why aren't web apps dominant?

Animations matter - RELEVANCE

Accordions

https://github.com/joshwcomeau/talk-2019/tree/master/src/components

The pixel pipeline Javascript > Style > Layout > Paint > Composition Layout & Paint being most expensive (https://csstriggers.com/)[https://csstriggers.com/]

  1. rotate
  2. set content height
  3. fade in and transition content down a few pixels to get idea

Makes sense depending on how much content needs to be shifted down. ANd what devices are using it.

Like button

Particles

<Particle angle={45} distance={100} >
  <Circle color="red" />
</Particle>

(JS Paint)[https://jspaint.app] CSS transitions Web Animation API

use sprites + translateX(-100%) + animation: 1000ms steps(34) infnite

Tools Giphy capture EXGif Photoshop

Offscreen canvas

(https://tinkersynth.com/)[https://tinkersynth.com/] offscreencanvas enable paint to canvas from web worker

What if we put the same amount of effort into animations

Alec Larson - Hooks in motion

(https://www.react-spring.io/)[https://www.react-spring.io/]

Animation builds trust.
Inspiring vs distraction.
Guiding the attention of your user

react-spring

Springs are physical, they have mass, velocity and friction

import {
 useSpring,
 useTransition,
 config[default, gentle, slow, stiff, wobbly etc]
} from 'react-spring'

const {foo} = useSpring({
 from: { foo: 200 },
 foo: 0,
 config: {mass, tension, friction, clamp, precision, duration, decay},
 delay: 100,
 reverse: true
})

// interuptable animations
useTransition({ trail: 20 })

const [values, update] = useTrail(num, props)

react-use-gesture

(https://github.com/react-spring/react-use-gesture)[https://github.com/react-spring/react-use-gesture]

Ella van Durpe - Designing a Rich Content Editor for a Third of the Web (wordpress)

how the new wordpress gutenberg editor works.

French buffet with wine!

Nick Graf - A Hitchhiker’s Guide to the new ReasonReact

practical typesafe programming language
javascruot friendly syntax

Ocaml syntax, compiles to JS

prettier inspired by refmt

type = species = {
}

[@react.component]
let make = (ñame, ~characteristics, ~population) => {
 let (robots, setRobots) = React.useState(() => "");
 React.useEffect1(() => {}); // 1?

 <div>
  <h1>{React.string("Hello " ++ name)}</h1>
  <span>
   {characteristics
   -> Belt.
   -> }
  </span>
  <button onClick={(_event) => setRobots((r) => r ++ {j|🤖|j})}></span>
 </div>
};
 
 let default = make;

-PPX -type inference!!! -Hooks -genType

Bryan Phelps - Totally Native React with Revery

(https://reasonml.github.io/reason-react/)[https://reasonml.github.io/reason-react/]

(Revery)[https://www.outrunlabs.com/revery/]

Hybrid apps -> Native

  • native code
  • react like concepts
  • built on reason
  • can compile to JS
  • Desktop only
open Revery;
open Revery.UI;

let init = app => {
 let win = App.createWindow()
}

Paul Armstrong - Move fast with confidence (PWA)

Lessons learned from rebuilding Twitter from the ground up as a React.js PWA

Use fast tools

  • Node.js
  • React
  • GraphQL
  • ...

You must have confidence in your ability to move fast
Avoid specific knowledge and manual processes

# before
write locally <-> review -> automated checks
                         -> short life staging -> canary (for measure)
                         -> merge to master -> internal staging (twitter employees)
  • increasing local confidence and speed

Never skip the basics

  • TDD
  • lint
  • prettier
  • static types

Context switching kills productivity

only test/lint related files, auto format and type check (pre-commit + husky)

eslint . --fix
prettier --write
git add
jest --bail --findRelatedTests

automated node_modules install after switch branch/pull/rebase

node inspect webpack build... instrument

replace slow tools/plugins

  • i18
  • css-modules rtl ltr

how do I check the performance of my feature?

  • react-component-benchmark

automate pull-request review

  • run all conformance checks (lint/test/etc)

Performance budget

ErrorBoundaries + logToErrorService()

sentry.io
post errors to slack immediately (sentry/new relic)

Julien Verlaguet - On Skip

DJ Fresh - Coders are the new Rock Stars

Hein Rutjes - Magic Move transitions in React-native

(react-native-magic-move)[https://github.com/IjzerenHein/react-native-magic-move]

Magic Move <- KeyNote, Apple

  • Communicate context
  • Senso of delight

Challenges

  • Router & view interplay
  • Shared element ownership
  • Seamless transitions

FastImage?

<MagicMove.Provider>
 <App />
</MagicMove.Provider>
//-------
<MagicMove.Scene>
 <View>
  <MagicMove.Image />
  <MagicMove.Text />
 </View>
</MagicMove.Scene>

Transitions: Move|Morph|Dissolve|FlipXY|SquashAndStretch|Experimental

Whats next

  • synchronized transitions
  • Enter/leave animations
  • Scene effects
  • Optimisations

Michel Weststrate - Data models all the way; combining GraphQL + mobx-state-tree

MobX and MobX-state-tree

before 1793

  • 1 barleycorn (3bc=1inch)
  • 1 foot = 11.65 inch
  • enter the measure of a thumb

1 meter = 1 / 10.000.000 of the distance from the north pole to the equator

Napoleon, the most important ruler ever

mob-x-state-tree generate models from GraphQl schema, handle optimistic updates and a special syntax for getting data.

must-gql - no. yes.

Lightning talks

Josh Hargreaves - Acheiving great performance in React Native

Bloomberg 2000+ JS developers!!!

  • Redux have been problematic, screens might render twice - keep watch
  • dont ignore performance and platform best practices
  • deeply nested view hierarkies are bad, especially for android. keep it flat.

Material-UI v4v and beyond

  • just released v4

reshadow fron Yandex

https://reshadow.dev

Friday 24/5-2019

John Watson - FBT: An i18n Framework for Supporting Complex Grammar and UI

(fbt)[https://facebookincubator.github.io/fbt/]

<div>
 <fbt desc="A greeting">
  Hello, 
  <fbt:param name="name">{person.getName()}</fbt:param>.
  Click this
  <fbt:param name="button">button</fbt>

  You have 
  <fbt:plural
    name="number of photos"
    showCount="ifMany"
    many="photos"
    count={photos.length}>
    one photo
   </fbt>
 </fbt>
</div>

Ives van Hoorne - Another year of CodeSandbox, tech edition

https://codesandbox.io

what happended the last year

  • themes (with json files)
  • code highligt wasm onigasm
  • vscode extension (VSCode + UI <-> Extension Host)

vscode running in the browser Expose VSCode API not reinvent the wheel

fb or code sandbox? became company, got 2.5M$

Brandon Dail - Scheduling is the Future (of Reactthe WEB)

React Fiber & https://github.com/facebook/react/tree/master/packages/scheduler

Everybody needs CPU time (the main thread)
Is it the solution or a bandaid on top of React?

Why not make React faster? A scheduler increase complexity

work expands as to fill the time available for its completion

  • Parkinson's Law the more money you make the more money you spend

The Web has a spending problem
Expectations grow with performance

  1. Go make a budget
  2. Go use a scheduler

Buing a car, most will be fast enough
Speed alone doesn't define the driving experience

Web apps are often bound by network speed, not CPU speed

Coordination is a scheduling problem. Its about persieved performance.

Just oticable difference JND

the amount something must be changed in order for it to make a difference 10kg vs 11 kg, 1kg vs 2kg

The longer we have waited the longer we can delay an update

How importabt is the update immediate (now) -> user blocking (now) -> normal (soon) -> low (eventually) -> idle (maybe)

Accessibility checking is expensive but can be done using a scheduler

  • reducing the number of loading state
  • do idle work.

Scheduling solves UI problems

But wee need coordination, cause React only knows about its own work.

https://github.com/WICG/main-thread-scheduling

while(workQue.length) {
 if (navigator.scheduling.isInputPending()) {
   break;
 }
 const job = workQue.shift();
 job.execute();
}

dont do this `* { z-index: 999999999 }

⚡️ Lisa Gagarina - Five steps toward your testing dream

  1. Static analysis (syntax, code style)
  2. Gain more value from snapshot testing (false negatives, hard to review, false impression of coverage)
  • only for small static components
  • use inline and diff snapshots
  • jest/prefer-inline-snapshots jest/no-large-snapshots
  1. Build up confidence in your tests (fail to easy, pass when experience is broken)
  • emuklate how real users use your application
  • agnostic to implementation detail
  • react-testing-library
  1. Create reliable E2E tests (hard to setup and write, slaow and can be flaky)
  • run tests in the same run-loop as your application
  • cypress.io
  1. Focus on what works 4 you/your team

hour long talk from london - https://skillsmatter.com/meetups/11781-javascript-matters

⚡️ Jonathan Yung - Building and Maintaining Accessible Experiences at Scale

finding inaccessibility during runtime

<button accessibilityLabel="upload photo">
 <Icon />
</button>

Find accessibility bugs

  • using axe or lighthouse
  • when QA find something

lack of awerness and guidance

fb marks and disables all inaccessible elements with red and provide inline context

we need to make accessibility everyones responsibility

can we leverage this?

⚡️ Vladimir Novick - 3factor app architecture

hasura https://hasura.io https://3factor.app/

app -> graphql -> state -> event system -> microservices -> state

⚡️ Rohit Roy - Client AB : Building Features/React Components for AB testing

Charles Darwin basically inventet A/B testing

⚡️ Michal Sänger - Cross platform UI in Kiwi.com

⚡️ Charles Mangwa - Stacks on stacks in React Native

⚡️ Forrest Frazier - React Native: How a 10 week experiment lead to 3+ years of client engagement

LUNCH

Richard Threlkeld - Security and Data in React

Is security as simple as passing a token in the header of your app?

Cognito user protocol

  • JWT

  • SRP http://srp.stanford.edu (PAKE protocol)

  • calculate complex hex and never send the password over the network.

  • React Native

  • Federation (using google, fb etc)

  • OAuth (redirects, scope)

  • OIDC: Layer on top of OAuth

  • ID- Access- RefreshTokens

 -> amazon/authenticate -> redirect w code
 <- code XYZ
 -> /token/XYZ ->
 <- JWT token

PKCE (Proof of key exchange)

  1. hash(random_key) ->
  2. code <-
  3. random_key, code ->

JWT's are signed, not encrypted

  1. Header
  2. Payload
  3. Signature

HMAC-based auth

hash(hash(hash(hash(credentials), time), service), region)

Is CRUD simple?

owners, groups, public read-only, only creator etc.

Access control matrix (wikipedia)

SDL-first to generta eGraphQL backends.

AWS Amplify framework does all this
use cli or api

Charly POLY - Build forms with GraphQL

forms are a manual and repetetive task

ModuleForm built on top of React-forms

  • to many abstraction
  • not flexible
  • not the "react way"
  1. === 2, introsoection

<Frontier /> - simplicity

Performance by default (Gatsby.js)

make the right thing the easy thing

  1. Get started with no effort (sensible defaults)
  2. Create layers of learning
  3. Provide escape hatches

Lee Byron - on GraphQL

created GraphQL and Immutable.js

1989 - Tim Berners Lee 1993 - Mosaic 1999 - Now!

80% PHP 30% WordPress

The same mental model for 20 yrs

abstractions -> syntax - mental model

Rendering views

Jordan Walk? creator iof react

PHP original one sided data flow pattern using reloads

20 yrs later we program like it's 1999.

Evan Bacon - On React Native and the web

Expo & react native 4 the web

<Text accessibilityRole="link" /> => <link />

Problems

  • Multiple workflows (bundlers)
  • Tree shaking is too fragile
  • Not enough universal libraries

PWA support in build step

Future plans

Get it to work in Expo SDK 33

Storybook

https://native.directory

⚡️ Eric Ngyen

storybook

Ankita Kulkarni - Accessibility 360 - Web to Mobile

Rangle.io

a11y

Permanent, Temporary, SItuational

82% use screen readers in 2014

Make components accessible! Add this to all component wrappers

# web vs nreact native
aria-label <-> accessibilityLabel=""
aria-checked <-> accessibilityStates=['disabled']
accessibilityHint=""
role="" <-> accessibilityRole="button|image|header"
button <-> accessibilityComponentType="button" (TouchableWithoutFeedback)

reakit https://reakit.io/docs/accessibility/

Definition of done

  • tested
  • accessible

Tools RN

  • Accessibility inspector
  • Voiceover
  • Accessibility Scanner
  • Talkback

Tools web

  • Wave
  • Axe
  • eslint-plugin-a11y + jsx-a11y

a11y on egghead.io!

Best practices animations

  • dont flash to much
  • always have a setting for disabling it
  • slow them down when reduceMotion = true

use Storybook to track a11y components

a11y checklist ...somewhare

  • a11y exper
  • use lighthouse for web
  • automate a11y testing

Maël Nison - Yarn 2 - Reinventing package management

Yarn v2

What we got right

  • guranteed strictness (lockfile, yarn-offline-mirror, PnP)
  • workspaces (now native in yarn)
  • developer experience (no run etc)

Why V2

  • inherited too much from npm
  • concepts via shortcuts
  • embrace TS

Tim Neutkens - On Next.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.