At Home Assistant we have used Lit Element to power our new user interface and it has been great. Small and fast components, easy to learn for new developers, intuitive API.
One of the coolest thing is directives, https://lit-html.polymer-project.org/guide/template-referenc... (you can also write your own). Directives are attached to a DOM element and can interact with the DOM as they see fit. Examples are awaiting an async iterator and writing results to the DOM as they come in, or have a directive that attaches an animation or ripple effect to an element on click.
Congratulations on releasing! I think it’s the right approach to use the platform rather than extending it a la JSX. I have a few questions:
1) What is the situation with the patent grant? I know React had something similar at an earlier point, which was heavily criticized and eventually removed.
2) Is there a way to precompile templates, sort of like what a lot of CSS-in-JS libraries do?
3) I was browsing through the source a couple of weeks ago, and it came across as a rather convoluted everything-must-be-a-class design, which I found surprising considering the simple functional style the library encourages externally. Do you think this is motivated over a more straightforward, procedural design?
3) lit-html requires objects with state and behaviors. Seems a perfect fit for classes. We usually get feedback that the source is very readable. I don't think there's any tension between the implementation using classes and the API surface being functional.
Been using Polymer for the last year and loving it. Happy to do very little to get my element portfolio progressively over to litElement. Congrats to the polymer project team on getting this out there!
We have used Polymer (1, 2 & 3), lit-html and LitElement on large production websites for some time now.
Following the progression was a rocky road at times but it really does now provide a very lean base to build from. I rarely find the need to use a framework or some such library anymore unless for consistency within existing projects.
Reuseable components really are easy now and really are reuseable. It'll be very interesting to see where this project goes...
If people are interested in getting started with web components, lit-html and LitElement, we have a bunch of scaffolding and tooling ready to go at: https://open-wc.org/
11 comments
[ 3.1 ms ] story [ 34.1 ms ] threadOne of the coolest thing is directives, https://lit-html.polymer-project.org/guide/template-referenc... (you can also write your own). Directives are attached to a DOM element and can interact with the DOM as they see fit. Examples are awaiting an async iterator and writing results to the DOM as they come in, or have a directive that attaches an animation or ripple effect to an element on click.
For people interested in a UI built with it, the Home Assistant demo is at https://demo.home-assistant.io and source is at https://github.com/home-assistant/home-assistant-polymer/tre...
1) What is the situation with the patent grant? I know React had something similar at an earlier point, which was heavily criticized and eventually removed.
2) Is there a way to precompile templates, sort of like what a lot of CSS-in-JS libraries do?
3) I was browsing through the source a couple of weeks ago, and it came across as a rather convoluted everything-must-be-a-class design, which I found surprising considering the simple functional style the library encourages externally. Do you think this is motivated over a more straightforward, procedural design?
1) I know basically nothing about patents, grants and licenses, so I can't comment there.
2) There are transforms to help minify lit-html templates, like https://github.com/asyncLiz/rollup-plugin-minify-html-litera... . See https://github.com/web-padawan/awesome-lit-html for more
3) lit-html requires objects with state and behaviors. Seems a perfect fit for classes. We usually get feedback that the source is very readable. I don't think there's any tension between the implementation using classes and the API surface being functional.
Following the progression was a rocky road at times but it really does now provide a very lean base to build from. I rarely find the need to use a framework or some such library anymore unless for consistency within existing projects.
Reuseable components really are easy now and really are reuseable. It'll be very interesting to see where this project goes...
https://npm.im/@apollo-elements/lit-apollo
I built a demo chat app that got a 98 lighthouse performance score
https://lit-apollo-subscriptions.herokuapp.com
The project is still in beta, but Freestyle Stats website is built with LitElement & Redux! It has a nice +95 Lighthouse score!
https://freestylestats.com