Lit-element: [docs] best practices

[sorvell]

We get a lot of questions about how elements should be constructed using LitElement and where and how to do various things.

We want to add a best practices document to the wiki here to address some of these questions and put forward some guidance about patterns to use.

[cacophobe]

Would really appreciate some help/documentation regarding setup, especially from a beginner's perspective and independent of _polymer-cli_.

Since _Polymer_ seems to be embracing the larger _Node_ ecosystem, it would probably make sense to have some instructions on how to configure _WebPack/Babel_ to be able to use this.

Couldn't get _polymer-cli_ to work in my case, which brought the lack of documentation on alternatives to my attention. It's really difficult for a beginner to start debugging _polymer-cli_ just to able to start using _Web Components_.

Also, since _Lit-Element_ is now recommended for new projects by the team, it's seems likely that those who want to start learning _Polymer/Web Components_ now, will start here.

If _#UseThePlatform_ is the goal, decoupling this from _polymer-cli_ would help those who want to use the minimum amount of extraneous tools/frameworks in order to embrace the future.

Isn't that why anybody would want to learn _Polymer/Lit-Element_ in the first place?

[LarsDenBakker]

I've started writing down examples / best practices here: https://github.com/LarsDenBakker/lit-html-examples. Perhaps that can be a starting point.

[myfreeweb]

Since immutable data is pretty much necessary to do anything in lit-element, I'd suggest making immer an official (?) recommendation — it's a very lightweight alternative to Redux. It's easy to use for anyone used to mutable data and it is published as an ES Module unlike some other solutions (e.g. freezer).

Couldn't get polymer-cli to work in my case, which brought the lack of documentation on alternatives to my attention

Yeah, I couldn't find any alternatives (well, non-bundling ones — everyone in the react/etc. world seems to be using webpack dev server and such), so I made my own lightweight alternative recently: es-module-devserver. It's a middleware that serves static files and resolves npm-style imports in JavaScript files. Only resolves imports, nothing more. And it uses regular expressions, so you don't have to drag in a whole JS parser as a dev dependency.

[web-padawan]

This blog post has some really useful info: https://43081j.com/2018/08/future-of-polymer

[EpicButterz]

I agree with @cacophobe about decoupling from the polymer-cli. I was really surprised when I learned that I was basically forced to use it. One of my main expectations from lit-element was that I could rid myself of complicated build processes. I understand that using the polymer-cli isn't all that complicated but it was a hurdle to get over and it doesn't seem right to be dependent on it. Honestly, I am just fine with relative paths to node_modules as long as it eliminates build steps.

[myfreeweb]

@EpicButterz please read my comment above — I don't use polymer-cli, I built a very tiny dev server that converts node_modules path. Alternatively, you can use a webpack/rollup server if you're not looking for the '100% no build' experience.

[justinfagnani]

I think this issue is a bit broad and vague to be actionable. We can add issues for specific guidance as it comes up.