React Finland 2020
2020-05-28..2020-12-02
-- online --
[React Finland 2018, React Finland 2019, React Finland 2020, React Finland 2021, React Finland 2022]
who it's for
React developers, frontend engineers, design system engineers, performance engineers, accessibility engineers, technical writers, engineering managers
topics
documentation for React; legacy React code documentation; frontend state management alternatives; statecharts for UIs; actor model for frontend; Effector state library; Stitches styling library; Oceanwind with Deno; design systems introduction; visual UI building; accessible UI toolkits; React performance optimization
| title | author | length |
|---|---|---|
| Humanizing Your Documentation | Carolyn Stransky Vohr | 44m |
Advocates switching from reference-first docs to use-case driven documentation that ties features to user goals and lets docs be written alongside code… | ||
| Documentation in legacy React code - A love/hate paradigm | Stephen Meya Kenigbolo | 42m |
Claims a concrete workflow for undocumented legacy React: start by reading package.json and lock files, note the exact React version and list deprecations from… | ||
| Going beyond Redux. Diversify frontend state management | Margarita Obraztsova | 22m |
Claims that Redux is the default hammer get tested against concrete practices: document the domain model, ship tiny POC apps that mimic the stack, and include… | ||
| Panel discussion about documentation | Jani Eväkallio, Carolyn Stransky Vohr, Stephen Meya Kenigbolo, Margarita Obraztsova, Juho Vepsäläinen, James Stone | 33m |
Panelists debate concrete tradeoffs not platitudes: a misleading design system in docs wastes real developer hours and is worse than none, Webpack’s docs… | ||
| Introduction to statecharts | David Khourshid | 44m |
Demo builds a working drag‑and‑drop using xstate and React and the sandboxed code is linked, not just abstract theory. It uses the useMachine hook, context for… | ||
| Everything is an Actor | David Khourshid | 45m |
Argues that the Actor Model makes reactive apps simpler by modeling components as independent actors that communicate by messages, using mailboxes to guarantee… | ||
| Dive in Effector | Yan Lavryushev | 34m |
Effector is a reactive state manager that centers on three units: event, store, effect, shows how effects emit done fail and finally and how stores map and… | ||
| Stitches | Christian Alfoni | 36m |
A new css-in-js library called Stitches implements atomic class names generated per property/value/pseudo, evolves from a Babel plugin prototype and finally… | ||
| Panel discussion about state management | Sara Vieira, Yan Lavryushev, David Khourshid, Christian Alfoni, Juho Vepsäläinen, Holly Gibson | 24m |
Panelists argue that the practical decisions matter: a prototype for visual-first code generation exists and aims to emit code from diagrams; Overmind… | ||
| Introduction to Design Systems | Juho Vepsäläinen | 32m |
Begins with an inventory that finds 10 different buttons and argues for collapsing them into a few well‑defined primitives (box, flex, button) composed into… | ||
| Design from the dimension of open-source | Shodipo Ayomide | 31m |
Claims that designers can join OSS by following concrete steps and tools: start from the issues tab, evaluate components and open an issue before a PR… | ||
| Building React UIs visually | Yang Zhang | 39m |
Plasmic is a browser-based visual builder that generates maintainable React presentational components and live-syncs them into a codebase; demo shows a… | ||
| Design Systems with Deno and Oceanwind | Juho Vepsäläinen | 39m |
A small design-system experiment builds a static-site generator on top of Deno runtime replaces Node, using typed-html maps JSX to strings for… | ||
| Panel discussion about design systems | Jani Eväkallio, Juho Vepsäläinen, Yang Zhang, Shodipo Ayomide | 25m |
Panelists argue that the useful details are concrete: teams build primitives and patterns first so pages follow, use Sketch and Adobe XD for prototyping and… | ||
| Toolkit for building accessible UIs | Diego Haz | 33m |
Reakit claims to inject real accessible behavior into existing components: a useButton hook that adds keyboard focus and Enter/Space activation, render-props… | ||
| Introduction to Oceanwind | Luke Jackson, Juho Vepsäläinen | 39m |
Oceanwind implements Tailwind semantics but composes only the CSS actually used instead of shipping a huge utility file, claiming Tailwind semantics without… | ||
| Lessons learned from burnout | Mikhail Novikov, Juho Vepsäläinen | 38m |
Claims that burnout is specifically work‑related, that OmniFocus for task dumping measurably restores momentum, and that removing constant distractions like… | ||
| Panel about lessons learned | Juho Vepsäläinen, Mikhail Novikov, Luke Jackson, Aapeli Haanpuu | 27m |
Argues that burnout requires concrete action not just rest and recommends close your laptop for at least a week or even a month to recover; suggests making… | ||
| Making Your React Apps Perform At Scale | melisha mcgregor | 39m |
Shows concrete diagnostics and fixes: run a production build locally and run a lighthouse audit and the profiler tool to find slow components, inspect the… | ||
| Tips and tricks for optimizing your React application | Nik Graf | 51m |
Real cases and numbers: replacing a custom clone-element pattern drops tab switch time from ~760ms to ~80ms and from ~5s to ~1s on old devices, proving a… | ||
| Live Coding - Optimizing a React application | Andrey Goncharov, Juho Vepsäläinen | 38m |
A 100 by 100 grid shows a noticeable click delay and Chrome Performance plus React Profiler expose a 172 ms re-render for a single click and reconciliation… | ||
| Panel - Performance | Juho Vepsäläinen, Andrey Goncharov, Milecia McGregor, Nik Graf | 21m |
Panel lists concrete signals and fixes: check Chrome/Safari memory panel and look for leaks from long-lived subscriptions or sloppy useEffect cleanup… | ||
| nothing matches | ||