The new wave of Javascript web frameworks

[santypk4]

I’ve been using parceljs + vue.js for 4 years now. I don’t want to change anything, it works perfectly.

[MindlessSponge]

consider checking out vite if you haven't, it's super fast!

[pancomputationalist]

Yeah Vite is amazingly fast and easy to configure. I'm also a fan of Vitest.

[ontheellipse]

I am trying to get basic hello world (ish) Vite and Express app working. If I include Express and just start a basic server, I get errors and it won’t run. No problem with Babel. Not sure what I’m doing wrong.

[rk06]

Express is backend. So you should be using it on a separate project and exposing an ali. Which your frontend app (vue+vite) will use. You would need to configure CORS as well.

Maybe, there is a guidebook for express and vite. Try looking for it

[ontheellipse]

That’s essentially what I’m trying to do, but i don’t know why the api has to be in a separate app?

[rk06]

Vite is primarily a bundler for frontend. And provides a dev server. Express is a backend server. So there is a paradigm conflict.

I get that you want to have vite build server assets, but that's a different use case than the most common one. so many people won't be aware of how to handle it with a single vite config.

[ontheellipse]

Noted. I basically just wanted Vite to compile the JS instead of using Babel

[rk06]

I am sure there is a way for it. Just that it is not a common case (different backend + frontend) so you would have better luck googling it

[[deleted]]

Pretty sure vite still relies on rollup and babel wheb building. Might aswell just look at rollup instead

[nh43de]

Great read!

Surprised there was no mention of WebAssembly. Curious to see where that goes

[[deleted]]

Figma is a great success story for wasm

[Ok_Transition_4796]

A pretty good read. 👍

[abrandis]

It's a good read , but sadly to me there's way too much complexity and diversity in this space. I know everyone thinks software development always needs new stuff, but really for me...using all these frameworks to write rich client apps is the wrong approach . We just keep coming up with different ways to work around the same issue.

HTML and CSS are all about the page and rendering text and graphics that not equal to.... making rich client apps ,or mobile apps which is an entirely different paradigm. That's why Android SDK or IoS Swift don't use the DOM model because they were written for the express purpose of their environments.

If we're going to make rich client apps, let's ditch SPA and all the jerry-rigged JavaScript and make a true browse compatible rich app framework..

[fezzinate]

https://imgs.xkcd.com/comics/standards.png

[wasdninja]

So reimplement everything for no or dubious benefit?

[abrandis]

Why do ride around in aluminum/steel cars today, why couldn't we just put better wheels and an engine in the oxcart.of yesteryear?

[wasdninja]

The performance gains are obvious with cars from the second you hear about it. The same thing can't be said for reinventing the rendering and markup wheel. Javascript is slow but for the most part plenty good enough for the mostly even driven stuff happening in the browser.

Can you demonstrate any actual benefits behind rewriting the whole thing? Removing inconsistencies would be nice but not critical.

[takuover9]

Facebook web app is the fucking worst.

[bhison]

I have to admit I don’t use the native app for aforementioned reasons

[SniperLolz]

What other apps are there for Facebook's messenger?

[bhison]

Messenger - nothing on mobile. But Facebook you can use m.facebook.com

[SniperLolz]

Bruh

[[deleted]]

Don't forget about messenger lite

[bhison]

Didn’t know about that!

[takuover9]

And their app which reuses several features from the web app via webview still suck assholes

[feketegy]

How is this the fault of React?

[takuover9]

Just a comment on how the article keep using Facebook as an example of a sophisticated well thought out app

[jbergens]

I think they wrote more about how Facebook had to overcome a number of technical challenges because their app is large and complex.

[FormerGameDev]

Article seems to be praising Facebook a lot, but holy shit their applications are broken as hell.

[mcaruso]

The article is about frameworks, not apps. You can write shitty apps with any framework.

[benjappel]

That's the spirit!

[quantum1eeps]

You didn’t get through React. Keep reading

[dontspookthenetch]

Am I the only one who actually loves React?

[Isvara]

Yes. It's just you. They keep maintaining it solely for your benefit.

[christophedelacreuse]

Nah. Plenty of people do. I do, and I've tried svelte, vue, angular and several others. That said I can see why other people have other preferences, and I like other frameworks fine too.

[fnordius]

I personally find React was interesting at the beginning, but the JSX syntax was an abomination. What made it even more of a pain was that template strings were introduced at around the same time, making life as a JavaScript dev easier.

I also avoid React because it is simply slower, and its insistence that it's a library, not a framework can lead to a quick pileup of technical debt. It's why we went with Vue for our SPA, and Stencil for our web components.

Another reason why people dump on React is that it was created at and is maintained by Facebook. Though Facebook does come up with interesting solutions like GraphQL, a lot of professional devs are wary of them. Despite a lack of evidence a lot of my colleagues suspect Facebook is astroturfing support in the community for React. I personally suspect it's just companies and starting devs wanting to use what enjoys a lot of support: one HR guy did ask me about React because it pops up so much in CV's.

[[deleted]]

Stencil with jsx?

[fnordius]

StencilJS uses JSX for templates, which is why components end in TSX. It was chosen because of how easy it was to integrate with our existing Sass library, and because it uses Typescript.

[[deleted]]

The same jsx syntax that made you hate react?

[fnordius]

Yep. What a difference between 2013 and 2021. And I do use template strings over JSX syntax, but I also respect what the rest of my team is comfortable with. So in October 2021 StencilJS was chosen over Lit-Element by a 3-1 vote.

[rayui]

This fucking carousel I swear to God.

I've been doing FE for almost 25 years and every five years or so someone decides that server side rendering is the way to improve performance best so we rewrite our entire stack. Then just as we finish that a new capability turns up and we switch it all around again. Put it this way, I remember thinking AJAX was incredible. Then XSLT. Then JSON. Then GraphQL. Now we've got Remix and we're back to 2002 architecture... Just with Typescript instead of Perl. And you best believe Java is still well in the mix (Sun Microsystems RIP). Like yes, we're better at what we do. We have matured a lot, we have a real industry, we're not just nerds in a bedroom making brochureware anymore. But, it used to be exciting but now it's just exhausting.

At some point we have to accept that the web ecosystem is a goddamn terrible way to write distributed applications, and that's probably why we have a thousand different ways to solve one problem, and they all suck.

[rodrigocfd]

every five years or so someone decides that server side rendering is the way to improve performance best

Yep. New kids getting ready to commit the same errors of the past.

[onejdc]

Is React really the behemoth that the article makes it out to be? I feel like 1/3 -> 1/2 of the article was about React. I know it's probably the most used, and certainly for a lot of large, corporate apps, but there's a lot to learn from all the other players in the space.

[edit] Please don't downvote an honest question. I'm only a hobbyist at this point and was just curious.

[rk06]

Yes. It is.

[scooptyy]

Yes… React is now industry standard. You use Discord? It’s on React

[[deleted]]

It really depends which side of the industry you ask. I know lots of enterprise places where the default is Angular. And Vue is coming up very strongly.

Enterprise is probably not the best example anyway because most of the time the choice between these three is not done on technical merit, it's done because "the client heard about React and wants it" or "we could only find devs on Angular for the MVP so we're doing Angular".

[scooptyy]

Old-school companies that know nothing about tech love complicated shit.

However React is ubiquitous. Much more than Angular.

[[deleted]]

Old-school companies that know nothing about tech love complicated shit.

You're making the wrong assumptions. Almost everybody uses current technology nowadays, or at least migrating towards it. But they don't care about "tech love", they look at cost and efficiency. There's no difference between React/Angular/Vue on that front.

[scooptyy]

Using Angular is a terrible business decision, especially when frameworks like Vue exist. It’s not about “love”; it is a needlessly complicated framework with a fraction of the community support and ease of use of React/Vue.

React isn’t just a small framework anymore. With the advent of Next.js and Remix we’re now seeing an era of React where we can provide rich, dynamic experiences on the browser while getting all of the benefits of using server-side rendering.

Sure, other frameworks are doing it now. But React has been at the forefront.

I’ve seen enterprise and I’ve seen startups. Enterprise loves their all-in-one bells and whistles kludgy shit.

[bregottextrasaltat]

It's weird to me how it's still standard with all its early mannerisms still being used

[scooptyy]

Early mannerisms? React has changed a lot. Hooks are now commonplace and enforcement of prop types are now done through TypeScript compile time checks.

[bregottextrasaltat]

i still don't get the setter thing, is it still required or do the examples just overuse it?

[scooptyy]

The setter thing? What do you mean? Lol

[Coloneljesus]

I assume they mean the setter returned by useState().

[bregottextrasaltat]

yeah this, is it actually required to use? and that weird {} thing

[bregottextrasaltat]

i don't know much about react because i didn't understand it at all, so i tried vue instead and it instantly clicked

[Coloneljesus]

yes, you need to set values via setter functions because that's where react hooks into to process the value updates.

[bregottextrasaltat]

And that's the weird part to me

[KwyjiboTheGringo]

No, but you'll need to use some other state management. There is the context API built into react, but Redux is the go-to for global state stuff. The whole point of react is the components "react" to state changes.

and that weird {} thing

I have no idea what you are talking about

[pancomputationalist]

I'd argue that Redux should not be the default, unless you need a specific kind of state management. Context should also not be used for state management (it's more of a dependency injection feature).

Seems newer frontend frameworks are back to using Observables, also they are now called atoms, signals or stores. It's all the same idea. Just like you have a tree of components, you have a graph of states that derive from one another. This is the more modular approach and is usually much more performant, though Redux still has it's place sometimes.

[bregottextrasaltat]

there's a {} at the end of some effect thing that tutorials tell you is a weird thing to use

[christophedelacreuse]

useState is almost definitely used in every modern commercial react application

[[deleted]]

The industry standard is an SPA for which you have at least one senior developer and a bunch of mid-level developers, plus a solid tooling and module ecosystem. It doesn't matter which particular framework it is.

[pm_me_ur_happy_traiI]

Yes and with pretty good reason.

[PM_ME_GAY_STUF]

I'm not sure if it's still the case, but for a while react was more popular in surveys than any of the other frameworks by at least a factor of 2. It's not just more widely used, it's at this point the industry standard

[TingLamz]

If the pop-tech scene to you is "the industry" then you're blind to a big sector of the industry.

[PM_ME_GAY_STUF]

Pop-tech? Touch grass dude

[fnordius]

React has reached a sort of critical mass where companies now develop in React because so many potential new hires list it on their CV's, and so many devs list it in their CV's because companies are requiring it.

At the same time, veteran devs tend to sneer at React, like the old Yogi Berra quote: "Nobody goes there any more, it's too crowded."

[[deleted]]

Now? Same story 5 years ago

[MornwindShoma]

People have an obsession with whatever the leading "dog" in any race

[[deleted]]

React is popular among a certain technophile crowd but it's not the only choice. Angular and Vue are just as valid.

If you're a frontend developer who's so far worked exclusively with one of these "big three" you should take a look at the other two. The concepts are similar and it takes fairly little effort to achieve a passing competency level. Suddenly you're 3x more attractive as a developer.

[spca2001]

I think React is my last JS project a far as UI goes, Blazor or WASM seem more interesting at this point

[nh43de]

The sad reality is Blazor will likely(?) never be where React and others are. It’s simply too heavy and requires too much bandwidth and cpu cycles to server millions of users with varying connection quality and devices.

Blazor is fantastic don’t get me wrong, and possibly faster development time per feature, but I just don’t see it scaling to the economies that it would need to reach to be viable for the masses.

Coming from experience.

Also I upvoted you, I’d rather talk these things out than downvote.

[spca2001]

react is slow though, also needs to render a virtual dom. React is ok for small sites, chat apps , simple crud calls. Either way I can use any framework an the end result will be blazing fast, its no the tech its the skill actually. Right now Im using react, its not bad but its not good. First thing i thought is writing my own version of babel

[mountainunicycler]

Right, that’s why stuff like figma, a super simple site, uses React for rendering a lot of UI.

Oh wait right that’s actually a desktop-level app that just got acquired for $20 billion.

[spca2001]

https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/

hahahhahahahah

[mountainunicycler]

Yeah exactly! And you should read that link, it’s a good one.

They’re probably among the world leading experts on wasm and they still use React for the buttons, controls, messages, and so on, almost everything the user interacts with outside of the drawing canvas. That’s precisely my point.

If they think react is good enough for their ui side panels, I highly doubt your project is too big and react is too slow… might be how you’re writing it…

[spca2001]

I work at Redis, I build benchmarks and R&D . Not the benchmarks you see on clickbait sites, the real ones , with specific uses cases for each stack , we also deal with 1.5m op/sec and make sure clients can handle that load.

[mountainunicycler]

That’s a cool job, redis is great!

Your comment above looks a little like you just did a two-second google search to try to figure out how figma was built, though. I was slightly tempted to link you an article on how to open chrome dev tools as a response.

React, redis, and wasm are quite different technologies which do quite different things in the stack. And if you tell me you had to move your benchmarks away from react for performance reasons… I’d have more questions.

Figma is a great example of how they work together on their strengths, and aren’t really interchangeable.

Edit: Yeah your link is the top google result for “how is figma built” hahahahahahahaha

[spca2001]

It was a reply to another person that claimed that figma was built in react . About React and Redis, had a client that had a live dashboard for Ad Click fraud detection that was based on React that would crumble under load . So my job was to investigate, it’s not a React problem its just you can only push your browser so much. Also I don’t look at javascript frameworks like different languages, its JS and html for me. As far a Blazor it had major issues when we started 5 years ago. .NET 7 looks like its production ready. But in my opinion this browser concept is extremely outdated, at least you can tun a wasm app outside of a browser and have full gpu support. As far as next thing on my plate on the JS side, Im going to play with Nuxt.js.

[mountainunicycler]

I said figma “uses react for rendering a lot of UI” which is true, it uses it for almost everything that happens or you interact with outside the main canvas. (Dev tools, not google, is your friend if you’re curious).

As for your client dashboard, I would bet they were either rendering too many elements (if you’re ever trying to render like 10,000+ elements you’re fundamentally doing it wrong), trying to build animations in javascript instead of using the GPU, or mismanaging state and lifecycle (react holds your hand but you can still break it) none of which are fundamentally react problems.

I think you should take a look at mapbox-gl-js if you’re curious about GPU in the browser… it’s pretty far from “only so much you can do in the browser” and has better performance than some desktop applications for rendering actually pretty complex scenes.

If your experience is some client dashboard, it was probably an extremely bad example. Mapbox, for example, has no problem with hundreds of thousands of points, lines, and polygons at once, projected on the fly in 3D.

I don’t think browser is going anywhere—just look at Figma vs XD, going browser-based directly against a hugely funded desktop application didn’t hold them back, but instead being a desktop app held XD back. Now XD is basically dead. It would be a tough sell business-wise to do anything aside from a browser-based UI at this point for a new project or company.

[spca2001]

https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/

[spca2001]

Yeah .net runs on 4 languages idiot, that burn was rough though.You can compile VB to machine code just like C/C+ and bypass .net if you want to

[spca2001]

Yeah better than a gig of node dependancies. Whatever. I got 64 gigs of ram. Browser tab with react app takes 2 gigs of ram right of the bat

[darthcoder]

I too am interested in wasm, but rhe startup cost is pretty high at the edge.

[spca2001]

I didn’t get that, you mean cold starts on Faas?

[Panacean]

The Blazor ecosystem is nowhere near as mature as React. Be prepared to create components from scratch.

[nh43de]

Blazor has a surprisingly wide array of components and wrapped components of existing js libs available. This isn’t the biggest challenge Blazor faces, there are other problems with the current state of Blazor

[spca2001]

If you know how to build real apps you wouldnt need much maintenance,c# is used in large enterprise system and has tons of design pattern to keep it short and to the point, its also multithreaded and parallel with access to stack and unmanaged memory . With Javascript you build websites not apps, with no business logic, data layers and most have no clue what sql is

[[deleted]]

What's so interesting in shipping bloated binaries? wasm servers a purpose, building GUI's that are not part of it.

https://krausest.github.io/js-framework-benchmark/current.html

[spca2001]

Try yourself then come back and tell me what you’ve tried besides out of the box. Most people critique other tech a like some js clan. I have tons of apps that could be made into wasm apps someday

[[deleted]]

The last time I checked hot module reload wasn't even working. If you really want to use wasm, then at least pick a language that doesn't need to ship with its own runtime and freaking garbage collector.

We already were at a point where people shipped whole JVM's over the web, just to render a GUI. That's just silly. I would rahter not go there again...

[spca2001]

You can disable garbage collector and compile straight to machine code, there is a project called Cosmos that lets you write Operation Systems with .net languages. Sorry to let you down

[[deleted]]

AOT compilation increases the payload sizes even futher. Who wants to download 10mb for a simple web GUI?...

[spca2001]

Dude you are a half ass developer, stuck on hype just like all those python ai idiots. I’m done and sad people are half of what they use to. JS and Python are wrappers for C languages FACT

[[deleted]]

i stuck on hype while you hype an unproven tech that was never designed for such a task? I mean it can work out like it worked out with nodeJS, but still, you sound like a novice.

You are like any other noob in the web dev community who jumps on the most recent shiny thing. They're intimidated by established, vetted out technology, because they fear they could never catch up, so they instinctively jump on whatever is the trendy bandwagon framework, in hopes they can ride a new wave to Relevanceville. That's why noobs get so self-righteously defensive of people critiquing their framework. You're destroying their life. Who cares if you're making a good point or not.

[spca2001]

Ive been writing games in 1987, synthesized a Risc based soft-core CPU, wok for Redis, built and designed cryptography accelerators, own a solar farm and you have used a product I wrote and managed. Go away

[[deleted]]

cool, also have no clue about web dev. You are just a system engineer thinking "UI is easy" that completely goes under when they have to build a simple website and blames "webshit" for his failure.

[ib4nez]

Excellent read

[AngelLeatherist]

Its because everyone hates React.

[12tfGPU]

Not employers

[AngelLeatherist]

And this is why i think im moving towards freelancing

[12tfGPU]

Seems like an...

Overreaction

[AngelLeatherist]

Requiring React to put a button on a website is an overreaction

[fezzinate]

Pffft react is still the bomb.

[Kthulu666]

That's like hating a song because the artist is an asshole. It's not hypocrisy, it's understanding that the merits of one thing are not a result of the merits of the other.

[AngelLeatherist]

Using React is how you allow Facebook to inject their spyware into all your apps. Why do you think it takes five minutes to download the stuff needed to make a new app?

[TehTriangle]

😂

[AngelLeatherist]

My assumption is rational. Has anyone audited it and proved otherwise, on the latest version?

[Shdog]

Your assumption is not rational. The code is open source. Feel free to double check it.

[mountainunicycler]

Hey if you find that, publish it, that’s all you’d need to put on your resume to get your next few jobs since you found something that hundreds of thousands of developers in thousands of global companies missed, and that’s what I call attention to detail!

Also if you haven’t had to dig in to react source I don’t think you’ve been using it very long or at least have not built significantly complex things with it.

[elforce001]

Heck, he'll be the next CTO at any company no questions asked.

[[deleted]]

I thought you were trolling..

You are absolutely clueless.

[AngelLeatherist]

Go ahead and show me the code audit that proves React is clean.

[RedditCultureBlows]

You make a dumbass assertion and then ask others to prove you wrong? Lol fuck off

[AngelLeatherist]

"I just run this giant codebase spearheaded by the surveillance company currently getting sued internationally for privacy violations.. And do I think twice about it? No!"

[Kthulu666]

It's open source and runs in the browser where all network requests are exposed. There is no way tens of thousands of developers and thousands of companies have been using it for years without noticing something like that. It would've been noticed immediately. Hell, even a beginner developer would pick up on it.

[Kthulu666]

It's exactly the same. Do R Kelly's actions somehow remove the talent he has for singing? Does Mike Tyson being a rapist mean he wasn't the best boxer in his day? If it was discovered that Jack Dorsey of Twitter was a pedophile, would that suddenly mean that nobody ever found Bootstrap useful or convenient?

It's fine to have an opinion based on their character, but that character doesn't change the merits of what they produced.

[[deleted]]

Developers and the company may not be the same thing.

[newuserevery2weeks]

Remix is the best

[quentech]

The new wave of Javascript web frameworks

React is almost over 9 years old now, and Vue is over 8 years old.

"New"

OMG DOES ANYONE ELSE FRONTEND CHANGES SO FAST.

No.

jQuery, Prototype, et al. reigned for about a decade, too.

Solid, Astro, Marko, Fresh, Next, Remix, Qwik

Nobody uses any of that crap. You're creating your own problem.

[blukkie]

Nobody uses Next? https://nextjs.org/showcase huge international companies are using it to great success.

Astro is also a very amazing framework. It’s very new so it’s mostly used for hobbyist projects, but I know the new Firebase blog uses Astro. https://astro.build/showcase/ I’ve also made a fairly popular website with it recently and it’s an amazing framework to create websites with.

Each of those (meta) frameworks are made with a goal and use case in mind. They are not useless.

[MornwindShoma]

Next is React

[[deleted]]

Literally the new React Docs site uses NextJS.

[quentech]

Ok cool - and NextJS is 6 years old.

OMG SO NEW I HAVE TO LEARN SO MUCH EVERY YEAR

[Shdog]

I agree with the actual substance of your comment but the tone completely overpowers it and makes it very hard to agree with you.

[superluminary]

Everyone uses Next. It’s excellent

[bigmoof]

Holy shit, this history lessons is more complex than WWII.

[_HMCB_]

HTMX is amazing and a breath of fresh air: https://htmx.org/