Thursday 23/5-19
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
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/
https://codesandbox.io/s/reacteuropespring-wf6ls
- Rotate chevron
- Set content height
- 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.
use sprites
.move {
transform: translateX(-100%);
animation: anim 1000ms steps(34) infnite;
}
https://tinkersynth.com/ offscreencanvas enable paint to canvas from web worker
What if we put the same amount of effort into animations
Animation builds trust.
Inspiring vs distraction.
Guiding the attention of your user
Springs are physical, they have mass, velocity and friction
https://github.com/react-spring/react-use-gesture
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
(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()
}
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
- bundle size
- load time
- build-tracker https://buildTracker.dev
ErrorBoundaries + logToErrorService()
sentry.io
post errors to slack immediately (sentry/new relic)
(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
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.
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.
- just released v4
<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>
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$
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
- Go make a budget
- 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 }
- Static analysis (syntax, code style)
- 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
- 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
- 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
- Focus on what works 4 you/your team
hour long talk from london - https://skillsmatter.com/meetups/11781-javascript-matters
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?
app -> graphql -> state -> event system -> microservices -> state
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)
- hash(random_key) ->
- code <-
- random_key, code ->
JWT's are signed, not encrypted
- Header
- Payload
- 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
forms are a manual and repetetive task
ModuleForm built on top of React-forms
- to many abstraction
- not flexible
- not the "react way"
- === 2, introsoection
<Frontier /> - simplicity
make the right thing the easy thing
- Get started with no effort (sensible defaults)
- Create layers of learning
- Provide escape hatches
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.
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
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
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
- ReactEurope kaffemugg - JS Paint