Byteconf React is a 100% free single-day conference with the best React speakers and teachers in the world. Conferences are great, but flights, hotels, and tickets are expensive, so not everyone can go. 

Byteconf is streamed on YouTube, for free, so anyone and everyone can attend. 

Byteconf React

Discover React patterns that allow you to promote code reuse without sacrificing the simplicity or flexibility of a component.

One of the things I love about React is how easy it is to encapsulate UI code into a component or hook. I love this because it makes reuse of those things easy. But is it easy? I've made my fair share of components that had to accept a bunch of props to handle a growing list of different use cases resulting in a complex render function full of conditional statements and a confusing API for people using this "reusable" component. 

Eventually it becomes too much and I had to make a new version of the same component to handle slightly different use cases. Lots of code/bug duplication there because my reusable component wasn't reusable enough.

There are patterns that have emerged in React that allow you to promote code reuse without sacrificing the simplicity or flexibility of the component. In this talk we'll go over several of these patterns that will make your React components and hooks more useful.

Simply React

Building performant React apps is hard. See how Next.js can help you.

Building performing React apps is hard. Like really hard. You have to know how to setup webpack, Babel, code-splitting, TypeScript, and the list goes on. What about performance, eh? How about building SSR + SSG + Serverless + Offline enabled applications?

In 2020, when building React web applications, my default choice is Next.js. It offers built-in performance, route prefetching, dynamic imports with code splitting, and probably the best server-side rendering experience — all of that with a no config setup.

By the end of this talk, you'll be a lot less scared of creating high-performance web applications that are scalable with both static and dynamic serverless components.

Performant by Default, React Web Apps in 2020

A friendly introduction to Serverless computing around the MongoDB ecosystem for rapid application building. 

Do you want to crank out features the business wants, or spend a lot of time writing code and capacity planning for authentication, authorization, and complicated data access? Of course we all know the answer.

In this session we'll begin a beginner friendly introduction to Serverless computing. We will then do a quick overview of the MongoDB ecosystem in the 3 major cloud providers for rapid application building. Then we will walk through a guided tutorial of how to use the MongoDB Stitch serverless platform to build your elastically scalable microservices based app within minutes, complete with end-user authentication and access rules, on a fully managed MongoDB cluster in your favorite cloud platform.

A Gentle Introduction to Building Serverless Apps

I'm going to openly share some of the mistakes I made and I see other beginners are making when they decide to learn how to code.

This talk has two goals:

I'm going to openly share some of the mistakes I made and I see other beginners are making when they decide to learn how to code. (To avoid them/stop making them). This talk will be given from the point of view of someone who has been learning front-end development for over a year.

To show that you don’t need to be an expert in your field to share what you’ve learned with the developer community

Beginner Pitfalls: My Personal Journey

A component library can result in faster and easier development, improved design and UX, and so much more.

The task of building a component library from scratch can feel intimidating. But, if you’re willing to put in the upfront time & effort, it can result in faster and easier development, improved design and UX, and so much more. 

If you’re considering implementing a component library, but not sure where to start, this high-level guide will walk you through the steps we took at Herrmann to create our much-beloved component library, Myelin (and help you avoid our mistakes).

Creating a Component Library

Learn basic HTML and CSS strategies that can immediately be used right along side of your favorite JavaScript framework that will provide a range of benefits.

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 along side of your favorite Javascript frameworks like React that will provide another range of benefits like better accessibility, simpler code, and ways you can improve SEO by letting search engines like Google more easily figure out what your page is about.

Put Down the Javascript: Level Up with the Fundamentals of Web Development

Learn how to add dynamic functionality like email, text messaging, interacting with a data source, etc. to your static site using serverless functions.

Static sites are growing in popularity, but many developers still question just how powerful they can be. As it turns out, there is an entire ecosystem of added functionality in the form of serverless functions.

In this talk, learn how to add dynamic functionality like email, text messaging, interacting with a data source, etc. to your static site using serverless functions. We will integrate and deploy a working demo that you, the audience, get to participate in. In this interactive talk, you'll learn that by using the right tools, there’s almost nothing you can’t do.

Static Sites and Serverless Functions - A Dynamic Combination

Developers often find themselves in a teaching role (mentoring, blogging, speaking, etc). Learn how to teach code, effectively.

Programmers are constantly learning new technologies, especially in the rapidly evolving frontend ecosystem. As a result, developers often find themselves in a teaching role -- whether that means mentoring a colleague, writing blog posts, speaking at meetups, or even teaching more formally at a college or bootcamp.

So, how can you teach code more effectively? We'll go over strategies for breaking down information, explaining concepts without jargon, using relevant examples, and engaging learners so that you can be more effective the next time you are in a teaching position.

Those Who Can Do Should Also Teach

In this talk, we’ll create an effective mental model of Concurrent React by building a tiny clone of React!

In this talk, we’ll create an effective mental model of Concurrent React by building a tiny clone of React! We will start with a blank js file and learn about how React renders components, schedules Time-Slicing updates with a Work Loop, add Hooks, and end off with a mini-clone of Suspense!

Concurrent React from Scratch

Learn how to think like a good Software Architect while being a developer, and make solid decisions.

As the title of the talk suggests, we are going to focus on building 'scalable' web applications using our most loved framework ReactJS. You might be a bit fascinated by the title that why I chose this one?

Yeah. You are right. But there's a problem which you might have faced as well. Did you notice that when you started in ReactJS you were always unclear whether to use CRA or Webpack for initial configuration? Which library you should choose for State Management? Which package to pick up for routing? Do you need middle-ware or not?

These are all questions which every new or even intermediate developer has and has never got clear answers or may be a strong opinion for any of these.

This talk focuses on that part of your thought process. How to think like a good Software Architect while being a developer? How to be more better at making solid decisions?

Building Scalable Web Applications with React

Learn how to identify when accessibility is broken, and how to fix it.

UI frameworks/libs are very good for the developer experience. We as developers are focusing on and achieving the checklist of the best web application:

- Code architecture
- Clean code
- performance & best of everything (almost)

But we are forgetting the accessibility. When was the last time you or your testing team tested against the accessibility and raised the issues? In this talk, I will take you through a non-accessible react site and will do the following:

- How to know accessibility is broken
- How to debug it (& you can advocate your testing team)
- How to fix the issues
- Tips for making sure accessible components/app is getting created
- Tools
- Trade-offs

Adding the accessibility in your React Apps

Gatsby rose to fame as a static site generator, but it’s also an amazing platform for building dynamic sites! Wouldn’t it be awesome if we could add a user profile with access to protected data in our Gatsby app?

Gatsby rose to fame as a static site generator, but it’s also an amazing platform for building dynamic sites! Wouldn’t it be awesome if we could add a user profile with access to protected data in our Gatsby app? Like Mario’s fire flower or Link’s hook shot, adding auth will power up your dynamic Gatsby site. Just one question: is it any different than adding auth to a regular React app?

In this talk, you’ll learn about Gatsby’s build process and runtime and how they impact setting up auth. You’ll also learn how to use Hooks and Context to build your auth sidekick. Finally, you’ll learn some tips and tricks to avoid common pitfalls with adding auth to Gatsby. By the end, you’ll be ready for the next level of your Gatsby quest!

Power Up Gatsby with Auth!

We’re going to build a simple game of “tic-tac-toe” with React, and see the pitfalls of lifting state—and when O(1) can still be slow.

Have you heard about “lifting state up”? Is it possible that one of the 12 main concepts listed in React official documentation might lead to poor performance? We’re going to build a simple game of “tic-tac-toe” with React. We will see which pitfalls it hides and when O(1) can still be slow.

Lifting state up is killing your app

Same company, lots of teams, different technologies, developers battling outdated dependencies and copying scripts and configuration files all over multiple projects? Does this sound familiar to you?

Same company, lots of teams, different technologies, developers battling outdated dependencies and copying scripts and configuration files all over multiple projects? Does this sound familiar to you?

At Omio, we solved this problem by building a development framework that helps all teams bootstrap and maintaining their projects. It provides a CLI to wrap up all the application lifecycle actions: create, development, testing, release, etc. Allowing teams to worry only about shipping features instead of struggling with configurations.

I’m really excited about our solution and in this talk I’ll cover the process of developing this framework, explaining its architecture and main concepts, followed by a demo of a sample project showcasing some real use cases such as visual testing, Storybook for web, React Native, etc.

From create-react-app to create-any-app

React is a UI library. But what if one day it could become a framework?

React is a UI library. But what if one day it could become a framework?

In this talk we're going to explore different packages and tools to combine and create our ideal React framework. To make our work tidy and polished let’s include a good state management as well as full Typescript support. Bonus track: overview of some IDE plugins that makes React development more productive and a bit more relaxed too.

React Bandersnatch experiment: getting close to a real framework

Make Gatsby's "fast in every way that matters" a reality with this collection of 5 quick actions to speed up a Gatsby website, featuring real-world examples, Lighthouse scores and links to code.

Byteconf React 2020

May 1 - May 2 | Online