Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Zwitterion: a web dev server that lets you import anything

github.com

Post reply on HN
Print view View original

121–127 of 127 posts

Re: Zwitterion: a web dev server that lets you import anything

#121

Post by jjeaff »

mumphster wrote: post #32
andybak wrote: post #12

Can anyone point me to a workflow where the cognitive load is similar to how it was in the good old days? i.e. some thing that does everything for me apart from the bit where I write application and presentation code? That mostly just works and doesn't require me to understand the whole stack. Because when I switch to other languages/environments I can most remain blissfully unaware of the plumbing that keeps the thi…

Parcel ( https://parceljs.org/ ) fits this bill nicely and I use it for all my personal frontend development needs (node and browser targeted). You just add a script tag that points to a js/typescript/rust/(whatever else the author eventually adds) file and run parcel on said html file and you get hot reloading, decent error reporting, bundling, and asset loading via `import` without having to configure a single thin…

This is what I was going to suggest. I am working on moving towards react and some other better practices for our current jQuery/spaghetti code front end and I needed to be able to handle multiple entrypoints and types. I messed around with webpack and create react app and gulp and several other things for days before coming across parcel. It just works.

Want to build your react app? Just tell parcel where your index.js is and it will see your react and react dom imports and just build it. No config needed.

Want to do react in typescript? Just change your entrypoints to index.ts. Done. Even handled the yarn add commands for you.

This allowed me to easily have a few different react entrypoints as well as just a few random .ts files for use on pages that aren't built in react yet and then I just watch or build using a wildcard and it takes care of it all.

So far, I'm a big fan.

Re: Zwitterion: a web dev server that lets you import anything

#122

Post by _nalply »

Tonight I just got my own small dev server running without a bundler. It is simpler than Zwitterion because it has a narrower scope: only ES modules, an import map generator and a simple hot reload watcher (with Koajs and a websocket).

My hobby project uses web components with lit-html as frontend. I was frustrated with bundlers. They are probably neccessary in production, however I just wanted to have a smooth code-test loop! A few minutes with my newly created dev server and I soon figured out an old stupid little problem which was stumping me before just because I didn't have a quick code-test loop.

The lynchpin here is the import map. With the import map there's an alternative to bundlers. Instead of transpiling whole projects with all their dependencies, you just let fetch all modules. I know, this doesn't scale, but for quick experiments this is almost too simple to be true.

Re: Zwitterion: a web dev server that lets you import anything

#123

Post by omegabravo »

christophilus wrote: post #115
omegabravo wrote: post #48

Earlier quoted context omitted.

- web components - runtime plugins React is great if you stay in the design constraints, which is to be expected. This covers the vast majority of web apps. edit: [removed svg snippets] I think I was confused with WebComponents not supporting svg elements that don't include the root tag

The app I currently work on is 100% runtime plugin based. React has not been an issue there at all. I haven’t tried using web components, though, so can’t speak to that.

it's not impossible, I have something working with react-registry. With Vue it would work out of the box since it comes with a registry out of the box.

Re: Zwitterion: a web dev server that lets you import anything

#124

Post by z3t4 »

kaoD wrote: post #118
kerkeslager wrote: post #104

Earlier quoted context omitted.

Interesting. That means that the module approach isn't faster than bundling, but with HTTP2, the module approach shouldn't be slower than bundling.

Bundling also deletes dead code so it can potentially save a lot, especially if you import huge libraries and only use a small part of them.

Can you give an example of a bundler that removes dead code and not just minifies it? Dead code removal in JS is a bit tricky, unless we are only talking about code after return statements and other low hanging fruit.

Re: Zwitterion: a web dev server that lets you import anything

#125

Post by kaoD »

z3t4 wrote: post #124
kaoD wrote: post #118

Earlier quoted context omitted.

Bundling also deletes dead code so it can potentially save a lot, especially if you import huge libraries and only use a small part of them.

Can you give an example of a bundler that removes dead code and not just minifies it? Dead code removal in JS is a bit tricky, unless we are only talking about code after return statements and other low hanging fruit.

IIRC as long as you use ES modules, tree-shaking is trivial?

EDIT: not that trivial https://webpack.js.org/guides/tree-shaking/

Re: Zwitterion: a web dev server that lets you import anything

#126

Post by z3t4 »

kaoD wrote: post #125
z3t4 wrote: post #124

Earlier quoted context omitted.

Can you give an example of a bundler that removes dead code and not just minifies it? Dead code removal in JS is a bit tricky, unless we are only talking about code after return statements and other low hanging fruit.

IIRC as long as you use ES modules, tree-shaking is trivial? EDIT: not that trivial https://webpack.js.org/guides/tree-shaking/

Hmm. Now that we have async functions meybe we could also add the pure keyword in order to help optimizations.

Re: Zwitterion: a web dev server that lets you import anything

#127

Post by aylmao »

lastmjs wrote: post #80
aylmao wrote: post #76

This looks like fun! I've been meaning to experiment with some WASM, but none of my ideas warrant investing time setting things up just yet, so I haven't. This will come in handy. @lastmjs: does it support defining the script MIME? I'm thinking something like: // ... script here This really would be a great addition if not, and help drive the narrative that this brings simplicity back to that of "the old days" of web…

You should be able to set the MIME type: https://github.com/lastmjs/zwitterion#headers-file In the case above, you would need to say type="module", because you are importing a module even if it is tsx. But, you should be able to set the MIME type for .tsx files with a custom header file

Awesome! thanks for the heads up!
Post reply on HN