Podcast 284: pros and cons of the SPA
In this episode we discuss the rise of the Single Page Application, or SPA. From humble beginnings around 2003, it has come to be a dominant approach for many large tech companies and an alluring option for smaller startups. But for simpler web projects, are there better alternatives?
Pawel Skolski wrote this definition of the SPA in 2016. “A single-page application is an app that works inside a browser and does not require page reloading during use. You are using these type of applications every day. These are, for instance: Gmail, Google Maps, Facebook or GitHub.
Tom McWright recently sparked some good discussion in the developer world with his article, If Not SPAs, What? He had written before about his belief that SPAs had done little to reduce the complexity of web development, but hadn’t really given readers other options. In his latest post, he tried to offer some possible alternatives.
Sara Chipps What’s the most wrong with CSS?
Paul Ford Mhmm. Mhmm.
SC All of it.
Ben Popper Are you struggling to deploy cloud native applications to a hybrid cloud? Do you want to become familiar with Kubernetes and Istio? IBM Cloud has a set of free, hands on training, ebooks, and an always on free tier of services to help you learn. Visit IBM.biz/StackOverflow to learn more. That’s IBM.biz/StackOverflow.
BP Hello, and good morning, everybody! Welcome to the Stack Overflow podcast. I’m Ben Popper here with my lovely co hosts.
PF Hey Sara and Ben!
SC Hey Paul and Ben!
PF Here we are, we’re gonna do this.
BP Three humans speaking into the microphones.
PF Mhmm! Talking ’bout coooooode! [Sara chuckles]
BP Alright, so an interesting article came up in our feeds. I thought we’d start there. Paul, we’ve talked about SPAs before. This is a two part series, the one that came up, If Not SPAs, What? And this is a follow up to Second Guessing the Modern Web.
SC Yeah, I think that one thing that really needs to come into the conversation when we’re talking about SPAs is, who are we building for? And what is it? Like, every restaurant needs an SPA. That’s it. Just like every restaurant, every family reunion, [Ben laughs] every website that is never going to have more than 10 people on it at the same time. And you know that. And also, I think, even though it’s like adding a framework is sometimes a little bit overkill. And then when it comes to applications that need to scale, that’s when you start thinking about stepping away from an SPA, or building something a little bit more complex. But I think that there was a time where everyone was doing the SPA and I see that it makes it difficult when you’re scaling to kind of split up those responsibilities among a larger team.
PF So we’re talking about React, view, angular apps for most cases, right? And yeah, there’s a lot because they get big, you have to do things like code splitting so that they can load more quickly and so on. So in this article, the focus is more like, you know, do you need all that? Couldn’t you just dress up your HTML and you know, go to the ball and have a fun time? As opposed to and your approach, you’re thinking more like, man, as these things get big, it gets to be a real pain, and suddenly you’re trying to jam the equivalent of like a, you know, install Microsoft Office and it’s 12 gigs into one webpage. And that’s not cool. Settle down everybody.
SC Yeah. But the thing, though, about React and View and some of those other models is the way they use components does make it easier, I guess you can kind of call that the micro front end pattern. Paul, I know you’ve played with these what I actually haven’t worked on a larger scale React or Angular app. So they’ve always been either hack projects or things like that. Have you seen these things scale with teams?
PF Yeah, I mean, it’s like, you know, it’s like anything, if everybody works together well, and you you clearly separate. Everything’s a cludge, right. But state management is really hard. It’s gotten easier, I think, with hooks in newest React, but everybody has their own approach to it. Code splitting is a challenge. Load time is a challenge as you get into larger and larger platforms. So it’s all the regular stuff, I think it’s you know, this would be stuff that a desktop programmer, someone when you boot up Xcode, or you’re using Microsoft’s developer tools, like you’re not thinking about that part, you’re thinking about other parts, you know, you don’t get distribution for free via the web with absolutely no clicking. But you definitely aren’t thinking like, how am I going to make it possible for my app to load without annoying people, right? Like that’s kind of built into desktop programming. And it’s not built, I mean, we’re bootstrapping something that was supposed to share a couple, some physics papers into an application delivery framework where there are billions of clients, some of which are on really kind of clunky phones on slow mobile connections, right. And so you’re, you’re solving that problem with App delivery. And that’s hard. So I’ll give you an example. Like you have a, if you’re working on something for the Indian market, let’s say, and you’re trying to get reach millions and millions of people, we did this with an education platform, your entire approach to development changes, because people are going to be on Android, and it’s going to load slowly, you have less control over the network and the environment. So you’re going to think about application delivery in a very sort of piecemeal way. And you’re gonna want to try to optimize a lot of different things. And then on the other side, if you’re, you know, building essentially like a first world app for admining things where they’re going to be working out of a control center, and and you know, you know, that people, if it takes 10 seconds to load, it’s going to be on a desktop, you can really think about that problem in a different way.
BP I had some experience doing some reporting about this, Paul, and some of the interesting things that came up talking about the Indian market, which is huge. People would love to, you know, have customers there and bring their services there. Not only do you have to think about lower broadband speeds, generally, but that people often are on like, pretty tight data plans.
PF That’s right.
BP And you get everything down to a really small package. And then also, that often, they’re like times of day when they can use the internet and time to do when they can’t. So can you make it easier for them to download stuff, and then you know, runs later as opposed to streaming it live? Those are things that they consider when building from there that Yeah, we don’t think about in our first world American software experience.
PF It’s hard like it like we had a client who was living in that market. And so they were able to really walk through all of those things with us, but it is, yeah, it’s a tremendous amount you don’t know. Which I mean, you know, we had Sophie Schmidt on to talk about Rest of World that’s a website entirely about what we don’t know about those markets when it comes to technology. And it’s, it’s when you go and look at it and you read it, it’s a lot of news, you’re like, ”Oh, this was worth a website.”
BP I mean, it’s not new anymore. But like, I think five years ago, people were always astounded by WhatsApp and these rise of Asian apps, especially in China, where it was a chat app. But then it became an entire OS. And they just kept cramming, more and more like you could play games, you could read news, you could chat, you could do whatever. But it was all in this one tiny, you know, phone app. And and that market gobbled it up. They loved it. Like as US apps were unbundling and taking things apart, making everything simpler. Asian apps are going in the totally opposite direction, like the app is your OS.
PF Don’t forget that Apple has a limit on App size. So giant mega apps like Facebook, like Facebook is a big app. Before that app can go out to the world, they have to take things out because there’s always more that they’d like to put in. And I mean, they’re like sticker packs or whatever. Right, like, and so, here’s what I think. I think that software delivery in app form is overvalued. But it aligns really well with essentially capitalism, with like getting people to buy goods and services, you give them the app that give you the money, right.
SC So you’re saying specifically like, mobile apps?
PF Mobile apps or desktop apps or whatever, and I think we’re kind of we’re still fighting that Battle like how do I make the web behave like that? And, I think that if you really it, what is the web truly great at it’s stuff like those notebooks, you know, or if you go to Observable, Observable HQ, and you kind of poke around there, it’s about sort of being able to have as many documents as you want, and as many pictures and now as much video, but also, it’s all in this kind of dynamic environment, you could be manipulating and playing with it. And so, to me, I always think, you know, if you’re going to tell me about the economy, can you give me a slider? If you’re going to show me a picture? Can you let me kind of remix it or play with it in some way? And so I feel that notebooks are actually probably the more web appropriate application delivery platform.
SC Wowww! That’s a take.
PF It’s a take, right? Like that is. And it is, like, but they’re less revenue friendly. Right? There’s no, no one has a business model around notebooks. Whereas they definitely have a business model or on Twitter, like it’s not–what I’d love to see is like a pipeline, where instead of like giant IDE leading to impenetrable app, you had notebook environment, where you could kind of wrap the notebook up progressively into a more and more app like experience, right.
SC I think what you’re doing is just fixing HTML, and CSS. [Ben laughs]
SC Yeah, it works really well, in that use case. But what about the use case where it’s like really UI heavy?
PF Well, then you’re gonna do an app, then you’re gonna do an app. Absolutely. Yeah, you might prototype and play around and share ideas for the app inside of the notebook, right, like be a great way to communicate your different widgets inside of a product team. You know, a certain point is like react storybook, which lets you browse through components, and it gives you the code in order to quickly build your own apps, right? Like, how far away is that from the notebook model if it had live data in it, and you could manipulate the widgets directly? Like I mean, I think we’re starting to play with that space where you’re gonna drag and drop widgets into live environments, and then mess around with them, which is very, you know, kind of 1980s Xerox PARC style computing.
SC Yeah, like the Yahoo News Feed.
PF Wait, what’s that? Tell me about that.
SC Like when everyone’s homepage was Yahoo, you had all your little widgets.
PF That’s right.
SC You could drag and drop
PF Make your own hub! That’s where we’re going.
SC Yeah, it was great! I always had the Met scores.
PF Ohhh, are you a Mets fan? We didn’t know that, Sara. That never came up.
SC Yeah, I come from a long line.
PF Right. That’s good. That’s good.
BP Yeah. As you were designing your own personal little geo city, it had widgets for weather, sports, stock ticker. [Ben laughs]
PF Well, that was always a fantasy. Really, people would want to make their own feeds in environments. Look, the things I’m describing are for people who are developers, or developer Jason, you know, that is a tiny percentage of a percentage. And then the rest of human beings are going to, like want to participate by reading and making decisions about their own life and or by watching.
BP Maybe the reason this guy wrote this article is because he’s worked on Observable. And so.
PF Yeah, no, I think that that, I didn’t know that I didn’t process that. That’s totally, if you’re thinking about notebooks, because what you realize is you can kind of log into your terminal and have the full all the state and all the environment that you were playing around with yesterday, or just kind of back up, rather than this sort of compile test experience loop. And that, that does feel really fun.
BP Good to see. Appreciate that.
PF Oh, it’s good. Everything’s, everything’s going
SC That seems like a RegEx.
PF Yeah, frankly, all questions are RegEx questions, as I’ve learned in my time with Pearl.
BP If you can make the memorization happen, you can make it work with RegEx.
BP Alright, y’all. I’m Ben Popper, Director of content here at Stack Overflow. You find me on Twitter @BenPopper.
SC And I’m Sara Chipps, Director of Community here at Stack Overflow.
PF This is Paul Ford, friend of Stack Overflow. Check out my company Postlight. Love you, love your show!
[OUTRO MUSIC]Tags: single page application, spa
I don’t understand this discussion. Went only through the half of it, because it annoys me.
Yes, SPA’s are far more complex than a simple HTML + CSS site. But if you think/joke that everything is wrong with CSS, then why do you even think about SPA’s?
There is no way around SPA’s if you want a “native app” feeling on your site. And yes, a restaurant with max 10 visitors at a time on their site might need a SPA as well if the owner wants some exclusive user experience which is only available with SPA’s like nice route change transition animations without content jumping and flashes.
Nobody needs a Porsche/Lamborghini/Bugatti. But some want to have it and can afford it.
But if you offer for example a SaaS then there can’t be even a discussion about whether to use a SPA or just HTML+CSS.