Build lightning fast web components apps for any framework

Focused View

4:02:52

0 View

1 - A high level introduction to webcomponents

1 - Join the webcomponents Facebook community.mp4

02:04

2 - Google Slides Part 1.txt

2 - What are webcomponents.mp4

02:52

3 - Google Slides Part 2.txt

3 - How component systems evolved until webcomponents came along.mp4

09:14

4 - Google Slides Part 3.txt

4 - What do I get from learning webcomponents.mp4

02:38

5 - Google Slides Part 4.txt

5 - The four parts of the webcomponents spec in a nutshell.mp4

14:25

6 - Google Slides Part 5.txt

6 - When to choose webcomponents when to avoid them.mp4

03:01

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

7 - StackBlitz Live Coding Samples.txt

7 - Using ES Modules for importing and exporting dependencies.mp4

11:35

8 - Arrow functions to the rescue for shorter syntax and easier this references.mp4

10:34

8 - StackBlitz Live Coding Samples.txt

3 - Writing vanilla webcomponents without any libraries

9 - The components were going to build before our production app.mp4

00:58

10 - Getting the course content from GitHub.mp4

01:48

10 - GitHub repository with course contents.txt

11 - Running a basic httpserver for ES modules on localhost.mp4

04:35

11 - httpserver npm package on the yarn package manager site.txt

12 - Creating a profile card that renders dynamic data on atrributeproperty change.mp4

13:44

13 - Protip When defining custom element fails dealing with version conflicts.mp4

04:52

14 - Styling our profile card with the new host pseudo selector.mp4

03:19

15 - Protip Choosing your own tag name vs letting users choose their own tag name.mp4

03:18

16 - Creating a rendering base class extending our card component with it.mp4

04:17

17 - Protip The difference between constructor connectedCallback.mp4

06:37

18 - Creating a noshadow DOM appshell that applies shared styles and theming.mp4

09:34

19 - Fetching profiles and rendering a list of profile cards onto the page.mp4

11:01

20 - Animating cards when data changes via slot change events of a parent component.mp4

10:05

21 - Dispatching and listening to events from our cards to open a dialog component.mp4

06:40

22 - Protip Working around issues with the hidden attribute to hide components.mp4

02:47

23 - Feeding data to our dialog and finishing the final layout.mp4

07:46

4 - Adding automated tests to our app

24 - Why it matters to create automated tests.mp4

04:40

25 - A look at the testing pyramid to understand what we will be testing.mp4

03:38

26 - Stranger Testings When tests go into the upside down.mp4

07:24

27 - Creating a testing plan for our app components.mp4

02:34

28 - Setting up linting for our app with the openwcorg recommendations.mp4

03:08

29 - Using prettier to autoformat our code.mp4

05:48

30 - Discovering and adjusting linting issues via the CLI and fixing linting errors.mp4

06:26

31 - Installing karma for unit testing and creating our first test.mp4

13:21

32 - Creating the remaining unit tests.mp4

29:20

33 - Adding the chrome binary permanently to our env vars.mp4

01:02

34 - Adjusting the acceptable threshold of our code coverage report.mp4

02:21

35 - Running automation tests automatically when pushing to GitHub via CircleCI.mp4

08:55

36 - Setting up slack notifications for failing CI tests.mp4

04:39

37 - Adding badges to our repo to reflect the status of our tests.mp4

01:52

Description

Learn how to create reusable components that work in every modern 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

Who is this 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

What You Need to Know?

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

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.

language english
Training sessions 37
duration 4:02:52
English subtitles has
Release Date 2025/01/16

Courses related to JavaScript

NestJS Microservices: Build & Deploy a Scaleable Backend

Udemy

Michael Guay

NestJS Microservices: Build & Deploy a Scaleable Backend

5:39:18

06/06/2023

Frontend Masters Svelte & SvelteKit

11:40:52

04/16/2024

CBT Nuggets JavaScript Essentials Programming Training

34:29:28

07/15/2023