Udemy

Build lightning fast web components apps for any framework

Enroll Now
  • 441 Students
  • Updated 4/2019
4.3
(79 Ratings)
CTgoodjobs selects quality courses to enhance professionals' competitiveness. By purchasing courses through links on our site, we may receive an affiliate commission.

Course Information

Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
4 Hour(s) 2 Minute(s)
Language
English
Taught by
Andreas Galster
Rating
4.3
(79 Ratings)
2 views

Course Overview

Build lightning fast web components apps for any framework

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

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.


Course Content

  • 4 section(s)
  • 37 lecture(s)
  • Section 1 A high level introduction to webcomponents
  • Section 2 Bonus Chapter: Introduction to ES Next JavaScript features used in this course
  • Section 3 Writing vanilla webcomponents without any libraries
  • Section 4 Adding automated tests to our app

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

Reviews

  • M
    Maikel van de Lisdonk
    3.5

    Ik had verwacht dat er typescript gebruikt zou worden en tevens meer moderne javascript/typescript features (zoals optional chaining en nullish coalescing)

  • D
    David Nebreda Santos
    4.5

    Hello: Good course in general, very complete in every way. At the end, it gets a bit thick, but in general, the instructor is knowledgeable about the subject.

  • J
    Jorge Sader
    3.5

    To be honest, I had a hard time grading this course. On the one hand, I really think that it is a great overview of web components and I'm sure that even some experienced users would benefit from Andrea's knowledge and familiarity with them. But, and it's kind of a big but for me, It feels as if the course is unfinished. On the preview, as well as several times during the course itself, he mentions converting the project to Lit-elements which, unfortunately he never does... This was a major bummer for me as I was already somewhat familiarized with WC and wanted to learn more about Lit specifically. Again, on his shared Github there are files and folders with lit-elements but he never gets to explaing them on the course. Again, he is clearly knowledgeable about the subject and has an approachable teaching style worthy of 5 stars but, given that he failed to deliver the offerred materials, I can't give it more than 3.5. Hopefully, Andreas finds the time to update this course, and I would be happy to update my review. for now... 3.5 it is!

  • A
    Alex Jongman
    3.0

    Screen recording is hard to read, the Q&A section is poorly maintained and the course material could use an update.

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed