Workshops will be run remotely via Zoom.
Workshops are targeted both at React newbies and hardcore fans. Take full advantage of your remote conference experience and get training from our best speakers and trainers.
The recordings of most workshops will be shared with full ticket holders after the conference.
React+TypeScript+TDD in WebStorm
React is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported. The two together? Not as much. Combine them with test-driven development (TDD)? Harder still.
In this webinar we show a little about a lot. Meaning, the key steps to getting productive, in WebStorm, for React projects using TypeScript. Along the way we’ll show test-driven development and emphasize tips-and-tricks in the IDE to help you stay in the TDD flow.
- - Project Setup
- - Project Cleanup
- - Testing
- - Debugging During Testing with NodeJS
- - Debugging During Testing with Chrome
- - TSX and ES6
- - Functional React Components in TypeScript
- - Functional React Components in TypeScript
- - Sharing Props Using Type Information
- - Class Components With Props
- - Model Class State With TypeScript Interfaces
- - Rich Events and Testing
- - Presentation and Container Components
Some experience with React.
If you don’t have an active WebStorm license, we’ll provide you with it.
Intermediate.
October 12, 17:00-20:00 CEST. The workshop will be recorded.
Rethinking Server State with React Query
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications by surprise like:
- Sharing Data across apps
- Caching & Persistence
- Deduping Requests
- Background Updates
- Managing “Stale” Data
- Pagination & Incremental fetching
- Memory & Garbage Collection
- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features by using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
To get the most out of this workshop, it’s recommended that you understand the basics of the following concepts:
- React Context
- React Hooks
- useState
- useReducer
- useContext
- Basic data fetching with the “fetch” API or similar tools
October 12, 19:00-20:30 CEST. The workshop will be recorded.
Zero to Production with Fullstack GraphQL and React
Hasura is a free and open-source GraphQL Engine that can help supercharge your GraphQL adoption, whether it is for a new application or for an existing one. The workshop will cover:
- A basic introduction to GraphQL
- Using GraphQL to make CRUD operations from a React application
- Setting up access controls to data
- Building real-time components in React using GraphQL Subscriptions
- Wrapping existing REST APIs with GraphQL servers that can be deployed on serverless platforms, and then merging them into a single endpoint using Remote Schemas
- Triggering serverless functions on database events
- In short, we’ll go through how React developers can adopt realtime GraphQL and serverless.
October 13, 18:00-21:00 CEST. The workshop will be recorded.
Migrating to React Hooks
React is continually improving and evolving. React Hooks are a leap forward in how we develop components and manage state in our React applications. Now you can use state and other React features without having to write a class!
Many React developers have switched from classes to React Hooks and are realizing the benefits of understanding their apps better because:
-
Related logic is now located together;
-
Less code is needed compared to the equivalent class;
-
Function components better align with React’s mental model;
-
Hooks are just awesome! 🎉
Do you have a codebase filled with class components? You could leave it that way, but it will become increasingly more “legacy” as time continues to pass by. Why not change now?
Is your team still not developing with React hooks? The longer you stick with the “old way,” the harder it will be to change when you need to. Why not change now?
In this workshop, not only will you learn the ins and outs of React Hooks, but also how to switch to React Hooks from class lifecycle methods, bringing your codebase and your team into the modern React era.
Get ready to…
-
Switch from setState to the useState hook;
-
Make API calls with the useEffect hook instead of the componentDidMount, componentDidUpdate & componentWillUnmount lifecycle class methods;
-
Create custom hooks to reuse and compose logic;
-
Use function closures instead of this & .bind for callbacks and event handlers;
-
…and many other features to help you write modern React code.
You’ll need to have…
-
Prior experience building React applications, specifically using classes;
-
Experience with modern JavaScript syntax and asynchronous patterns like Promise & async/await.
This minishop may not be for you if you…
-
Are still new to React;
-
Already have dabbled with React Hooks.
October 13, 18:00-21:30 CEST. The workshop will not be recorded.
Build Full Featured Frontend App with Svelte
Svelte is a new prominent JS framework exposing “write less do more” philosophy. During this workshop you will get proficiency as a Svelte developer. We will be building a real-time chat UI - participants will be able to follow along and exchange messages. Will start developing from simple front end components, later we'll connect it to a real backend and then test it and optimise for production. Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte.
- - Introduction
- - Why Svelte?
- - Setup the app
- - Create first Components
- - Make App Modular with Routing
- - Connect to Real Data
- - Introduce State Management
- - Add Tests
Installed software – NPM, git, VSCode (or other IDE of choice).
Junior/medior level of frontend knowledge.
October 14, 15:00-18:00 CEST. The workshop will be recorded.
Getting Started with Suspense and Concurrent Rendering in React
React keeps on evolving and making hard things easier for the average developer.
One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the <Suspense />
component makes life much easier.
Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.
You will learn all about using
useTransition()
hook and the
October 14, 18:00-21:00 CEST. The workshop will be recorded.
Automated Tagging System with TensorflowJS
Natural languages play an important role on the web in the form of content and comments. Texts hold information that can be quite hard to extract but can enable you to further automate your website. In this workshop we will use Machine Learning to create an automated text tagging system. With this tool we can suggest tags for the comments/blogs of your visitors on your website.
Experience with JavaScript and NodeJS. NodeJS installed on your laptop. You do not need experience with Machine Learning.
Intermediate/Advanced.
October 14, 18:00-21:00 CEST. The workshop will be recorded.
Getting Started with Suspense and Concurrent Rendering in React (Group 2)
React keeps on evolving and making hard things easier for the average developer.
One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the <Suspense />
component makes life much easier.
Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.
You will learn all about using
useTransition()
hook and the
October 19, 18:00-21:00 CEST. The workshop will be recorded.