Odyssey


Component Odyssey

Navigating Your Component Library Journey


01


Learn how to easily build, manage, and distribute your component library in an ever-increasing complex web development landscape.

Created by Andrico Karoulla


02


Building a Library is Hard

Every web developer has thought about creating their own component library, and for good reason. Building a library is an opportunity to express your creativity, learn to develop more accessible web experiences, contribute to the open source community, upskill yourself for a better-paid role, or simply become a more well-rounded web developer.

But the web development landscape has also gotten excessively complicated in the last few years. There’s growing pressure to build for different frameworks and runtimes. New tools are popping up every day that claim to “fix” web development, but they just add another decision to the already growing list of choices you need to make.

You want your components to be widely compatible with the web platform, but choosing one framework locks your components out from being used by others. At this point, it feels that ensuring your library work everywhere is nothing short of a herculean effort.

And despite all of this, you want your end-users to have an enjoyable web experience, you want your library consumers to easily build interfaces using your library, and you want a smooth development experience to build, test, and publish your library.

So how can you achieve this?

You could build an open-source library and hope that it gains widespread adoption, enough so your GitHub issues are flooded with feedback, bugs, and feature requests.

You could assemble a component library for your company using the framework-of-the-month. But when your company decides to use a different framework, you’ll need to start from scratch.

You’ll learn a lot with these approaches, but they take too much time and effort.

I want to save you that time, effort, and leave you with the skills to build better components.

With this course, you’ll learn the ins and outs of building a web-based component library. You’ll learn how to build future-proof components, making them interoperable with React, Vue, Svelte, and any other web framework. You’ll also learn how to improve your library’s development experience using automated testing tools and component cataloging tools.

It’s a journey, one that’s both challenging, and immensely rewarding.

Welcome to…


03


Component Odyssey

Navigating Your Component Library Journey


04


Course Content

01

Tools For Building User Interfaces

Learn about the different ways of writing components, and why this course focuses on web components and CSS utility classes.

02

Writing your First Component

Dive head-first into web components. You’ll learn what they’re made of, their lifecycle, and more. You’ll even build a bunch yourself.

03

Styling your Components

Learn how to customise the appearance of your web component, and how variables and theming can provide flexibility to you and your library’s consumers.

04

Publishing your Library

Discover the ins and outs of publishing a component library. You’ll learn about the JavaScript module system(s), publishing to the NPM registry, managing versions, and more!

05

Automating your Code Quality

Learn how to keep a consistent code style, using tools like Prettier and ESLint, and you can automate this process for hassle-free maintenance.

06

Writing Tests for your Components

Ensure that your components work across browsers by writing tests. You’ll develop a testing strategy and write tests for your first component.

07

Automating Your Workflows

Combine your newfound knowledge to streamline your testing and publishing workflow using GitHub Actions.

08

Creating your Second Component

Flex your coding muscles by building, testing, and publishing an interactive and customisable accordion component. You’ll see just how far you’ve come on your Component Odyssey!

09

Adding Types to your Library

Learn all about type systems, and how they can make you more efficient. You’ll also learn how types can provide benefits for the consumers of your components.

10

Documenting your Components

Learn to build a showcase site for your components that serves as user-friendly and clear documentation for your library.

11

Creating your Third Component

Cap off your odyssey by building, styling, testing, typing, documenting, and publishing a complex component. You’ll create a fully-fledged component development workflow that you can use for your future component libraries.


05


Meet Andrico Karoulla

Andrico Karoulla is a web developer based in London. He’s worked at a number of startups and has built design system automation tooling at Anima.

He’s also an open-source contributor, involved in projects like the Open UI, where he led the site rewrite.

Andrico’s also built component libraries for fun, like A2K, the Windows 2000-inspired web component library.

You can connect with him on Twitter and on LinkedIn

andrico karoulla

06


We're Not Quite Ready to Embark

Be the first to know when Component Odyssey is ready to set sail and get access to early-bird prices.


07


FAQs

What do I need to know before taking this course?

To get the most out of this course, it's recommended that you have some experience with HTML, CSS, and JavaScript. The course won't be teaching you the fundamentals of these languages, but rather how to use them to build a component library. Experience with Git and GitHub will also be helpful, but not required.

Why aren't you teaching TypeScript in this course?

TypeScript is a great language, and I use it in my day-to-day work. However, I don't think it's necessary to use TypeScript to build a component library. I want to make this course as accessible as possible, and I don't want to add an extra barrier to entry by requiring you to learn TypeScript. JSDoc is a great lightweight alternative to TypeScript, and it's what you'll be using in this course.