ReactConf AU
ReactConf AU
  • 23
  • 34 150
Take a load off with React — Jake Moxey
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?
Переглядів: 539

Відео

The first two seconds: Faster page loads with React - Josh Duck
Переглядів 1,1 тис.4 роки тому
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 me...
Reactronica: Music as a Function of State - Kaho Cheung
Переглядів 5464 роки тому
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 Digit...
Senior to leader: Taking the next step - Cathy Lill
Переглядів 3254 роки тому
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 ...
Rethinking Design Practices - Mark Dalgleish
Переглядів 8 тис.4 роки тому
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.
react-beautiful-dnd: Behind the magic - Alex Reardon
Переглядів 2,4 тис.4 роки тому
`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.
Building with Monorepos - Mitchell Hamilton
Переглядів 9014 роки тому
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 wou...
10 x your teamwork through pair programming - Michael Milewski & Selena Small
Переглядів 4274 роки тому
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 ev...
A GraphQL Survival Kit - Petra Gulicher
Переглядів 2754 роки тому
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 experi...
Targeted extensibility: Lessons learned from building Atlaskit - Charles Lee
Переглядів 3814 роки тому
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 ...
How to teach an old dev new tech: Learning React as a senior developer - Trent Willis
Переглядів 3304 роки тому
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 whe...
(Proto)typing innovation in BBC News - James Dooley
Переглядів 6454 роки тому
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 manag...
Redux Connect vs Redux Hooks: A play - Terence Jeong
Переглядів 2 тис.4 роки тому
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 theatr...
Themeability is the path to dark mode - Diana Mounter
Переглядів 1,3 тис.4 роки тому
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 ...
Modern Forms in React - Erik Rasmussen
Переглядів 3,3 тис.4 роки тому
Modern Forms in React - Erik Rasmussen
CSS-in-JS - Max Stoiber
Переглядів 3,6 тис.4 роки тому
CSS-in-JS - Max Stoiber
What is an XSS attack - and why should you care? - Carmen Chung
Переглядів 2974 роки тому
What is an XSS attack - and why should you care? - Carmen Chung
Write fewer tests! Model-based testing in React - David Khourshid
Переглядів 6 тис.4 роки тому
Write fewer tests! Model-based testing in React - David Khourshid
The tragedy of scale - Nadia Makarevich & Hannes Obweger
Переглядів 7104 роки тому
The tragedy of scale - Nadia Makarevich & Hannes Obweger
5 things you should know about WordPress... wait, what? - Isabel Brison
Переглядів 3124 роки тому
5 things you should know about WordPress... wait, what? - Isabel Brison
Engineering led design - Lauren Argenta
Переглядів 4234 роки тому
Engineering led design - Lauren Argenta
The Value of Open Source - Jed Watson
Переглядів 3844 роки тому
The Value of Open Source - Jed Watson
Powerful REST in a GraphQL world - Tejas Kumar
Переглядів 3634 роки тому
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.