Workshops

Search with
⌘/ctrl + f

Advanced React Component Patterns

react ⚛
repo
Presentations:

Abstract

Making React components that can be used in multiple places is not hard. What is hard is when the use cases differ. Without the right patterns, you can find yourself with a highly complex component that requires a lot of configuration props and way too many if statements. With this course, you'll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need.

I have contributed to and published some of the most successful React components in the React ecosystem. Through that experience, I've learned and taught patterns that enhnace flexibilty, usefulness, and simplicity.

Topics:

  • Use the Compound Components Pattern to write React components that implicitly share state while giving rendering flexibility to the user
  • Share code and enhance your components with the Higher Order Components Pattern
  • Give full rendering power to users with the Render Props Pattern
  • Improve the render prop API with the Prop Collections and Prop Getters Patterns
  • Provide total logic control with the Controlled Props and State Reducer Patterns
  • Take advantage of React’s Context API to share state throughout the application with the Provider Pattern

The Beginner's Guide to ReactJS

react ⚛
repo
Presentations:

Abstract

This course is for React newbies and those looking to get a better understanding of React fundamentals. With a focus on React fundamentals, you'll come out of this course knowing what problems React can solve for you and how it goes about solving those problems. You will have a good grasp on what JSX is and how it translates to regular JavaScript function calls and objects.

Each lesson in this course is just a single index.html file which will help you keep your focus on learning React and not distracted by all the tools that make production applications work. The course wraps up with a lesson on how to move from these index.html files to a more production ready development environment and even how to deploy your app to a great service like Netlify.

Enjoy!

ES6 and Beyond

ES.nextES6webpack
slides | workshop repo | app repo
Presentations:

Abstract

The ECMAScript standard is now on a yearly release cycle. Keeping up with the latest features can make you more productive and your code more expressive and maintainable. In this workshop, we'll learn about the features from ES6 to today that you're likely to use and benefit from on a day-to-day basis.

Kent has been using and teaching the latest features of JavaScript with Babel for years. He represents PayPal on the TC39. Kent has taught thousands of developers the new and useful features of JavaScript.

Topics:

  • Simple ES6 features like let, const, and template literals
  • New object and array operators and syntax like destructuring, rest and spread, and object literal syntax enhancements
  • New function syntax and operators like arrow functions and rest/spread
  • Data structures like Map/Set and their weak counterparts
  • How to use Promises effectively
  • How and when to use async/await
  • Really useful new APIs on built-ins like Object, String, Array, and even new syntax for RegExp
  • How and when to use public class fields to avoid issues with "this" bindings

Testing React and Web Applications

testing ⚠️automationjestcypressreact ⚛
repo
Presentations:

Abstract

Developing and deploying production applications with React is one thing, but being confident that you're not shipping a hidden bug is something else! Knowing how to configure and use testing tools is critical to your success in shipping with confidence, and React's model opens up testing productivity most of us couldn't even dream of before.

I have personally written tens of thousands of tests for production applications and my open source modules. Hundreds of developers have improved their testing knowledge from this workshop.

Topics:

  • Learn the fundamentals of what a test is and what role testing frameworks play
  • Configure Jest for a client-side React project
  • Learn what Code Coverage is and how to properly use that metric
  • Write unit tests for JavaScript utilities and React components
  • Learn what snapshot testing is and how to use it effectively
  • Write integration tests for a React application
  • Configure Cypress for a web application
  • Write E2E (end-to-end) tests with Cypress

Testing Practices and Principles

testing ⚠️automationjestcypress
slides | repo
Presentations:

Abstract

The goal of a test is to increase your confidence that the subject of your test is functioning the way it should be. Not all tests provide the same level of confidence (some provide very little confidence at all). If you're not doing things correctly, you could be wasting your time and giving yourself a false sense of security (even worse than having no tests at all).

I have personally written tens of thousands of tests for production applications and my open source modules. Hundreds of developers have improved their testing knowledge from this workshop.

Topics:

  • The fundamentals behind tests and testing frameworks the distinctions of different forms of testing
  • How to write Unit tests
  • How to write Integration tests
  • When and how to mock dependencies
  • How to use test driven development to write new features
  • How to use test driven development to find and fix bugs
  • Core principles of testing to ensure your tests give you the confidence you need

Code Transformation and Linting

babeleslintcodemodAbstract Syntax Treesasts
slides | repo
Presentations:

Abstract

Have you ever needed to change the API to a widely used function in your JavaScript application? Find and replace can really only take you so far. What about the frustration of iterating over and over again on pull requests because of simple code mistakes developers keep making? These are only some of the problems that you can solve with a basic understanding of Abstract Syntax Trees and the tools you can use to inspect and manipulate them.

Join Kent C. Dodds and learn invaluable skills you can take back to improve the developer experience in your JavaScript applications.

Testing JavaScript Applications

testing ⚠️jestcypress
slides | repo
Presentations:

Abstract

Building and deploying web applications with confidence is challenging. Verifying that what you're deploying to production actually works requires a solid suite of automated tests. Knowing how to configure tools and write tests that enhance your development experience is vital to your success.

In this class, we'll explore the merits and tradeoffs of different forms of testing and get into configuring and using specific tools to increase confidence in deploying our applications. Join Kent C. Dodds and learn invaluable skills you can take back to improve your JavaScript applications.

Intro to ReactJS

react ⚛
repo | app
Presentations:
  • Internally at PayPal - video2016-12-13
  • Internally at PayPal - video2016-10-06
  • MidwestJS2016-08-10

Abstract

TODO 😅

How to Write an Open Source JavaScript Library

open source 🌎
repo
Presentations:

Abstract

Participating in open source has been one of the most rewarding experiences of my career. The feeling of sharing something I've created, and hearing that others are using it in their applications is incredible. But writing and managing an open source project is challenging. I want to help you get started with open source or improve your current projects with some of the things I've learned by publishing and maintaining over 60 npm packages.

  • Learn how to set up a new project locally and on GitHub for development
  • Learn how to configure npm for publishing the project to the npm registry
  • Learn how to transpile the source with babel
  • Learn how to add unit tests and code coverage
  • Learn how to add CI (with Travis CI) to run tests automatically and report coverage stats to codecov.io
  • Learn how to automate releases with semantic-release
  • Learn how to distribute a browser build with webpack

Webpack Deep Dive

webpack
slides | app repo
Presentations:

Abstract

Building and deploying complex frontend applications can get complicated quickly. Webpack simplifies this with a huge list of features that cater to all kinds of JavaScript apps. In this class, we'll explore these features to optimize an application for performance and simplicity. In this workshop, you'll learn:

  • The role of webpack and fundamental concepts like loaders and plugins
  • How to setup a webpack file (and use webpack-validator to save yourself hours of debugging typos)
  • How to setup a unit testing environment for a webpack project
  • How tree-shaking works and how to leverage it for smaller bundles
  • How to maintain sane file sizes with webpack code splitting
  • How to leverage hashing for long term caching
  • How to group vendor/common files with the CommonsChunkPlugin to save bytes in the code that changes regularly
  • The latest features of Webpack 2!

React + AVA = ❤️

react ⚛testing ⚠️
repo
Presentations:
  • Hangout with my team - video2016-04-13
  • Internally at PayPal - video2016-02-16

Abstract

NOTE: I no longer recommend using AVA in React Projects. Instead I recommend using Jest. Incidentally, I have a workshop for that too: react-jest-workshop.

How to Contribute to an Open Source Project on GitHub

open source 🌎
Presentations:

Abstract

"Feel free to submit a PR!" - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this series, you'll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it's hosted.

So enjoy the course and start contributing to the projects you use and love today!

Intro to Webpack and Migrating from Require.js to Webpack

webpack
repo
Presentations:
  • JS @ PayPal - video2015-12-17

Angular and Webpack for Modular Applications

angularwebpack
Presentations:

Abstract

How much work would it take for you to move all of your directives and their templates to several different new directories? You'd have to update the templateUrl, script tags, etc., etc. With webpack, this can be trivial. For example, you don't need to worry about loading your templates in the $templateCache ever again. Webpack will help you modularize your css and tests. All of these things and more in this series so you can start using webpack with Angular today.

angular-formly

angular
slides | repo
Presentations:

Intro to AngularJS

angular
slides | workshop
Presentations:

Abstract

AngularJS is one of the most popular frontend frameworks out there right now. If you haven't tried it yet, prepare to be amazed! Here's what we'll cover:

  1. Templates/Expressions - Your View
  2. Module - Your app's namespace
  3. Directives - DOM Interface
  4. Filters - Display utils
  5. Scope - What on earth is this thing!?
  6. Controllers - The View Model
  7. Services - Common utilities
  8. Working with third-party modules
  9. Routing - Single Page App with state in the URL
  10. Firebase & AngularFire - A full web application with no server setup required!

We'll be following through a repository hosted on GitHub. There's a branch for each concept, so you can play around with the code and then catch right back up with the next branch. So come on, and let's learn AngularJS!

AngularJS Authentication with JWT

angular
Presentations:

Abstract

JSON Web Tokens (JWT) are a more modern approach to authentication. As the web moves to a greater separation between the client and server, JWT provides a terrific alternative to traditional cookie based authentication models. For more information on JWT visit http://jwt.io/

In this series, we'll be building a simple application to get random user information from a node server with an Angular client. We'll then implement JWT to protect the random user resource on the server and then work through the frontend to get JWT authentication working.

By the end, we'll have an application which has a single username/password combination (for simplicity) and uses tokens to authorize the client to see the random user information. You'll be able to login, get random users, and logout.

Last Updated: 2018-03-22