Building a Web Components Framework with Webpack, in Just a Few Hundred Lines of Code

You will learn all about Web Components, Webpack, Babel, Routing (History API), component creation, data flow and services.
Everyone is fighting over which frontend framework is the best, but few have realised that you can just use web components instead. Creating truly universal, and high performance elements for your web applications that can be used alone, or in any framework. Using these elements directly is great, but you will miss some of your favorite framework features like routing. This can be easily accomplished by creating a tiny framework on top using super modern javascript. I will teach you all you need to know about frameworks, web components, and webpack, the glue that holds it all together.
Repo: github.com/JGH153/web-compone...
Demo: web-components-webrtc.web.app/
Blog: blog.sysco.no/front-end/web-c...
--
00:00​ - Intro & Demo
00:35​ - Overview
01:54 - Web components intro
04:42 - Project structure
07:28 - Web Components limitations
08:38 - Webpack
12:07 - Babel
14:50 - Less than 20 KB
15:56 - Components
19:00 - Directives
20:20 - Services
22:43 - Routing
28:24 - Missing features
30:00 - Ending
--

[@arimos3136]

Thanks for this video a lot!

[@elsicongru7400]

This was AMAZING, thanks a ton for creating such a wonderful guide! I know its been a while, but please consider creating the follow-up video, or at least something with 2 way data binding and a render loop :)

[@2002budokan]

This content is much more impressive than many hours long courses. Thank you, you've been subscribed.

[@hanneable]

Wow!

[@nightmare_js]

This is great! Looking forward to see the next features of the framework!

[@chharsha231]

Such a Beautiful video you made man. Changed my perspective on frameworks. Please post more videos.

[@LadislavSzolik]

Very good content! Specially your explanation style -> very clear, focused and information rich. Looking forward to more!

[@sourishdutta9600]

Create more videos like this. Awesome 👌 Thanks 😊

[@mincinoiu]

Really interesting, keep going.

[@injectsploit]

very helpful keep going.

[@2002budokan]

Does raw-loader minify html and css? If not how can we minify them before putting them into the shadow DOM?

[@purnachander8076]

Can you please explain how can I import the framework to a project?

[@steffendyhr-nielsen425]

Extremely helpful video, but source code is hopelessly outdated, being a web project and 2 years old.