React Finland

Given we had to postpone the physical portion of the React Finland to the next year, we'll run with the same themes in a mini-conference format. Each of the events covers a specific topic. Last time we discussed state management.

Overview#

In the second edition, we'll focus on design systems. It's an emerging topic that has gained a lot of attention during the past few years. In short, the idea is to find better ways to bridge development and design disciplines. Design systems give a common language for both and foster shared understanding.

My hope is that after the session, you'll be able to develop your own systems or improve the existing ones in a better way. As usual, we have three talks in store. In addition, we'll run a brief introduction lecture at the beginning available for our premium subscribers (available later as well).

The event will take place 22nd of September (17:00-20:10 Finnish time, public portion begins 17:30) and it's going to be available both in free and premium formats.

To "pay" for the free option, you'll see themed advertisements during the breaks while the premium stream receives the QA. The QAs will be available later and included to the videos that are shared after the event.

The free/premium split allows us to keep the event accessible for all while giving us a chance to try to cover production costs.

Schedule#

As last time, we have three great speakers and an MC waiting for you. Jani Eväkallio familiar from our first event will host the event.

The premium portion of the event begins 17:00 and the public stream starts at 17:30. After the end panel (premium only), we continue with a relaxed Zoom meeting starting at 20:10 and ending whenever people head out to other things (officially 20:40).

I've listed the talks below. You can learn more at the schedule.

Shodipo Ayomide - Design from the dimension of open-source - 17:45-18:15#

Here's how Shodipo describes his talk:

Getting into an open-source can be quite intimidating as a designer. It’s not something that you can just wake up in the morning and start doing if you’ve never been a designer before. From a high level, let’s “design” our first open-source project, complete with quick methodologies, tips, tricks, and some extra bits.

This talk was crafted with the aim of lowering some of the barriers for designers to contribute to open-source, How designers can actually contribute to open-source “live-designing” and providing some direction and resources to help people get started with contributing to design from a realm of open-source.

Key Take-Aways:

• How not to be intimidated as a designer in open-source.
• Tools to enable designers to contribute to OSS.
• How to inspect design.
• Designing and implementing a feature to production as a designer on an enterprise product.
• Getting started with designing for designers.
• Building/joining a Designers Community as a Designer contributing to open-source.

Yang Zhang - Building React UIs visually - 18:25-18:55#

What if it was possible to bridge visual tools with React? That's what Yang Zhang will explore in his talk:

Design tools are fast and amazing tools for thought, but for a host of reasons are limited to creating drawings rather than production assets. Engineers must instead re-create surfaces from scratch, by hand, using code. This inevitably leads to discrepancies and back-and-forth with the design team, and ultimately two sources of truth that are never truly in sync.

Plasmic is a tool to build UIs visually, currently in heavy development. It loosely resembles a design tool and aims to give the same sense of speedy iteration, but is for building maintainable, production-ready presentational components. The idea is to give developers a better and faster development experience, eliminate an entire class of visual bugs/QA/tooling, and ultimately maintain a single source of truth with design. This talk will also cover some of the challenges with building such a tool (which itself is a React application).

Juho Vepsäläinen - Design Systems with Deno and Oceanwind - 19:05-19:35#

Juho describes his session as below:

The target of my current work is to replace an aging stack and to let me generate sites with thousands or more pages fast. A big part of the effort has had to do with exploring the current technology landscape and figuring out good ways to do this. During my work, I've tried to keep the good parts of React in mind although the stack doesn't contain React directly, only key ideas from it.

As a result, I've ended up with the following stack:

• typed-html for component model
• oceanwind for styling
• sidewind for state
• deno for building it

For the design system work, I've taken heavy inspiration from theme-ui and I've modeled a part of its semantics to the system. Most important parts have been typed well although there are ways to escape out of the default constraints so it's still pragmatic.

One of the interesting aspects of the bundlerless approach is that instead of relying on a tool like webpack to generate the site, we rely on deno underneath for the heavy lifting. There are surprising benefits as it appears it makes parts of the system such as the development server simple and easy to understand and modify based on need.

Instead of a traditional presentation, the open-ended session is going to be a technology preview where I'll explain how things go together and why. I hope it will inspire you to explore alternative stacks and lead to new development in the space.

What are the participation options#

The session will be available in two formats - premium and free. The talks will be available freely through YouTube as we stream them simultaneously through another platform. Here's how the options differ:

• Free - Hosted on YouTube only, ads during breaks, minimal interactivity - 0 €
• Premium - Hosted on other platforms - You'll get an introduction to the topic before the main event begins and have full access to the event QAs and the end panel - 30 € (inc. VAT)

The talk videos will be available through our YouTube channel later after the event.

How to get a ticket#

If you decided to move your React Finland conference ticket to the next year, we'll send you a free premium ticket to the event closer to the date. Otherwise, please use our ticket provider and choose either a premium or a free ticket. There are still online workshop tickets available as well.

Depending on the choice, we'll send you a link with details later and remind you of the event.

If you haven't received your ticket for the online events yet although you have a conference ticket, ping me via email (info at react-finland.fi).

Conclusion#

I hope to see you in our third online event!