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.