JavaScript Framework Tier List

so there's a lot of Frameworks now like a lot of them I get asked questions about them almost every day rather than continue trying to compare all these different Frameworks and make my arbitrary judgments decided to do it all at once and rank every single JavaScript framework including a bunch I haven't used don't take any of this seriously we're just here to have some fun but without further Ado let's dive in we need a good middle ground like something that we all agree is like a specific level of mid so that we can put that right in the middle as a a point of reference but I don't think any of these are mid enough to fit that rule that actually makes this quite hard what is the most mid framework I'm leaning towards vanilla JS I think no framework is as mid as you can get it's literally vanilla think that's fair so we'll start with JavaScript as a solid C tier because while it's not going to make things worse for you it's certainly not going to make them better and now we can rank every other framework against how it compares to just using JavaScript which is why obviously we have to put jQuery in s tier jQuery is why the internet we have now exists so yeah s tier all the way still a fantastic experience the majority of websites that people go to still have jQuery on them somewhere fantastic jQuery gets s so what do we go to next should we just go in order let's just go in order this I actually happen to know as Alpine but I have went out of my way to avoid Alpine for a long time time so let's take a quick look at Alpine JS Alpine your new lightweight JavaScript framework we love when their recommendation for how to set it up is a script tag that's that's how you know we're in deep simple lightweight powerful as hell Alpine's a collection of 15 attributes six properties and two methods declare a new Alpine component it's data dynamically set shl attributes listen for browser events got to love that like putting JavaScript in a string soone just said it's like mini view it's like a a cursed version of you ooh xhtml that sounds familiar to something we'll be talking about in a bit it looks like what this is doing is it's setting the HTML contents to whatever this ends up returning which is pretty cool can see how this would be useful having a transition elements and all of this but it all as part of the HTML hope you find Alpine to be a breath of fresh air silence among noise being that it's basically view syntax for a mid version of HTM X I'm putting that in a solid between C and D tier I feel like it would have been higher before HTM X became relevant so I'm putting it D for now now we got to talk about angular angular's had a long journey and from angularjs to angular alone that transition was nuts but it also helped Kickstart this new component based web and allowed for much larger web code bases to become the norm most of the first like giant websites with hundreds of developers contributing lots of dynamic features every day were in angular that said I have never enjoyed myself writing it it is one of the most painful Frameworks to work in that I've ever used I hate almost every implementation and design decision made within it I want to give it like an A in spirit and a D in use for impact and importance it's an A but please don't make me use angular okay Astro being in here is a scam because if any of you guys know this Astro is not a framework Astro ships no code that runs in your browser you can use it to generate HTML on a server and then you can mount like a react component or whatever in it but for being an imposter F tier the whole like web transition stuff makes it a lot more possible to pretend that it's a JavaScript framework but it's not there's no router there's no JS running in the client it's not a real framework get out of here oh no ember I forgot this was in here I do my best to forget about Ember brief Story Time Ember is a big part of why I didn't think I liked web development because when I started at twitch we were still using Ember for the front end and rails for the back end and I hated every moment of it I want to show you guys some Ember syntax just so you can understand that I'm not insane here if you've never actually looked at Ember code before there's a reason they don't put any on their homepage they don't want to look at it either okay so the first thing you should know about Ember is that they're really big on code gen so like when you want to make a new route or something you run a script or a CLI command and it generates that new pile of things you need they also have their own crazy templating syntax HBS it's handlebars based but they've done some crazy stuff to it interactive components okay we have been through 1 two 3 four five six seven pages and now after writing two dozen unit tests we might finally have some JavaScript code which obviously is classes because why wouldn't it be managing state with tracked properties it you have to delete that and attract decorator which now means you have to use one of their crazy compilers that handles these decorators if you reference a variable in the template but forget to add it to at track you'll get a helpful development mode error so now that you've bound that as tracked you can now access this and once you want to actually do the toggle onclick this do toggle size you have to combine handlebar syntax with their weird binding it's horrifying and there's like no deterministic anything between them you basically need Dev mode to tell you if you forgot stuff if this dot is large show else H God forbid your JavaScript code and your template aren't in different files with no deterministic Behavior between them I know crazy thought oh and now they're showing you how to set up your environment no I I've read too much testing code I don't care anymore Ember is going where it has hurt me f tier somebody just said GitHub doesn't even know how to highlight Ember code I want to see this that's hilarious because again putting decorators in front of a variable isn't really a JavaScript thing so most javascripts and even typescript parsers are going to entirely screw up the highlighting like the argument against jsx is that it ruins your JavaScript and it's no longer JS what the is this then like come on you you can't say the reason you didn't do jsx is because it's not JavaScript and then do this instead that's enough crapping on Ember got to talk about some real Frameworks here with hand bars for those who don't know handlebars is a templating language it's called handlebars because you use brackets all the time to embed values like all of the time and it's like the handlebars or the little curve like a mustache which is also their logo clever branding but the the point of handlebars is you write code that requires specific things and then you can feed it values from JavaScript and it will handle all of the registration there this is a handlebar template this it be an HBS file or you can technically write it in your JS files too and then you run the handlebars framework pass it the object with whatever you want and then it will render so it's like a an interim step for templating your HTML to pass it values it's important for its time the idea of a standardized way to update and render HTML from JavaScript was a really important concept it was almost like the opposite side of what jQuery was doing which jquery's thing was given you have this HTML already we're going to allow you to bind behaviors to it handlebars is here's how we generate the HTML really interesting concept it definitely helped us as a field rethink the relationship between JavaScript and HTML so I want to put it slightly higher than vanilla JS for that reason let's do it slightly better than vanilla JS oh boy now we have to talk about quick if you're not already familiar quick was created by mishko who was the original creator of angular there's a lot of problems that modern JavaScript Frameworks have introduced to the web that he is really upset about and probably feels some amount of responsibility for as the creator of angular those problems include loading way too much JavaScript time to interactive getting way slower over time data waterfalls causing multiple elements to pop in synchronously instead of all flowing together at once a lot of these types of problems have made the web worse to use especially if you have a bad internet connection and he is built quick to Target those problems the thing he's focused most of Quick's branding on is the concept of resum ability most other JavaScript Frameworks have an idea of hydration which means given some HTML and then given some JavaScript the JavaScript will catch up to the current state of the HTML by rendering a lot of the parts and this takes some time if you have a giant HTML file and then it takes a while for a giant JavaScript bundle to load and then it has to process in your browser and then it has to run and then it has to attach to all the elements in your browser and then finally you can now interact with buttons and if you clicked a button in that window it just wouldn't work Quick's focus on resum ability means that it can skip a lot of those steps embed a minimal amount of JavaScript and immediately bind to a button here's a diagram from the quick team obviously made an excal dra quality scal dra users meant to Showcase how resum ability gets your HTML ready faster than with traditional hydration where you have to download the JavaScript parse and execute buy the listeners but there's a lot going on on the other two sides of this and I find that for the vast majority of users the amount of time all these steps takes is pretty low and if you only have to download the JavaScript once then most of this gets eradicated for future visits resum abilities in my opinion not that big a deal and the only place you would feel it is the amount of time it takes from when the page first loads and shows you content to when you first click a button so unless you're opening a page and immediately clicking buttons and you also have never been to that page before I don't think it's that big of a deal so this is where I don't necessarily think Quick's focus on its differentiators is as valuable as it has been pushed especially now that other Frameworks like react are catching up and having hybrid hydration models where some content doesn't need JavaScript at all quick has forced us to think about these things more but the more of thought about them the more I realize hydration isn't too big a deal and is getting better anyways but if we look at the actual experience this should look a lot like react to you big difference is the component dollar sign code that you have to call in order to basically tell the quick framework hey by the way this is a component everything else Works roughly how you would expect here is using quick City for data loading so used ad joke it's meant to be a similar to a hook in here you can just call async code because we're wrapping it with this rout loader helper pass an async function it fetches some stuff and then it Returns the Json pars with this type and now in an actual component we can call use dad joke and return some stuff and now this page won't load until that content is done because this will run on the server through the route loader you can also do an action which is the opposite way what you'll start to see with quick is it's this weird hybrid of something like solid and something like remix and react and the result is seemingly pretty cool but a lot of the concepts and a lot of the things they push around like JavaScript not appearing until you scroll to the element that needs it like not necessarily knowing which JavaScript is or isn't going to be in the browser when you actually load the page the actual DX corks around this have been a bit weird to get my head around in the bit of time I spent with it and I don't think the benefits it introduces are worth it that all said it's really cool to see a framework taking these problems seriously and pushing the web standards and for that alone I have to put it a little ahead of JavaScript quick slightly better than JavaScript speaking of slightly better than JavaScript lit if you're already familiar lit is the framework built around web components they wanted to take the actual web standards and try to make them usable because writing a web component from scratch it sucks it's really not fun so this is a vanilla JavaScript version this theoretically would just run in the browser which is really cool and now more importantly you can mount this custom element that you've bound as simple greeting in your browser as a traditional HTML element and it will just work that's really cool I don't think any of the other Frameworks here have that capability where you've now created an element you can access in the browser but that's the goal of lit is to be as like traditional HTML and JavaScript in the browser as possible using all those standards but giving you this abstraction on top that makes it actually somewhat Pleasant to use lits a weird thing to use for your big projects and I wouldn't enjoy working on it with a huge team trying to build this gigantic platform but if I wanted to have an element that could be reused on future projects or just take one part of my blog and make it interactive lits really nice for those types of things and again I think it's quite a bit better than vanilla JavaScript I would actually say it's pretty similar to handlebars although I would hate using it less so I'm between b and a tier for lit because it's solving problems other things don't solve but I also wouldn't use it for large things I will appeal to chat we feel an A or B tier for lit feels like B is the consensus we'll leave it in B cool on the topic of web standards and working really hard to comply to them we have preact in case you haven't heard of preact before it's the fast alternative to react it's focused is the bundle size and they have some of the strictest bundle size rules of any project I've ever seen if you want to add a new feature to preact you either have to build it externally as a library or delete as much code as you add in order to make sure its bundle size doesn't go up in the process really really cool it's not react so you can't just like take a react project and expect it to work but it does work pretty often and you can write a lot of the code you're used to writing with react in preact both with class components and also hooks they have the hook one on top here but the rest is still class components that's kind of hilarious that's really funny actually but yeah preact is cool it's nice having an alternative to react like this one of the many cool features of preact is HTM support which is hyperscript tag markup it means you can use a template literal in JavaScript which is when you put those little like back Texs after a function and it calls the function with this as a string input and by doing this you're able to write effectively jsx inside of your Js s not need a transpilation step and this gets parsed at runtime so you can make a project that uses preact and looks and works the same way you would expect react to work without needing a build Step at all this was actually a really important framework for me as I was starting to deepen my understanding of these Technologies because it helped me understand how all the parts assemble and not have the black box of the Builder abstracting a lot of those parts from me so I personally owe a lot to preact they also were the first to get signals working in react which is really cool too that all said the recent numbers in the performance benchmarks haven't been as good as they used to be when comparing to react which is obviously the framework it's built to compete with but it's also really important for the web and I'm really happy it exists I feel bad just putting more and more things into B tier but I'm doing it B tier really good educational tool really happy it exists useful in certain use cases not what I would reach for speaking of what I would reach for we have now reached react which obviously I've never heard of HTM X HTM X is an incredible new framework that allows for non-javascript developers and backin focus developers to make interactive web applications if you've ever worked in traditional backend world trying to build a web app usually the experience is once the user has loaded the page the only way they get new data is if they refresh the page or if they go to a different route or if they post from a form but if you want to have a button that has like a loading State when they click on it or if you're trying to make a Twitter Club and you want to be able to type a new tweet press enter and have the new tweet appear in your feed without reloading the whole page those types of behaviors were really hard to do without introducing a JavaScript framework which is why HTM X wrote that JavaScript for you and now you can just bind to a template directly I have a whole video about HTM X and why I think it's so cool but I'll show you a bit of the syntax super quick it's similar to what we were seeing before with um Alpine but here the syntax is quite a bit more powerful and doesn't involve writing weird inline JS HX post means when you click this button it's going to post to to this endpoint SL clicked and HX swap outter HTML means whatever this responds with that HTML content of this response is going to replace the button so if this returns something else like a div that says thank you then once you've clicked this and it's received that response this will be replaced in your Dom with a div that says thank you this allows you to not have to write JavaScript or client side code at all and just change your template up a little bit in literally any existing backend framework it can be JavaScript it can be go it can be rust it can be python it can be Ruby it can be anything and just have better experiences for your users for all of those reasons I have to give HTM X an F tier because again it's not a JavaScript framework anyways let's talk about solid solid first and foremost starts with the letter S so I think you guys can guess where we're putting it the main design goal of solid JS was to bring back the Glory Days of knockout and try to make something that made signals approachable and fun to develop with while not compromising on performance at all I still remember the first time I saw solid pop up in a benchmark and I was blown away because it looked just like react code cuz it's still using jsx under the hood it's still jsx when you write it but it was performing almost as fast as vanilla JavaScript in every Benchmark I saw and at that point I still believed jsx was somehow causing performance issues and theoretically if you wanted the fastest app you wouldn't use jsx and solid Prov that wasn't the case at all this is one of the best getting started that we've seen so far during this it's immediately talking about the code that's specific to it so first set first is create signal last set last create signal think of this like a use state in default values and you can create an effect the catch is when you use first and last you're not just dropping those as values you're actually calling them the reason we have these function calls is so bindings can be created through the signal layer a signal is an update chain where when something changes it knows everything that needs to be updated immediately with react it just changes everything from the top down with solid since we called first and last in this effect it knows when those change this effect has to run again here we have an HTM based vanilla JS example with solid so that you can just drop this in the browser and see it working without any build steps or running webpack or stuff like that which is again really cool to see but you lose a lot of the IDE benefits a lot of the type checking and the things I would expect from an everyday framework I don't know if I would have put this so early but it is really powerful to see that like this is all it takes to run solid count set count create signal zero timer equals set interval set count count plus 1 1,000 so this will now update the count every second and on cleanup you just call wherever inside of your component and now it will clean up and run this when the components goes away and you can return HTML or you can use H which is very similar this is kind of how old react code would render before jsx but this is all you have to do in order to make a component that updates itself you can also make it a button and buying the on click to update to in the same way you would expect it all just kind of behaves how you would expect it to which is really really cool solid's a great framework solid start is making a ton of progress as well do not discount this framework I still think we've yet to see the deserved rise of solid I'd put it just behind jQuery in s tier and when you consider the fact that it's already got an S that's two s's for solid hard to beat speaking of the letter s we have spelt how does one talk about spelt it spelt was a very important framework for me because it was the first one to really challenge my my dieh hard react bro nature I remember the first time I saw rethinking reactivity by Rich Harris phenomenal talk I have a video all about my favorite tech talks coming soon subscribe if you haven't by the way because then you'll get to see that video right when it drops and come on subscriptions are free guys helps us out a ton anyways spelt this framework showed me that first off react wasn't truly reactive but more importantly it showed me there were things react didn't do that made my web development experience a bit more painful like react had no opinion on Styles and that started to really hurt once we got into react native where they had to have an opinion react doesn't really have an opinion on Builders or bundling now it kind of has to because they moved to this new server component model but previously it didn't at all now they just throw out a webpack plugin and partner with the next team in hopes of figuring those things out spelts done a lot that's really good like a lot but they also have done a lot of things that I personally don't love the big one for me is single file components when I'm working on an app and I have some piece that I want to reuse I want the ability to break it out quickly and not have to lose the context of the file that I'm in this is a problem I have with view as well so we'll talk about it more there by using spelt you have now committed to a specific code architecture that you don't really have control of because of the waist Felts designed and I know a lot of people really like that because it means all of the components are going to have everything contained within them but it also means you have to do crazy things with your markup syntax this is why in both spelt and view we see a lot of weirdness in their templating neither of them are using jsx and in spelt you're using spelts weird markup syntax sure they have some good examples do they have the like getting started cool get this started quick SP demo app typ script I don't like they defaulted the JS doc now do you want to try SP five I kind of want to try out spell 5 Good Start let's not do this spell five beta do something risky okay cool stop complaining nice it's just the the recent beta seems to be broken anyways this is a default page not much interesting here sperle is where things get interesting this is their Wordle clone and apparently you have to run bun Dev once just to get your type definitions because they generate those via the dev server which is again one of the problems you run into when you're not using vanilla typescript because they have both their custom template syntax and they have implicit behaviors like let Data Page data this binding and these definitions these come from page server TS but we're not importing page server TS here we're importing from do/ dooll types which is a generated file that gets created and hidden by vs code once you run the dev server such that when things change here it will get updated accordingly think you even go to the definition yeah and you can see it is this crazy generated types DTS stuff but thankfully it is actually generating the type directly off of the page server JS file so you don't have to worry about the type definition being stale if you close your Dev server yeah not great this is why I like something like the new server component model where you can just await in the component but that's not what I'm here to talk about and I know they're working hard on continuing to improve the experience here what I'm here to talk about is more of the weird syntax decisions because we have spelt colon window spelt colon head weird but fine but here where things start to get a little weirder # each at const current equals row equals equals equals I that's not how JavaScript works at const what is this well because they built their own templating system and sometimes those templates need to be dynamic they also had to reinvent JavaScript in the same way that jsx is Reinventing some of HTML in JS zelt is Reinventing JS inside of HTML here and I personally don't love that there's a lot of people who are going to I already see embed in chat and by the way embed is based they're the one who made this tier list for us in the first place and we're seeing people say they actually like the syntax but I like jsx I like that my JavaScript is Javascript and that I'm not writing a different JavaScript once I've gotten below the line like in the script tag you're still writing JavaScript well typescript you specify LS TOS but from there down once we get into here once you're in your markup and you want to do things dynamically all of a sudden you're writing this weird hybrid thing array. from array 6. Keys as row pen row like what people are saying in chat it's hard to believe that anyone would call this more readable than jsx because you just write the JavaScript for each or map in JavaScript it's weird I will also give credit to spelt devs it seems like a lot of them don't use this type of thing but at the same time this is the example that you get when you generate a new spelt app so I'm not like reaching really far to find bad spelt code just is how it is no yeah they have a whole special tag section for spelt Joy they even have an alternative to console log at debug it's cool they have that but weird that you need that you know what I'm going to make some changes I'm going to move lit up to a tier so that I can put spelt front on B tier you know what I can deal with that I would these are very close for me where like spelt so important and it's pushing the right things forward I love Rich Harris I think he's one of the smartest people in the space but I wouldn't use spelt cuz I don't like the syntax that's why this is tough for me now that we've talked about a framework that reinvented the Syntax for writing the code let's talk about view view is really important and view has one unique characteristic that I want to go out of my way to call out it's been misunderstood when I previously tried to do this I want to be very clear View's International Community is unmatched their docs are internationalized almost as soon as they drop there is so many incredible people all over the world working on view the community is unlike any other community I've seen in the webd world it truly feels like everyone is able to join that community and take part in it and that's a huge part of why something like V has found this success it has as well The View Community is incredible and if English isn't your first language there's a very high percentage chance you started with View and I think that's an awesome win I wish more of these Frameworks had communities that big outside of the US and outside of English-speaking Western Nations that said they kind of started the single file component Trend where they made the view templating syntax and they kind of require you to keep everything in those files and if you want to break out a little bit of logic to reuse you end up with a lot of the same problems I just showed with spelt similar to what we just saw with felt they have a four equivalent but for them you define a ref with items or whatever you want and then you have this v-4 syntax which specifically tells the view runtime to make a new one of these components for each item in the list it kind of requires you to do more of the work outside of the markup and inside of the JavaScript layer which is nice but it also means that things you can do in it are inherently less dynamic as a result so it's checks and balances is you know items. for each item variable scoping is similar uh and again it has this weird Syntax for like defining a value in line so that it has closures and scope and now you have to learn about these specific behaviors they're less mindboggling than the ones in spelt but they're still not just JavaScript and I think when react calls itself just JavaScript and everybody freaks out this is specifically what they're talking about and yes I know V jsx is a thing but I want to show you guys something because I have been hearing about this forever that is not an argument do you understand like Vue jsx is getting a little more adoption but for less than one in three of V users to be using jsx when they're using view this is telling this is very telling and I don't think Vue jsx is a good enough argument when it's not the standard and also from what I've heard on every release of view it tends to break and you have to wait a while for it to catch up similar to the next experience that all said view is still very very good there's a lot of people I know and trust who still lean on view as their go-to and I think that is a very good choice and a lot of teams especially those that aren't primarily native English speakers the state ofth View Community is just so much better that it it deserves a low a tier I still would use felt first and also view needs to ship Vapor already if you're not already familiar view vapor is their attempt to rewrite view such that your code doesn't have to change but under the hood it's running very similar to solid that's why it's named Vaper it's a pun on solid in like states of gas so very excited for Vapor if that can actually happen view not a bad choice love the community don't love the syntax don't like single file components let's talk about next oh next my issue with next is that most of the things that compose next and that are truly unique to next I hate especially from the pages era God I hate to get serers side props it was the wrong way to do server side data it was an attempt and it was a really bad one and I I didn't enjoy it that said it was one of the best ways to build backend Integrations for your front-end app but almost all of the the front end code in the original next versions pre-app router was really painful and for the basic file based routing you got it wasn't worth it but for the API directory where you could quickly serve Json payloads from an endpoint inside of your react app with good relationships between those if you use something like trpc NEX js's Primitives were in an incredible state to be abused and I abused the hell out of them so for me next is an S tier for what you can do to it but its actual core pieces were tier now i' put them at a solid B I had with the new model there are many more Primitives that are very fun to play with and I've been doing some nonsense with those some pretty absurd but man I I find a lot of the decisions bad still I have a whole review of app router where I talk more about this but I'm I'm just still not that into file based routing I get why they do it it makes the compiler easier and it makes onboarding and a codebase easier but overall I feel like most of my recent love for next comes from server components not next and for that reason hi B tier let's talk about remix I have talked about remix a lot and I will say I'm much more hopeful for it now recently Mark dalish has joined the remix team and he has been doing wonders for them the current state of remix is the best I've seen it and it's going really far really fast while it doesn't seem like they're prioritizing server components which kind of sucks because I was excited for a more minimal server component implementation they are getting V working and that's what Mark's primary focus since he joined I'm really excited to see where remix goes with these new contributors because everything I've seen for the past few months has been super exciting that said I still hate a lot of the design decisions around remix my favorite is when they show examples of how great use action is so here's a basic use action example an action is similar to a server action in next if you're familiar with that but in more generic terms it's an endpoint that you can post to so when you create a route in remix it can have one loader which is what loads the data for that route it can have one action which is what happens if you post that endpoint so if I want to post this action I have to have a form that's on the same route and just by putting the form in the same route it will now know to post to this endpoint but that means there's no relationship between these like if I move this invoices component somewhere else this whole model just breaks immediately because it is required that you collocate the code or you now have to deal with this crazy dependency chain so if you have a component that needs some data and it's not in the page route you better hope that that data exists wherever that component is mounted like let's say you have this loader that grabs Prisma user. find many and this user's component isn't a page component this is just in a different file but then you call this in a route that doesn't have this loader if just silently fails and that's the problem when you have this route level separation where you have a magic loader or action function that isn't actually being called from your code there is no code linking this to this other than this type of call which by the way a lot of developers and contributors had to fight tooth and nail to get the remix team to actually merge the change to allow you to add a type definition to your loader data and God forbid you have a page that you want to post two things to let's say we have an action here for adding a new user but we also also have an action for deleting a user now that you have that you need to go Define new endpoints or even better have a switch statement in your action that checks which type of action you want to actually do so you're not writing an endpoint unique to the action the user does when you define an action remix you're not defining it for a component you're defining it for a route and you hope that relationship between the route and the component stays tightly knit and as a result I find it very very rare that the action primitive actually ends up making sense unless you have a code base that only one person is working in it is just not a good primitive for these reasons and without a solution like trpc or an abstraction that guarantees that one to one relationship this scares me and this is in contrast to how things work in something like server component model with server actions where you're actually importing the code you're actually attaching the form to that definition and rather than having a big switch statement where you manually make sure each input goes to the right place it just does it for you and I don't like these non-deterministic behaviors that exist inside of remix where moving a component somewhere might just break break your app entirely that said they absolutely normalize some important patterns everything from streaming updated content from the server as the page finishes loading to caring more about time to First Bite to running react on the server caching The Primitives to using web standards more without remix I don't think nextjs or even react would be where they're at today I would just never use this framework in a real code base it still doesn't behave in a way that I consider reliable enough unless you're very very remix brained your whole team is very very remix brained and you're not really using actions and loaders as the main layer for interfacing with your application yeah those are my thoughts on remix once again very important framework for the web not one I would use I I'll put it on quick tier I think that's fair also funny how all the things that are behaving like vanilla JS that's goal is to be modern JS but better in standards right there it makes sense they're all grouped together oh God Gatsby oh God I forgot this was here I if you're somehow not familiar with Gatsby it pioneered this idea of a react framework that generates HTML pages so if you wanted to blog in react and you wanted it to have HTML that was cached and would load as soon as you open the page with SEO and all those types of things Gatsby was the first attempt to really do that and the way they did that was and the way they did that was I you not graphql they built a giant graphql layer to pass data that you would either be through one of their plugins or loaders to get things out of your old WordPress site or their markdown parser plug or any of those other things that would then serve as a graphql schema that you would access in the pages it would then take all of those things you've defined in your schema and all the plugins and such run all of your pages one at a time run all of the code for them figure out what data they're asking for grab it from that embed it spit out that HTML as a file and then you'd upload that to a CDN this is how a lot of these tools work to be fair but it was the first to do it in that huge graphql layer in the middle ended up being really painful like really painful it was was rough H yeah and obviously it has since been I don't want to say formally killed but pretty heavily gutted when they got acquired by netfi most of the framework was dropped in favor of that abstraction for graph qualifying anything and I think that's where their strengths are but their strengths as a framework are awful I mean it is still a jav no it doesn't have client code still so yeah goes right here they found the worst possible way to do a react website generator a lot of people are asking for n for context when I made this I didn't have any of the meta Frameworks like next remix or Gatsby but people kept wanting them so I added them in quick and it's only fair to add n as well no I'm not adding solid start no I'm not adding spelt kit I'm not adding all those other things Nu exists because a lot of The View Community was I don't know how to say it other than a bit jealous of what was going on in the react World with nextjs and they wanted to enable that level of full stack developer experience within View and they've done some really cool stuff in N they built a plug-in system that's full stack not just back end or front end we're working on integrating that with upload thing right now and it's going pretty well they implemented an actual RPC like solution that uses typescript to let you know when you're fetching data what the type's going to be I can show that a bit they have a use fetch helper function as well as the dollar sign fetch for making Network requests based on user interaction and when you call this it can look at what this endpoint serves because it's your application and it will grab the type definition from that and give you the correct type for your data it's still doing some code gen stuff behind the scenes in order to assign the use Fetch with this specific input to a another specific return but it's pretty nice and as such they also apply this to their fetch call so you can use dollar sign fetch is their custom fetch pass it a string and it will now know the type of this response and you'll know what users is when you get it beware that using only fetch will not provide Network called DD which is really nice too so if you call a wait use fetch API count in five places on the same page it will only call it once which is one of the reasons that fetch was overridden in the new react model they got everybody Huffy but but having it built into the framework in A Primitive level it's really nice and I think a lot of these design decisions are great n is the only way I would personally ever use View and I think it's in an incredible state every time I see what they're working on every time I hear an update from Daniel row or anybody from the N team is getting more and more compelling to the point where I would argue n is one of the best meta Frameworks and I wouldn't think about using view without it as such I'm going to put it slightly ahead of you which also puts it at the highest rated meta framework see why you guys me to put that there do I have to talk about flutter now flutter for web instant s tier it's the only thing that fully escapes from the web Primitives and obviously as you get further away from web standards things get better who needs the Dom who needs a button element when you could just render everything in the canvas it's great web standards web Shands come on nobody needs those screen readers those are so 2012 come on yeah don't use for web even my Die Hard friends will not recommend for web like the people I know who are the hardest core about they will tell you not to use it and now we have our last two I should give react a real score at the end I'll do that so let's do these two and then I'll actually talk about react elm's an interesting one if you're not already familiar with this chaotic logo I wouldn't be surprised because I didn't know that was elm's logo until I went to go find it for this apparently it's blue now that's a nice little interaction elm's interesting because more than any of these other Frameworks Elm is a language and they're very aware of that they're not pretending not to be think is telling that their benchmarks are against Ember react angular 1 and angular 2 feel like elm's not gotten much love for like five plus years now so here is an example markup syntax is weird it's very nested in vertical just a dark mode wonderful just dark mode for this half so yeah it's weird I don't love it it's actually very similar to Swifty if you've used that but it's very strange and having to manually assign text first you pass it an empty array which says this doesn't have children and then you pass it another array which says this is the text element and comma means this is the next element it's weird I don't love this syntax like as the FP Guy this is too far for me and as a result it has not seen much adoption it's hard to give Elma rating it's kind of like rating hascal where it's just like it's cute I get why people like it but nobody actually uses it I'm going to deter it now for flash flash is incredibly based no iOS support anyone can use it works on Android crazy touchscreen friendly all of the best games ever made were made in Flash we're talking Impossible Game we're talking somebody in chat excuse me Flash on Android existed you sir your Zoomer is showing this was on I believe Froyo it was literally 2 years later on Jelly Bean Adobe Flash stopped being supported on Android it lasted for two Android releases because it was such a bad experience and nobody was using it it literally only happened so that they had points against the Apple users that was it it was awful and all of these Ry flash goes in the Bas tier yeah we'll put flashes number one that's only fair and now for the framework that brought us all here I react a lot so much of My Success both as a developer and as a creator has come from this framework so I am absurdly biased like absurdly biased here react is the only framework here that has continued to meaningfully evolve over a window as long as it has been around for angular is getting there now with the most recent release but angular's historically unwilling to change and tends to follow what others are doing react is one of the few Frameworks that still paves the way for others to build awesome things components in react introduced a new era of user experience and user interface design and the idea of a UI component library was popularized by react finding success with hooks we saw a whole new era of thirdparty libraries being built for react to enable incredible experiences in workflows everything from react query to sstand to frame or motion exists because of react introducing hooks all of those wins also exist with server components although we're still in the early era we don't know for sure if we're going to see the same level of community support and hype around server components as we did around both Hooks and components a whole but I'm hopeful and the stuff that we're building with upload thing shows that these New Primitives are really strong but that means that react relies on the community too much so easy F tier cool done we did it tier list over thank you all so much for this if you enjoyed it I'm sure you'll like my tier list where I compare every single HTML element that was miserable to make so please watch it if you haven't already and support the channel underneath there's a video YouTube things you like so you should watch that instead thank you all for watching this see you guys in the next one peace HT

Channel: Theo - t3․gg

Views: 223,077

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: WJRf7dh5Zws

Length: 40min 57sec (2457 seconds)

Published: Sun Dec 24 2023