Build lightning fast web components apps for any framework

Learn how to create reusable components that work in every modern framework

Created byAndreas Galster

Last updated 4/2019

English

What you'll learn

You will learn the webcomponents spec: Templates, Custom Elements, Shadow DOM, ES Modules
You will learn to build re-usable components without any library
You will learn protips on how to use webcomponents in real-world scenarios
You will learn to build a complete app with four components
You will learn to use new CSS pseudo selectors for shadow DOM
You will learn to use webcomponent state management & communication

Course content

4 sections • 37 lectures • 4h 2m total length

Join the webcomponents Facebook community2:04
What are webcomponents?2:52
How component systems evolved until webcomponents came along9:14
What do I get from learning webcomponents?2:38
The four parts of the webcomponents spec in a nutshell14:25
When to choose webcomponents & when to avoid them3:01

The components we're going to build before our production app0:58
Getting the course content from GitHub1:48
Running a basic http-server for ES modules on localhost4:35
Creating a profile card that renders dynamic data on atrribute/property change13:44
Protip: When defining custom element fails – dealing with version conflicts4:52
Styling our profile card with the new :host pseudo selector3:19
Protip: Choosing your own tag name vs letting users choose their own tag name3:18
Creating a rendering base class & extending our card component with it4:17
Protip: The difference between constructor & connectedCallback6:37
Creating a no-shadow DOM app-shell that applies shared styles and theming9:34
Fetching profiles and rendering a list of profile cards onto the page11:01
Animating cards when data changes via slot change events of a parent component10:05
Dispatching and listening to events from our cards to open a dialog component6:40
Learn to dispatch and listen for events to open a dialog from a profile card, wire a profile dash dialog, and manage a backdrop with proper open and close behavior.
Protip: Working around issues with the hidden attribute to hide components2:47
Feeding data to our dialog and finishing the final layout7:50

Why it matters to create automated tests4:40
A look at the testing pyramid to understand what we will be testing3:38
Stranger Testings: When tests go into the upside down7:24
Creating a testing plan for our app & components2:34
Setting up linting for our app with the open-wc.org recommendations3:08
Using prettier to auto-format our code5:48
Discovering and adjusting linting issues via the CLI and fixing linting errors6:26
Installing karma for unit testing and creating our first test13:21
Creating the remaining unit tests29:20
Adding the chrome binary permanently to our env vars1:02
Set the chrome binary in your environment variables by permanently adding it to your profile file, ensuring chrome is always found by karma and related testing tools.
Adjusting the acceptable threshold of our code coverage report2:21
Running automation tests automatically when pushing to GitHub via CircleCI8:55
Set up continuous integration with CircleCI to automatically run tests on push, deploy to staging or master only when tests pass, and enable Slack notifications.
Setting up slack notifications for failing CI tests4:39
Set up Slack notifications for failing CircleCI tests with a CircleCI integration, posting failures (and fixes) to a testing channel, while enabling branch-specific notifications to reduce spam.
Adding badges to our repo to reflect the status of our tests1:52

Requirements

Basic HTML, CSS & JavaScript knowledge is required
Bonus chapter on JS features used in the course included
No prior webcomponents knowledge required
Prior experience with component systems a plus but not mandatory

Description

A lot of aspiring developers and even experienced frontend developers tend to get hung up on the complex dependencies and setup requirements just to get started writing web applications. Not with this course. The first coding chapter uses no libraries at all and the rest of the course uses easy-to-use boilerplate templates for you to get started with.

This course showcases a new standard called web components, which allows us to write re-usable and framework agnostic components without the need of any tooling or libraries. You'll be able to write your own lightning fast web component powered apps or build single components to drag & drop into your existing projects, independent of what framework you're using.

Web components work with Angular, React, Vue and many more frameworks out of the box.

This course goes well beyond the basics of web components by teaching real-world best practices for efficiently building web apps. Whether you're a beginner or have existing experience with web development, I've made sure to pack the course full with my years of experience building products the right way. Topics include:

Web components basics:

The theory and concept behind web components and all four parts of the spec
How do define custom elements and deal with the lifecycle of a component
Managing state and rendering to the shadow DOM
Different concepts on how component communication can be managed
Introduction to new CSS pseudo selectors for web components like :host or ::slotted
Building your first app with the technologies mentioned above

Real-world automated tests via ESLint & Karma

Implementing linting vis ESLint
Setting up prettier for automatic code-formatting
Unit and integration testing via Karma
Setting up Istanbul for code coverage reports
Setting up CircleCI for Continuous Integration, so tests run with every push to your repo
Setting up slack notifications for failed and fixed tests
Adding CI badges to your repos to highlight the status of your tests

After taking this course, you’ll have a solid foundation in the fundamentals of the web components standard, and will be confident enough to build production grade apps powered by web components.

Who this course is for:

Beginner webdevelopers wanting to learn the hottest frontend trend in 2019
Beginner or advanced developers with existing frameworks knowledge (React, Angular, Vue, etc) who want to try webcomponents
Advanced developers who want to integrate webcomponents in their existing workflows and frameworks

Build lightning fast web components apps for any framework

What you'll learn

Explore related topics

Course content

A high level introduction to webcomponents6 lectures • 34min

Bonus Chapter: Introduction to ES Next JavaScript features used in this course2 lectures • 22min

Writing vanilla webcomponents without any libraries15 lectures • 1hr 31min

Adding automated tests to our app14 lectures • 1hr 35min

Requirements

Description

Who this course is for: