Styleguide-driven Development#Andrey Okonetchnikov and Artem Sapegin
Web applications becoming bigger and more complex, and as they grow, the complexity of the User Interface, arguably the most important part of your application, increases. And with it, your responsibility as a UI developer.
A traditional development workflow — change code, refresh the app in the browser, click-click-click to reproduce the desired state, repeat — doesn't work anymore. Tools like React hot loader make it faster but don't really fix the underlying issue.
This workshop will help you:
- Understand what a design system is and how to start thinking in design constraints
- Analyze and split your UI into small reusable components
- Setup an environment to create components in isolation
- Create a living style guide and start building a component library
- Structure your application around components
- Write maintainable styles for your components based on the design system
Reactive State Machines and Statecharts#David Khourshid
Managing the many user interface states of an application easily becomes complicated. We'll discover how some historical and important computer science concepts – state machines and statecharts – and a functional + reactive approach can make it much easier to understand, visualize, implement, and automatically create tests for complex user interfaces and flows.
React Native#Gant Laborde
In this beginner workshop you will learn what React Native (RN) consists of, how to write basic applications, how to use Storybook with RN, how to test RN, and finally how to kickstart your own project.
Webpack - The Good Parts#Juho Vepsäläinen
In this high-level overview you'll learn how to configure Webpack. Even if you know it already, there might be some surprises in store as you gain insight to the tool you otherwise might miss.
The topics covered include:
- Fundamental ideas of webpack
- Development techniques
- Build techniques
- Asset management
- Bundle/code splitting
- Build analysis
- Optimizing the build
State Management#Michel Weststrate
In this workshop we will dive into the basics and more advanced usage patterns of Mobx-State-Tree (MST) in combination with React. MST is a tool that helps to model complex problem domains and combines the best features of the modern state technologies out there.
- The state tree philosophy.
- Modeling your data structures and state
- Views & actions
- Asynchronous processes
- Composing trees and types
- Connecting to GraphQL
- Writing your own middleware
Getting Started with ReasonML & ReasonReact#Patrick Stapfer and Nik Graf
In this workshop, attendees will first of all learn how to setup and use ReasonML with React and find explanations on how to find relevant information for their coding problems (navigating the docs, leverage the community).
In more detail, the workshop will cover following topics:
- Why ReasonML?
- Introduction to the platform / tech stack (OCaml, BuckleScript, Tooling, ReasonML)
- Dev-Setup / Editor integration
- Basic language features (data types, pattern-matching, Collection APIs)
- BuckleScript related topics (JS-compilation,
- React related topics (stateless / reducer components, JSX, CSS etc.)
In the end, ambitious attendees will be able to integrate Reason React components in their existing React codebase without interrupting the existing development workflows.
High velocity native mobile development requires us to adopt continuous integration workflows, which means our reliance on manual QA has to drop significantly. The most difficult part of automated testing on mobile is the tip of the testing pyramid – E2E. The core problem with E2E tests is flakiness – tests are usually not deterministic.
React Native makes flakiness worse due to the asynchronous nature of the bridge. We believe the only way to tackle flakiness head on is by moving from blackbox testing to graybox testing and that’s where detox comes into play. The library synchronizes with the lifecycle of the app, including React Native core, making tests finally deterministic. This workshop shows how to get most out of Detox in React Native context.
Testing React#Sara Vieira
We will start by learning all the things about unit tests and how to implement very simple tests for your functions.
We will then move to React/React Native territory and learn about snapshot testing and components testing to keep regressions from happening.
By the end, we will implement all of this in continuous development with GitHub and Travis so you can leave with the exact idea on how to go about implementing extensive tests in your app without shedding a single tear.
Universal React Apps Using Next.js#Sia Karamalegos
Every user’s hardware is different, and processing speed can hinder user experience on client-side rendered React applications. Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do.
It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.
You will learn how to refactor your React code effectively in this workshop by Sven Sauleau, one of the core developers of Babel. He will discuss the following topics:
- How and why JSX syntax works?
- How to create your first Babel plugin?
How to perform type analysis?
Read your own refactoring tool article to learn more!