RenderATL is the first major React conference in the Southern United States. Conceived by a team of passionate React engineers who're looking to help drive more diversity, inclusion, and, accessibility into the React ecosystem.

With these goals in mind, what better place to hold the conference than the South's very own melting pot – Atlanta!

The South's got something to say. Will you be a part of it?

RenderATL

2021

JAMstack Conf is a two day celebration of the next generation of web apps, where the JAMstack community and ecosystem comes together to learn, connect and create. 

Attendees range from front end and full stack engineers to web agencies all ready to push the boundaries of tomorrow’s web architecture.

JAMstack Conf

2020 San Francisco

Up your game and network

Join us for a whole day of React(Native), tech conference and networking at the incredible Brooklyn Bowl. React Day New York is for sharing the latest techniques, best practices and to grow your network.

This is an intimate React Day with only 300 available tickets.

React Day New York

2020

Reactathon is where the world's leading front-end developers converge. Key events include an evening reception with Keynotes, Lightning Talks, and Topic Tables, plus a full day of technical talks on all things React. 

The conference fosters a welcoming, safe, inclusive atmosphere that facilitates and encourages discussion among attendees, speakers, and sponsors, to exchange knowledge and forge new relationships, while strengthening existing ones.

Join us to connect with and learn from some of the brightest minds and best speakers in the JS/React community, and participate in the workshops to dive deeper on a specific subject.

Reactathon

JSConf Hawaiʻi is the newest in the family of JSConf events. For our second year, we're planning to bring about 400 people together for a three-day single track conference. Our goal is that by the time you leave, you'll have seen some new ideas, learned some more JavaScript, and made new friends to keep in touch with.

The small, single-track nature of the conference means that it's easy to figure out what to do! We'll have lots of time to meet your fellow attendees and share ideas outside of the sessions.

JSConf Hawaiʻi

Learn the benefits of introducing cultural and thought diversity into an organization, along with core concepts that can lead to positive contributions in the tech space.

Diversity, in both small and large tech companies, is now understood as a critical component to innovation. In the same way individual generalists are able to make connections across disciplines, members of a diverse team contribute perspectives that would have otherwise been unknown. This is perhaps what Steve Jobs was referencing to when he eloquently recited “Think Different”. This talk uses my experiences as a Native Hawaiian programmer and designer working at Twitch as a launching point to discuss the benefits of introducing cultural and thought diversity into an organization.

This talk will also discuss core concepts I’ve learned from a Hawaiian upbringing that I believe can lead to positive contributions in the tech space, such as the benefits of being kolohe(having a rebellious nature), encouraging ‘imi ‘ike(the pursuit of knowledge), the complementary forces of a‘o aku and a‘o mai(to learn and to teach), committing to aloha(in part the generous spirit of giving without expecting), favoring laulima(group cooperation) over personal gain, the practice aloha ‘aina(the love of one’s environment) and more.

The power to think like a Native Hawaiian in tech

Learn how to build a simple gesture recognition system using JavaScript, Arduino and Machine learning.

Most of our interactions with technology aren’t really intuitive. We’ve had to adapt to it by learning to type, swipe, execute specific voice commands, etc… but what if we could train technology to adapt to us?

Programming for hardware in JavaScript has already been made accessible with frameworks like Johnny- five, but, combining it with machine learning, we have the opportunity to create new and smarter interactions.

In this presentation, I will talk about how to build a simple gesture recognition system using JavaScript, Arduino and Machine learning.

Strike a Pose: Gesture Recognition in JS with Machine Learning

Take a deep look at the principles of framework design and how we can apply them to build better software.

Building frameworks is fun. And even if your project is using one of the awesome open-source frameworks, it might at some point reach the point where you need just a little bit more software infrastructure then you find on npm: Things may start with a custom build script and end with your own full blown framework.

But building frameworks is also difficult. And many folks might have read the first paragraph thinking “That is us, but I wish we had something clean, stable and most importantly standard instead”.

In this sequel to the popular “Designing very large (JavaScript) applications” talk, we’ll take a deep look at the principles of framework design and how we can apply them to build better software. We’ll look at how to go about designing a framework, how to ensure that developers like it, and how to make sure that systems get into a clean and stable state as quickly as possible.

Designing Even Larger (JavaScript) Applications

Learn how to build a search query parser, in JavaScript. Starting with the building blocks of all languages and what a parser is, to a practical implementation.

Have you ever wondered how your code goes from being characters in a file to something that the computer can "understand" and do something with? A key part of this is the parser. 

In this talk, we’ll look at building a search query parser (all in JavaScript, of course). On this journey, we’ll first take a step back and learn about the building blocks of all languages, from letters to grammars, and how they represent meaning. 

Then, we’ll talk about what a parser is and does and why we might want one for our task. With this new knowledge, we’ll dive into building the parser, from tokenizing to building a data structure that represents the query and lets us build a UI around it.

Parsing Parsers

How do you set up Typescript and other static checking? Do you target ESM or CJS builds? Is integration testing even possible?

So you have a great idea for the perfect JS library... but the implementation is only half the battle. You also need to configure 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 video!

The "Perfect" Library Tooling

Is your first thought when thinking about cryptography, “nope, that’s not for me!”? This talk explains the basics of encryption and hashing through simple examples.

Is your first thought when thinking about cryptography, “nope, that’s not for me!”? There’s no need to. When explained with simple examples, you can see the basics are not that complicated. The Javascript Object Signing and Encryption, or JOSE for short is a framework that helps us deal with encryption. It describes ways to securely transfer data either signed (JWS) or encrypted (JWE). Let’s take a leap of faith and explore the wonderful world of cryptography together, shall we?

In this talk, I will try to explain the basics of encryption and hashing through simple examples. We’ll look into how the JOSE standard can help us with encrypted content on the web using JSON Web Encryption (JWE) and JSON Web Keys (JWK). The audience does not need any specific knowledge about cryptography as this talk will go through the basics. Some JavaScript knowledge can be useful but not necessary as code examples will be simple and explained.

Why? The times when websites were just simple pieces of information is long gone. These days the web handles more sensitive data than ever before. To securely handle this data, we sometimes need to hash, encrypt or sign it. Sure there are a million tools, libraries and pieces of software that handle this for you, but knowing the basics can certainly come in handy!

No Way, JOSE

Take a journey into the Web MIDI api where the possibilities of the web aren’t just at your keyboard fingertips anymore, they’re literally any MIDI compatible controller you have connected!

Who loves pushing buttons? You? And you over there? And the person behind you? Oh wait, everyone loves it?!!? Of course they do, a button is irresistible. Now… what if I told you that you could hook up a LOT of buttons to your computer… and use it to do wild things with the web?

I’m glad you’re listening! Let’s take a journey into the Web MIDI api where the possibilities of the web aren’t just at your keyboard fingertips anymore, they’re literally any MIDI compatible controller you have connected! Want to make glitchy audio responsive visuals with WebGL shaders? Rad, we can do that. Want to create custom beats and have those input as a drum machine? No problem when you throw a little Web Audio API in the mix. Let’s dive in and find out how!

Look What You MIDI Me Do!

GitLab doesn't have any offices. How do they do it?

The one question I'm asked more than any other when talking about working at GitLab is: wait, you don't have any offices? That is often followed by a confused look or the direct question: How?

Writing down decisions, asynchronous communication, measuring results, not hours. Companies often aspire to these goals...however in an all-remote company, they aren't aspirational - they are requirements. GitLab has grown from 9 people in 2014 to over 900 people in 55 different countries with a valuation of almost $3 billion.

In this talk, we'll discover some of the not-so-secret sauce that GitLab has leveraged to achieve this growth. On this journey, our values have remained the same. We value collaboration, results, efficiency, diversity & inclusion, iteration, and transparency. And we've done all that without having any office, headquarters, or anything that looks like one.

The Asynchronous Enterprise

Variable Fonts allow typography on the web to adapt to the flexible nature of screens, environments and devices.

Variable Fonts allow typography on the web to adapt to the flexible nature of screens, environments and devices.

We can use variable fonts with pre-existing technologies to improve the performance, design, accessibility and usability of our websites. We can start to design our typography to adjust to various inputs, situations or events using Media Queries, JS events and the Sensor or Audio Apis. This will allow us to modify our fonts to aid in storytelling, achieve improved readability and legibility in different situations, environments or on larger or smaller screens.

Let’s explore new and exciting creative opportunities for storytelling, design and expression in ways standard fonts could never provide us. This is just the beginning of our journey to discover what we can do with variable fonts.

Very Responsive Typography with Variable Fonts

Many companies often only dedicate the time and effort to create SOME accessibility. What they choose to make accessible doesn’t always reflect what users want or need.

The sad truth is that even companies that wish to have accessible websites often only dedicate the time and effort to create SOME accessibility. What they choose to make accessible is often based on what a handful of people, often abled bodied ones, decide, and doesn’t always reflect what users want or need.

Using a series of surveys and discussions with other disabled people, I have synthesized suggestions and examples of what makes the most impact for many users or gigantic impacts on usage for smaller groups.We'll go over the look, feel, and functionality of websites and some basic design changes that can be used to great benefit.

Impactful Accessibility: The Changes that Mean the Most

Inclusion doesn't just happen. It has to be intentionally and continuously cultivated. Learn the ways we can all be responsible for building communities with an inclusion-first mindset.

Inclusion doesn't just happen. It has to be intentionally and continuously cultivated. In this session, we'll discuss the ways we can all be responsible for building communities with an inclusion-first mindset. I'll describe my lessons learned and walk through a framework for optimizing for inclusion.

A Seat at the Table: Building Inclusive Ecosystems

See examples of magical thinking as a design methodology for technological innovations.

This session present several examples of magical thinking as a design methodology for technological innovations.

Did you know that hackers and shamans have a lot in common? What does the practice of Santeria can teach us about digital security? Did you know that there's an android in a temple in Kyoto teaching Buddhism? Which elements of ancestral knowledge can we borrow in order to design solutions for migrants and refugees?

We will review the answers to these questions and will elaborate on the potential of magical thinking as a fundamental resource for innovation. "Magic is the mother of technology" said Peter Sloterdijk, thus we definitely shouldn't be afraid of combining this two realms in order to promote scientific innovation to its maximum potential.

I've been doing this research thanks to several sources of funding, mostly through my Mozilla fellowship and other sponsors I had in the last two years. Therefore, specific parts of this session have been presented in conferences such as HOPE in New York City and the Internet Freedom Festival in Valencia, Spain. JSConf Hawaii will be the first time in which my research on digital witchcraft will be publicly presented as a finalized product.

Digital Witchcraft: Magical Thinking for Digital Design

How to make sure a design system specifies design choices and allows users to build quickly, but doesn't lock you into specific frameworks or trendy tools out of the gate.

"Design Systems" and component libraries are a popular solution for abstracting common UI elements and flows to be reusable across many applications.They allow you to spend more time on the details, and reduce the complexity of implementing consistent experiences.There's a good chance that you're using one already!

Scaling these systems to provide value to *lots* of teams across your organization, or in open - source - land, requires solving for each team's different use-cases simultaneously. How do you add in support for internationalization, accessibility, theming (dark mode!), server rendering, or multiple render targets? How do you support the teams that need it in React *and* the teams that need it in Svelte? How do you provide a system that is flexible enough, but doesn't become prohibitively complex? How can you export your components to popular design tools for your designers to build with?

Let's dive into approaches to solving these problems in scalable ways, and take a look at how Stripe has chosen to tackle some of these issues in the real world. Let's look at how to make sure a design system specifies design choices and allows users to build quickly, but doesn't lock you into specific frameworks or trendy tools out of the gate.

Advanced Design System Considerations

It can be hard for developers to keep up with the newest trends and frameworks. What if you could use machine learning to help you keep up with all of the changes? 

The world of UI/UX is changing every month. It can be hard for developers to keep up with the newest trends and frameworks because of all the responsibilities they have. What if you could use machine learning to help you keep up with all of the changes? While it’s far from taking all of the programming jobs, machine learning can help developers make more user-friendly web applications. With the use of Brain.js, you can do text prediction, make small layout changes, check for malicious users, and more.

In this talk, attendees will learn some background on machine learning and algorithms and see examples of where Brain.js can be used in real applications. We’ll cover business cases in web development where machine learning can help, how neural networks work, and how JavaScript can be used to train a model and make real-time updates for users. By the end of the talk, attendees should have a good understanding of basic machine learning concepts and an idea of how they could get started with Brain.js.

Using Machine Learning to Improve UI/UX

Visual validation is a relatively new concept that can be used to enhance existing automated tests and provide an easy way to perform those difficult checks for things like UX, localization, usability, responsive design, and cross-device testing.

Automation has come a long way in assisting with regression testing efforts. Teams worldwide are successfully running hundreds of functional regression tests at every check-in. While this provides a great source of confidence, critical regression bugs are still missed using this approach. That’s because these tests can only assert on what their human programmer asks them to. Additional errors with functionality, UX, and usability often go uncaught using today’s most common test automation techniques.

For this reason, the top companies in all sectors of the industry are turning to visual validation. Visual validation is a relatively new concept that can be used to enhance existing automated tests and provide an easy way to perform those difficult checks for things like UX, localization, usability, responsive design, and cross-device testing.

In this talk, you’ll learn how visual validation works, see an integration into an existing test code base, and discuss the pros and cons of using various visual validation techniques.

Your Tests Lack Vision: Adding Eyes to Your Automation Framework

How good are your tests? Would they still pass if the tested code was changed? If so, there may be problems with your code, your tests, or both!

How good are your tests? Would they still pass if the tested code was changed? If so, there may be problems with your code, your tests, or both!

Mutation Testing helps reveal these cases.It makes lots of slightly altered versions, called "mutants", of your functions, and runs your functions' unit tests, using each of its mutants instead. If a mutant makes any test fail, that mutant "dies". "Survivors" imply flaws: your code might not be meaningful enough that a slight mutation would change the behavior, your tests might not be strict enough to catch the difference that the mutation made, or both!

This talk will tell you how to use mutation testing, its benefits, drawbacks, and pitfalls, and how it works under the hood.There will be several examples(in clear pseudocode), and a list of tools for some popular languages(including of course Javascript).

You will come away equipped with a powerful new technique for making sure your tests are strict and your code is meaningful.

Kill All Mutants! (Introduction to Mutation Testing)

Take a peek behind the layers of the event loop, select/epoll nonblocking I/O, and hardware architecture to answer a simple question: what is waiting, and how does a program wait?

Our story begins with a humble 'await fetch': your script fires off an HTTP request and settles down to nap, trusting that it'll be awoken when response data is available. While your program does nothing, a cascade of activity is now taking place: in your JS runtime, your operating system, and your hardware. What happens while your code is waiting for something to happen? 

In this talk, we'll peek behind the layers of the event loop, select/epoll nonblocking I/O, and hardware architecture to answer a simple question: what is waiting, and how does a program wait?

How to Wait

Node.js 10.5.0 introduced 'worker_threads', enabling the creation of simple multi-threaded applications in JavaScript. This is a quick introduction to the fun of worker_threads.

Node.js 10.5.0 introduced 'worker_threads', enabling the creation of simple multi-threaded applications in JavaScript. This may sound daunting if you've never dealt with threads before in another language. But JavaScript threads are pretty simple and, very importantly, fun. This talk will be a quick introduction to the fun of worker_threads.

I promise not to make any "you got your multi-threaded chocolate in my single-threaded JavaScript peanut butter" jokes.

A Crash Course on Worker Threads

Commenting code is a more nuanced thing than we give it credit for.

Commenting code is a more nuanced thing than we give it credit for.

There are a couple of schools of thought on this. One states that if you feel a comment is necessary, you should rewrite it to be more legible. This is true. But it's also not true. In the process of writing a comment, you can often find things that could be written better, but it's not an either/or, for the following reason: Code can describe how, but it cannot explain why.

There is just not one right way or one reason to write a comment.In this session, we'll dig into some of the many beneficial types of comments that might all serve a different purpose, followed by patterns we might want to avoid. In the process we'll talk about being good teammates, collaborating, and writing the most legible code we can.

The Art of Code Comments

Who's the jock? The nerd? The misfit? Who's the type A overachiever, or the moody artist, or the partier? Get to know each of these JavaScript frameworks through the hallowed medium of the teen comedy.

Who's the jock? The nerd? The misfit? Who's the type A overachiever, or the moody artist, or the partier? Get to know each of these JavaScript frameworks through the hallowed medium of the teen comedy.

In this talk, we'll dig into what makes these frameworks unique, as well as the things they have in common. And, as in every good millennial teen movie, you'll leave with a better understanding of each one.

React, Vue, and Svelte as Teen Movie Archetypes

Custom Hooks in React are useful for much more than just managing the local state and one-dimensional side-effects you see in almost every React Hooks example.

Custom Hooks in React are useful for much more than just managing the local state and one-dimensional side-effects you see in almost every React Hooks example.

They can be used to build sophisticated memoization pipelines and chained-effects that automatically manage local and network resources.

But most importantly, they provide a new new layer of abstraction to accomplish new and amazing patterns that we couldn't have just over a year ago.

On the surface, this abstraction layer is simply collection of custom hooks, but when unlocked, it can be the most powerful piece of your application architecture.

Custom Hooks in React: The Ultimate UI Abstraction Layer

See effective ways to progressively render a webpage from the server to the client, and important performance aspects of rendering modern websites.

Modern web applications have become increasingly costly in terms of size resulting in slower page load times in slower networks. Client Side Rendering (CSR) becomes a bottleneck in slower networks whereas Server Side Rendering (SSR) becomes a bottleneck when large volumes of content need to be generated in one-go.

Progressive rendering is a technique that allows us to flush portions of a webpage to the browser in chunks as soon as they are rendered on the server without having to wait for the whole page to be rendered. This will massively improve the FCP (First Contentful Paint) and FMP (First Meaningful Paint) metrics and reduce page load time in slower networks.

This talk will demonstrate effective ways to progressively render a webpage from the server to the client and highlight important performance aspects of rendering modern websites.

Progressive Rendering: Improve Performance on Slower Networks

TC39 is the international standards committee in charge of charting the future of JavaScript through the ECMAScript standard. In this panel, members of the committee join Cassidy Williams to answer questions sourced from the JSConf Hawaii audience, including questions about how the committee decides on changes to the language, and how companies, organizations, or individuals can get more involved.

TC39 Panel

Two full days of knowledge sharing and community with people who build and LOVE React.

This year’s conference features a mix of panels and talks set against the backdrop of beautiful Lake Las Vegas. In addition to a can’t-miss schedule, we’re organizing off-hour activities providing opportunities for relaxation, adventure, and getting to other React enthusiasts.

React Conf

Tom talks about how React provides a great Developer Experience by lowering the barrier to entry, and allowing us developers to experiment, be productive and scale our apps, easily. 

He discusses Concurrent mode and Suspense; two technologies that will allows us to improve the User Experience of our apps by making them more responsive and be more native-like. 

Finally, he emphasizes his team’s strong focus on diversity and inclusivity and talks about React’s code of conduct.

Keynote - Part A

Yuzhi takes a look back at what happened since they announced React Hooks in React Conf 2018 and how they became so popular, since they were released with React 16.8. 

Next, she talks about Accessibility and their effort to enable React apps to be more accessible by default, with better focus control and support for more input interfaces. Another area of investigation, is initial render time, better support for Server Side Rendering and the—all new—Progressive Hydration and Selective Hydration. 

Finally, she demonstrates the latest iteration of React Suspense and Concurrent Mode, which are now available as experimental features!

Keynote - Part B

Frank talks about the evolution of Facebook as a website, and the challenges that they faced as they try to extend and enhance it.

Frank talks about the evolution of Facebook as a website, and the challenges that they faced as they try to extend and enhance it. They recently rebuild the website from scratch(!), using React, GraphQL, and Relay. 

Their goal was to create a modern design system, improve accessibility, and achieve faster page loads and seamless interactions. 

In the process, they created their own CSS-In-JS library, whose features Franks presents, as he goes through the new frontend architecture.

Building the new Facebook with React and Relay - Part A

How does app performance look at scale? Ashley dives deep into the details of how they rebuilt Facebook.com and achieved super-fast rendering times and network transfers.

See the technologies and strategies powering the new Facebook.com. Their approach to CSS-in-JS, data-driven dependencies, phased code downloading, and more.

Building the new Facebook with React and Relay - Part B

Food waste is one of the biggest environmental and social challenges facing the planet. OLIO helps people connect and share surplus food. And it's built in React Native!

How our team is using React Native to save the world

A compelling, real-world, case study of how TypeScript and GraphQL helped overcome issues with legacy code, iterate faster, and provide more value to users.

As a startup that integrates with larger, often older enterprises, we have to integrate with  a number of RESTful services (against our will). This technical talk will outline how we are able to bring type-soundness, autocompletion, and powerful developer tooling to our internal workflows using hooks and TypeScript.

Using hooks and codegen

It is important to understand the abstractions that we use (watch “Requisite React”). This is a deep dive into React’s architecture. Watch Sophie build a simple version of React DOM.

There's a little-known npm package named react-reconciler that lets you build your own React renderer. React DOM and React Native themselves are built on top of it. And with it, you can build your own. In this talk, we'll build a simple version of React DOM. With any luck, you'll walk away with a better understanding of React.

Building a Custom React Renderer

Tree shaking (dead code elimination) can be an invaluable feature in modern build tools to keep bundle sizes slim. Unfortunately, it's can also be easy to ""break"" and overlook with a single import star (import *). Imagine this slips in and is overlooked for months, only to later realize it adds over 4 megabytes. But now, its implicitly relied upon in hundreds of places.

This is a story about creating a custom codemod transform to update hundreds of implicit usages to be explicit imports to ""fix"" tree shaking and remove nearly 97% of the unused code.

Codemod-ing away 4MB of JavaScript

This talk will cover how I accidentally discovered time travel in git, how to change the auto-detected language of your GitHub repositories and other Git related hacks to make working with Git and GitHub more delightful (or maybe just make your commit history less embarrassing git hooks).

Git is hard, but time travel in git is easy

Using codegen sorcery I will show you how to scaffold an entire type safe api layer, client and server, by only defining your graphql schema.

Automagic TypeScript Codegen for GraphQL

Not long ago, most companies looked down on front-end engineering. They thought the real engineers programmed the server in Java, while the script kiddies played around with it's wannabe little brother, JavaScript. 

But, in the last several years, React and its ilk have proven that sophisticated approaches to immutability and asynchrony allow for unprecedented scale and complexity in the front-end. 

Now, the tables have turned, and back-end frameworks are starting to wake up to the benefits of asynchronous processes and event sourcing patterns, following the trail that React has blazed.

Why React is eating the World

From around the world, voices sounded out in a multitude of languages: is React Translated Yet? With the efforts of hundreds of contributors, I can finally say: ¡Sí! Sim! はい 

Over the course of a month, I helped the React team kick off translations of reactjs.org into 40 languages. Join me for a behind-the-scenes look at what it takes to get the docs for a massively popular library translated. 

We'll talk about GitHub rate limits, managing a global community, amateur bot-building and more!

Is React Translated Yet?

When building a design system, many implicit choices are made in a component’s architecture that can end up crushing the dreams of a productivity-boosting frontend utility and turning a shared component library into a vessel for friction, factions, and forking. 

Join us as we take you through the journey of Airbnb’s experience creating an effective, widely-adopted design system and the decisions and trade-offs that were made to get there.

Building (And Re-Building) the Airbnb Design System

Learn how to get started with accessibility, with common tools, patterns, and starter-tips.

Accessibility standards are often first on the chopping block in the face of deadlines. We've all been on projects where we write that dreaded TODO comment leaving an accessibility audit for later. Let's unpack why that is and start changing it! 

We'll look at common tools, patterns and starter-tips that can help us shed light on accessibility in a new, less daunting way. 

In this talk we'll discuss how to get started with accessibility—the metaphorical salad and power walking of a11y that can prepare us to run an accessibility marathon, if you will.

Accessibility is a marathon, not a sprint

Redux? Render props? Context? Apollo? And what are these hooks that everyone is talking about? If you have ever gotten lost in the multitude of ways to manage state in your React application in 2019, you’re not alone. 

Let’s compare the options, and talk about the state of state management today.

The state of React State in 2019

As the web turns 30, Lee takes us back to its inflection point in 1999, with PHP and the LAMP stack, followed by a journey of the abstractions, syntax, and mental models that brought us here.

The mental model for building for the web largely hasn’t changed in the last 20 years, but we’ve incorporated complexity, richness, grown our community a thousand fold, and scaled to billions. 

This year the web turns 30, and we look back at the steady march forward of better abstractions, better syntax, and better mental models that brought us here.

Let's Program Like It's 1999

Brian introduces Fast Refresh for React; a superior alternative to Hot Reloading. Fast Refresh updates your app while you make changes to the code, and it also maintains state _and_ works with hooks. 

He then presents the revamped React developer tools and all the cool new features they bring to the table. 

Finally, he demonstrates React Codemods; an automated way to update legacy React code.

React Developer Tooling

After a short introduction to Relay and Suspense, Joe talks about building an app with these two technologies and what are the best practices.

Data Fetching With Suspense In Relay

Visualization isn't just for charts. Developers spend most of their time trying to understand existing code, which often lacks documentation about design-level concepts. Handcrafted diagrams are useful but get out of date, and traditional code search only helps if you know what words to look for. 

We don't navigate the real world by examining every sector of a geographic map, so why should we scan code line-by-line? 

This talk will showcase the past, present, and future of visual tools for automatically generating maps of code, using inspiration from older typed languages and HCI research.

Automatic Visualizations of the Frontend

How many times have we used a design pattern, just because we’ve been conditioned to use it? Jenn gives a thought-provoking, interdisciplinary talk that questions our assumptions and challenges us to break the rules.

You don't know it but you are an author. You write stories every day. You build narratives, characters and plots — but you aren’t writing a novel, you’re writing components. 

I came to engineering from the world of creative writing and what surprised me the most is how similar code is to fiction. React itself follows tenants of creative writing and when you lean into those rules, you create solid component architecture. 

In this talk you’ll learn how to write React like its fiction and what you can gain by doing so.

React is Fiction

Learn how to create smooth, performant animations and interactions, that look and feel native-like.

As the technology to create Progressive Web Apps continues to mature, React developers have the opportunity to write web apps that in some cases can rival native ones in terms of speed and convenience. 

However, one barrier to feature parity is the difficulty of creating a native-like UI transition and interaction experience on the mobile web, especially on lower-end devices. 

I’ll be discussing various considerations, tips and techniques to create a web app in React that looks, moves, and feels as close to a native mobile app as possible.

Building mobile-first web animations in React

As a multi-platinum selling music producer, recording artist, songwriter and award-winning film composer, I have seen the inner-working of the entertainment industry from several perspectives. Alternatively, as a lead software engineer with over 12 years experience, I have helped companies increase sales, conversion rate, customer lifetime value and develop efficiency all over the stack. There are several binds that tie the two seemingly opposite industries together. Let's take a few minutes and talk about them!

React and the Music Industry

Terms like Monad or Comonad might sound like alien abstractions for every day when using React. However, these abstractions are more common than we might have previously thought. State on our UIs and environmental requirements for computations like calculating a Virtual DOM or how our components should look like can be "intuitively" modeled with a Comonad. Join me on a short journey to demystify these concepts and get to know them a bit more

Comonads on your everyday UI tools

Always test your project with users, even if they’re 4 years old. We built the Wick Editor, a free, open-source, Mozilla supported tool for creating games, animations and interactive projects, using React.js. 

Over three years, we transformed our student project into a tool used by over 10,000 beginner animators and game designers a month. Getting to this point took dozens of workshops, after school sessions, game jams, and professional development sessions. 

Learn how we refined our design and development approach, and stayed motivated, by working with students and teachers of all ages.

Making games, animations and interactions with the Wick Editor: A UX talk

How I accidentally built the most popular React component, experienced death by a hundred props, got buried under hundreds of PRs, invented a component extension API, learned that styles are also a function of state, influenced some major design systems and finally got some sleep.

Building React-Select

Learn about the role of React in fulfilling the Digital Accountability and Transparency Act (DATA Act), which makes federal spending data publicly accessible, searchable, and more reliable. 

As the basis for the frontend of USAspending.gov, React has shown that a combination of modern web technologies, open source, and agile practices can not only be successful, but transformative in the government IT sphere.

Promoting Transparency in Government Spending with React

Have you ever wanted to soar the stars? Have you ever gazed into the sky and wondered what was up there? Well now you can know, with Thorium - a first of its kind open-source starship bridge simulator, built entirely with React and web technologies. 

Thorium is the product of wonder-driven development, or making something because you wonder if you can. Let me tell you about some of the things I wondered and how you can use this attitude in your own code.

Wonder-driven Development: Using React to make a Spaceship

2019

Attend _the_ conference to learn how to design, develop, and deploy fast, modern web projects that run on JAMstack, without web servers.

The JAMstack approach is powering big projects for major brands at scale. But is it just one more approach or is it the enduring future of how websites are built and delivered? 

The JAMstack approach is powering big projects for major brands at scale. But is it just one more approach or is it the enduring future of how websites are built and delivered? 

Matt Biilmann, CEO of Netlify, talks about the unique power of the JAMstack approach to speed up the performance of the open web—including what that means in the new landscape of billions of varied devices. While JavaScript and APIs are a big part of the JAMstack, perhaps the best gains for both users and developers come from moving as much of the compute work out of the request path and into a dedicated build step. https://www.netlify.com

JAMstack at Scale: why pre-built markup is critical

JAMStack helped us increase autonomy, find purpose, and own failure, resulting in a meaningful shift to a culture of ownership.

In this talk Justin Watts walks his audience through Loblaw Digitals (LD) journey from building 9 digital experiences in 7 years, to preparing for rolling out 150+ in 1 year. Justin dives into what it takes to ‘cross the chasm’ when adopting a new technology, utilizing a concept from Google called the ‘Rainbow of Death’. 

In our walk across the rainbow, we found that the JAMStack helped us increase autonomy, find purpose, and own failure, resulting in a meaningful shift to a culture of ownership.

What got us here, won’t get us there.

Learn how to setup and use a WordPress site as a back-end for a static front-end.

WordPress is a CMS powering over a third of the web. With the power of it's REST API, it is possible to implement a decoupled and headless architecture.

This talk will demonstrate how to setup and use a WordPress site as a back-end for a static front-end. This talk will compare headless WordPress to other solutions, outlining the major advantages and disadvantages.

JAMstack with WordPress

With frameworks like Nuxt we can build really cool sites that look and feel like a single page application but are actually static generated. 

Statically generated sites are the future. Seriously. With frameworks like Nuxt we can build really cool sites that look and feel like a single page application but are actually static generated. That means no need for a server but most importantly performance is amazing. Everything is generated at build time.

Static generated sites === great performance. What are you waiting for?

Learn how to build a headless e-commerce website using Gatsby, Netlify, and BigCommerce.

Learn how to build a headless ecommerce website using Gatsby, Netlify, and BigCommerce.

Ashley McKemie of BigCommerce will walk through a demo of building an e-commerce storefront using their Gatsby starter app, which includes core commerce functionality such as cart and checkout. You'll also learn how to enable more sophisticated use cases, such as international sites, and how BigCommerce is enabling the JAMstack and developers.

There are a number of use cases for building a website on the JAMstack, but the value that static sites provides is especially compelling for companies selling online. Ecommerce is already a significant portion of retail sales, with Statista reporting that global ecommerce sales were 14% of the total global retail sales. This number is predicted to rise to 16% in 2020, reaching $4.2 billion in sales in the global market.

Headless commerce is the decoupling of the frontend presentation layer that the shopper sees from the backend commerce functionality that enables merchants to drive the shopper flows, such as checking out or returning products.

Check out the full tutorial accompanying this video https://www.netlify.com/blog/2020/02/21/building-a-jamstack-ecommerce-storefront-with-bigcommerce-netlify/#tutorial-using-the-starter-plugin to develop this headless commerce site.

Building e-commerce storefronts on the JAMstack

In this 10-minute JAMstack_conf lightning launch, David Wells, Technical Product Manager at Netlify, explains the CI/CD workflow for Netlify Builds and introduces the concept of Netlify Build Plugins. Now developers can extend the functionality of Netlify builds with a programmable interface that hooks into different phases of the build lifecycle. To be part of the private beta, go to https://www.netlify.com/plugins-beta

Introducing Netlify Build Plugins

Breaking news, announcements and releases from the JAMstack ecosystem

Lightning launch - Stackbit

Every JAMstack app at its core does 2 things for users:
- Reads data from sources (DB, Stripe, Salesforce, Shopify, etc.)
- Effects the world on their behalf (sending emails, submitting purchases, etc.)

Yet combining APIs into a coherent unit is intensely manual & fiddly.
Instead, let's combine multiple persisted queries in GraphQL to succinctly encompass all of the chaining work.

We'll build one such sequence to expose as a single call for our JAMstack app that:
- Takes a domain-name input from a user
- Purchases the domain
- Creates a GitHub project
- Deploys a placeholder on Netlify

Supercharging JAMstack apps with multiple APIs via GraphQL Pipelines

By definition, a static website does not have a server. Then how, with the JAM stack can we really have a good shopping cart?

By definition, a static website does not have a server. Then how, with the JAM stack can we really have a good shopping cart. This talk will have a demo of a system where no dynamic code is written on the server and a fully functional e-commerce website is presented using a static site builder, some APIs and JavaScript.

Not every e-commerce system needs to be as dynamic as Amazon, and therefore should not use the same stack. You can avoid on-call work, constant updates and maintenance efforts when you use a CDN to host your shopping cart and get great performance to go along with it.

Building a shopping cart on a static website

Learn about the future of content management for the JAMstack followed by a demo of an experimental editing UI.

The CMS editing experience hasn't changed much in the last decade. However, site building tools like Squarespace, Webflow, Carrd, and Cargo have become much more sophisticated. CMSs optimize for developer experience (DX) while site-builders optimize for the user experience (UX). 

In the future, DX and UX will merge and content management will be more visual while giving devs the control they need. In this talk, learn about the future of content management for the JAMstack followed by a demo of an experimental editing UI from the Forestry.io team.

The visual future of content editing

Katie's site ohshitgit.com was born our of her frustrations with git. She'll walk us through the migration process to JAMstack, and along the way dive deep into Git's underlying data structures to flesh out our mental model of how Git works, and help us avoid messes before they begin!

"Everything lives in Git" - Git's powerful, scalable, and flexible version control forms the foundation for many of the other features that make the JAMstack work. But, Git can be confusing and intimidating, and mistakes are all too common -whether you are a newbie or you use it every day!

Out of this frustration, Katie's site ohshitgit.com was born. And recently, Katie migrated it to the JAMstack. Today, she'll walk us through the migration process, and along the way dive deep into Git's underlying data structures to flesh out our mental model of how Git works, and help us avoid messes before they begin!

Migrating to JAMstack and OhShitGit!

These days, as the tools we use to build the web are getting better, easier, and more powerful, we've suddenly become full-stack developers.

A few years ago we were front-end developers. These days, as the tools we use to build the web are getting better, easier, and more powerful, we've suddenly become full-stack developers. Let's take a look at what happened and how we can take full advantage of our new super powers.

Oops—I guess we're full-stack developers now

Chris Bach, co-founder of Netlify, recalls his agency roots and explains how agencies can benefit from the JAMstack.

JAMstack for Digital Agencies

One of the largest grocery chains in Canada, Longo's needed to compete in a market being disrupted by technology and changing customer experiences. Alex de Winne, CEO of Therefore Interactive, a digital agency based in Toronto, presents a before-and-after case study building a JAMstack website for Longo's. By migrating to the JAMstack on Netlify, they were able to dramatically increase the performance, SEO, and functionality of the site. https://therefore.ca/

How Therefore Interactive is modernizing Longos on the JAMstack

Inspired by Colin Kaepernick, Nike created the Emmy-winning ‘Dream Crazy’ campaign and approached digital agency Matter Supply to launch it on the web within a month. The timeline accelerated further when Kaepernick tweeted the campaign a few days early. In this talk, Marc Amman, CEO of Matter Supply, describes how his team was able to deliver the campaign on time—even ahead of schedule—thanks to the JAMstack and Netlify. https://mattersupply.co/

Matter Supply fast tracks iconic Nike campaign with the JAMstack

More digital agencies are leveraging the power of JAMstack to give them a competitive advantage. At JAMstack_conf_sf 2019, Marc Amman of Matter Supply and Alex de Winne from Therefore.ca take questions from the community and cover topics like convincing clients to use the JAMstack, "de-unicornification,” and static vs dynamic sites.

JAMstack agency fireside chat

Variable Fonts allow typography on the web to adapt to the flexible nature of screens, environments and devices. We can use variable fonts with pre-existing technologies to improve the performance, design, accessibility and usability of our websites.

We can start to design our typography to adjust to various inputs, situations or events using Media Queries, JS events and the Sensor or Audio Apis. This will allow us to modify our fonts to aid in storytelling, achieve improved readability and legibility in different situations, environments or on larger or smaller screens.

Let’s begin to explore new and exciting creative opportunities for storytelling, design and expression in ways standard fonts could never provide us. This is just the beginning of our journey to discover what we can do with variable fonts.

Responsive Typography

We’ll dig into a promising, minimal approach to content management that works the way you do.

*Okay, no additional server. Your JAMstack site already uses a server - GitLab, GitHub, Bitbucket, etc. You use them via Git. Your CMS can, too.

We’ll dig into a promising, minimal approach to content management that works the way you do.

The Git Powered CMS Content Management with No Server

I’m going to be the meanie in the room who proposes that the J in your JAMstack might not be as performant as you think, and the metrics you're looking at may be misleading you. 

“JAMstack is revolutionising the way we think about workflow by providing a simpler developer experience, better performance, lower cost and greater scalability.” ~ From JAMstack WTF

I’m going to be the meanie in the room who proposes that the J in your stack might not be as performant as you think, and the metrics you're looking at may be misleading you. 

But don’t worry! I’m also going to show you where the gotchas are hiding, what metrics to explore, and how to use performance budgets to deliver and maintain the better experience that JAMstack promises.

Um, its about your JavaScript...

Learn how one of the world’s largest restaurant chains use JAMstack and structured content to rapidly deliver high-quality user experiences.

In this talk, we’ll learn how one of the world’s largest restaurant chains use JAMstack and structured content to rapidly deliver high-quality user experiences. Restaurant Brands International (Burger King, Tim Hortons, Popeyes) decided back in 2018 to redo their digital services. Teddy Sherrill (CTO) and his team were given the unique opportunity of ditching their technical debt and put together a new stack from the ground up.

They chose the JAMstack for deploying their user-facing services on Netlify. By leveraging structured content with Sanity.io they were able to tie together ERP-systems with marketing copy behind a unified real-time API. They began the work with only two developers in December 2018. And shipped popeyes.com to production in August 2019, having grown their internal team to 8 devs all while building. 

This talk will give a tasty real-world example of how the modern stack increases speed of delivery, reliability, and efficient re-usability.