Live data from Hacker News

Writing JavaScript without a build system

jvns.ca

131–140 of 187 posts

Re: Writing JavaScript without a build system

#131

If anyone's looking for something like a framework that works with buildless workflows you might check out the project I work on: Lit ( https://lit.dev ) Lit gives you reactive components, declarative HTML templates, runtime encapsulated DOM and styles, interoperability with frameworks and HTML via web components, and a lot more - with no required build tools at all. We take great care to make sure our libraries are…

First of all, thank you for the work you have done on this, I love lit, use it all the time at work. One thing I struggle with from time to time is that if I have a web component created in lit, and somewhere inside I have a dependency that has some CSS, that CSS doesn’t seem to work when the web component is consumed by JS. The only workaround I found was to override the behaviour and instead of returning a shadow d…

First of all, thank you for the work you have done on this, I love lit, use it all the time at work.

Jealous! All I ever see are react shops, angular shops that are now 'legacy', and the odd place that uses vue.

Re: Writing JavaScript without a build system

#132
post #5

Use npm to install libraries one time only. Try to use as few dependencies as possible. You don't need a framework--components are achievable without vue and react etc. Server side rendering and VDom are really not needed for most projects. Think of Programming in JavaScript, CSS and F5 rather than Typescript and SASS as the equivalent of Marcus Aurelius' Stoicism.

> npm > Try to use as few dependencies as possible.

Hahaha. You joke.

Re: Writing JavaScript without a build system

#133

If anyone's looking for something like a framework that works with buildless workflows you might check out the project I work on: Lit ( https://lit.dev ) Lit gives you reactive components, declarative HTML templates, runtime encapsulated DOM and styles, interoperability with frameworks and HTML via web components, and a lot more - with no required build tools at all. We take great care to make sure our libraries are…

Hey, long time lit-html fan here. Had always held off on using Lit itself because from the documentation it felt like build tools were required. Great to see that's not the case! Definitely going to check this out.

How to work around decorator usage, though? The examples in the documentation seem to be built around the assumption of a build step being present.

Re: Writing JavaScript without a build system

#134

Earlier quoted context omitted.

Hey, long time lit-html fan here. Had always held off on using Lit itself because from the documentation it felt like build tools were required. Great to see that's not the case! Definitely going to check this out.

How to work around decorator usage, though? The examples in the documentation seem to be built around the assumption of a build step being present.

Yeah that's a really good point, actually.

Re: Writing JavaScript without a build system

#135

I agree with calling out esbuild as a great, minimal, stable tool. I recently had the chance to start a small greenfield project. As we have a lot of "tribal knowledge" of Vue I decided to keep it, but go with a "minimum viable tooling" approach. This means esbuild with no plugins, .tsx instead of .vue files (because esbuild natively supports TSX), no hot module reloading (just esbuild's simple refresh-the-page-on-bu…

Hey, congrats. I have a similar setup, except using react.

And I'm torn about styles. I've inlined some and done plain css for others. Though it's still just plain tsx to esbuild.

I've loved it. You can add timestamps to log output by piping a command through the ts Linux command. And I have never seen the second change (it doesn't do sub second timestamps) between the start of a rebuild and the rebuild being done. It's amazing.

Re: Writing JavaScript without a build system

#136

Earlier quoted context omitted.

FAST works without tools as well: https://www.fast.design/docs/fast-element/defining-elements FAST is kind of like a Lit-clone (though it patches global prototypes) plus a design system base. There are lots of design systems built with Lit that you can chose from instead of us including our own: Shoelace, Adobe Spectrum, Redhat Patternfly, IBM Carbon, Material Web Components and more.

What is design system? I have little to no web dev experience. Is it a set of cohesive custom UI components?

Indeed yes!

Re: Writing JavaScript without a build system

#137

If anyone's looking for something like a framework that works with buildless workflows you might check out the project I work on: Lit ( https://lit.dev ) Lit gives you reactive components, declarative HTML templates, runtime encapsulated DOM and styles, interoperability with frameworks and HTML via web components, and a lot more - with no required build tools at all. We take great care to make sure our libraries are…

Most devs have no idea what lit-html + DOM event + sub 100 lines glue code (mvc) is capable of. No useThis useThat non-sense, just call render() manually, really, it's not a big deal like at all.

Can you give me ELI5 difference between Lit and Lit-html for a non-web dev?

Re: Writing JavaScript without a build system

#138

Earlier quoted context omitted.

Hey, long time lit-html fan here. Had always held off on using Lit itself because from the documentation it felt like build tools were required. Great to see that's not the case! Definitely going to check this out.

How to work around decorator usage, though? The examples in the documentation seem to be built around the assumption of a build step being present.

There is a JavaScript/TypeScript toggle on all the code samples, just click that and you’re all set.

Re: Writing JavaScript without a build system

#139

Earlier quoted context omitted.

Most devs have no idea what lit-html + DOM event + sub 100 lines glue code (mvc) is capable of. No useThis useThat non-sense, just call render() manually, really, it's not a big deal like at all.

Can you give me ELI5 difference between Lit and Lit-html for a non-web dev?

Lit-Html is a templating library similar to say Mustache or something like that but I would argue much more expressive. You can see a demo of how it looks here https://www.npmjs.com/package/lit-html

Lit is another library that is made up of a couple of things one of which is lit-html but is closer to a React or Vue by way of comparison.

Some noticeable differences between it and other view layer libraries include the fact that it was written by a team who are arguably much closer to actual browsers engineers and it uses native Web Components. The side-effect of this is that it’s incredibly fast and lightweight. I tend to think of it as the 5kb developer experience enhancement that takes Web Components as a primitive and makes them an actual pleasure to work with.

There are also a series of enhancement packages that are also totally opt in if you want more out of the box like internationalisation, client side routing etc.

If you go to lit.dev the documentation is actually pretty great and it’s probably the easiest way to get started.

Post reply on HN