I see all these preprocessors and crap for "web apps" and I wonder why nobody just writes HTML/CSS/Javascript instead of all of these other "languages" and abstractions or is the base web language now so bad that nobody touches it manually?
- Browsers still have bad and ugly environments. You don’t have all features everywhere, even in recent versions. Things like “class Foo { static x = new this }”-level are missing, not some rare magic (like proper modules). Node.js is a different beast, despite a [vaguely stated] promise to be indistinguishable. Lots of env-neutral code written in node doesn’t work in a browser as is. Think msvc vs gcc/c99.
- CSS is just too low-level, people do like sass, less, etc very much. These have “includes”, functions, variables, flow control, non-css inheritance, bem-related isolation, common shorthands for a syntax. Modular apps cannot live without that.
- DOM is so flipping slow that it requires precise differential updates to it if you don’t want to charge your battery four times a day. It is also much less “cool” than desktop ui data-controls, and it requires a framework, which usually comes from node_modules for reasons above (prebundled versions exist for syntaxless fws). Also, too few people like to write a big single html (again, no “includes” etc) and bind it to the code directly, so there is vue, jsx, pug, etc. The more you abstract it away (dom, not html), the better it is for everyone.
In terms of programming, if you want an analogy, pure browser feels like a single qbasic file on steroids, while bundlers make it feel almost like a visual studio project (put here any decent ide if you don’t like vs).
It sounds like hell to me.
However, what you describe above sounds like what you need to write a full blown application. Why does one need this to display simple information like a blog or news? Tasks that I used the HTML tables stuff for. Nowadays I can enter a personal blog with maybe 100 lines of actual text but it still pulls several megabytes of javascript.
I just can't wrap my head around why all this is necessary when all you want is to display information that could be equally served by a text or html file.
And don't get me started about having been forced to use div's for layouts instead of tables. In fact, I still don't understand why the html table construct couldn't have been evolved to accommodate a layout role.
The entire css thing is overly situational. In a generalized model, any problem is solved by a finite set of building blocks. In css, any problem except few premodelled ones is a pile of hacks and worms that never get back into a can.
1) JavaScript has to be sent over the wire, so it should be minified.
2) Caching is easier if you hash your assets, ie put the MD5 into the URL so browsers know if they’ve downloaded it before or not.
3) Old browsers don’t support modern JS syntax but it can pretty much all be backported by eg turning () => {} into function() {} etc.
4) It’s convenient to use other people’s code by importing it from open source libraries with NPM.
Small issues individually but they add up to meaning any non-hobbyist project ends up needing a bundler.
But what I don't really understand is why do you have to have all the "build tools" that translates one language into another and a lot of all the other stuff. I have no idea what they really do, but it seems so strange that it would be a large process for a scripting language that runs directly in the browser.
Wouldn't be easier to specify the UI directly in javascript using this library like with C++/qt? C++/qt also has something similar to html for declaring UI/UI actions called QML but I never managed to see the improvement over just writing code.
But to me the main benefit is something else. React & co. let you define the state and then rendering based on that. It is incredible what this means for code maintainability... Try it, it really is worth the effort.
If you try building a large scale application (not merely a website or simple CRUD-style service), something as complex and demanding as a Google Sheets in pure html/javascript, you're going to reinvent a lot of wheels in the process and waste an enormous amount of time, for reasons (hopeful performance gains, and minimizing external requirements) that will not be strong enough to justify the time cost. More likely in the process of reinventing wheels, you'll lose a lot of your hoped for performance and simplification gains, as you create your own monsters and bloat.
After a few years of mostly doing React apps, I’m considering vanilla js for a new thing. It’ll be best for performance purposes, but man, I’m gonna miss components.