Although I've contributed to some React projects, the last time I had to do user-facing web frontend stuff was with the original Angular. Looking at this, I'm really glad I don't do frontend anymore.
I've touched some vue.js too, but I just hate the direction everything is going. These projects are just insanely complex. Component frameworks may be easier to develop with, but they add so much damn bloat and crazy amounts of tooling. I get frustrated enough with Jekyll and that's just a static content generator.
I really miss the simplicity of plain old jQuery and some backend.
Frontend over-complexity is exactly the problem that this is trying to solve for! You can think of this as a simple post-install tool that removes a huge chunk of the complexity (bundling) from your stack, without limiting what you can build.
If this direction of simplified web development is something you're interested in, you'll enjoy this post I wrote back when we started this project (and it was called @pika/web): "A Future Without Webpack" - https://www.pika.dev/blog/pika-web-a-future-without-webpack/
I would have hoped with a focus on security that we'd be moving to front ends that run less untrusted code on the client.
I would use a framework that did the majority of its magic on the back end and emitted either zero code that needs to run on the client or completely gracefully degrades when the client refuses to run untrusted code.
Every day it feels more and more like the web is a tracking framework with the lowest effort content that will keep the cattle clicking than an actual platform that provides real value. Being able to switch off executing remote code but be left with a functioning web experience would go a long way to providing real user privacy, which is, of course, why I have zero hope of it actually happening.
Adding more tools to abstract and hide away the complexity doesn't actually make the complexity go away, though, does it? It doesn't make it easier to reason about the end result. Just hides it under a veneer.
I think what the guy you're responding to is after is similar to what I'd like to see: a front end that isn't composed of 20 years of hacks layered on top of each other because of poor initial choices.
That's whats so cool about this: Unlike Create React App or other "starter apps" that try to hide complexity from you, Snowpack actually removes that complexity entirely. If you didn't want to use a single other tool, you could use Snowpack to build a fully modern web app by shipping your source code directly to the browser (cue the "View Source" nostalgia :)
https://www.pika.dev is built with Babel and TypeScript, so it's not technically "zero-tooling", but we still get almost instant iteration by skipping a "bundle" step during development.
Even TypeScript having to compile down to JS for the browser just feels fundamentally wrong. Why write something in some new, domain-specific language that compiles down to an inferior language to run in the browser?
Hopefully with WASM we see the rise of client-side frameworks that bypass all of this bullshit entirely and give us a clean slate to develop on that picks up the best of the 90s low-code projects and makes them cloudworthy. There's no reason why 99% of the UI that most sites need isn't just assembled from a nice list of stock UI widgets.
JS _is_ the native language for browsers. Therefore, it's reasonable to target it.
While it's entirely possible to compile your language interpreter of choice to WASM and run that in a browser, you're now in sort of the reverse position that folks complain about with Electron: adding tons of extra bloat, overhead, and complexity, just to duplicate some other runtime environment into a place it wasn't particularly intended to be used in the first place.
In addition, with most "compile other language to WASM" demos I've seen so far, they end up just drawing things on canvas, thus losing all the accessibility aspects that are built into the DOM already. (Yes, I know WASM has some DOM interop abilities and more coming, but that's not generally what I'm seeing done atm.)
What's _really_ needed is way better UI elements built directly into HTML, but those are sadly lacking.
There's been some discussion of making things like a virtual scroller available under an "std" global namespace [0], and the Chrome/Edge teams recently did a refresh of just the visual appearance of the standard built-in HTML inputs [1] (which, frankly, I think look even worse now).
Beyond that, nothing meaningful is happening. Even the input types defined as part of the HTML5 spec are still barely supported [2], and if browsers can't manage to implement decent date/time/range/color inputs, there's no way of getting more complex components designed and standardized.
Of course, the other aspect of that is, anything that is part of the web API is there forever, which means bugs and mistakes aren't really fixable. So, there's some benefits to having a purely community-driven ecosystem instead.
What framework-agnostic HTML UI component library would you recommend? Most of the options I have seen either have framework-specific dependencies (React, Polymer, Aurelia, Angular, Vue) or are just low-level frameworks for building your own UI/web components.
Are you actually going to write WASM by hand? Or are going to use a ... you know... compiler to generate the WASM from your source file? If you compiled Typescript to WASM instead of js, would that somehow be a different development experience?
1. WASM is not a replacement for JS. You still need javascript glue code to actually load and run the WASM.
2. You're not writing WASM by hand, exactly like how you don't write assembly by hand. There's little semantic difference of compiling from <your_language> to WASM versus transpiling from typescript to javascript.
A question for you: I see the site mentions using Snowpack with Vue but there's no guide like there is for React. Can you point me at some sort of "getting started" guide, blog post, or example repo for using Snowpack with Vue?
> TL;DR - Snowpack removes the need for bundlers (Webpack, Parcel, Rollup) in a traditional application build process by leveraging the ESM syntax you're already writing. Keep using your favorite web frameworks (React, Preact, Vue, Svelte) & build tools (Babel, TypeScript).
Unpopular opinion: It isn't that bad. If you understand the purpose of a bundler and you understand the purpose of a transpiler, it's not difficult to understand how to put two and two together. You, for example, write ES6, you use babel to transpile to ES5, and webpack collapses all the require(...) calls into a smaller set of files (maybe even a single file, depending on your configuration).
It's all well documented, so if you need further details, there's nothing magic about these tools.
If you really don't want to be bothered with it, just use create react app, vue cli, or angular cli. Some people aren't that interested tooling, I get it.
If you have the luxury to only care about modern browsers, do you need to bother transpiling? Every modern browser supports ES6 natively.
> and webpack collapses all the require(...) calls into a smaller set of files
Also less of an issue if you're using http/2 or http/3.
Is there a "preview of the future" framework out there that people can use if they want to see what a world looks like that doesn't have to work around old browsers?
The whole point of this snowpack framework is that if you only care about modern browsers, everything is clean and collapsed. No compilation needed of your application code.
There are people making applications with requirements where we have to support the legacy browsers, unfortunately. That's how Enterprise goes (but even large consumer-facing apps have the same requirements too, I would be shocked if Facebook "didn't work" on IE 11 today).
In my particular case, my infrastructure team will not, and has no plans on, enabling HTTP/2 in our upstream servers. The joy of application development at scale. You can't get everything you want, unless you control it all. Things are too distributed for me to practically sell the team on HTTP/2.
Hire an expensive consultant to tell them what they need to hear. I’m sure if they pay $100k for the privilege of hearing they need HTTP/2 they’ll be more receptive to the need.
I am an expensive consultant. My advice is skip HTTP/2. Either wait for HTTP/3 to ditch TCP or start inlining resources into single HTML documents to reduce round trips.
I'm definitely looking forward to HTTP/3, but I anticipate HTTP/3 having more problems with adoption due to overzealous firewalls and UDP blocking. I expect a longer tail of "I can't use HTTP/3" clients than "I can't use HTTP/2" clients, which means it'll be longer before you can reasonably count on it for performance optimization.
Maybe you do but I don't. I spent a week learning Webpack four years ago and it's been paying dividends ever since. 99% of my job is building features, <1% is fuddling with tooling and configuration.
If the hard part of your project is setting it up the tools you've picked are too complex for the problem you're trying to solve.
Of all the bundlers and build systems, Webpack has been the most productive for me by far. We had a heck of a time with a couple of bundlers we were trying out a few months ago, and when we switched to Webpack, all of the things we struggled with on the previous bundlers came together seamlessly in less than half an hour.
Try https://hqjs.org/ it can do much more with much less effort. It supports all popular frameworks out of the box plus metalanguages like typescript and scss, and it takes care of polyfills
> If the hard part of your project is setting it up the tools you've picked are too complex for the problem you're trying to solve.
Sure, but what tooling choice do we have? Webpack is pretty much a standard and is expected almost everywhere, with rollup and parcel used here and there.
Your choice is to not build an SPA. There's nothing wrong with HTML, jQuery, and Bootstrap. I'm fairly convinced most JavaScript fatigue is the result of trying to build very simple web pages with tools designed for 10k+ LoC SPAs.
Part of the time you're right. But I do like to dabble with JS again -- after being backender only for years -- and I want to future-proof my work (if at all possible in the JS land).
And I throw my hands in the air every time. Stuff like React or Vue generators seem to work fine but then I am left confused what do all the files do and why don't I have a stricter control over what gets pulled inside the project.
Use the tools you understand to solve the problems at hand. The ecosystem wasn't built to optimize convenience for hobbyists, these tools have evolved over time to address specific needs, if you can't articulate the specific needs being addressed by every component in your asset pipeline, you shouldn't be using them.
Fair to a degree, I guess. Still, in the years during which I didn't work with JS, I picked like 5 other languages and even though they weren't exactly beginner-friendly I still managed rather quickly.
JS though, always has been the exception. I understand what transpiling and bundling and minifying etc. are. But the tooling is somehow... don't know, hard to work with. And sometimes you get errors even in newly generated projects.
It's indeed hard to articulate the problems but that’s because I've only done isolated toe-dipping for a while now, not because I don’t understand something. JS could still use shortcuts during development, a la the Parcel tool, and turn that into an universal approach in all of its ecosystem.
> It's indeed hard to articulate the problems but that’s because I've only done isolated toe-dipping for a while now, not because I don’t understand something
Exactly. I don't think your proficiency as a developer is in question, the issue is that your approach is backwards. You're searching for a reason to justify why you should use these tools, rather than trying to build a piece of software with specific requirements and then determining which tools facilitate that goal.
> JS could still use shortcuts during development, a la the Parcel tool, and turn that into an universal approach in all of its ecosystem
The ecosystem already represents millions of developer hours distilled into "shortcuts" that allow developers to achieve capabilities that are very impractical without those tools. The idea of a "universal approach" in open-source makes no sense, people use the tools that best solve the problems they encounter, there will never be a one-size fits all solution, you have to understand the problem you're facing in order to pick the correct tool for the job.
> You're searching for a reason to justify why you should use these tools, rather than trying to build a piece of software with specific requirements and then determining which tools facilitate that goal.
I realise that and you are correct. I am just wondering: is there a way for me to ascertain if JS ecosystem has calmed down and is more friendly to productive programmer workflow, or is still pretty much the Wild West and everybody does whatever they like and there are not many widely accepted good practices for JS project management?
It does seem however that I should just pick up a project idea from, say, RosettaGIT or TodoMVC, and try and implement them with a few different JS stacks (React / PReact / Vue / Svelte come to mind) and gather my own info.
> is there a way for me to ascertain if JS ecosystem has calmed down and is more friendly to productive programmer workflow
I would reject the framing that suggests the ecosystem is not geared towards productivity. These frameworks allow developers to be more productive than ever, as I noted in another thread, these tools have been a proven success across every major tech company with a front-end presence, it's not just hype, there are demonstrable results.
> everybody does whatever they like and there are not many widely accepted good practices for JS project management
There are many widely accepted best practices, but thats a huge topic. Use of linters like eslint can ensure hundreds of best practices are enforced in your project, and type systems like flow/typescript are an indisputable boon to long-term software maintenance. A software project with types is always much easier to maintain than one without, and the upfront cost of thinking about your data structures in advance of writing your business logic is the technical debt equivalent of not carrying a month to month balance on your credit cards.
> I should just pick up a project idea from, say, RosettaGIT or TodoMVC, and try and implement them with a few different JS stacks (React / PReact / Vue / Svelte come to mind)
This is a great idea. Everyone has different opinions about these frameworks but they're all productive.
In my personal opinion, React is the best of those options because the JSX code-as-markup paradigm means that your application variables interpolate with your views seamlessly without the added complexity of a system for processing gigantic string templates with custom logic directives and custom template inclusion mechanisms. Svelte has some interesting new ideas with regard to preprocessing the views at build time that are pretty cool, but I still prefer React due to the string template thing I just mentioned. PReact is basically just a slimmer React, not much distinction in terms of the workflow. I find Vue to be the least appealing of the options you mentioned since it has poor TypeScript support and in most implementations relies heavily on string templates, but it is often regarded as the most accessible framework for newcomers. Those are just my personal opinions, I think any of those tools are solid and they all have beginner friendly options like create-react-app to help you get up and running quickly.
> These frameworks allow developers to be more productive than ever, as I noted in another thread, these tools have been a proven success across every major tech company with a front-end presence, it's not just hype, there are demonstrable results.
I am inclined to agree. I know things have been bad in the past -- that's why I exited JS and gave up my title as a full-stack dev -- but I am still left wondering if things can't get even better. I'll take your word for it that things are better than before because from occasional observations I reached the same conclusion.
> Use of linters like eslint can ensure hundreds of best practices are enforced in your project
Learned something very useful. Thank you!
> and type systems like flow/typescript are an indisputable boon to long-term software maintenance. A software project with types is always much easier to maintain than one without, and the upfront cost of thinking about your data structures in advance of writing your business logic is the technical debt equivalent of not carrying a month to month balance on your credit cards.
You'll never catch me disagreeing. That's why I am learning Rust and OCaml currently. Dynamic languages can be amazing -- Elixir is one example -- but there comes a point where you just need a much stricter compiler because you are otherwise chasing your own tail for weeks. So yeah, I am fully with you here. If I get back to JS it's definitely going to be proxied through TypeScript!
> In my personal opinion, React is the best of those options...
I have no idea for now. I get what you are saying and I also would base my choice on which lib supports TypeScript [better than others]. I just want lagless UIs in the cases where my projects absolutely positively need dynamism in the said UI.
I want something that works excellently even on an iPhone 4 / Galaxy S3 / Nokia 2.1. I am looking for minimal bundle sizes, least extra cruft carried, and speed.
Which JS lib/framework would you recommend? For now I don't intend on having complex UI or complex data bindings. But I'd also like to have to option in the future.
> For now I don't intend on having complex UI or complex data bindings. But I'd also like to have to option in the future.
I would go with the minimalist Vue setup. Write static HTML, add Vue as a script tag, and sprinkle in Vue components where you need complex JavaScript. This is the primary use case for which I recommend Vue.
> am just wondering: is there a way for me to ascertain if JS ecosystem has calmed down and is more friendly to productive programmer workflow, or is still pretty much the Wild West and everybody does whatever they like and there are not many widely accepted good practices for JS project management?
There are widely accepted good practices, but the domains in which they are widely accepted are narrower than “JavaScript development”.
Each major front-end framework is something of a community of its own (often with sub-communities), and there are others.
>> I've touched some vue.js too, but I just hate the direction everything is going.
I've had the exact same thoughts. For a long time, I was a big VueJS fan because of its simplicity and I could build really nice clean and fast apps without a bundler. When your app has few dependencies, bundling is overkill. For some personal projects, I didn't even bundle for production; still, it loaded faster and the user experience felt smoother than the vast majority of web applications that we have today.
Now I can see VueJS is moving towards TypeScript and forced bundling. It's beyond frustrating. It's refreshing to read comments like above because so few people are experienced enough to see it as a problem. There was a period in front end development a bit less than a decade ago when it felt like things where always getting better every year; bundlers were only used for production for some projects and HTTP2 was going to allow us to push scripts to the browser so that we wouldn't even need to bundle for production... The future was bright. Then Webpack came along and it became crazy popular, then suddenly people started bundling during development? WTF! Then CoffeeScript came along, added essentially no value at all but people were crazy about it, then transpiling and bundling during development became completely normal. I never thought I'd live to see the day that people would be debugging machine-mangled code. All the work that had been done before since the invention of the computer was about making machine code more readable for humans so this was a shocking reversal of progress.
Most younger people think that bundling is normal... Always existing kind of thing. They don't realize that bundling and transpilation is a massive hack that was meant to be temporary and really should never have existed.
Very experienced engineers from previous generations invested a lot of time and effort into making fast interpreters for dynamic languages like JavaScript so that people didn't have to wait for code to compile. I remember watching interviews with Google Engineers who worked on V8 thinking to myself how great it was that they were able to get interpreted JavaScript to almost match the performance of compiled languages like Java; that was a huge achievement. Waiting for the code to compile was considered a major problem back then; especially for front end web development. Let's face it, the underlying problems of front end development are trivial, but the ecosystem itself has turned simple problems into highly complex ones.
If you've used programming languages like C/C++ where you have to link static and dynamic libraries together, the value of a fast interpreted language is very clear and JavaScript fits the use case quite well. Front end development was never rocket science though it seems to be getting there.
Now people added a massive, highly complex and poorly thought out bundling and transpilation layer between the efficient browser engine and their web apps which essentially takes away all the value and efficiency that had been thoughtfully and painstakingly added to all the layers underneath since the dawn of time.
Then people start complaining about how bloated and bulky and difficult software development is, but before we can all realize that the answer is to throw out all the unnecessary crap that was added on top, some genius will come along out of nowhere with hot new technology which will add even more crap on top and which gives the illusion of solving the problems that people were complaining about but it will in fact cause new, even worse problems... and the cycle of bloat and disappointment will continue.
But at least we will all have more jobs... For a while.
I swear if this industry gets any more retarded, they'll be able to replace us with monkeys. Some genius with an MBA will figure out that same productivity with lower costs = higher profits.
> Now I can see VueJS is moving towards TypeScript and forced bundling.
Vue.js using TypeScript doesn't mean that you'll have to. You can continue to ignore it and enjoy using plain old JavaScript (albeit with more informative feedback in your IDE).
Also, you'll continue to be able to include Vue.js with a <SCRIPT> tag, as easily as you did jQuery.
I find myself agreeing in some ways. I had my hey-day on the frontend, enjoying all the new things being built for JS devs. Not just the big libraries like React or Vue, but others ones like Rx, Ramda, Lodash, and every other novel abstraction you can imagine. There's some really cool tech there but as a whole it's immature as hell.
My satisfaction as a software dev has increased massively since I've renewed my focus on the backend, and also spent some time with Java and other mature languages.
We still get things badly wrong but at least it's wrong in a way I can understand. I've looked at some new frontend projects and I would have to learn 7 or 8 different abstractions, inside a monorepo, just to understand how to build a simple interface to a collection of APIs.
Fuck that. The churn is too high and you might wonder how people built GUIs at all when you look at a modern web-app codebase.
You're making the assumption everyone has the luxury of picking their stack or throwing away and rewriting their whole product. That isn't the case for a lot of developers.
I've touched some vue.js too, but I just hate the direction everything is going. These projects are just insanely complex. Component frameworks may be easier to develop with, but they add so much damn bloat and crazy amounts of tooling. I get frustrated enough with Jekyll and that's just a static content generator.
I really miss the simplicity of plain old jQuery and some backend.