LEARN FROM THE BEST TRAINERS IN THE CLOUD

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.

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.

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.

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:

1. Related logic is now located together;

2. Less code is needed compared to the equivalent class;

3. Function components better align with React’s mental model;

4. 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…

1. Switch from setState to the useState hook;

2. Make API calls with the useEffect hook instead of the componentDidMount, componentDidUpdate & componentWillUnmount lifecycle class methods;

3. Create custom hooks to reuse and compose logic;

4. Use function closures instead of this & .bind for callbacks and event handlers;

5. …and many other features to help you write modern React code.

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.

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 , showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable by combining it with concurrent rendering, the useTransition() hook and the component.

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.

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 , showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable by combining it with concurrent rendering, the useTransition() hook and the component.