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

2020

Frontend Developer Love Conference is 3 Full Days of Talks from 35+ Global Javascript Leaders from around the world Join fellow Javascript Frontend Developers traveling in from over 50 Countries around the world for the Largest Javascript Conference in Europe. We will host over 3,000 People flying in from 50+ Countries around the World during this 3 Day Celebration of Javascript

Javascript is at the heart of the Frontend Developer Love Conference with a variety of topics being covered such as:
Vue, Angular, React, Design Systems, Serverless, Cloud, AWS, Functional Programming, Microservices, Agile, Testing, Automation, Become as good a Leader as you are coder, speechRecognitionAPI, Web Audio, Hip Hop & Code, Gatsbyjs, AWS Amplify, Jamstack, GraphQL, Webpack 5, Typescript, Devops, Microfrontends, Nodejs, Web Assembly, Sveltejs, NPM Packages, Artificial Intelligence, Ecommerce

Our Speakers have spoken at 100+ Global Javascript & Developer Conferences in 30+ Countries in the last 12 months. We have developers that have worked at companies such as Google, Facebook, Volkswagen, Tommy Hilfiger, Uber, Spotify, ING, Amazon, Microsoft, Netflify, Gitlab, IBM, Dell, Sony

Since Frontend Developer Love started in 2018 it has been a Sold Out Conference.
Theater Amsterdam has been described by our Global Javascript Leaders as the "greatest conference venue in the world". You will get to see Vue Experts delivering high level talks with coding examples on a large 500m2 Screen. As part of your conference experience we have arranged diverse, world class and free lunch time catering. You get to relax and sit back in cinema seats allowing you to open up your laptop if you wish to code along. 

Frontend Developer Love

Micro-interactions with React Spring

A strategy on how to properly configure webpack for your project

A strategy on how to properly configure webpack for your project.

How to Pack your Webpack

The world is changing fast. As a result, every aspect of software changes towards smaller. Teams, management, organizations, cycles and components. 

The world is changing fast. More precisely, the world is changing at increasing speed. This means things that were not possible five years ago come into reach. 

Incumbent organizations need to adapt fast to keep up with new competitors that use new technologies easier, faster and better than they do. 

As a result, every aspect of software changes towards smaller. Even smaller teams or even micro-teams, less management, flatter organizations, even shorter cycles, and smaller components.

How thinking small is changing software development big time

How serverless empowers frontend teams to get so much done without needing a backend specialist and enables teams to move super fast.

Serverless gives you wings

Hip Hop and Unit Tests. A match made in heaven? Explore Web Audio and its suitability for audio transcription. 

Hip Hop and Unit Tests. A match made in heaven? Through a mix of audio, video and live performance, Tony will explore Web Audio in an attempt to convince the audience of its suitability for audio transcription. This is a fast paced and highly engaging talk with a crescendo you won’t forget.

Beats, Rhymes and Unit Tests

How to swim but not sink in plenty of testing frameworks and have a solid e2e test coverage with minimal effort?

A new day brings a new framework. This rule applies also for e2e testing tools, which is cool yet frightening. How to swim but not sink in plenty of testing frameworks and have a solid e2e test coverage with minimal effort? 

Anastasia is going to share her insights on this which might be helpful for every developer who does care about software quality improvement paired with automated testing.

Modern Solutions for e2e testing

Last year we started the rebuild of a big e-commerce platform, to increase performance. I will explain how we mixed Nuxt, Vue, and Storybook together and how we are able to develop great code with a big team.

Last year we started the rebuild of a big e-commerce platform. The main goal was to increase the performance of the application but also to enhance the daily comfort of the developers. The rebuild was done using Nuxt and Vue, and to create a good developer experience we used Storybook to work on the components in an agnostic way. In this talk I will explain how we mixed all these tools together and how we are able to develop great code with a big team.

DX is the new black. Learnings from using Nuxt and Storybook at scale

Learn what Blazor is, how it uses WebAssembly, and how to get started with it all.

One of the latest technologies targeting front-end development that is gaining quite some traction is WebAssembly. And the latest development stack for it is Blazor! While it’s still in preview mode, it’s considered as pretty innovative as far as WebAssembly goes.

In this session, you’ll learn what Blazor is, how it uses WebAssembly, and how to get started with it all.

By coding some examples, we’ll be able to investigate several aspects of Blazor’s support forWebAssembly, such as: dependency injection, data access, routing, editing and validation and MVVM.

Come along and discover if this new technology is something for you!

Blazor with WebAssembly

Learn how to implement your own conversational AI within your web application.

The Google Assistant is super popular. Businesses want their own voice AI. Unless you are a manufacturer for tv setup boxes or headphones, you probably don't need to use the Google Assistant, you can integrate a (voice supported) conversational AI within your own existing web/mobile app with the use of Dialogflow and Cloud Speech to Text (STT), Cloud Text to Speech (TTS).

However, implementing audio streaming within (web) applications can become difficult. It's not that the Google APIs are hard to use; those APIs are pretty straightforward. The problem is the combination of all required technology; A front app, WebRTC, microphone streams, audio encoding, sample rates, websockets, a back-end app, Google streaming APIs...

Lee Boonstra, developer advocate for Conversational AI, (and author of the ultimate audio streaming to Speech APIs - guide), will guide you how to implement your own conversational AI within your web application.

Audio Streaming - Using WebRTC for building your own Voice AIs

See why accessibility is such a critical part of our job. After this session, you’ll have enough knowledge to start fixing your front-end’s most low hanging A11Y issues.

Accessibility (A11Y) is an often misunderstood topic by developers. We also tend to not see the importance and if we see it, we struggle on getting started because it’s such broad topic. What can we do to improve?

In this talk Bob will explain web accessibility and why it’s such a critical part of our job.

He will explain how to get started in testing and improving your apps using tools and methods that are market standard.

There will be real-world examples from his daily job and he’ll share how to tackle common pitfalls.

After this session, you’ll have enough knowledge to start fixing your front-end’s most low hanging A11Y issues.

Practical A11Y for Web Apps

Dexter shares his love for svelte, what sets it apart from other frameworks and shows how it enables him to create truly reactive apps.

Svelte: the last framework we need?

Noer and Sima share with you 3 main insights they have gained while teaching programming to people with a radically different background.

Noer and Sima share with you 3 main insights they have gained while teaching programming to people with a radically different background. Sima Milli will share her personal story.

Refactor your life

Wrap existing REST APIs into one single GraphQL endpoint on both the client and server side.

Your frontend developers are pushing to get started with GraphQL, but you don’t have the backend capacity to migrate your existing REST APIs to GraphQL? Or you want to have a GraphQL API next to your existing endpoints that are based on REST, without having to rewrite all your controllers? 

In this talk I’ll show how to wrap existing REST APIs into one single GraphQL endpoint on both the client and server side. This allows you to access the power of GraphQL without having to change any of your existing code or connect to a database.

GraphQL Without a Database

What happens when we take the advancements of GraphQL and combine them with a mental model that all data should be local and offline first, with eventual consistency to your database as a second thought? 

Complexity, and the consistent attempts to reduce complexity, are at the core of the evolution of technology. As technology evolves, we then find harder problems to solve and are presented with new challenges. In the client space, we’ve seen innovation that has addressed how we deal with modern application concerns like real-time and offline data while at the same time GraphQL has continued to gain in market share.

What happens when we take the advancements that GraphQL has introduced as a paradigm and combine them with a mental model that all data should be local and offline first, with eventual consistency to your database as a second thought? 

In this talk, I’ll talk about a data store paradigm that allows developers to work with a single, local database and source of truth, and the idea that you should not have to make more than one write action to have (eventual) consistency across the client and server.

The Future of Real-time | Offline | Data

The state of WebAssembly

Aftermovie

ReactConf AU is the biggest gathering of local and international React developers ever to take place in the Southern Hemisphere. ReactConf AU is brought to you by your friends at Thinkmill.

Learn stuff, hang out with the global React community, and make React history on Australia’s famous Sydney Harbour during summer.

ReactConf AU

An overview of the past, present and the future of CSS-in-JS.

CSS-in-JS

In this talk Diana covers lessons in color systems, theming APIs, and a bit of color theory along the way.

When the design systems team at GitHub implemented their colour system in 2017 they were working with Sass, trying to wrangle thousands of disconnected colour values into something more manageable to use. Now they're revisiting colour again, but this time with new tools, new customer goals, and more experience. 

In the age of dark mode, can what they've learned from CSS-in-JS and component APIs help them in their approach to color themeability? In this talk Diana covers lessons in color systems, theming APIs, and a bit of color theory along the way.

Themeability is the path to dark mode

See how BBC made transcribing interviews - something journalists spend hours every day doing - faster, easier, and data-rich by creating an interactive, time-encoded text editor with Draft.js. 

BBC News Labs explore, prototype and incubate new ways to tell stories, reach audiences and create cutting edge journalism. James will demonstrate how his team made transcribing interviews - something journalists spend hours every day doing - faster, easier, and data-rich by creating an interactive, time-encoded text editor with Draft.js. 

By making it an open-source component library, BBC managed to add this functionality and productivity to many other tools, both in the BBC and outside - empowering other newsrooms to innovate in their own spaces.

(Proto)typing innovation in BBC News

If the new React Context API and Suspense killed Redux (they didn't), surely Hooks kill the need for a form library, right? Well, not exactly.

If the new React Context API and Suspense killed Redux (they didn't), surely Hooks kill the need for a form library, right? Well, not exactly. 

Managing form state is more than just holding your current values in state; it's about sync and async validation errors, and much more! But that doesn't mean that Hooks are irrelevant to the situation. Hooks make building forms in React easier than ever before.

Modern Forms in React

`react-beautiful-dnd` is an open source project that aims to provide performant, beautiful and accessible drag and drop. See how its various pieces come together to deliver a delightful user experience. 

`react-beautiful-dnd` (`rbd`) is a successful open source project that aims to provide performant, beautiful and accessible drag and drop. In this talk, Alex will break down how the various pieces of `rbd` come together to deliver a delightful user experience. 

He hopes to empower people with knowledge of some powerful and creative techniques that can be applied in different problem spaces.

react-beautiful-dnd: Behind the magic

Selena and Michael take you on a roller coaster journey of getting into and getting the most out of pair programming.

Selena and Michael take you on a roller coaster journey of getting into and getting the most out of pair programming. 

Live on stage trying to deliver a feature whilst coding in React, they'll be acting out the highs and lows, do's and don'ts of collaboration through pair programming. Two keyboards, one computer, writing code and reaching maximum capacity. 

There will be tears and laughter and everyone will come away with a solid set of steps to get started in, or take your pairing to the next level.

10 x your teamwork through pair programming

This talk charts the ABC's journey and how page load speed is measured, the trade-offs between different app architectures, and finally the APIs and tools browsers give you to speed your sites up.

We're often told it's impossible to create React pages that load quickly. Are React developers really doomed to a life of embarrassing Lighthouse scores? 

Working with the ABC, Josh and his team were tasked with rebuilding their sites using React. They knew slow page loads were not an option for news, entertainment and information. 

This talk charts the ABC's journey and how page load speed is measured, the trade-offs between different app architectures, and finally the APIs and tools browsers give you to speed your sites up.

The first two seconds: Faster page loads with React

Designers and engineers: we have different experiences, different skills, different mindsets, and yet bridging these differences effectively, and making the most of this inherent diversity is the secret sauce in making good software.

Engineering led design

When designing asynchronous operations in a React application (such as data fetching), it's easy to overlook the confusing and inconsistent user experience it can result in.

When designing asynchronous operations in a React application (such as data fetching), it's easy to overlook the confusing and inconsistent user experience it can result in. The following issues can arise:

- Managing promise states manually can be harmful to the user's experience.
- Visibly reloading data that has already been seen by the user.
- Loading spinners can appear for microseconds before resolving content.

In an ever-present battle for our user's attention, details matter. Any combination of the above issues can lead to quite a jarring experience, so what can we do about it?

Take a load off with React

Recognise and foster the skills that will launch the next phase of your career and make you a more effective developer today.

The path to senior, cross disciplinary, technical leadership can be difficult to navigate as a front end specialist. 

Will my skills be valued? Will I be considered “technical enough”? Do senior leaders understand my technical background? The work you do as a front end developer is already building crucial skills that will equip you for your first technical leadership role and beyond. 

This talk will help you to recognise and foster the skills that will launch the next phase of your career and make you a more effective developer today.

Senior to leader: Taking the next step

Often when building a design system we face tension between consistent and resilient API's, and sufficient flexibility to ensure that our components can be customised to fit bespoke product use cases. 

Often when building a design system we face tension between consistent and resilient API's that encapsulate valuable and reusable logic, and sufficient flexibility to ensure that our components can be customised to fit bespoke product use cases. 

Towing this line is difficult, and becomes more difficult as a design system scales. 

Join me as I uncover some of the hard learned lessons towing this line in React-Select and Atlaskit, Atlassian's Design System.

Targeted extensibility: Lessons learned from building Atlaskit

With victims like eBay, McAfee, and Yahoo, XSS attacks involve injecting malicious scripts into the DOM of unprotected web applications, resulting in access to cookies, session tokens, and sensitive data stored in the browser. 

XSS (Cross-Site Scripting) attacks are often referred to as the "most common vulnerability online". With victims like eBay, McAfee, and Yahoo, these attacks involve injecting malicious scripts into the DOM of unprotected web applications, resulting in access to cookies, session tokens, and sensitive data stored in the browser. 

But is this attack actually possible against React apps? Come and find out the answer in this talk by Carmen Chung, who will (demo gods willing) show you what sort of damage can actually be done.

What is an XSS attack - and why should you care?

React treats UI as a function of state. What if React’s declarative programming model could be applied to music as well?

React treats UI as a function of state. What if React’s declarative programming model could be applied to music as well? 

Reactronica aims to treat music as a function of state, rendering sound rather than UI (Using ToneJS). Some possibilities of this library will be showcased, including a piano sequencer and ukulele tab editor. Most ambitious is a (very) early prototype of a browser based Digital Audio Workstation. The presentation will go through the inner workings of the library, emphasising its use of Hooks and Context.

Reactronica: Music as a Function of State

Redux Connect vs Redux Hooks is an enchanting tale about going from the Redux Higher Order Component to the new Redux Hooks.

Redux Connect vs Redux Hooks is an enchanting tale about going from the Redux Higher Order Component to the new Redux Hooks. Our hero, a Class Component is connected to the Redux Store via connect. See what happens when the new Redux Hooks come into town. What will happen to our hero and what dangers will they face in this brave new world? This "critically acclaimed" play has won 0 major theatre awards but is full of gripping drama, hilarious components, and useful logic!

Redux Connect vs Redux Hooks: A play

In a world of components, how should our design processes change? How should our tooling change? How should we, as front-end developers, better enable this change?

In a world of components, how should our design processes change? How should our tooling change? How should we, as front-end developers, better enable this change? 

In this talk, we’ll look at the current state of design and development, and where we could go if we’re willing to push for it.

Rethinking Design Practices

Take a look at how React was integrated with the rest of WordPress, its effect on programming paradigms, workflows and deployment strategies, and the steps being taken to ensure the ecosystem stays as beginner friendly as it has always been.

Did you know a large chunk of WordPress is now built in React? 

WordPress is a 16 year old open source project with hundreds of contributors, most of whom came from a PHP, HTML and CSS background. The change was not easy, or without polemic. 

Isabel takes a look at how React was integrated with the rest of WordPress, its effect on programming paradigms, workflows and deployment strategies, and the steps being taken to ensure the ecosystem stays as beginner friendly as it has always been.

5 things you should know about WordPress... wait, what?

What if you could automatically generate hundreds of integration and end-to-end tests, instead of manually coding them?

What if you could automatically generate hundreds of integration and end-to-end tests, instead of manually coding them? 

Discover how model-based testing greatly improves the maintenance and coverage of your entire React app, uncovers elusive edge-cases, and stay in sync with ever-changing requirements. 

In this talk, you'll learn how abstract modeling with state machines saves tons of time in both developing and testing your existing apps.

Write fewer tests! Model-based testing in React

Learn about Atlassian’s learnings from growing the frontend development of Jira to over one million lines of code.

What do farmers 200 years ago and today’s software developers have in common? Why use the word "tragedy" to describe it when it's not tragic at all? 

Join us for this tale of mistakes, revelations and human nature! We’ll share Atlassian’s learnings from growing the frontend development of Jira to over one million lines of code, dive into coding patterns, practices, and traps to avoid when writing scalable React applications, share how our React architecture looks today, discuss state management, and why we used Redux at the beginning and then abandoned it.

The tragedy of scale

Being able to work on multiple packages together is powerful, but it's not without its problems. If you're not familiar with monorepos, don't worry. Mitchell will cover what they are, when and why you would want to use one and how to get started with them!

Monorepos are everywhere in the React community from design systems and apps to open source libraries. Being able to work on multiple packages together is powerful, but it's not without its problems. 

Let's learn how to solve these problems by exploring the evolution of Emotion's monorepo. If you're not familiar with monorepos, don't worry. Mitchell will cover what they are, when and why you would want to use one and how to get started with them!

Building with Monorepos

Have you ever learned a new technology? Were you uncomfortable? Intimidated? That was Trent's recent experience when he had to learn a new framework: React.

Have you ever learned a new technology? Were you uncomfortable? Intimidated? That was Trent's recent experience when he had to learn a new framework: React. 

In this talk, Trent shares his journey as an experienced developer embarking on a new project, in a new tech stack. He'll explore how to develop confidence using new tech, why team culture is vital to successful learning, and what to do when learning is hard. 

He hopes to encourage you to be a developer who is confident and excited about learning new frameworks.

How to teach an old dev new tech: Learning React as a senior developer

Learn how to how to shape your React architecture with GraphQL for better developer experience, easier scaling and faster iterations on your user experience.

GraphQL lets us model our business domain as a graph, but what does that mean? What are the tools we need to design a model that works for our business, products and users both now and into the future? 

Let's take a deep dive into the language, concepts and building blocks of a successful domain graph, and learn how to how to shape your React architecture with GraphQL for better developer experience, easier scaling and faster iterations on your user experience.

A GraphQL Survival Kit

See how we are able to bring type-soundness, autocompletion, and powerful developer tooling to our internal workflows using hooks and TypeScript.

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.

Powerful REST in a GraphQL world

Jed discusses the sustainability of open source, the value OSS creates for us all individually and as a collective, and then proposes some small steps we can all take to ensure the future of our vibrant community.

Jed wraps up ReactConf AU by discussing the sustainability of open source, the value OSS creates for us all individually and as a collective, and then proposes some small steps we can all take to ensure the future of our vibrant community.

The Value of Open Source

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

The focus of JS Kongress 2020 is Scaling JS – Pushing the Limits: Massive Platforms, Data-Driven Architectures, and Modern APIs.

The #DeepTrack is about all things JavaScript. YOU create the program!

Join us, and let's watch out for solutions and best practices.

JS Kongress

Women of React is an online conference where women take the (virtual) stage, but everyone is welcome to attend and participate! 

Watch the stream, ask your questions, forge new and meaningful connections, learn a little, laugh a little. 

Put together by and for women working with React, this event is small, from the heart, and very much a labor of love meant to bring people together.

Women of React

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

Just added conferences

Recent conferences

Upcoming conferences

JSConf Hawaiʻi 2020

Frontend Developer Love 2020

ReactConf AU 2020

Reactathon 2020

JS Kongress 2020

Women of React 2020

Byteconf React 2020

ReactEurope 2020

You Gotta Love Frontend 2020

React Finland 2020

ReactNext 2020

React Loop 2020

JSCamp 2020

RenderATL 2020

ComponentsConf 2020

International JavaScript Conference 2020

React Native EU 2020

JSNation 2020

React Amsterdam 2020

React Day New York 2020

CityJS 2020

JSConf Budapest 2020

React Live 2020

React Advanced 2020

React India 2020