React Finland 2021
2021-08-30..2021-09-03
-- online --
[React Finland 2018, React Finland 2019, React Finland 2020, React Finland 2021, React Finland 2022]
who it's for
React developers, frontend engineers, ux designers, accessibility engineers, engineering managers, platform engineers, technical writers
topics
making games in React; XState state machines; SolidJS reactive JSX; designer-friendly JSX patterns; vanilla-extract CSS-in-TypeScript; Stylex utility styling; CSS-in-JS analysis; GraphQL automation; GraphQL edge caching; Apollo Federation on Kubernetes; micro frontends in React; SSR and SSG in NextJS
| title | author | length |
|---|---|---|
| Breaking out of the confines: making games in React | Paul Henschel | 21m |
Claim: React plus a custom renderer (react-three-fiber / reactive fiber) manages the scene only on changes so it has zero overhead and can match or beat… | ||
| The State of XState | David Khourshid | 19m |
XState announces concrete additions: a createModel helper that yields fully strongly typed context and events so TypeScript users stop duplicating generics, a… | ||
| SolidJS - Reactive JSX | Ryan K Carniato | 29m |
SolidJS claims fine‑grained reactivity where components render once and updates run only the small effects that read changed signals, giving no virtual DOM and… | ||
| JSX for Designers | Travis Arnold | 22m |
Claims that JSX as shared source of truth lets design and devs skip handoff by compiling a single JSX description into platform outputs. Uses compilers and… | ||
| Hooks are a great abstraction model | Calin Tamas | 14m |
Claims that hooks make a clean model/view split and then shows it: a reusable useToggler hook implements the model API (data, initialIndex, onValueChange) and… | ||
| Web Components in React | Matias Huhta | 21m |
Demonstrates integrating a real vanilla colorful hex color picker into React: builds the component in CodeSandbox, wires attributes vs properties via useRef… | ||
| Micro Frontends in React — a State of the Art Approach | David Leitner | 30m |
A quick decision checklist: past fixes use iframes and hyperlinks and a brownfield bank example shows that works but feels clunky; server-side composition via… | ||
| Reasons why we need inclusion | Nasim Selmani | 18m |
Argues that inclusion is the absence of exclusion and that real change needs manager support, resources and time, and measurement. Cites studies: teams with… | ||
| How to avoid bias or exclusion when recruiting | Emmi Marjetta | 20m |
Evidence shows concrete gains: a Harvard Business Review stat says belonging makes people 3.5 times more likely to contribute their fullest potential, and… | ||
| Zero-runtime CSS-in-TypeScript with vanilla-extract | Mark Dalgleish | 29m |
Claims that vanilla-extract produces real static CSS files from .css.ts files with zero runtime cost are demonstrated: a webpack plugin compiles TypeScript… | ||
| Rethinking CSS - Introducing Stylex | Naman Rajat Goel | 25m |
Stylex claims a zero-cost abstraction that compiles style objects to a static CSS file at build time, removing unused rules and expanding shorthands so the… | ||
| A thorough analysis of CSS-in-JS | Andrei Pfeiffer | 24m |
A two‑month study inspects ~20 CSS‑in‑JS projects and narrows to 11, concluding there are two mutually exclusive outputs: runtime stylesheets (most libraries)… | ||
| Automate your stack with GraphQL | Lukas Holzer | 22m |
Shows an end-to-end setup: a small Netlify serverless books API, GraphQL schema files and a codegen watch that automatic TypeScript & React Query hooks… | ||
| How to cache GraphQL queries at the edge | Max Stoiber | 24m |
Builds an edge GraphQL cache called GraphCDN deployed on Fastly Compute@Edge, stores whole query results (no normalized caching because a gateway can’t assume… | ||
| Using Apollo Federation in a microservice architecture in Kubernetes | Jan Peer Stöcklmair | 31m |
Demo stitches separate GraphQL services using Apollo Federation with extend/@key/external fields to resolve cross-service fields, deployed as independent Node… | ||
| How to Delegate your React Dialogs | Calin Bogdan | 11m |
Claim: hide modal state and markup behind a button so containers lose clutter and repeated modals. Built a DeleteButton that moves state into a useConfirmation… | ||
| Testing the integrity of React components by publishing in a private registry | Juan Picado | 29m |
Publishes components to a private Verdaccio registry, then runs Cypress end-to-end tests against a fresh install to catch missing files, wrong main/export… | ||
| The Eternal Sunshine of the Zero Build Pipeline | Matthias Dugué | 36m |
Argues for a bundle-free developer workflow: serve es modules directly to the browser, transform legacy CommonJS on the fly, and use HTTP caching plus HMR so… | ||
| How to View and React without a Head | Facundo Giuliani | 28m |
Argues that decoupling content from presentation lets React render content live from a headless CMS and demos a working prototype: a React blog on… | ||
| React Bricks: a CMS with visual editing based on React components | Matteo Frana | 25m |
Headless CMSs are great for developers, but not for content creators.
React Bricks is the first CMS that is super-great for Developers (it's just React… | ||
| How contentful helps you to manage all the data in a headless e-commerce site | Nidhi Kumari | 20m |
Shows how contentful + Next.js actually link: a content model called "block" with short-text title and one image is created, two entries are added and… | ||
| Introducing state machines and statecharts | Laura Kalbag | 19m |
Statecharts are presented as a visual language that also runs as code: examples are built with xstate and published to the stately registry so diagrams become… | ||
| Make legacy code delightful with statecharts | Matt Pocock | 22m |
Shows that messy React useEffect dependency soup (examples: a Pokémon fetcher and an async image/video hover player) becomes an executable state chart using… | ||
| The Actor Model: a new mental model for React | Farzad Yousefzadeh | 38m |
Argues that applying the Actor Model to React moves integration bugs to explicit message sequences and makes state interactions observable and testable… | ||
| Aleph.js - Build your React app in Deno | Je Xia | 26m |
Aleph.js runs on Deno runtime and uses SWC transpilation to ship TSX as ES modules without bundling in development, claiming faster rebuilds than tsc and… | ||
| SSR & SSG in NextJS | Nur Şah Ketene | 27m |
Converts a client-side fetch into getServerSideProps then into getStaticProps & getStaticPaths with a demo that initially generates ~100 pages then switches to… | ||
| Brief introduction to Nuxt | Krutie Patel | 25m |
Starts by scaffolding an app with create-nuxt-app, chooses the content module, universal/static target and Bootstrap‑Vue, and inspects nuxt.config and… | ||
| Documenting components with stories | Michael Shilman | 18m |
Storybook presents an open format called Component Story Format (CSF) that claims to turn existing stories into interactive docs with live-editable examples… | ||
| Opensource Documentation—Tales from React and React Native | Rachel Nabors | 28m |
React Native documentation reboot (2019–2020) updates API references, adds interactive sandboxes and literal context switchers to handle learners with diverse… | ||
| The Story of ReScript's Documentation Platform | Patrick Ecker | 39m |
Consolidates three legacy sites into a single Next.js project, migrates all markdown, and doubles down on design with Tailwind and a public Figma process… | ||
| How to Catch Low-Hanging Accessibility Fruits while Developing | Eeva-Jonna Panula | 26m |
Demonstrates concrete checks: runs axe DevTools in the browser and reports 49 issues (27 need review, 1 critical, 20 serious, 1 moderate), points out the… | ||
| Continuous Localization in Enterprise Web Projects | Ante Tomić | 26m |
Says 50% of users skip English and a survey finds ~67% of teams use no tooling, so the talk claims continuous localization prevents localization from becoming… | ||
| The Digital Accessibility Legal Landscape – why it matters for developers | Lainey Feingold | 33m |
Laws and standards matter: WCAG 2.1 AA and EN 301 549 show up in procurement and government rules, Finland adopts the CRPD in 2016 while the U.S. has not… | ||
| Screenshot testing with ViteShot | François Wouts | 23m |
ViteShot claims to generate component screenshots in seconds by bundling with Vite/esbuild and driving browsers via Playwright/Chromium. Example runs show… | ||
| Integration Testing for React Native Apps | Gleb Bahmutov | 26m |
Claims a concrete workflow: run a React Native app in the browser via Expo and exercise it with Cypress to cover most logic, spy and stub network calls, inject… | ||
| Haptics, Sounds and Micro Animations | Kadi Kraman | 25m |
A working Expo demo app sells matcha lattes with favorites, a 1–3 quantity picker and add‑to‑cart, and shows expo-haptics and react-native-haptic-feedback… | ||
| Design Systems of a Down: Steal this Guide! | Matthias Dugué | 26m |
Claims a developer‑first design system is four concrete deliverables: design tokens, a designer UI kit, a component library and dynamic docs. Shows a working… | ||
| How to structure, style and document components for maximum effectiveness | Dragos Bilaniuc | 19m |
Starts with a concrete repo layout: ui vs containers where containers hold all logic and screens receive props so UI bugs and logic bugs live in one place. UI… | ||
| React on Steroids with Nx! | Juri Strumpflohner | 27m |
Demo shows Nx creating a workspace, generating a React app and libraries with generators, wiring a Next.js app and Storybook, and using a visual dependency… | ||
| Video streaming on the web: Live and recorded video streaming | Doug Sillars | 24m |
Explains that real streaming breaks video into 4–10 second chunks with an m3u8 manifest and TS segments so players can adapt bitrate and seek, contrasts that… | ||
| On the Road to the World's Best Branding | Niklas Lepistö | 19m |
A working runtime theming system lets event organizers pick primary and secondary colors and see a live preview, with changes persisted and applied sitewide… | ||
| You thought your React application is secure? Think again | Liran Tal | 42m |
React is mostly secure by default but concrete failures happen: injecting a javascript:alert payload into an href attribute bypasses React’s output encoding… | ||
| The future of software development in Finland | Saku Tihveräinen | 21m |
More than half of Finland’s software jobs concentrate in the Helsinki region while many firms remain under ten people, and the market uses a PESTEL lens to… | ||
| Becoming a React developer - A hiring manager’s perspective | Mika Schafroth | 41m |
Claim: companies in Finland urgently hire React-capable front-end people but will hire for front-end experience and train React on the job. Evidence: market is… | ||
| The future of work is enjoyable | Elisa Heikura | 29m |
A developer downloads heyday, gets hooked, and later deleted heyday twice after noticing gameplay steals real life minutes then returns with a rush of… | ||
| nothing matches | ||