Reactathon logo

Workshops

September 7

We’ve assembled a team of top engineers who build with the technologies they’re teaching every day. From core-contributors and senior engineers well-known on the conference and workshop circuit, you’ll learn in hours what they’ve have mastered over years.

Register for each workshop separately

Building Accessible Web Apps with React

INTERMEDIATE

speaker photo

Erin Doyle

Staff Software Engineer

CashStar

Prerequisites:

• Working Knowledge of JavaScript and HTML

• Familiarity with ES6+

• Working knowledge of React

There is a significant portion of the population that have a disability that impairs their ability to effectively use the web. For some companies this is a usability concern in the pursuit of not excluding users or customers and for others it's a legal compliance concern. There are many tools and techniques available today that now make it possible to make our web apps accessible and even provide a great user experience inclusive of all users. However, it's a broad landscape and can be overwhelming where to start! This workshop aims to give students a strong head start by covering the following:

• Learn about the different disability groups and how they are impacted by web in-accessibility

• Work with tools for inspecting and testing for accessibility issues

• Learn to access web sites in the same way impaired users do

• Write accessible and extensible UI elements

• Write accessible custom UI widgets

• Iteratively test to see our accessibility issues resolved!

By the end of this workshop hopefully students will have a much better understanding of their target users and how to approach their web apps from those perspectives when testing for accessibility. The tools learned should help jump start students' ability to audit their own web apps for accessibility issues and point them towards how to learn more and effectively resolve those issues. Finally students will end up with a nice base of example React components that are accessible and can be used or built upon in their own applications.

7 September 2018

3 hours


Building Data Vizualizations with React + D3

INTERMEDIATE

speaker photo

Swizec Teller

Senior Engineer

Yup Technologies

Prerequisites:

• Working Knowledge of JavaScript

• Working knowledge of React

• Familiarity with ES6+

Become a data visualization engineer with React + D3v4. Creating dynamic and interactive data visualizations on the web is a pain. It gets really hard when you add animation, inter-connected dashboards, and fast performance on mobile devices. You're either using libraries you can't customize, copy pasting D3 examples you don't understand, or battling documentation to write spaghetti code you can't reuse. It’s okay, we’ve all been there :) In this workshop, you will learn:

• How to build modern data visualization the maintainable way.

• Modeling your code as a state machine in React apps

• D3 Fundamentals

• Different ways to integrate D3 with React

• Investigate the pros and cons of each method

• Build something beautiful together

By the end of this workshop you’ll have the tools you need to build any dataviz challenge your boss or client throws at you. Even if they ask you to animate 20,000 datapoints on a 5 year old phone.

7 September 2018

Full Day (7 hours)


Getting Started with GraphQL

BEGINNER

speaker photo

Eve Porcello

Software Engineer and Instructor

Moon Highway

Prerequisites:

• Basic knowledge of JavaScript

• Knowledge of React

• Familiarity with Node.js and npm

Want to learn GraphQL but not sure where to get started? In this workshop, you'll learn GraphQL from the ground up with a focus on the concepts that are most important to front-end developers. We'll start with an overview of graph theory, followed by learning how to write queries and mutations. Once we understand how to interact with a GraphQL endpoint, you will design your own schema and will connect a GraphQL API to a React user interface.

• Intro to GraphQL

• Understanding Graph Theory

• GraphQL Query Language

• Schema Design Best Practices

• GraphQL Clients

• Apollo Client

• React Apollo

• Apollo Link

• GitHub Authorization

Join Eve Porcello, the author of O'Reilly's Learning GraphQL, for this fast-paced, hands-on workshop. You'll leave ready to build modern applications with JavaScript, GraphQL, Apollo, and React.

7 September 2018

Full Day (7 hours)


Immutable Data Updates with Functional Lenses in Shades.js

INTERMEDIATE

speaker photo

James McNamara

Technical Co-Founder

Chosen.fyi

Prerequisites:

• Familiarity with ES6+

• Familiarity with functional programming topics such as higher-order functions and function currying

Lenses in Shades.js allow us perform immutable data updates with the syntactic ease of using direct object mutation. But where lenses really shine is when they allow us to succinctly do things that imperative mutation cannot: updating multiple objects at once, updating only objects that match a criterion, or even uniformly updating data with different underlying representations. In this workshop you will learn:

• The role lenses play in the update process

• How to create and compose lenses

• How to create custom lenses: traversals, folds, optionals and virtual lenses

• How to program in a pointfree style with the shades utilities

Additionally, depending on time and interest, we will discuss:

• Integrating lenses with Redux

• Type-safe usage of lenses and point-free helpers with TypeScript

• Lens internals

7 September 2018

Half Day (4 hours)