Lit 3.0 Explained

so here is you back in 2010 enjoying the simple life of building apps with plain old JavaScript and jQuery and this is your life now 15 years later drowning in front-end Frameworks and spending more time learning about them than actually using them that escalated quickly I mean that really got out of hand fast if you are sick and tired of all these libraries web components and especially Elite might be the perfect solution for you so first of all what are web components well in short they are a collection of existing web standards which allow you to build reusable Standalone custom HTML elements these components are no different than the usual components you might be used to when working with libraries like react or angular they have their own behavior written in JavaScript they are styled using scoped CSS and they use HTML and string interpolation for templating purposes even though the developer experience might be at that different with web components you'll be able to build the same type of reactive powerful user interfaces all modern web apps are providing why use web components in favor of one of the many other established Solutions first of all your code will only relearn web standards this means little to no JavaScript overhead sent over the wire there is no framework in internal logic or third-party hidden dependencies which is more than useful in this day and age when everybody is focusing on over the world performance and optimized resource consumption second of all your code will be framework agnostic components can be easily used in other code bases and they will play nicely with any other framework if that's a requirement finally you'll end up building truly reusable components in my experience this is really the case when working with react for instance you really need to apply yourself to create Standalone isolated components there but web components kind of force you to tackle things in a different manner okay enough with the sales pitch for web components the topic of this video is actually lit a lightweight tool that simplifies the way you build web components they just announced their future version 3 release so this is a good attempt as any to take a quick look at the whole Loop component space through the lit lens in all honesty working directly with web standards is somewhat tedious and boilerplaty lit will allow you to enjoy all the web component's advantages while providing a much better developer experience here are some of the lead's main benefits first of all it is simple providing a straightforward reactivity model declarative templates and a handful of other thoughtful features aimed to reduce the boilerplate code it is also fast with a tiny footprint it weighs in around 5 kilobytes minified and compressed it follows the more modern approach of updating the Dom directly when any Dynamic part is changing in comparison Frameworks like angular reactor view are using a virtual Dom diving strategy which affects both the complexity of the code and the used memory finally it plays really well with typescript which is always a plus these days since TS is pretty much the norm in front-end development despite it not being one of the popular kids a lot of big established companies are using lit in production to build shareable component libraries Design Systems or even in their websites ok now let's take a look at the component I built for the past minute or so of course I'm using typescript which allows me to Define lit elements using decorators lit components are standard custom elements so the browsers will treat them exactly like any other built-in element then using the CSS helper I can Define scope styling rules for my component now that you have to assign the rules to a static Styles class property and lit will take care of the rest next let's take a look at State and props the main actors behind leads reactivity just like in any other framework via properties your component will receive information from the outside world and Via state it will keep track of the internal data your component needs to handle its business logic any change in these fields will cause an update in the render function and since I mentioned the world outside your component you can also send information to parent components via events finally the render function contains the HTML template which will be displayed in the Dom this implementation is based on template literals and you have full flexibility in the HTML helpers with support for conditional rendering rendering lists and various built-in directives pretty straightforward right of course the elements in your component Dom can trigger events and you can either handle those events internally or bubble them up to the outside world we should also briefly touch on the shadow Dom topic since this is the mechanism that allows lit components to add an isolated and encapsulated Dom tree to an element this approach has two main benefits thumb scoping which means that the main Dom won't directly find elements in your component Shadow Dom so it's going to be harder for Global scripts to break your component and style scoping which ensures your CSS rules will have no effect on the outside world so granted lit and web components are not enjoying the same hype as some of the other front-end Solutions but they are actually more powerful than one would expect with a simple straightforward API this allows you to build pretty much any type of component since these components are basically native Dom elements they can be used in any type of web app be it an spa or a server-side rendered app the days of building Spas everywhere are long gone and there are various new architectures where lit components could actually make way more sense please let me know in the comments if you believe this is a topic worth exploring or not if you found this video useful don't forget to click the like And subscribe buttons and until next time thank you for watching

Channel: Awesome

Views: 61,258

Keywords:

Id: Jy0dMy2qDMo

Length: 5min 45sec (345 seconds)

Published: Mon Jun 19 2023