5 ms·
I’ve gotten so tired of the near infinite complexity of the angular / react / webpack / typescript / sass projects at work that for my home projects I’m now exp
by Joeri 5y ago
I’ve gotten so tired of the near infinite complexity of the angular / react / webpack / typescript / sass projects at work that for my home projects I’m now exploring no build tool solutions. Modern browsers are now so powerful that a lot of the things we needed build tools for no longer apply:
- http/2 multiplexing has made it unnecessary to limit the number of script or css files loaded at once. Faster connections together with http/2 mean payload splitting is no longer necessary for js and css (which means everything can load up front from index.html). Gzipping removes the need for minification.
- Any npm package can be loaded as script tags or through direct es6 module import from unpkg.com. I use a single ‘externals.js’ which exports those dependencies so I can just do “import { foo } from ‘externals.js’”
- sass is mostly unnecessary thanks to widespread css3 support, @import for modularity (see also http/2), bem notation for namespacing, and css variables for reuse
- es6 is supported in all browsers, so you can write modern code. ES6 modules “just work” if you import from a file path.
- vue and preact are designed to be used without build tools. An app deployed as a static site can use hash routing to need no builds and no server-side router.
Experimenting with this stuff has really made me wonder why we use all of these build tools.
- pitaj 5y ago> Gzipping removes the need for minification. _need_ is a strong word. You don't _need_ gripping either. Both minifying and gzipping still provide substantial benefits. > Any npm package can be loaded as script tags or through direct es6 module import from unpkg.com This prevents tree-shaking and dead code elimination.
- Joeri 5y agoWell, the libraries included at runtime from cdn are still minified. It’s only the app code that is gzipped and not minified, and it is only the very largest projects where minification will make a meaningful difference for the app’s own (not library) code. There is usually no point to minifying the app’s own code. As for tree shaking. When using lightweight libraries meant for the no build path this isn’t necessary because these aren’t pulling in lots of dependencies. Preact is tiny and is a good enough react for my needs. I wouldn’t recommend this approach for large web apps, but most web apps are small enough that a no build tools approach seems viable to me.
- recursive 5y agoHow are you getting native ES modules to import from file:? When I try that, I get a cross-origin error. No two file: urls seem to be the same origin.
- Joeri 5y agoI mean that when hosted as a static site you can do es6 imports by importing from a url for a file.
- ComputerGuru 5y agoI wrote a generic loader that’s compatible with old school scripts, amd, node, and es imports that does just that. It’s zero config and would be fully automated except given a local npm/yarn env, I just need some way of going from “fookpg” in “import foo from foopkg” to node_modules/foopkg/entrypoint.JS How can you resolve a module name to its path without external dependencies?
- throw_m239339 5y ago> - vue and preact are designed to be used without build tools. An app deployed as a static site can use hash routing to need no builds and no server-side router. So is React. JSX and React are 2 different things. But honestly, React without JSX is a pain to write. Minification and hashing for secure script embedding are still needed, but it could provided directly by a server middleware, depending on the language one uses. IMHO Typescript is still something useful.
- Joeri 5y agoInstead of JSX I’ve been using htm, which fulfills roughly the same role but runs entirely in the browser: https://github.com/developit/htm https://github.com/developit/htm I find typescript useful for libraries, less so for application code.