Live data from Hacker News

Writing JavaScript without a build system

jvns.ca

121–130 of 187 posts

Re: Writing JavaScript without a build system

#121
I'm working on a bigger long, term project, but I've been aiming for the sweetspot of effective yet fast builds. She noted esbuild for its stability, but it's also quite fast.

My setup for a nice ui dev experience now consists of 3 things:

- yarn plug-n-play

- esbuild, invoked from thr cli and not node, with no plugins. I run it in watch mode.

- caddy as the reverse proxy to serve the watch files and the api under a single url

It has been refreshing fast. And add into that generating TS api bindings for my backend server automatically... well it's great.

Re: Writing JavaScript without a build system

#122
post #46

When I was learning HTML and JS in the early 2000s, most web pages had hand-written source code, and most JS I encountered was hand-crafted and unminified. So I learned programming by just reading the code of the pages I was on. That's the main reason for me not to use a build system. You lose that "transparency" and accessibility of the code. With "raw" HTML/JS, the user can just copy paste your HTML/JS (often it wa…

What about source maps?

Re: Writing JavaScript without a build system

#123
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.

JavaScript and CSS are to Stoicism as Typescript and SASS are to _____?

It should be “JS and CSS are to TypeScript and Sass as Stoicism is to _____?”

Re: Writing JavaScript without a build system

#124
post #6

All those extraneous elements to Javascript are a real turn-off. Python: batteries mostly included. Javascript: feels like you need to drag a dozen suitcases along anytime you embark on any non-trivial project.

Frankly, if you're just writing a local CLI tool with Node, it's not really an issue. Most of the build tool features listed in the article aren't needed for a local JS runtime. Node is even getting a built-in testing framework, and Deno can run Typescript without an intermediate step!

Build tools for JS solve problems that other languages don't have to worry about. You can't use Python (directly) in a browser which means none of these things are important:

1. Bundle size. This doesn't really matter when you're just running it locally. Maybe you want the final binary to be somewhat small, but it could still be many dozens of megabytes and it'd be a non-issue. If a website was like 50MB, it'd be incredibly slow.

2. Platform compatibility. Every user is running a slightly different environment. Gotta support different browsers, or older ones? Now you need to polyfill the language features to exactly what the browser supports. Compiled languages don't have to worry about that at all, and even with Python, you're mostly just worried about the major language version a user might have installed (iirc).

3. Anything related to writing UIs. In JS, you're writing for the browser, which has a pretty limited set of APIs for writing complex, interactive UIs. Hardly anything to help write interactive declarative or reactive UIs. On top of that, since the site is always remote, pretty much everything has a round-trip to a server involved. This means you may start pulling in dependencies to help solve these problems. In Python, you probably just choose a UI framework like QT and it gives you most everything out of the box.

My point is just that we tend to compare JavaScript to other languages without really considering the unique environment JS gets deployed to. It's really not comparable. If Python (or any other language) was running in a browser, you'd have a huge new class of problems for that language to solve which it just didn't need to care about before.

I feel like the meaningful comparisons to JS are related to language syntax, type system, local runtime performance, dependency management, etc. And those topics are a lot more subjective!

Re: Writing JavaScript without a build system

#126

Earlier quoted context omitted.

I just want to point out there is a great alternative from Microsoft called `fast-design`[0] which provides a more fleshed out experience than Lit does, in terms of out of the box components. It does have lower level packages if you don't want ready made components too [0]: https://www.fast.design/

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?

Re: Writing JavaScript without a build system

#127

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…

How much do I have to know about web components before using Lit?

But thank you for your response. Did not know that I was looking for Lit all these time. Every time I want to dabble into web dev, I get frustrated by multitude of tools need to setup first. All I wanted was to import a library using script tag and start building.

Re: Writing JavaScript without a build system

#128

Earlier quoted context omitted.

> The appeal of JavaScript when it was invented was its immediacy. You can still do that. Nothing has changed. It's probably gotten even easier. Have fun implementing a complex UI without some sort of component Framework though.

You can easily build complex UIs without a framework. Chrome DevTools, Chrome OS, Photoshop, Firefox and other very complex apps have been built with web components.

Firefox was built with web components? Whaaaat?

Re: Writing JavaScript without a build system

#129

I'm working on a bigger long, term project, but I've been aiming for the sweetspot of effective yet fast builds. She noted esbuild for its stability, but it's also quite fast. My setup for a nice ui dev experience now consists of 3 things: - yarn plug-n-play - esbuild, invoked from thr cli and not node, with no plugins. I run it in watch mode. - caddy as the reverse proxy to serve the watch files and the api under a…

i found esbuild to be inadequate last time i tried it. which i think was a couple months ago. doesn't support ts libraries nicely. still need to output to both mjs and cjs and output d.ts files for proper compatibility. only thing that fits the bill is rollup

Re: Writing JavaScript without a build system

#130

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.
Post reply on HN