Build lightning fast web components apps for any framework
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
- Preview02:04
- Preview02:52
- Preview09:14
- Preview02:38
- Preview14:25
- Preview03:01
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
Instructor
![Andreas Galster](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
- 3.4 Instructor Rating
- 74 Reviews
- 1,146 Students
- 2 Courses
Graphic designer who turned to the dark side of the UX, after which he ruled the product & tech empire with an iron-clad fist as Lord Product and Lord Engineering.
I have traveled across the South East Alderaanian hemisphere and have commanded legions in battleships of type Series A and Series B. Eventually I realized that the dark force is strong within me, so I set out to create my own legion and formed the order of Product PH, one of the largest assembly of evil product people in the galaxy. Together we ruled over the senate until I decided to turn back to the light side of the force, teach younglings how to become good at coding, design and product management on YouTube and Udemy.
May my course be with you!