Name: React Finland 2021
Start: 2021-08-30T07:00:00.000Z
End: 2021-09-03T20:00:00.000Z

React Finland

React Finland 2021

Over the past few years, state machines, statecharts, and the actor model have proven to be viable concepts for building complex application logic in a clear, visual way with XState. In this talk, we'll take a peek into the future of XState, including new features in the next version, and new tools and services that will make it even easier to create and collaborate on state machines. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The State of XState

David Khourshid

To show how we can make rich, interactive experiences, for instance games, with React semantics and shareable components, and what that means for traditional constructs, like the render-loop. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Breaking out of the confines: making games in React

Paul Henschel

An introduction to SolidJS UI Library. Explore an example to show the similarity and differences between Hook + Virtual DOM versus Reactivity + DOM. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

SolidJS - Reactive JSX

Ryan Carniato

Even today, with advanced tooling and frameworks, the gap between design and development still exists. This talk will examine how we can eliminate handoff between design and development teams using JSX as a shared source of truth across any platform. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

JSX for Designers

Travis Arnold

The discussion explores the separation of concerns between logic (Model) and UI (View) and how React hooks are a great abstraction model that help achieve that. We'll start with designing a component's API (in a top down approach), then dive deeper to explore how to implement this API, while maintaining a good separation of concerns. We'll create custom React hooks to implement the Model and React components for the UI. Both expose self-documenting APIs and are completely decoupled from each other. To demo this approach, we'll create a simple Toggler component (a UI component that allows going back and forth in an array of values).Towards the end, we'll explore the benefits, focusing on testing these decoupled units in isolation. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Hooks are a great abstraction model

Calin Tamas

Likely you've heard of Web Components but do you know how to use them with React? If not, then this is the demonstration for you! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Web Components in React

Matias Huhta

David will explain the different possibilities to implement MicroFrontends in the past, the present, and the future. More importantly, he will leave you to know which of the available approaches is best suited for your specific task at hand. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro Frontends in React — a State of the Art Approach

David Leitner

CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.

Rethinking CSS - Introducing Stylex

Naman Goel

System-level state management in modern React applications is challenging. Usually, as the applications grow, the complexity of interaction between different parts of the application compounds. The more you need those isolated parts to talk, the higher the level of complexity. Usually, the common pitfalls of these communications are underestimated especially with the recent trend of State management that tends to keep the application state outside of React and distributed. In this talk, We'll see how the Actor Model architecture can come to the rescue and what makes it stand out compared to the other approaches. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Actor Model: a new mental model for React

Farzad YousefZadeh

Can we have themeable CSS-in-TypeScript without the runtime cost? In this talk we'll have a quick look at how this can be achieved with vanilla-extract. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Zero-runtime CSS-in-TypeScript with vanilla-extract

Mark Dalgleish

Being flexible with Apollo Federation and autoscaling with Kubernetes opens many opportunities to scale your app. Jan will show how these two services work hand in hand and why autoscaling matters. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Using Apollo Federation in a microservice architecture in Kubernetes

Jan Peer Stöcklmair

A demo and deep dive into GraphCDN, the edge caching GraphQL CDN. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to cache GraphQL queries at the edge

Max Stoiber

How Contentful helps you to manage all the data in a headless e-commerce website.

Contentful and headless

Nidhi Kumari

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, backed solid APIs), for Content Creators (it keeps the visual editing experience of no-code tools like Wix) and for Designers (you can express your exact design system and be sure nobody will break it). I'll show you how it works! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Bricks: a CMS with visual editing based on React components

Matteo Frana

Lukas will demonstrate how you can have your backend GraphQL in sync with your frontend code on a framework agnostic way. - Having the advantage of autocompletion while writing the GraphQL queries IDE support- Built in type safety through static schemas- Automatic generated frontend code for your framework of choice (React, Vue.js, Angular)- Having everything rebuild through a built in watch mode <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Automate your stack with GraphQL

Lukas Holzer

If you must have legacy code, you want it written in statecharts. We'll break down the mental models required for understanding unfamiliar UI code, and compare the maintenance costs with and without statecharts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Make legacy code delightful with statecharts

Matt Pocock

There are two mutually exclusive methods that CSS-in-JS libraries use to generate and ship styles to the browser. Both methods have benefits and downsides, so let’s analyze them in detail from the loading performance perspective. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

A thorough analysis of CSS-in-JS

Andrei Pfeiffer

How our narrow understanding of racism (visible and interpersonal level) still stands in the way of racial equity and inclusion (in tech, too) and how racial bias can be seen in tech, products etc. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Structural Racism

Jasmin Assulin

State machines and statecharts can seem intimidating. Especially if you (like me!) didn’t study computer science, aren’t big into maths, or just haven’t come across state machines and statecharts before. In this session, you’ll get a whirlwind introduction to state machines and statecharts, no prior knowledge and no coding experience required. Are you already familiar with state machines and statecharts but want to get a better understanding of the benefits and how to convince your team to get onboard? That’ll be covered too. You could be a developer, designer, project manager, multi-disciplinarian or fancy specialist, I believe everyone can get something out of this talk, so join me! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Introducing state machines and statecharts

Laura Kalbag

You can check the slides for Nasim's talk <a href="https://drive.google.com/file/d/1dv0ZOFDTitrUHJfJAgKs6YiO4M8Fxwcs/view"></a><a href="https://drive.google.com/file/d/1dv0ZOFDTitrUHJfJAgKs6YiO4M8Fxwcs/view">here</a><a href="https://drive.google.com/file/d/1dv0ZOFDTitrUHJfJAgKs6YiO4M8Fxwcs/view"></a>. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Reasons why we need inclusion

Nasim Selmani

You might have heard about Headless CMS. This new type of content platform gives us some benefits compared to a Monolithic CMS.We will talk about the key features of any Headless CMS and how we can integrate a headless platform into our React applications. We will focus on Storyblok, a headless CMS that offers a real-time Visual , a great feature for developers and content creators. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to View and React without a Head

Facundo Giuliani

I focus on why inclusion is important in hiring and what are the inclusive hiring practices for any organization that could be taken into use. Inclusive hiring and evaluation process are the great window of opportunity that can truly support inclusion with practical actions. I offer practical tips and a way to implement small changes while working the way towards more inclusive hiring culture and strategy. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to avoid bias or exclusion when recruiting

Emmi Marjetta

Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Opensource Documentation—Tales from React and React Native

Rachel Nabors

<div><div>For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony. So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks. It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript. Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!</div></div><div><div> </div></div> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Eternal Sunshine of the Zero Build Pipeline

m4dz 

Most documentation systems focus on text content of one form or another: WYSIWYG editors, markdown, code comments, and so forth. Storybook, the industry-standard component workshop, takes a very different approach, focusing instead on component examples, or stories. In this demo, I will introduce an open format called Component Story Format (CSF). I will show how CSF can be used used to create interactive docs in Storybook, including auto-generated DocsPage and freeform MDX documentation. Storybook Docs is a convenient way to build a living production design system. I will then show how CSF stories can be used create novel forms of documentation, such as multiplayer collaborative docs, interactive design prototypes, and even behavioral documentation via tests. Finally, I will present the current status and outline a roadmap of improvements that are on their way in the coming months. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Documenting components with stories

Michael Shilman

The final stage of a react component is when it is being published and distributed. How can I ensure my packages won’t crash in production? This talk will help you to test your React components publishing them to a private registry and running End-to-End tests against them. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Testing the integrity of your React components by publishing in a private registry

Juan Picado

In this talk we are going to have a look on how to use Server-Side-Rendering and Static-Site-Generation in NextJS to serve pages. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

SSR & SSG in NextJS

Nur Şah Ketene

A demo on Aleph.js about good development experience and deno runtime. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Aleph.js - Build your React app in Deno

Je Xia

In this talk, Patrick goes through the effort that went into ReScript's documentation platform. You can check the slides for this talk <a href="https://drive.google.com/file/d/1Nc9m2BpEvzcgUBhDFn48e5xGMQN8iGmm/view" target="_blank">here</a>. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Story of ReScript's Documentation Platform

Patrick Ecker

How to properly hide modals / dialogs / drawers functionalities behind buttons that spawn them without cluttering container components. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Delegate your React Dialogs

Calin Bogdan

In this brief introduction of Nuxt, we will learn Nuxt basics and how to build Git-files based content management system using Nuxt.js and its module system. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Brief introduction to Nuxt

Krutie Patel

My unpopular opinion is that testing is ... important. How do you test your React Native apps? In this presentation I will show how to run full integrations tests using Cypress while the RN app is running in the browser. This method can cover most of the application's code and be effective at finding logical errors and mistakes when calling the server APIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Integration Testing for React Native Apps

Gleb Bahmutov

François will introduce ViteShot, a new open-source tool that can generate screenshots of HTML/CSS components within seconds, so you can be confident that your UI looks exactly the way it's supposed to. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Screenshot testing with ViteShot

François Wouts

I'll present a practical approach to styling react components, a folder structure and documentation structure that's very easy to follow (for onboarding members) + other insights I got while using this approach. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to structure, style and document your components for maximum effectiveness

Dragos Bilaniuc

Remember Atomic Design? It's been a while since we started talking about Design Systems. They're supposed to solve our interfaces inconsistencies issues, as a single source of truth. But do you know well how to build and use them, from a developer perspective? Here's your ultimate guide to Design Systems, for Devs! From the fundamentals of Design Tokens definition, to how to build advanced versatile layouts. You'll learn all best practices, tips &amp; tricks, components splicing strategies, from this comprehensive step--step handbook talk. Never be lost again in front of a creating Design System from scratch! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Design Systems of a Down: Steal this Guide!

Modern frontend frameworks like React are well thought-of in their application security design and that’s great. However, there is still plenty of room for developers to make mistakes and use insecure APIs, vulnerable components, or generally do the wrong thing that turns user input into a Cross-site Scripting vulnerability (XSS). Let me show you how React applications get hacked in the real-world. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

You thought your React application is secure? Think again

Liran Tal

We often talk and hear about scaling in production, but we rarely talk about scaling development. Aspects like structuring and organizing your codebase, code sharing across teams, speeding up build and test runs can play a huge role in terms of productivity for a developer team. That impacts small teams but gets even more evident as your team grows and especially for large enterprises. In this short talk I'm going to demo Nx and what it can do for you to help you modularize your React code, generate code for you, help you build faster and much more. Tune in to learn about the build framework you've been missing in your tool belt! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React on Steroids with Nx!

Juri Strumpflohner

Digital accessibility is a human right of people with disabilities around the globe. That means developers have an important role to play in advancing human rights! Join U.S. disability rights lawyer Lainey Feingold for a practical interactive discussion about laws and policies around the globe that impact digital accessibility. Come learn best practices for digital accessibility and how we all can “put the law in our pocket” to help make the digital world inclusive for everyone. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Digital Accessibility Legal Landscape – why it matters for developers 

Lainey Feingold

In this presentation, we'll present how video streaming works. We'll look at the anatomy of video streaming, and how video streaming is beneficial for delivering your content over just adding mp4 files. We'll demonstrate live streaming from the browser, and then how to integrate that live stream into your webpage. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Video streaming on the web: Live and recorded video streaming

Doug Sillars

Quick tips on how to utilise the native mobile platform to help provide your users an upgraded experience with sounds, vibrations and animations. Small changes can have a huge difference UX-wise. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Haptics, Sounds and Micro Animations

Kadi Kraman

The landscape of popular JS frameworks and libraries has become increasingly polarised. With React standing out an increasing number of companies are struggling to find skilled developers. People experienced in React are in a great position. Nevertheless, what if my CV lacks the right keyword? What if my Angular experience looks more like a burden? Can I apply for a front-end developer position in a React project? <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Becoming a React developer - A hiring manager’s perspective

Mika Schafroth

Did you know that 50% of users will NOT use the English version of your application, if it supports multiple languages? For ambitious high-growth businesses, going global is not "if" but "when" so it's important to recognize the importance of localization, especially in large multi-team projects. This discussion will explore the depths of localization in Agile companies and what can be achieved with a Continuous Localization system. I'll share some common issues we faced with multi-language products and how localization automation helped us to scale the process across many product teams within the company. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Continuous Localization in Enterprise Web Projects

Ante Tomić

We’re generally afraid of the future. Not only is it unknown, but there’s quite a lot of reasons to believe we’re practically doomed. And it doesn’t help that we’re negatively wired nature, programmed to look out for risks more than search for rewards. Developers especially so. So with this speech, I want to paint another picture for you. I genuinely believe, the future of work is enjoyable and definitely worth pursuing. And you can have that. Right after this speech. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The future of work is enjoyable

Elisa Heikura

In this talk we'll take a closer how we do event branding and theming at Brella, and how we want to progress it in the future. Topics such as generating accessible colors will be discussed. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Finland 2021

Online event about #reactjs with a hint of #Finland in it.