Build lightning fast web components apps for any framework

Build lightning fast web components apps for any framework, available at $39.99, has an average rating of 4.25, with 54 lectures, based on 73 reviews, and has 426 subscribers.

You will learn about 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 This course is ideal for individuals who are Beginner webdevelopers wanting to learn the hottest frontend trend in 2019 or Beginner or advanced developers with existing frameworks knowledge (React, Angular, Vue, etc) who want to try webcomponents or Advanced developers who want to integrate webcomponents in their existing workflows and frameworks It is particularly useful for Beginner webdevelopers wanting to learn the hottest frontend trend in 2019 or Beginner or advanced developers with existing frameworks knowledge (React, Angular, Vue, etc) who want to try webcomponents or Advanced developers who want to integrate webcomponents in their existing workflows and frameworks.

Enroll now: Build lightning fast web components apps for any framework

Summary

Title: Build lightning fast web components apps for any framework

Price: $39.99

Average Rating: 4.25

Number of Lectures: 54

Number of Published Lectures: 37

Number of Curriculum Items: 54

Number of Published Curriculum Objects: 37

Original Price: $89.99

Quality Status: approved

Status: Live

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

Who Should Attend

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

Target Audiences

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

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 Curriculum

Chapter 1: A high level introduction to webcomponents

Lecture 1: Join the webcomponents Facebook community

Lecture 2: What are webcomponents?

Lecture 3: How component systems evolved until webcomponents came along

Lecture 4: What do I get from learning webcomponents?

Lecture 5: The four parts of the webcomponents spec in a nutshell

Lecture 6: When to choose webcomponents & when to avoid them

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

Lecture 1: Using ES Modules for importing and exporting dependencies

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

Chapter 3: Writing vanilla webcomponents without any libraries

Lecture 1: The components were going to build before our production app

Lecture 2: Getting the course content from GitHub

Lecture 3: Running a basic http-server for ES modules on localhost

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

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

Lecture 6: Styling our profile card with the new :host pseudo selector

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

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

Lecture 9: Protip: The difference between constructor & connectedCallback

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

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

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

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

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

Lecture 15: Feeding data to our dialog and finishing the final layout

Chapter 4: Adding automated tests to our app

Lecture 1: Why it matters to create automated tests

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

Lecture 3: Stranger Testings: When tests go into the upside down

Lecture 4: Creating a testing plan for our app & components

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

Lecture 6: Using prettier to auto-format our code

Lecture 7: Discovering and adjusting linting issues via the CLI and fixing linting errors

Lecture 8: Installing karma for unit testing and creating our first test

Lecture 9: Creating the remaining unit tests

Lecture 10: Adding the chrome binary permanently to our env vars

Lecture 11: Adjusting the acceptable threshold of our code coverage report

Lecture 12: Running automation tests automatically when pushing to GitHub via CircleCI

Lecture 13: Setting up slack notifications for failing CI tests

Lecture 14: Adding badges to our repo to reflect the status of our tests

Instructors

Andreas Galster
Jack of all product and tech trades

Rating Distribution

1 stars: 0 votes

2 stars: 2 votes

3 stars: 12 votes

4 stars: 28 votes

5 stars: 31 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!