Byteconf React is a 100% free conference with the best JavaScript and React speakers in the world. Conferences are great, but flights, hotels, and tickets are expensive, so not everyone can go. Byteconf is streamed on Twitch, for free, so anyone and everyone can attend. We’re building a community of developers around the world - see you there?

Byteconf React

There will always be a new JavaScript framework to learn. Technology will continue to evolve and change, and developers will continue to rewrite applications. Wouldn't it be amazing if we could just copy paste 90% of our code from framework to framework?

Well, you can. Reactive programming enables just this AND the ability to future proof your code.

Not only can reactive programming help with your solutions to JavaScript fatigue, but the concepts and technology remain consistent from framework to framework.

Learn how to create a more composable application architecture and an arsenal of lego bricks with RxJS, a push based primitive and domain specific language that sits on top of JavaScript.

With its more declarative syntax and intrinsic portability, learn how to use RxJS in Angular, React, and Vue and what the future holds for for reactive primitives in TC39 and WHATWG.

Reactive Programming: The Solution to JavaScript Fatigue

Looking to learn to code and get that first tech job, start a side project, improve your existing coding skills, master a new programming language/framework, but can’t seem to maintain momentum and motivation longer than a week or just can’t find the time?

In this talk we’ll explore practical tips and techniques of habit formation to achieve consistency and give special attention to the topic of conquering the inner demons of doubt and fear, dealing with stress and frustration. The goal is to achieve consistency of a professional over the motivational ‘seesaw’ of an amateur.

These are the topics we, as programmers, don’t talk about as often as needed and generally don’t take too seriously (since they are not ‘technical’), yet the struggle with the internal Resistance is the day to day life of any creative pursuit. As an example, it doesn’t matter how deeply you know your framework of choice or any computer science topic, if you don’t ever start working on the project you dream of building.

The more we learn to self-reflect and modify our own behaviours and habits, the more control we have over own lives and outcomes.

Applying the science of habit formation to improve coding skills

So many devs join the industry from alternative pathways, and many missed out on a CS education because of it. That's awesome that people are diving in and making great stuff! Let's augment that skill and reach the next level by using what we know to learn some CS from React.

Learning Backwards: Learning CS Through the Lens of React

Have you ever wondered why good performance is so hard to achieve in heavy animated web applications? This talk is a practical retrospective on the discoveries, the pains and the journey that led me to build reliable bulletproof animations and transitions in real life production projects.

Insights from building rich animated experiences in React

Full acceptance test suites that run in the browser are slow, flakey, awkward to write, and hard to maintain. This is the lore that has been handed down to JS developers for generations. But what if that was fiction? What if your UI tests were fast, robust, and a breeze to maintain?

Testing Big with BigTest in React

Functional programming has moved from academic to must-know but with Setoid and Monoid Endofunctors, the barrier to entry is high. This talk dives into the whats and whys of functional programming, and showcasing how to use it to solve real-world problems.

Dr Strangelove: or how I stopped worrying and learned to love higher order functions

With the release of ARKit and ARCore by Apple and Google we see various Augmented reality apps created for iOS and Android. Have you ever wondered how you can create such apps in React Native? In this talk we will see how it can be done fairly easily.

Building AR Apps with React Native

We want to make sure that when we ship new code, our users can use the application. The best way we've found to do that is to write automated tests that run before we deploy a new version of the app. But if our tests aren't doing exactly what the user will do, then how do we really know that things will work when users interact with our apps?

Let's rethink what it means to ship applications with confidence and what it takes to get there. With improved tools and practices, we can be more certain that what we're shipping to our users will work the way it's intended.

Confident React

2018

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. 

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.