Let's explore the frameworks landscape

This is a transcript from the second episode in our series on how to choose your tech stack. In this episode, Sadek and Nouha discuss how to choose your framework and look into the advantages of some of the most popular and commonly used frameworks.

Template-based? Component-based? Your approach will change which framework is best for you.

Read through all of the details, but make sure to watch the full video and to subscribe to our channel so that you don't miss the rest of the series!

Highlights:

How do I choose my framework and what are the different approaches?

1. You can have a template based approach with Node and Laravel.

Pages are files with HTML, DOM, and keys to fetch content from the CMS. Simple and popular.

2. On the other hand, you can have a components approach with React, Vue, Angular.

Becoming increasingly popular and evolving very quickly, it allows you to imagine each section on the page as an individual component.

Video

Transcript

Nouha: So we just talked about how to choose a technology stack when you create a website. Basically you have those two blocks. Let's focus on the first one, the frameworks. How do I choose my frameworks? And what are the different approaches?

Sadek: Right, it's very complicated because you have a lot of frameworks, but I guess that maybe viewing it as a tree will help. So you have the top of the tree, two things like the kind of the classic, traditional, template-based approach. So, it's basically your pages are files which have HTML or some kinds kind of DOM. And then inside it, you put the keys to say like, okay, I'm fetching directly from the CMS, that's how you put your content inside of your template. It's a viable approach, I like it. It's simple you know, you don't have to learn a lot. It's very popular, I like it for a lot of websites.

Actually, for most websites it kind of works, but then you have the other one, the more trending one, and the component approach. And I see why it's popular. There are a lot things that happening there, big communities. You have React, you have Vue, you have Angular as well. And it looks logical when you look at a page to create components for each block.

Nouha: By using them you have consistent a consistence design

Sadek: Yeah of course, but some people argue that its an overkill for simple websites, but I can see why it's interesting you know. Exactly as you say, like if you have a page you have different sections, inside the sections, well, each section you can imagine it as being one component and this way you don't have huge files. So it makes sense. But the problem with this is that, you know the component frameworks, is that they run on the browser.

Nouha: So you have problems with SEO most of the time for that.

Sadek: Right, and also it's dependent on where you execute it. So if you use it on a browser on your mobile that might take longer. Or if you don't have a connection, it may become slower.

Nouha: And you have two ways of solving that appeared.

About Gatsby in the static site generation space

Sadek: Yeah, so there are Gatsby. Gatsby in the Static site generation space and then there is the kind of on-demand server side rendering.

Nouha: So we are talking about React frameworks here, but we actually have the same kind of frameworks..

Sadek: Yeah, like the same exists on the other side of Vue. You have Nuxt.js,

Nouha: And Gridsome

Sadek: Yep.

Nouha: Very similar approaches. And how do they work differently? Static site generators and..

Sadek: So, if you take for instance Gatsby, the approach is simple. Well it's component-oriented so you have your components and all. It will kind of fetch all of the content that exists in the CMS and it will generate pages, okay? It will generate everything on real time.

Nouha: And what happens when you want to change the content?

Sadek: Like if it's re-published, will it go again? It goes again. It gets documents and then it generates everything. But you might wonder: is it slow? They put so much effort into optimizing it to make it very quick.

So that's an approach: Regenerate the whole website. The other approach is that, on-demand, you have a Node server that will render it on the server. So it will render every React app for Next.js on the server and the browser will get it already rendered. This way you don't have to spend time on process on CPU of the users rendering the website. So that's a different approach but the same happens with Nuxt.js.

Nouha: With Nuxt.js, yeah. So how do you manage the hosting for those kinds of apps?

Sadek: They are pretty different. So if you go for Gatsby, it generates files. So what you need is just to kind of host these files on some file hosting platform, like cheap, there are so many of them. But you need to configure some kind of process that will be triggered. Whenever you have to publish something you need to trigger a process that fetches the content, builds everything, and you know, push it back into that platform.

Nouha: You need to have that process. And for Next.js of course you need a Node server,

Sadek: Yeah. But you know with Now, you know that the company behind Next.js, they have Now, which is Serverless, which you don't have to think about the server, right?

Nouha: Yeah, and we had Guillermo from Zeit in this Studio to explain that.

Sadek: Yeah, so you get a request. They have your code. They will deploy it in the right place globally so you can have your page displayed and rendered without you kind of adding more servers, or thinking about how many servers you need. All of that disappears.

Nouha: Yeah, okay. Cool. And it's pretty cheap because you just pay for what you use.

Gatsby has this system of plugins

Sadek: Exactly, exactly.

Nouha: And then also another differences between both

Sadek: Yeah. Gatsby has this system of plugins which is very, very interesting. So...

Nouha: For every user case you have a plugin? Like Image optimization.

Sadek: Yeah, for instance image optimization if you need that then you have a plugin you install, you get it almost out of the box. That's a good experience. Next is more open on that. It's not opinionated. I guess they chose to be that way because they want a solution that is like extensible they don't want to make hard decisions on things. It's their way of thinking about things. And, you know, it's viable. You have a huge community that you can ask about things. And they will tell you solutions for your problems as well.

Nouha: Yeah, okay. And plugins remind of CMS's, so let's dig more into CMS in the next video