I love making videos like these. I know y'all love them too. Sadly, this is by FAR my worst performing video in like 3 months. So if you can, maybe share it with some people who should see it?
Tbh I dont think its performing badly, its not something you click on for news, its a video which will perform over time. Keep it up brother, love your work.
Sharing it rn, keep it up Theo, this is gold content, unfortunately it might not be broadly appreciated because of the "short format" popular standard. But there are lots of professor's classes that are referenced when people want to explain something to one another and I know for a fact I'll be referencing this one.
This is the stuff you will never ever learn at any school, college or university and yet you will definitely use that knowledge in a real word scenario or at work. The fact that we have this type of quality content for free is what makes the internet the internet.
to be fair, professors are working a job. out of all the content one could make this guy seems to have a passion for pondering and teaching these concepts so it makes sense. this stuff is gold!
This is a really great video. I had a general understanding of all of the concepts covered (although less so for islands), but it was really nice having it all laid out to compare each modal. I think these sorts of videos are my favorite.
Been watching since the beginning and this is the video that encapulates everything the channel has to offer and all the skillful improvements from Theo. The breakdowns are informative, supported by examples, and visuals providing a highly digestible and smooth experience to consume. The content itself is a summary of existing content but the presentation makes it feel like I'm watching it for the first time...that is my defintion of a great summary. This is now my go to resource to demonstrate to others where the web is going and why. Awesome video, great job, can't wait for more.
This is, no joke, the best video you have ever made. I've had a vague idea of how all these worked, but boy was I missing a LOT of information. Really blown away by how well this is laid out.
What an absolutely incredible video. I love learning about JS, and I think this is the happiest I've been watching a video about it. Thank you so much for sharing the knowledge you got after working so hard using all of these methods!
Amazing content, full of details about things I realize I didn't understand as well as I thought I did. This video might start slowly, but it'll be a long slow burn as people pass it around to others who need to really understand these paradigms.
Quality content here. Many thanks for your effort on trying to bring some coherence to the chaotic dev state we are going through since JS invaded our backend :)
Had to wait some days wanting to have the energies to properly learn from this video. I'm a backend guy, but to me the clarity and the flow of the explanation was definitely mind blowingly good
Very informative video. I love the most listening to the trade-offs because there's multiple models out there and it's hard to know why. I really really like 44:10 where you're giving all the reasons why these models evolved the way they did - to solve these needs. The why really put things into perspective and makes the lesson even more powerful
No joke, the MPA-influenced split-execution model concept has been around for a long time. I was literally working with a decades old (yes multiple) classic asp page today that does basically this. Server generates all the static html it can. There are little islands that need more data for the specific user which JavaScript handles the requests for and building out the page. All this is cacheable and once that cache is there everything loads really fast (for what it is). Classic ASP though, is way less pleasant to deal with and had squat for tooling compared with the modern version of the same paradigm.
Isn't that what the JS guys are always doing? Trying to reinventing the wheel in their own way, realizing their stuff doesn't work super well and finding a solution that was invented for another lenguage/technology/stack years ago...
@JorgeMarquezIO actually, we (backend first, mpa) failed imho. we didn't deliver streaming + preserving of client state when rerendering (going to a new route). that's why we have to suffer from "them/client first guys" reinventing the wheel. because we didn't move forward enough. (there were solutions from 2014 like markojs from ebay), but we didn't care, this is our fault in my opinion.
@@JorgeMarquezIO no, it's not what they're doing at all. none of the modern solutions in use today are just reinventing the wheel because they're all intended to address a trade off of an old paradigm. what you're saying is like the commonly repeated factoid in the comments that isn't true
Excellent video with such a great timing. I’m in progress of switching from mobile to full stack and this topic was very hard to grasp, this video feels like new year present. Thank you!
Been working on Svelte Kit app and been having a hard time getting used to non-SPA design coming from React. Literally wanted to login to the t3 discord and ask for a video like this thank you so much!
SvelteKit is also SPA. Also he forgot to mention that most browsers will request the JS the moment it sees the tag, not after the entire document is sent - and you can leverage preload tags and headers to explicitly inform the browser about a resource. Thirdly, most frameworks including SvelteKit give you ways to include dynamic data on initial request so that you don't actually need the JS to make the api data request after.
@@laztheripper while I agree that he could've mentioned preloading, I don't think he implied that you need to wait for the whole document to fetch the scripts, what Theo was probably implying is that you need to wait for the whole document before you can do hydration, so you can load/preload them as you wish, but you still have to wait for the whole html to be parsed before proceeding with parsing the loaded/preloaded scripts and attaching event listeners (hydration)
@luigicorciulo8190 He did though, he put a bright red line after the document is fully ready and the elements are on screen, then put requesting the JS after the line.
Great video, I like the way you show real examples add more context etc. this makes video longer but actually saves me time by preventing me to rewatch same type of things again and again. Cheap is expensive logic :) Only downside is I'm struggling to find time to watch it xd.
This is your best video hands down. This is a kind of video, that after only watching i just feel a better proagrammer. Thank you :D PS: After watching the whole filling I cannot shake off a feeling that SPA just screw frontend up. I mean - MPA and Island architectures seems like the simplest and most efficient architectures there
The MPA island arc is not at all new; those of us that did web dev back in the jQuery days were doing this all the time. Dynamically building UI client-side was a nightmare, so we would have most Ajax endpoints return little HTML fragments using traditional server-side templates. These templates have always been composable, so if you request a top-level template, you get the full page, but if you request some nested part of a template, you just get that part as a fragment. If you do this properly you can get MUCH faster user responsiveness than with SPAs as you an even set up caching and CDN laying for these fragments.
ah man. astro is such a game changer, man. If asto has support for "SPA support which generates all the required html files. there can be multiple of them and use client side island to fetch the required js to render the interactive part with in the client side" then its game over for other framework. this is such a powerful this gives ability to create spa that is seo friendly and also do not require node server to run react in server. its time to explore asto. lets goooo
This is a great extremely informative video that I’ve been digesting slowly to really understand what’s going on. Sorry it’s been underperforming, but it’s definitely an extremely valuable resource. Hopefully it picks up after giving it a share
In general we need more deep dive videos into browser rendering (not react rendering), how browser works in general, how to measure browser rendering performance. Recently I tried to research the subject and videos on this are 10 years old and even people in thoes videos say that it constantly changes and things they say may very soon not apply.
21:32 - 23:56 I think the double data drawback from SSR'd SPA is what Qwik is trying to solve - from my understanding - instead of sending JS that re-renders in the client to bind the button onclick event, Qwik embeds small JS code that imports the actual code that runs inside the button elementl
if buttons and links are the "main" issue then cant we simply have something other than "onClick" handlers xD? I mean the hydration process shouldnt take TOO long once loaded. Essentially the ones who are being hit by this are the users that load this page for the first time, try to navigate and also have slow connection.
As a 3rd year in College in a software dev course. This video represents what hasn't/isn't being taught in my classes. All my web app classes have been "how to use express" thus far.
This last rendering pattern is cool. I really like SPA's with build-time rendering i.e. SSG with hydration. What the real differentiation is when this process happens and platforms such as plenti the SSR takes place at build time so on the client navigation and page loads are instantaneous.
This has already been the model that Deno's Fresh framework has worked for ages. It's one of the best DX's I've had the pleasure of using. Also, it's **so** much lighter than any React based frameworks, because of Preact.
I like to split up my domain in content / functionality. The content should be with SSR for SEO, speed and machine readability. The functionality does not have to be optimized for SEO and machine readability, so the functionality is done with Vue/React. This way you avoid intermingling too much and development is less complicated.
Im using Astro SSR with Fastly CDN tag purging, its pretty great for content centric sites connected to a CMS. I hope vercel make their data cache framework agnostic
23:35 The crawler has everything it needs since the HTML has all the content on the initial load therefore it's redundant for the crawler to download and run the JS, so why exactly is SEO harmed here?
Can someone help me out with isomorpohic spas it just feels like once you click on a new page you have sent down a bit of js saying ok this part is dynamic so we will load while we get it brb, and then comes back with data for that page, but then regular spas are like stuck on the actual entire page reloading and the html which is cached for the other parts is reused but is still blocked by the new fetch of the dynamic part?
So, in the case of traditional SPAs, regardless of how they are built (which framework ... if there is a framework), and all of the rest, tend not to use HTML over the wire. They tend to load data over the wire, and update, either by putting data in the existing elements, or by replacing the existing elements with templates that are filled in (and have event listeners rebound). In a traditional SPA, the logic for how to get data, and what to do with it, once you have it, is handled on the client machine. If you think of a single-player videogame, all of the logic for playing and drawing is happening on your box. If you open a menu, the game itself works out which menu to open, and how to open it, and works out what to do if you have changed some setting. It doesn't have to call back to the server to figure out what new values to put in the same menu, to show that changes have been made, it just edits that part of the menu, and changes the config running the game. Nothing needs to phone home, or be downloaded, unless it's specifically about getting new content, or uploading something to the cloud, to save. But this also means that all of the assets and code that make up the game need to be installed and loaded, before you can see them, and you might get a loading screen, as new data has to be loaded in, for places or things you haven't seen yet. In the beginning, people thought XML would be the format that would be sent to the client, to pull data out of, to put in the pages. There was a very brief moment where people thought it would be a good idea to download JS files that were written per-request, where the JS file was responsible for replacing the data / HTML on the page (they were very dangerously wrong). People eventually settled on JSON, and frameworks/libraries like Knockout and Angular and React were put in to help manage the HTML parts, and keep them in predictable places, and running at predictable times. All optimizations of SPAs, past this point are either to help SPAs load faster (by serving HTML to show, while code is loading), or to let the SPA run offline. The rest is improvement to the "how" and "how fast", without changing the what or the why.
@@SeanJMay Thank you Genuniely so much for the explanation, which is well structured!!! I understand it now!!! I will rewatch the video as well just to make sure my understanding lines up
these are the videos i really like. the videos where you just read articles and blog posts are really boring. please make more of these videos in the future where you explain something
I wish there was a bit more info on what frameworks do what, because i imagine as a developer most of this is behind the scenes handled by the frameworks. For example i imagine SPA is react. And SPA with SSR is nextjs ...
I’m not sure if anyone will answer this question, but what confuses me is why HTMX + Django is considered different from MPA with server islands. At one point in a video, Theo says HTMX wouldn’t work on a CDN because it wouldn’t know how to attach itself to parts of the HTML page. But what throws me off is that the diagram for MPA with server islands shows minimal JS that runs to get the “islands.” So, couldn’t you just add the CDN script tag for HTMX, and it would be exactly the same?
In htmx's case it depends on the implementation, for me I use go on the server, so every request generates the HTML via golang and then is sent to the user. It's basically like the server rendered diagram, but take ALL the js stuff out it allows you to be a single page application by only replacing chunks of HTML at a time that are rendered on the server.
I worked in enterprise apps that went that way, its a torture, It makes you truly realize how important spa framework are tbh. Even component based front-end solutions, jquery is a mess, you should think of how easy it is to delete something when talking about big apps, rather than how easy it is to build, and jquery references that 20 developers does its own thing, is a mess to figure it out.
me noob, but if you're loading components dynamically, how do you re-initialize the component's javascript? I understand loading html/db data is static, but what if im loading an entirely new animated component or something.. with eventlisteners and such. Is this a react thing? I can only find vague answers
They don’t have to be different computers, but could be different programs on the same computer. In big organisations they are probably running in different containers across multiple computers.
I have a question. In the MPA-influenced Split-Execution approach, what if the page needs to be interactive for users? I assume JavaScript would still need to be sent to the client, and hydration would need to occur. Is this correct? Thanks for this amazing video btw.
I love making videos like these. I know y'all love them too. Sadly, this is by FAR my worst performing video in like 3 months. So if you can, maybe share it with some people who should see it?
Thats a real bummer, genuinely felt like I should have paid for this one so useful to me😃
Tbh I dont think its performing badly, its not something you click on for news, its a video which will perform over time. Keep it up brother, love your work.
I left a like if that helps
It's sad but you probably need a more clickbaity title
Sharing it rn, keep it up Theo, this is gold content, unfortunately it might not be broadly appreciated because of the "short format" popular standard. But there are lots of professor's classes that are referenced when people want to explain something to one another and I know for a fact I'll be referencing this one.
This is the stuff you will never ever learn at any school, college or university and yet you will definitely use that knowledge in a real word scenario or at work. The fact that we have this type of quality content for free is what makes the internet the internet.
Yes, actually crazy good video
to be fair, professors are working a job. out of all the content one could make this guy seems to have a passion for pondering and teaching these concepts so it makes sense. this stuff is gold!
Thanks a lot for the lessons Theo.
I found the video extremely informative and easy to understand even as someone who's a newbie to frontend. Amazing work, Theo!
This is a really great video. I had a general understanding of all of the concepts covered (although less so for islands), but it was really nice having it all laid out to compare each modal. I think these sorts of videos are my favorite.
Been watching since the beginning and this is the video that encapulates everything the channel has to offer and all the skillful improvements from Theo. The breakdowns are informative, supported by examples, and visuals providing a highly digestible and smooth experience to consume. The content itself is a summary of existing content but the presentation makes it feel like I'm watching it for the first time...that is my defintion of a great summary. This is now my go to resource to demonstrate to others where the web is going and why. Awesome video, great job, can't wait for more.
❤️ thank you so much
Here are some key points from this video
Classic MPA 3:10
Classic SPA 5:37
SSR SPA 17:09
Isomorphic SPA 30:51
MPA-influence split-execution 37:08
This is, no joke, the best video you have ever made. I've had a vague idea of how all these worked, but boy was I missing a LOT of information. Really blown away by how well this is laid out.
What an absolutely incredible video. I love learning about JS, and I think this is the happiest I've been watching a video about it. Thank you so much for sharing the knowledge you got after working so hard using all of these methods!
The brain is satisfied at learning new stuff I 'kinda knew' but didn't really know. Thanks again.
Amazing content, full of details about things I realize I didn't understand as well as I thought I did.
This video might start slowly, but it'll be a long slow burn as people pass it around to others who need to really understand these paradigms.
Quality content here. Many thanks for your effort on trying to bring some coherence to the chaotic dev state we are going through since JS invaded our backend :)
Had to wait some days wanting to have the energies to properly learn from this video. I'm a backend guy, but to me the clarity and the flow of the explanation was definitely mind blowingly good
These types of videos are what you do best. Awesome work 🙏
Very informative video. I love the most listening to the trade-offs because there's multiple models out there and it's hard to know why. I really really like 44:10 where you're giving all the reasons why these models evolved the way they did - to solve these needs. The why really put things into perspective and makes the lesson even more powerful
No joke, the MPA-influenced split-execution model concept has been around for a long time. I was literally working with a decades old (yes multiple) classic asp page today that does basically this.
Server generates all the static html it can. There are little islands that need more data for the specific user which JavaScript handles the requests for and building out the page. All this is cacheable and once that cache is there everything loads really fast (for what it is).
Classic ASP though, is way less pleasant to deal with and had squat for tooling compared with the modern version of the same paradigm.
Isn't that what the JS guys are always doing? Trying to reinventing the wheel in their own way, realizing their stuff doesn't work super well and finding a solution that was invented for another lenguage/technology/stack years ago...
@JorgeMarquezIO actually, we (backend first, mpa) failed imho. we didn't deliver streaming + preserving of client state when rerendering (going to a new route). that's why we have to suffer from "them/client first guys" reinventing the wheel. because we didn't move forward enough. (there were solutions from 2014 like markojs from ebay), but we didn't care, this is our fault in my opinion.
@@JorgeMarquezIO no, it's not what they're doing at all. none of the modern solutions in use today are just reinventing the wheel because they're all intended to address a trade off of an old paradigm. what you're saying is like the commonly repeated factoid in the comments that isn't true
Excellent video with such a great timing. I’m in progress of switching from mobile to full stack and this topic was very hard to grasp, this video feels like new year present. Thank you!
I needed this, thanks Theo !!
Been working on Svelte Kit app and been having a hard time getting used to non-SPA design coming from React. Literally wanted to login to the t3 discord and ask for a video like this thank you so much!
SvelteKit is also SPA. Also he forgot to mention that most browsers will request the JS the moment it sees the tag, not after the entire document is sent - and you can leverage preload tags and headers to explicitly inform the browser about a resource.
Thirdly, most frameworks including SvelteKit give you ways to include dynamic data on initial request so that you don't actually need the JS to make the api data request after.
@@laztheripper while I agree that he could've mentioned preloading, I don't think he implied that you need to wait for the whole document to fetch the scripts, what Theo was probably implying is that you need to wait for the whole document before you can do hydration, so you can load/preload them as you wish, but you still have to wait for the whole html to be parsed before proceeding with parsing the loaded/preloaded scripts and attaching event listeners (hydration)
@luigicorciulo8190 He did though, he put a bright red line after the document is fully ready and the elements are on screen, then put requesting the JS after the line.
This video is pure gold, thank you Theo!
Wow, I'm in awe of theo's diagrams. They are the best. Makes me able to undestand the concepts very clearly ❤
omg, I really need this. Thanks for this vid, Theo
Thanks Theo, that was a tremendously helpful overview 🙏
Great video and will be using as a resource in the future to introduce people to js rendering. Really great work, thanks theo!
Great video, I like the way you show real examples add more context etc. this makes video longer but actually saves me time by preventing me to rewatch same type of things again and again. Cheap is expensive logic :)
Only downside is I'm struggling to find time to watch it xd.
Thanks!
This is your best video hands down. This is a kind of video, that after only watching i just feel a better proagrammer. Thank you :D
PS: After watching the whole filling I cannot shake off a feeling that SPA just screw frontend up. I mean - MPA and Island architectures seems like the simplest and most efficient architectures there
The MPA island arc is not at all new; those of us that did web dev back in the jQuery days were doing this all the time. Dynamically building UI client-side was a nightmare, so we would have most Ajax endpoints return little HTML fragments using traditional server-side templates. These templates have always been composable, so if you request a top-level template, you get the full page, but if you request some nested part of a template, you just get that part as a fragment.
If you do this properly you can get MUCH faster user responsiveness than with SPAs as you an even set up caching and CDN laying for these fragments.
some high quality content, reminds me of the older days of this UA-cam channel
great vid, looking forward to similar kind of content from you
Thanks for this Theo.
It's great to understand the basics first before becoming a top programmer.
incredible explainer that demystifies a lot! thanks theo!!
Amazing piece of work Theo!
This is Indeed, one of the best videos!
Great video. Such a great breakdown of some concepts I have been struggling to untangle. Thanks!
ah man. astro is such a game changer, man. If asto has support for "SPA support which generates all the required html files. there can be multiple of them and use client side island to fetch the required js to render the interactive part with in the client side" then its game over for other framework. this is such a powerful this gives ability to create spa that is seo friendly and also do not require node server to run react in server.
its time to explore asto. lets goooo
I love videos that are so explicative. Thanks, Theo
This is a great extremely informative video that I’ve been digesting slowly to really understand what’s going on. Sorry it’s been underperforming, but it’s definitely an extremely valuable resource. Hopefully it picks up after giving it a share
Ill comeback when there is more comments
influencer telling you what to think < comments telling you what to think
Haha same here
@@PraiseYeezusreal
Worth the 50 minute binge watch
last week, you talked about all the ways HTML gets to your browser, but I have a feeling that ICE is the perfect tool to do just that.
Great video. So easy to understand. I'll definitely share
i am going to add this discussion to my MERN full-stack course. Thanks for this discussion!
12:20 i feel like this is such a good example of what happens when building an app as you reflect retrospectively
Dayum. That's a banger of a video.
In general we need more deep dive videos into browser rendering (not react rendering), how browser works in general, how to measure browser rendering performance. Recently I tried to research the subject and videos on this are 10 years old and even people in thoes videos say that it constantly changes and things they say may very soon not apply.
21:32 - 23:56 I think the double data drawback from SSR'd SPA is what Qwik is trying to solve - from my understanding - instead of sending JS that re-renders in the client to bind the button onclick event, Qwik embeds small JS code that imports the actual code that runs inside the button elementl
if buttons and links are the "main" issue then cant we simply have something other than "onClick" handlers xD?
I mean the hydration process shouldnt take TOO long once loaded.
Essentially the ones who are being hit by this are the users that load this page for the first time, try to navigate and also have slow connection.
Downloaded the vid and I have a copy on flash drive thank u it’s been amazing.
Amazing video! Thanks for this great resource and diagrams. Better than any 50hr course in Udemy
Thank you, these videos are awesome and helpful. You're a great teacher.
Very interesting and informative. Working on a project that uses React front end and just a simple backend for api
I got to understand so much from your teaching.
Would you maybe consider making a video on where to find all the great programming related articles? Like a top list of websites.
As a 3rd year in College in a software dev course.
This video represents what hasn't/isn't being taught in my classes.
All my web app classes have been "how to use express" thus far.
@Theo Can you share the excalidraw link. It's so nice
Yeah i would love that link too very cool diagrams
This last rendering pattern is cool. I really like SPA's with build-time rendering i.e. SSG with hydration. What the real differentiation is when this process happens and platforms such as plenti the SSR takes place at build time so on the client navigation and page loads are instantaneous.
Great content Theo 👏👏👏
00:00 - 01:08 INTRO
01:08 - 02:53 SPONSOR
02:53 - 06:07 CLASSIC M.P.A (Multi Page Application)
06:07 - 11:48 CLASIC SPA (Single Page Application) Part 1
11:48 - 15:24 CLASIC SPA (Single Page Application) Part 2
15:24 - 17:00 COMPARE MPA SPA
17:00 - 19:51 SOLUTION TO SPA -> FULL SSR (Server Side Rendered)
19:51 - 21:32 FLAW WITH SSR’d SPA Part 1
21:32 - 23:56 FLAW WITH SSR’d SPA Part 2
23:56 - 25:55 SOMETHING COOL ABOUT IT
25:55 - 27:35 FLAW WITH SSR’d SPA Part 3
27:35 - 28:25 how to resolve IT ?? -> Isomorphic SPA [INTRO]
28:25 - 30:53 Isomorphic SPA [SUSPENSE]
30:53 - 34:53 Isomorphic SPA [DIAGRAM]
34:53 - 37:09 FLAWs WITH Isomorphic SPA
37:09 - 38:22 Server Island MPA [INTRO]
38:22 - 40:07 Server Island MPA [ISLAND]
40:07 - 43:01 Server Island MPA [DIAGRAM]
43:01 - 45:14 What to look for?? -> Benefits
45:14 -47:33 FLAW WITH Server Island MPA
47:33 -> END :(
This is a really well done video, and very dense. Had to take multiple breaks while watching it, but super informative.
This has already been the model that Deno's Fresh framework has worked for ages.
It's one of the best DX's I've had the pleasure of using. Also, it's **so** much lighter than any React based frameworks, because of Preact.
Really good video, learnt quite a bit 👍
goddamnit this is such a beautiful video
damn, this video is good. a lot of terms I have a fuzzy definition of in my head for solidified!
I was looking for something like this last week!
SPA model is fine as long as you batch requests well and have decent loading states
Nice video! I've been going down the rendering rabbit hole. Prismic has blogs on CSR/SSR that are a good accompaniment to this video!
44:43 Its like the CAP theorem in Database. You only get 2 and the you compromise on what is important, or scale it with multiple servers.
33:40 this is starting to remind me a lot of phoenix liveview, an elixir web framework that uses websockets to minimize network traffic
As an astro svelte fanboy this video reassures me
Actual goated video highly recommend!
I like to split up my domain in content / functionality. The content should be with SSR for SEO, speed and machine readability. The functionality does not have to be optimized for SEO and machine readability, so the functionality is done with Vue/React. This way you avoid intermingling too much and development is less complicated.
Im using Astro SSR with Fastly CDN tag purging, its pretty great for content centric sites connected to a CMS. I hope vercel make their data cache framework agnostic
This is your best video tho. Why don't people like it
Prewatched (I watched it on stream 🤫)
God this was so good
Very useful video, especially for beginner web developer
That is great! Thanks for share!
23:35 The crawler has everything it needs since the HTML has all the content on the initial load therefore it's redundant for the crawler to download and run the JS, so why exactly is SEO harmed here?
HTMX solves all your problems, as long as you implement a caching mechanism for your initial page load on the server.
Blow my mind. 🤯 literally. feels like my basic is strong now than the previous day 🙂
Much appreciated
amazingly informative
We need may be a dedicated channel or a series where you can try to post 1 video a month and explain some of these fundamental stuff in 1 hour video.
Woah, never gotten to a video this early before!
Can someone help me out with isomorpohic spas it just feels like once you click on a new page you have sent down a bit of js saying ok this part is dynamic so we will load while we get it brb, and then comes back with data for that page, but then regular spas are like stuck on the actual entire page reloading and the html which is cached for the other parts is reused but is still blocked by the new fetch of the dynamic part?
ALSO Ppr sounds very interesting powerful and fire!!
Also do islands get a loading state, or everything is blocked, like is there a suspense skeleton, cuz i think they could benefit from it?
So, in the case of traditional SPAs, regardless of how they are built (which framework ... if there is a framework), and all of the rest, tend not to use HTML over the wire.
They tend to load data over the wire, and update, either by putting data in the existing elements, or by replacing the existing elements with templates that are filled in (and have event listeners rebound).
In a traditional SPA, the logic for how to get data, and what to do with it, once you have it, is handled on the client machine.
If you think of a single-player videogame, all of the logic for playing and drawing is happening on your box.
If you open a menu, the game itself works out which menu to open, and how to open it, and works out what to do if you have changed some setting. It doesn't have to call back to the server to figure out what new values to put in the same menu, to show that changes have been made, it just edits that part of the menu, and changes the config running the game. Nothing needs to phone home, or be downloaded, unless it's specifically about getting new content, or uploading something to the cloud, to save. But this also means that all of the assets and code that make up the game need to be installed and loaded, before you can see them, and you might get a loading screen, as new data has to be loaded in, for places or things you haven't seen yet.
In the beginning, people thought XML would be the format that would be sent to the client, to pull data out of, to put in the pages.
There was a very brief moment where people thought it would be a good idea to download JS files that were written per-request, where the JS file was responsible for replacing the data / HTML on the page (they were very dangerously wrong).
People eventually settled on JSON, and frameworks/libraries like Knockout and Angular and React were put in to help manage the HTML parts, and keep them in predictable places, and running at predictable times.
All optimizations of SPAs, past this point are either to help SPAs load faster (by serving HTML to show, while code is loading), or to let the SPA run offline. The rest is improvement to the "how" and "how fast", without changing the what or the why.
@@SeanJMay Thank you Genuniely so much for the explanation, which is well structured!!!
I understand it now!!! I will rewatch the video as well just to make sure my understanding lines up
Where can we get a copy of the diagrams?
these are the videos i really like. the videos where you just read articles and blog posts are really boring. please make more of these videos in the future where you explain something
0:31 Oh that's news wow 😒
Excellent, extraordinario
Waiting for a video on LibreJS compliant websites.
Will "local first" get us over line into the dream web app that you described at the end?
I wish there was a bit more info on what frameworks do what, because i imagine as a developer most of this is behind the scenes handled by the frameworks. For example i imagine SPA is react. And SPA with SSR is nextjs ...
I was searching for this livestream 😅
Please make this same type of video diving into graphql or trpc
I’m not sure if anyone will answer this question, but what confuses me is why HTMX + Django is considered different from MPA with server islands. At one point in a video, Theo says HTMX wouldn’t work on a CDN because it wouldn’t know how to attach itself to parts of the HTML page. But what throws me off is that the diagram for MPA with server islands shows minimal JS that runs to get the “islands.” So, couldn’t you just add the CDN script tag for HTMX, and it would be exactly the same?
I wish theo teaches all full-stack topics this way 😘
After watching this I know web dev is not for me.
what about MPA Via AJAX calls like JQuery / HTMX
In htmx's case it depends on the implementation, for me I use go on the server, so every request generates the HTML via golang and then is sent to the user.
It's basically like the server rendered diagram, but take ALL the js stuff out it allows you to be a single page application by only replacing chunks of HTML at a time that are rendered on the server.
I worked in enterprise apps that went that way, its a torture, It makes you truly realize how important spa framework are tbh. Even component based front-end solutions, jquery is a mess, you should think of how easy it is to delete something when talking about big apps, rather than how easy it is to build, and jquery references that 20 developers does its own thing, is a mess to figure it out.
Server side react is not a solution for immediately showing loading state when navigating to another page. You got that totally wrong.
me noob, but if you're loading components dynamically, how do you re-initialize the component's javascript? I understand loading html/db data is static, but what if im loading an entirely new animated component or something.. with eventlisteners and such. Is this a react thing? I can only find vague answers
09:41 are "GraphQL Edge" and "Server" two different computers with different ip addresses?
They don’t have to be different computers, but could be different programs on the same computer.
In big organisations they are probably running in different containers across multiple computers.
I have a question. In the MPA-influenced Split-Execution approach, what if the page needs to be interactive for users? I assume JavaScript would still need to be sent to the client, and hydration would need to occur. Is this correct? Thanks for this amazing video btw.