Unlock the Power of DivOps Engineering with Ben Ilegbodu and Jonathan Creamer

As web application architecture continues to evolve, the role of frontend engineers has expanded beyond `src/`. The need to enhance the developer experience and ensure project health has given rise to a new era of responsibilities for frontend developers. While these tasks may not involve building UI features directly, they encompass critical areas such as app configurations, build scripts, CI/CD maintenance, and more. But what should we call this disciple? Is it Frontend Platform? Frontend Infra? Frontend... DevOps?

This session introduces "DivOps," the fusion of Frontend and DevOps. Designed for web app developers of all levels, this talk deep dives into all the responsibilities of DivOps engineering and its major impact on our development environments, testing procedures, CI/CD workflows, and beyond. Through real-world examples and insights, you will gain a deeper understanding of the qualities that make a successful DivOps engineer and realize that you're likely one too.

"DivOps" Engineering: Unveiling the fusion of Frontend and DevOps

CSR. SSG. SSR. ISR. These acronyms may seem similar, but they represent different rendering methods for React applications. In the past, we had to commit to a single rendering approach for the entire app, but with Next.js, we have the flexibility to choose the optimal rendering type for each page. This hybrid approach aligns closely with the unique needs of our applications. Imagine a landing page with static content that updates only when the code changes, a universally consistent page that undergoes frequent changes, and a personalized logged-in page with content tailored to each user—all rendered differently within a single application.

This session is designed for React developers of all backgrounds. We'll explore the various types of rendering methods and deep dive into how Next.js empowers us to leverage them effectively. By the end of this talk, you'll not only gain a comprehensive understanding of these different rendering methods but also have the confidence to make informed decisions that maximize the potential of your React applications.

50 shades of React rendering with Next.js

When we “view source” our modern web applications, the code looks nothing like what we originally wrote. At a minimum, it's gone through linting, transpilation, obfuscation, minification, and bundling. And in order to build our beautifully designed apps with sophisticated interactions, we leverage the latest features in HTML, CSS and JavaScript available in our modern evergreen browsers.

However, when web development was in its infancy two decades ago, things were drastically different. Sites had hit counters, used frames for navigation, and were updated manually via FTP. We used the blink tag and scrolling marquees! Let's take a walk down memory lane (or have a history lesson) and have some laughs cringing at how sites looked, how they were built, and the rudimentary tooling we had to develop them.

Let's web dev like it's 1999!

React’s component-driven design simplifies reusing UI because chunks of markup can be encapsulated into custom components. Likewise, sharing traditional data utilities is straightforward because React is “Just JavaScript”™. But what about sharing non-visual component logic like state shape and lifecycle methods? React has had several approaches over its lifetime to solve this problem: mixins, higher-order components (HOCs), render props, and now hooks, each with their pros and cons.

In this session geared towards current React developers, let’s take a history lesson on sharing in React in order to better understand how modern-day custom hooks work and the problems they solve. By the end, not only will we know how hooks function, but we’ll also be equipped to pull out non-visual component logic into easily shareable custom hooks in our apps.

From Mixins to Custom Hooks: History of sharing in React

State of React

Enzyme has been a popular JavaScript library for testing React components since its initial release in 2015. But it relies on React internals in order to provide its easy-to-use API. Unfortunately for Enzyme, the much-anticipated React 18 included a wholesale rewrite of these internals in order to support concurrent functionality and other future features. Because supporting React 18 would require an entire team to rewrite all of Enzyme, it is (un-)officially end-of-life. Enzyme tests for a React application that upgrades to React 18 will no longer work because React 18 support isn't coming.

In this session geared towards developers with Enzyme tests, let's learn how to migrate these tests over to React Testing Library. We'll walk through common testing patterns we've used in Enzyme and how they translate to React Testing Library. By the end, not only will we have examples of how to transition our React tests over to a more modern alternative, but we'll also have learned RTL best practices to ensure our tests mimic how our users use our application.

Migrating from Enzyme to React Testing Library

React Contributor Days

So you have a great idea for the perfect JS library... but the implementation is only half the battle. You also need to configure the infrastructure to develop, test, build and deploy your package. How do you set up Typescript and other static checking? Do you target ESM or CJS builds? Is integration testing even possible? There’s so much extra to consider!

Let’s learn what makes up the “perfect” library tooling. Familiarity with developing JavaScript packages will help you get the most out of this session, but you will gain plenty of helpful insights even if you have yet to build one. Oh, and don’t worry if you don’t understand all of those terms — you soon will after this session!

The "perfect" library tooling

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 = ❤️

Power up React with TypeScript

JDHH with special guest Ben Ilegbodu

#BlackLivesMatter #MetaTalk w/ Pariss & Ben

React has exploded in popularity. But it’s only a UI library, not a full-fledged framework like Angular, Ember or _\[insert latest JS framework\]_. We need to create our own “framework” by picking from the plethora of libraries in the React ecosystem. But which ones should we choose? Or better yet, which ones do we actually need? Do we need still a Flux implementation? What about handling forms, bundling and routing? How does it all come together?!1?!

Let’s walk through the tools and helper libraries that surround React. You’ll get the most out of the session with familiarity with React and its concepts, but you don’t need to be an expert. By the end of the session, you’ll have a solid understanding of the ecosystem, know which libraries you should prioritize learning first, and confidently build your own React-based stack.

Navigating the React Ecosystem

Ask Me Anything! - Build your own React-based stack

React's sophisticated reconciler (aka the “Virtual DOM”) makes updates to the UI feel fast because it optimizes interactions with the DOM. As a result, we no longer have to worry about how to transition our UI from one state to the next. However, the reconciler is not a silver bullet; even the new Fiber Reconciler. Our React apps can still get sluggish, especially as they grow in size and data. Let's discuss some causes for slow-downs and tools to diagnose problems so that we can speed up our apps.

Help! My React app is slowwwww! 🐢

JavaScript is evolving quickly. The mega ES6 specification was released back in 2015, with ES2016 and ES2017 coming in following years. New versions of ECMAScript are now released on a yearly basis with new features going through a 4-stage proposal process. But with build tooling like Babel, we can leverage functionality slated for future versions right now to write even clearer and more concise JavaScript code.

Familiarity with modern JavaScript features will help you get the most of this session where we'll discuss class properties, null property accessing, and more. Oh, and don't worry if you don't understand all of those terms — you soon will after this session!

ES.next features that'll make ya 💃🕺🏾

As the Frontend Platform team at Eventbrite switched from Backbone/Marionette over to React, it had to convince other developers, managers, directors, and non-engineers that React was the right path. And the rationale for moving wasn't just because React is insanely popular. There are many tangible benefits that make the effort of migrating worthwhile.

New to React and want to learn a little about how it works? Seeking ammunition to convince your team to make the change? Come learn about _why_ we made the decision to transition to React, through an introduction of _how_ to build user interactions with React.

Why choose React?

React is a JavaScript UI library that makes creating reusable components easy and efficient. In this workshop, we'll cover the critical concepts of React via a series of targeted exercises. We'll learn how to:

- Write readable, reusable and composable components
- Use JSX syntax
- Work with the Virtual DOM
- Handle user interactions and synthetic events
- Leverage ES6 to maintain application state
- Make API calls
- Apply component styling
- Hook into the component lifecycle
- And more...

Prior experience with React is not necessary, but experience with building JavaScript applications will be helpful to hit the ground running. You'll leave the workshop with all the fundamentals you need to build your own apps with React.

React FUNdamentals Workshop

Fiber was introduced in version 16 of React. It is a ground-up rewrite of the React scheduler, typically mis-referred to as the “Virtual DOM.” The Fiber-based scheduler supports “cooperative scheduling” and allows for other output renderers besides the browser DOM. In this session geared towards those familiar with React, let's learn about what React Fiber is and why it exists through the lens of how it will impact your React development and the performance of your apps at runtime.

React Fiber for the rest of us

React is JavaScript library for building user interfaces that has taken the web development industry by storm. Its declarative syntax and DOM abstraction for components not only make client-side development simple, but also enables server-side rendering of those same components, which enables improved SEO and initial browser load time. But how do you render JavaScript React components server-side if your backend doesn't run on Node? Learn how Eventbrite successfully integrated React with their Python/Django backend so that you can do the same in yours.

Isomorphic React sans Node?? 🤔

JavaScript is evolving quickly. The ES6 specification was released back in 2015 and has been implemented by modern browsers. New versions of ECMAScript will now be released on a yearly basis. We can leverage ES6 and functionality slated for future versions right now to write even clearer and more concise React code.

Experience with React will help you get the most out of this session, but you don't have to have a JavaScript black belt to leave feeling confident in using ES.next with React. Learn how to write cleaner code using the new spread operator, classes, modules, destructuring, and other tasty syntactic sugar features being introduced into ECMAScript. Oh, and don't worry if you don't understand all of those terms — you soon will after this session!

React + ES.next = ♥

React just exploded in popularity. But it's only a UI library, not a full-fledged framework like Angular, Ember or _\[insert latest JS framework\]_. We need to create our own "framework" by picking from the plethora of libraries in the React solar system. But which ones should we choose? Or better yet, which ones do we actually need? Do we need a Flux implementation? What about handling ES6+, bundling and routing? How does it all come together?!1?!

Let's walk through the tools and helper libraries that surround React. You'll get the most out of the session with familiarity with React and its concepts, but you don't need to be an expert. By the end of the session, you'll have a solid understanding of the ecosystem, know which libraries you should prioritize learning first, and confidently build your own React-based stack.

Navigating the React Solar System

React's seemingly "magical" features make developing sophisticated web UIs easy by doing so much heavy lifting for us. Unfortunately, without knowing how certain parts of the "magic" work, we run into confusing React warnings/errors.

Why can't we have "if blocks" in our JSX code? Why do we need to wrap multiple sibling components in a container component? Why do we need to include a "key" attribute on components that are in an array?

In this session geared towards those familiar with React, let's answer these questions by digging deeper into JSX syntax, virtual DOM diffing and other "magical" features. Not only will we be able to prevent errors with a clearer understanding of the "magic," but we can potentially boost rendering performance as well.

React Exposed! 😮

Evolution of Javascript IV

We have been using JavaScript toolkits like jQuery for nearly a decade to make manipulating the DOM easier as we create our highly-interactive web apps. New features in HTML5 & CSS3 should've made old development strategies obsolete, and yet we're still using jQuery to do things better suited for HTML5 & CSS3. Why? Well, old habits die hard.

In this session, let's look at ways we used to build interactivity in JavaScript and see how we can transform them into more optimal solutions using plain old HTML and CSS. We'll discuss CSS3 transitions & animations, new HTML5 attributes, and other "tricks" to offload JavaScript functionality to the browser's rendering engine for more performant web applications. Whether you're a seasoned JavaScripter or just getting started, you'll leave the session with fresh ideas to work with.

You don't need JavaScript for that!

ECMAScript 6 is the new version of JavaScript and is already available in the engines of our modern browsers and servers. Many of its features are just a little syntactic sugar to help make our JavaScript code clearer and more concise. Experience with JavaScript will help you get the most out of this session, but you don't have to have a JavaScript black belt to leave feeling confident in ES6.

Learn how to write cleaner code using arrow functions, destructuring, rest parameters, and other sweet ES6 features. Oh, and don't worry if you didn't understand any of those terms — you soon will after this session.

Sweet ES6

ECMAScript 6 is the new version of JavaScript making its way into the engines of our modern browsers and servers. Some of its features appear to be no more than a little syntax sugar — making development we already do in JavaScript a bit easier. Others add brand new functionality long missing in JavaScript, which allow us to spice up our code without having to include yet another library.

Experience with JavaScript will help you get the most out of this session, but you don't have to be a JS ninja to leave confident to begin using ES6 right now. Let's walk through all the sugar and spice of ES6 and what makes it just so nice for code readability. Along the way, you'll learn about arrow functions, destructuring, rest parameters, and other features. We'll also see strategies for how we can circumvent that pesky issue of cross-browser compatibility. Oh, and don't worry if you didn't understand any of those terms — you will after the session.

Unlock the Power of DivOps Engineering with Ben Ilegbodu and Jonathan Creamer

The Modern Web Podcast

"DivOps" Engineering: Unveiling the fusion of Frontend and DevOps

Connect.Tech 2023

50 shades of React rendering with Next.js

All Things Open 2023

50 shades of React rendering with Next.js

SeattleJS Conf 2023

Let's web dev like it's 1999!

HalfStack Charlotte 2023

From Mixins to Custom Hooks: History of sharing in React

Houston React Developers

State of React

Global React Meetup April 2022

Migrating from Enzyme to React Testing Library

React Miami 2022

React Contributor Days

Global React Meetup September 2021

The "perfect" library tooling

Open Source 101 2021

From Mixins to Custom Hooks: History of sharing in React

Global React Meetup November 2020

The "perfect" library tooling

All Things Open 2020

TypeScript + React = ❤️

React Summit 2020

TypeScript + React = ❤️

TSConf 2020

Power up React with TypeScript

Learn With Jason

JDHH with special guest Ben Ilegbodu

Junior Developer Happy Hour July 2020

#BlackLivesMatter #MetaTalk w/ Pariss & Ben

Reactive Online Meetup

The "perfect" library tooling

JSConf Hawai'i 2020

Navigating the React Ecosystem

NationJS Frontrunners React 2019

Navigating the React Ecosystem

All Things Open 2019

Let's web dev like it's 1999!

CSS Conf EU 2019

Navigating the React Ecosystem

Reactathon 2019

Navigating the React Ecosystem

React Next 2018

Ask Me Anything! - Build your own React-based stack

NDC Sydney 2018

Help! My React app is slowwwww! 🐢

React Alicante 2018

Let's web dev like it's 1999!

NEJS 2018

ES.next features that'll make ya 💃🕺🏾

Node Summit 2018

Why choose React?

Reactathon 2018

React FUNdamentals Workshop

Sabio LA 2018

React Fiber for the rest of us

React Rally 2017

Isomorphic React sans Node?? 🤔

Node Summit 2017

React + ES.next = ♥

Chain React 2017

Navigating the React Solar System

Modern Web Meetup May 2017

Isomorphic React sans Node?? 🤔

Render Conference 2017

React + ES.next = ♥

React Conf 2017

React Exposed! 😮

Forward JS 2017

React + ES.next = ♥

BuzzJS 2.0 2017

Isomorphic React sans Node?? 🤔

Real World React 2016

Evolution of Javascript IV

NodeSummit 2016

React + ES.next = ♥

Front Porch Austin 2016