React Finland

🎙 A Common Design Language. Let Designers and Developers talk to each other. #

“Should designers code?” or “Should coders design?”—these two eternal questions are being asked for years with no particular answer given.

• How to let developers know what typography style or button variance they should be using on this particular screen?
• How to ensure that the whole UI is consistent?
• How to let designers know that some screen design doesn’t fit the requirements and needs to be updated?

In order to answer those questions designers and developers have to speak the same language. But what language should it be?

UI components and pattern libraries can provide this intermediate abstraction and be a common language for both designers and developers.

🎙 Custom CSS is the path to inconsistent UI #

Custom CSS is the simplest way to make the UI inconsistent, especially if we’re talking about spacing between UI elements, font sizes or colors. When developers have too much freedom in defining the UI, they will do things differently. The issue could be solved by avoiding any custom CSS on the app level and having a set of primitive components that allow developers to glue UI together in a consistent way.

🎙 Mind-Reading with Adaptive and Intelligent UIs in React #

What if you could predict user behavior with smart UIs? In this talk, we will explore how we can make adaptive and intelligent UIs in React that learn from how individual users use your apps, and personalize the interface and features just for them, in real-time. With probability-driven statecharts, decision trees, reinforcement learning and more, UIs can be developed in such a way that it automatically adapts to the user's behavior.

⚡️ Drawing the line between 3rd party and handcrafted components #

Often when we write new components, we might be like: Come on, there must be a library out there! And most times there was already someone who faced the same problem... only that it's not quite the same. Should I use the 3rd party lib? Or go with my own? Let's find out the differences and trade-offs in this session.

🗝 MobX - The Journey #

MobX is downloaded a million times per month, and used by many large and small companies, such as Microsoft, Amazon, Lyft, SAP and DICE.

By now, it is 3,5 years ago (in other words, ancient!) that I've wrote it and started building a community around it. In this talk I will both reflect on the product and my journey into the Open Source Software world:

• What makes a great open source library? (Can we even answer that question)
• What is so appealing about the programming model of MobX? (Reactive programming, yet, not scary?)
• How is it possible that open source even works. What does it mean to be a good OSS citizen? (Yeah, I'm looking at you!)
• Why do so many maintainers burn out? (And how to avoid that)

Reflection on the past often gives clues about the future:

• What is the future of MobX and client side state management?
• And what is the future of open source? How can we foster innovation. And maintenance?

Expect a highly personal talk about a successful open source project. Some first hand experiences from an author that still tries to figure out how much of all that is just dumb luck in the end :).

⚡️ Un(popular) Opinions #

Unpopular opinions are mostly popular opinions people post on Twitter and share them as an unpopular opinion. Some unpopular opinions though are really unpopular for a good reason. Doesn’t make sense to you? Neither to me.

🎙 Append-only development with React #

Behavioral Programming is a new paradigm that changes how we think about developing software. Programs are constructed in an incremental-fashion where newly added code can change how old code is executed. In this talk I will explain this paradigm in the context of developing a React app. Furthermore I will show how changes can be made to the app without having to understand how old code was written; hence I describe this method as "append-only development".

⚡️ Abstract component modeling in React #

Often when we need to develop user interfaces, we model the interface behaviour based on a visual design or the platform we ship onto. However, since the behaviour of the component is the same, it would be beneficial to find a practical way to share this behaviour between different platforms, styling systems, state containers, data transmitters and any other sort of integrations.

In this talk, I'll be showing a set of techniques to model a semi complicated React component, independent from the common integrations.

🎙 A practical guide to building your design system infrastructure #

Design systems bridge the gap between designers and developers, communicate shared practices to all the company levels and significantly decrease production costs. We all have heard this but how to achieve that in practice?

React ecosystem and community already provide a lot of efficient open source tools which can be used for building your design system infrastructure. With them, you can have the most automated development process, high-level interactive documentation for the libraries in your system and support contribution practices within your organisation.

This practical guide shows how to apply existing development tools to your system and what is the value you can get.

🎙 CI/CD for React Native #

Both continuous integration and continuous delivery (CI/CD) are elements of software development best practices. Setting up CI/CD can be time consuming, even more so for a mobile project. Understanding the basics of how to apply CI/CD practices in React Native mobile application development to automate software release tasks will improve performance and will free up time more usefully spent elsewhere in the project.

🎙 Intersection of Automation and Exploratory Testing #

I’m using exploratory testing to design which tests I leave behind as automated. Creating automation forces me to explore details in a natural way. When an automated test fails, it is an invitation to explore. The two sides of testing, automation and exploration, complement each other. These intertwine the considerations of the best for today and for the future.

For great testing bringing value now as well as when we are not around, we need to be great at testing - uncovering relevant information - and programming - building maintainable test systems. At the core of all this is learning. With our industry doubling in size every five years, half of us have less than five years of experience. We all start somewhere on our learning journey.

In this talk, we look at skills-focused path to better testing in the intersection of automation and exploratory testing. We can arrive at the intersection by enhancing our individual skills, or our collaboration skills. What could you do to become one of those testers who companies seek after that work well in the intersection, giving up the false dichotomy?

Takeaways:

• recognizing skill in testing and skill in programming for testing as dimensions
• building skills in testing / programming
• using collaboration to achieve better testing

🎙 12 Tips For More Accessible React Apps #

If you want to improve the accessibility of your React apps but you don't know how or where to start, this talk is just what you need. Manuel shares 12 tips that will help you build web sites and applications that can be used by anyone. Each tip fits on one slide and you'll be able to put them into practice right away without having to learn anything fundamentally new. The tips include testing, HTML, JS techniques, and general best practices.

⚡️ All aboard the type train #

JavaScript is a language of add-ons, and one of its more recent trends is typing. There are obvious benefits to typing, but what are the drawbacks? Should you choose Flow or TypeScript? Why use types at all? And why not just go straight to Reason? This session will provide some insight into these questions, peppered with examples from the real world.

⚡️ Gatsby + Themes: The Future of Gatsby #

Themes ease learning curves and reduce the time to a deployable app. Want to get that great blog written, but don’t want to spend the time creating a bunch of components and UI details? Themes. Themes allow you to focus on what matters: delivering compelling experiences for your end users. Themes are coming very soon to Gatsby, and this talk will do a deep dive on what they are, how to use them, and the types of amazing content you can create easily with a framework that people love: Gatsby.

🎙 Delightful UI animations by understanding the brain #

Check out the world’s award-winning websites—what do they all have in common? Animations! They have elements that move and change. When done well, animations can amaze us. But why are some animations delightful while others are so annoying? The answer could be in how our brain perceives motion.

Understanding this could be the key to confidently adding animations to our websites and apps. Animations with code seem hard, but they shouldn’t be. In this talk, I will give some tips and explore some tools to simplify creating animations in React.

🎙 Building a Community Around Ignite #

In this talk, Jamon will go into what it took to build a thriving developer community around the popular React Native CLI and boilerplate, Ignite.

🗝 The Untouchable Web #

The majority of users are now browsing websites primarily using touch devices. In this talk, Rick Hanlon from the React Native team at Facebook shares what React Native has learned about touch devices with web developers, including how to provide a rich user experience today, and where this space is going.

🎙 React Standard Library #

React Native is the tool for building cross platform React apps. To build native-like experiences, we need good APIs providing the native capabilities of each platform in a unified way. Is the answer a standard library for React apps?

🎙 Creating layouts that last #

What if we could wield layout composition as an actual React component? Spoiler: that would solve the #1 issue that prevents our layouts from being truly reusable.

🎙 Scalable (Design) Systems with TypeScript #

This session explores creating living documentation for design systems, ensuring consistent documentation at all times using TypeScript.

We will read Markdown files, render components described in them, and expose live type-safe code playgrounds powered by the Monaco Editor. We will, together, explore:

• Static Type Analysis and its value
• The Monaco text editor that powers VS Code
• Connecting it all together with React

⚡️ Codecrumbs in React #

The granular approach of designing components helps us to build reusable and encapsulated features. On another hand, it also makes a codebase much more complex by extra added abstractions and drastically increased amount of source code files. How can we navigate the maze of hundreds of React-atoms now? Join my talk to get the answer.

🎙 React Union: Write once, plug anywhere #

React is usually responsible for managing the render of the whole application. This talk will be about the different use case in which a React application is divided into several standalone configurable modules.

I am going to show how the React modules can be integrated into diverse CMS platforms such as WordPress or Liferay with help of React Union library.

Then we take a look at state management challenges in this kind of setup and how to solve them with @redux-tools.

⚡️ Releasing a library written in TypeScript on NPM #

Most of us have used or at least heard about TypeScript, but how many have released a React library written in TypeScript on NPM?

In this session we will take a look at the tooling required and some best practices for publishing a library using TypeScript and Rollup.

🎙 Practical Performance for React (Native) #

There are quite a few theoretical concepts of writing good a React application, including popular functional programming approaches. However, few take into consideration the impacts these will have on performance of the application. In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.

⚡️ WebAssembly - The Next Big Platform #

JavaScript has had the monopoly on the web for quite some time now. What if, for performance reasons or preference, you want to use another language on the web or mix them?

WebAssembly is the right tool for the job! I want to demonstrate how you can write parts of your React application using Rust and related tools. To complete the demonstration, the code will be deployed on Cloudflare's serverless platform.

Rust ecosystem offers many great tools to work with WebAssembly on the web. These include DOM manipulation, JavaScript bindings and so on, and you will learn more about them in the talk.

🎙 Building resilient frontend architecture #

Change is inevitable. So is legacy. And too often, we as developers (who love to solve problems by coding) fall into the trap of believing the only way to fix it is by rewriting everything again and again. But how can we design an application architecture that is more resilient to change in the first place? In this talk we’ll look at specific techniques you can use today to keep your app from turning into that infamous ball of mud.

🎙 "Intuitive" Tooling #

One of the nuances of working in frontend development is constantly being told that insert whatever tooling, frameworks or technologies here are "super simple" or "easy to pickup". While on the surface this seems great, the reality is that many of these technologies are riddled with syntax quirks, incomplete documentation and a high barrier to entry.

In this talk, we'll discuss why truly intuitive tooling doesn't exist, go over some common misconceptions in the React community and learn more inclusive ways to talk about emerging frontend technologies.