Udemy

Platform

English

Language

Web Development

Category

Build lightning fast web components apps for any framework

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

4.05 (59 reviews)

Students

4 hours

Content

Apr 2019

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive SkillShare Offer
Unlimited access to 30 000 Premium SkillShare courses
40%OFF ANNUAL MEMBERSHIP

What you will 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


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.



Screenshots

Build lightning fast web components apps for any framework
Build lightning fast web components apps for any framework
Build lightning fast web components apps for any framework
Build lightning fast web components apps for any framework

Content

A high level introduction to webcomponents

Join the webcomponents Facebook community

What are webcomponents?

How component systems evolved until webcomponents came along

What do I get from learning webcomponents?

The four parts of the webcomponents spec in a nutshell

When to choose webcomponents & when to avoid them

Bonus Chapter: Introduction to ES Next JavaScript features used in this course

Using ES Modules for importing and exporting dependencies

Arrow functions to the rescue for shorter syntax and easier this references

Writing vanilla webcomponents without any libraries

The components we're going to build before our production app

Getting the course content from GitHub

Running a basic http-server for ES modules on localhost

Creating a profile card that renders dynamic data on atrribute/property change

Protip: When defining custom element fails – dealing with version conflicts

Styling our profile card with the new :host pseudo selector

Protip: Choosing your own tag name vs letting users choose their own tag name

Creating a rendering base class & extending our card component with it

Protip: The difference between constructor & connectedCallback

Creating a no-shadow DOM app-shell that applies shared styles and theming

Fetching profiles and rendering a list of profile cards onto the page

Animating cards when data changes via slot change events of a parent component

Dispatching and listening to events from our cards to open a dialog component

Protip: Working around issues with the hidden attribute to hide components

Feeding data to our dialog and finishing the final layout

Adding automated tests to our app

Why it matters to create automated tests

A look at the testing pyramid to understand what we will be testing

Stranger Testings: When tests go into the upside down

Creating a testing plan for our app & components

Setting up linting for our app with the open-wc.org recommendations

Using prettier to auto-format our code

Discovering and adjusting linting issues via the CLI and fixing linting errors

Installing karma for unit testing and creating our first test

Creating the remaining unit tests

Adding the chrome binary permanently to our env vars

Adjusting the acceptable threshold of our code coverage report

Running automation tests automatically when pushing to GitHub via CircleCI

Setting up slack notifications for failing CI tests

Adding badges to our repo to reflect the status of our tests


Reviews

P
Paco23 September 2020

It was a pleasure to view the videos and follow along. The pacing of the course is just right, however, I would have preferred it if the author spoke and showed the demos slower. I would have also preferred it if there were more sample web components that the author could have a demo on and not just on the profile card example (e.g. a News Feed web component which loads more data when you scroll down); it would add a lot more value to the course.

N
Nithin1 September 2020

An average to good course but it has it's disadvantages. One being the zooming on the screen. It is very hard to focus. Probably in future, if the instructor adds videos on how to convert VanillaJS to Polymer or any other frameworks would be cherry on top.

Y
Yogesh20 July 2020

The video is not zoomed in so its difficult to follow as the text is very small. However the content is good.

R
Rajesh3 May 2020

I wanted to learn about WebComponents in a basic manner just as defined in the course. Thank you so much, Author :)

J
Joshua15 September 2019

Descent course, you need to do a better job of keeping it up to date with the changing of the testing tools. Not trying to complain as it did teach me a decent amount about web components but the testing section leaves a lot to be desired.

f
falken7 September 2019

Well, watching this instead of saturdays night movie, you forced me to go to keyboard to say that this is exactly what I was looking for after several weeks of investigation of React and Vue and Svelte and whatever - being far away from web UI for a while... This WebComponents approach is low level, but standards based and its what I need to know about current state of technology. Till now, after 60% completed, here was NO TOOLCHAIN, no npm builds, nothing as that..., everything happens in chrome-dev-tools with instant code-reload-debug loop... wonderfull. Its not for everybody, but to learn how things works inside its perfect, ... hopefully you will mention also LitElement, LitHtml or something at higer(?) level - but, you know, I will generate stuff around this for my use-case, so, no worries.... Thanks :-)

L
Lazar4 September 2019

You used so many experimental web technologies, who is that useful for anyone right now. Most of them are not even planned for drafts right now like element.animate()... Overall course can be usefull as intro to web components, and I get you used many shortcut technologies to keep the course small, and to create a qucik course without investing yourself too much, but many will start using those and end up getting into a trap.

T
Thomas21 July 2019

I'm enjoying this course so far, well done. It's covering everything I need to know. I appreciate the explanations on why certain things are required.

J
Jonathan9 April 2019

It would be very helpful to get a summary of what we are doing prior to actually doing it. Some exercises that ensure we have an understanding of the content that is being provided would also be useful. At this juncture, I'm just following along, essentially making the changes with you - I'm not sure that's a very good learning mechanism.


1828282

Udemy ID

7/30/2018

Course created date

7/4/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram