React Advanced

React Advanced 2022

This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.

We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.

Understanding React’s Fiber Architecture

Tejas Kumar

React Summit

React Summit 2022

The Workshop focuses on building an open-source project using serverless technologies and React. It covers various topics such as choosing serverless approaches, debugging serverless code, working with databases, and creating a data model. The workshop also explores deploying React apps to a serverless setup, server-side rendering, and static site generation. It discusses the benefits of serverless, the use of Zada as a serverless database, and the concept of edge functions. Overall, the workshop provides a comprehensive overview of working with serverless and React for modern front-end development.

Intro to serverlessPrior Art: Docker, Containers, and KubernetesActivity: Build a Dockerized application and deploy it to a cloud providerAnalysis: What is good/bad about this approach?Why Serverless is Needed/BetterActivity: Build the same application with serverlessAnalysis: What is good/bad about this approach?

Serverless for React Developers

JS Nation

JSNation 2022

This Workshop focuses on building a small blog with a GraphQL backend using SvelteKit for the front end. It covers topics such as reactive programming, props, styling, and file-based routing. The workshop also explores setting up a GraphQL client, fetching data from the backend, and rendering components. It discusses dynamic endpoints, error handling, theme switching, and deploying the site with Vercel.

Want to get familiar with the framework that took the top spot for most loved framework on the Stack Overflow developer survey in 2021?Svelte is a super versatile framework with no virtual dom unlike React and Vue, it's a compiler that builds your projects into vanilla HTML, CSS and JavaScript.This workshop will go over the basics of setting up with SvelteKit and querying data from a GraphQL API and using that data in SvelteKit to retrieve data for use in the client (browser).Key learnings:How to use SvelteKit to build a simple project retrieve data from a GraphQL API and display it in the client. Many of the core concepts of Svelte and SvelteKit will be covered in this workshop.

Building with SvelteKit and GraphQL

Scott Spence

Software containers provide a consistent running experience, making it easy to package code and dependencies. Docker Hub is a repository of existing images that can be used to build containers. The process of creating containers from images and managing them is explained. The usage of Docker files to build images and the concepts of entry point and CMD are discussed. The process of moving files and running code in Python within a container is explained. Finally, the topics of pushing images to Docker Hub, building for different platforms, and networking and running containers are covered.

Software Containers are quickly becoming an essential tool in every developer's toolbelt. They make it easy to share, run, and scale code. In this talk you'll learn how to use Docker to write better, more sharable software. In this workshop Sr. Developer Advocate at Docker, Shy Ruparel, will walk you through getting started with Docker. He'll covers setting up Docker, running your first container, creating a basic web application with Python and Docker, and how to push the Docker Image to DockerHub. He'll share why you'd even want to use containers in the first place and how they enable a developer to write better, more shareable software.

Docker 101 - Intro to Container

Shy Ruparel

Paweł Zawiecki, a software developer, shares his knowledge and practices in software development, focusing on Next.js, Node.js, and GraphQL. The Workshop involves building a social application called Micro Events using Postgres, Nest Shares, TypeORM, and GraphQL. The application utilizes Next.js with TypeScript for the frontend. The Workshop covers topics such as code generation, server-side rendering, entity management, and error handling. It also emphasizes the importance of understanding and working with Apollo Client in different contexts.

How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible. All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL. In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours. If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.

GraphQL - From Zero to Hero in 3 hours

Pawel Sawicki

Detox is a cross-platform framework for writing stable, end-to-end tests for React Native applications. It synchronizes with your application, waits for it to go idle, and prevents tests from failing due to ongoing processes or animations. Detox allows you to write unified tests that work for both iOS and Android, while still supporting platform-specific code. The workshop covers the installation and configuration of Detox, writing tests with Detox using measures, actions, and expectations, and debugging test failures. Test isolation and best practices are also emphasized.

Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications. Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity. Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and <a href="https://github.com/facebook/react-native/blob/9a532edaaf6b80b10ce73eb8815e7f75a8c94bec/package.json#L155">used by React Native itself</a> as its E2E testing tool. Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock. Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- <a href="https://github.com/evgeniyaglovatskaya/detox-workshop/blob/master/Workshop_Cheatsheets/0-START-PROJECT.md">Install before the workshop</a>

Detox 101: How to write stable end-to-end tests for your React Native application

Yevheniia Hlovatska

This Talk provides an introduction to Deno for Node.js developers, highlighting the differences in architecture and dependencies between the two runtimes. It discusses the Deno CLI and integrated toolchain, the Deno standard library and dependency management, as well as the Deno runtime and its core features. The Talk also covers Deno's permission system, its focus on web platform compatibility, and its support for TypeScript. Overall, it provides a comprehensive overview of Deno and its advantages over Node.js.

Deno and Node.js have a lot in common. They are both non-browser JavaScript runtimes built on the V8 engine. Deno and Node.js are also different in a lot of ways: TypeScript, CommonJS, package management, permission systems, tooling, native addons, browser compatibility. This talk will compare and contrast the two runtimes, focusing on what experienced Node.js developers need to know in order to succeed with Deno.

An Introduction to Deno for Node.js Developers

Colin Ihrig

TS Congress

TypeScript Congress 2022

Today's Talk discusses best practices for onboarding React developers to TypeScript, including pain points faced by engineers, principles for effective onboarding, and a workshop format. The workshop covers function type expressions, annotating React functional components, and the return type of React functional components. The session emphasizes creating a safe space for hands-on practice and gradually exposing engineers to TypeScript concepts. Overall, the Talk aims to improve onboarding experiences for React developers learning TypeScript.

Your team has just hired a React Developer to work on your Typescript codebase. Both your team and the new engineer are eager to start building features, but they only have experience writing Javascript. How can you quickly onboard the engineer to Typescript while still providing them with time and space needed to learn the language effectively? In this talk, we’ll discuss why Typescript fundamentals, like function types, interfaces, and generics, can be intimidating for learners. Then, we’ll walk through successful, practical approaches for teaching each of these concepts and relating them back to React. By the end of this talk, you’ll have the building blocks for creating a fruitful onboarding session for your engineers.

Onboarding React Developers to Typescript

Sylvana Santos

GraphQL Galaxy

GraphQL Galaxy 2021

Welcome to the workshop on building and managing GraphQL APIs. Today, we'll be learning about GraphQL, building APIs with Express GraphQL, securing GraphQL endpoints with Tyke, and creating a GraphQL endpoint using Tyke's universal data graph. GraphQL provides flexibility and eliminates overfetching and underfetching of data. We'll explore querying information and mutations, as well as the concept of resolvers. We'll also learn about GraphQL API management with Tyke and the benefits of using Tycloud. Additionally, we'll see how to migrate from existing infrastructure to GraphQL using Tyke's universal data graph.

GraphQL is a query language for APIs that provides a complete and understandable description of the data in your API while giving clients the power to ask for exactly what they need and nothing more. While there are a number of benefits of GraphQL, there are also various challenges to adopting GraphQL APIs within organisations. So, is GraphQL right for you? If so, where do you get started? In this workshop, we will take you through the various concepts of GraphQL in a hands-on manner with the objective of helping the audience understand GraphQL as a technology and evaluate if it is the right choice for their project/organisation. Table of contents: - What is GraphQL - An overview of the technology and why it exists - The REST v/s GraphQL debate - The GraphQL ecosystem - tools and resources - Project setup (React + Express + Tyk) - GraphQL concepts: basic hands-on - GraphQL API management with Tyk - Schema stitching with Tyk Universal Data Graph - Conclusion <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Learning GraphQL: from curious to confident

Buddha Bhattacharya

React Finland

React Finland 2021

In this brief introduction of Nuxt, we will learn Nuxt basics and how to build Git-files based content management system using Nuxt.js and its module system. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Brief introduction to Nuxt

Krutie Patel

React Summit 2020

Welcome to TypeScript plus React equals love. TypeScript features can prevent bugs in React apps. TypeScript gives confidence to remove unused props. TypeScript ensures accurate prop definitions and prevents laziness. TypeScript provides type safety and advanced patterns for better developer experience. TypeScript is a good candidate for projects, especially larger ones.

TypeScript is a JavaScript superset that compiles down to vanilla JavaScript and has become increasingly popular. TypeScript proponents proclaim that it eliminates entire classes of bugs that affect our applications. But what exactly are those bugs? Which ones are particular to building React components and applications? Is TypeScript worth the learning curve?In this session geared towards devs with prior experience building React applications, let’s answer those questions. We’ll walk through the common bugs that infect our apps and learn how the use of strong types with TypeScript can help prevent them. After the session, you’ll be itching to try it out in your next project!

TypeScript + React = ❤️

Ben Ilegbodu

JSNation Live

JSNation Live 2021

This Talk provides insights into web development fundamentals and the challenges faced in React setup. It emphasizes the importance of building a strong foundation with HTML and CSS, and highlights the significance of SEO and accessibility in website development. The Talk also discusses the value of HTML, lists, and simplicity in coding. Overall, it offers practical advice for developers to level up their skills in web development.

Seasoned and beginner alike, developers have a habit of jumping right into a framework or new technology that makes a lot of promises while also glazing over important fundamentals that without, tend to hold back a website or application’s potential. Without some basic knowledge of HTML, you might inadvertently exclude people from learning about your company through your website due to poor accessibility. Lacking an understanding or simply being afraid of CSS, you might be more prone to add unnecessary libraries on top of libraries that just add to the weight of the page, impacting how quickly your app can load. In this talk, we’ll go over some basic HTML and CSS strategies that can immediately be used right alongside of JavaScript including frameworks like React and Vue that will provide another range of benefits like better accessibility, simpler code, and ways you can improve SEO letting search engines like Google more easily figure out what your page is about.

#beginner friendly