Are Metaframeworks Like NextJS The Future Of React & co?

00:00:00: Are meta frameworks like Next, Remix,

00:00:04: AnalogJS or Nuxt, are those the future of

00:00:08: web development?

00:00:10: Should every web developer use those

00:00:13: meta frameworks and learn how to build

00:00:15: full stack applications with them?

00:00:18: Well, I think if you are working with

00:00:22: React or Angular or Vue, yes, you should

00:00:26: definitely learn those meta frameworks

00:00:29: because I believe they are the future of

00:00:33: React and Angular and so on.

00:00:35: Well, especially for React and I'll get back

00:00:37: to that in a second.

00:00:39: But I believe they are the future of those

00:00:43: frontend libraries and frameworks

00:00:46: because they solve an important

00:00:48: problem.

00:00:50: When we build a website, a web

00:00:52: application, we typically don't just need

00:00:55: a frontend, we also need a backend and

00:00:58: that of course has always been the case

00:01:00: and we were able to build websites and

00:01:04: web applications that have both a

00:01:06: frontend and a backend without those

00:01:09: meta frameworks as well, right?

00:01:11: I mean, you could simply build a

00:01:15: frontend single page application, for

00:01:17: example, with React and then connect

00:01:21: it, so to say, to a backend that's built with

00:01:24: Node and Express.

00:01:25: So you could build such a backend API,

00:01:28: typically a REST API, but could also be a

00:01:30: GraphQL API and then you could send

00:01:34: requests to that backend from inside the

00:01:38: frontend application, for example, with

00:01:41: help of React Query, which is a popular

00:01:44: library for doing that, or simply by using

00:01:47: the Fetch API inside of UseEffect, for

00:01:49: example, or in Angular by using

00:01:52: Angular's built-in HTTP client.

00:01:55: And then you could fetch data from the

00:01:58: backend or send data to that backend

00:02:01: and update the frontend UI accordingly

00:02:03: to, for example, show that data or if data

00:02:07: was sent to show a success message.

00:02:09: We don't need those meta frameworks

00:02:12: like Next for that.

00:02:21: That's absolutely not the case.

00:02:16: But those meta frameworks like Next or

00:02:20: Remix and so on can make building

00:02:23: complex full-stack applications, so

00:02:26: where you have both the frontend and

00:02:29: the backend, simply a bit easier and

00:02:32: solve certain problems.

00:02:34: And that's their huge advantage.

00:02:36: And they do make that easier and solve

00:02:39: certain problems by giving you a

00:02:42: seamless integration, by blending

00:02:46: frontend and backend code with each

00:02:48: other, so to say.

00:02:50: That can also lead to new problems

00:02:53: because as a developer, you should

00:02:56: absolutely understand where exactly the

00:02:59: border is between backend and

00:03:01: frontend code so that you make sure

00:03:03: that the wrong code doesn't end up on

00:03:06: the wrong end.

00:03:07: But mostly, it can help get rid of certain

00:03:11: problems or simply make it a bit easier

00:03:13: to write complex applications.

00:03:15: Because, for example, when you're

00:03:17: working with Next.js, but also with

00:03:19: Remix and so on, you can effectively

00:03:22: fetch data from right inside your React

00:03:26: component, for example.

00:03:28: Or with Remix, you would do it in a

00:03:31: separate function which is placed close

00:03:34: to your component typically, though.

00:03:36: You could fetch data from there and

00:03:39: then render your HTML code with help

00:03:43: of React that's already including that

00:03:46: fetched data.

00:03:47: And all that would happen on the server

00:03:49: and the advantage of that would be that

00:03:52: the user, the client, receives the finished

00:03:56: web page.

00:03:57: So it gets back a response from the

00:04:00: server that already contains all the

00:04:03: markup with all the content that's

00:04:06: needed for the page that was requested.

00:04:09: And that, for example, is great for search

00:04:12: engine optimization because those

00:04:14: search engine crawlers then also see all

00:04:19: the content and see the finished page.

00:04:21: Whereas with traditional single page

00:04:24: applications, that page that's coming

00:04:27: back from a server would typically be

00:04:30: empty and contain no content because

00:04:33: that content would have been fetched

00:04:36: from inside the browser with help of

00:04:38: client-side JavaScript code.

00:04:41: And whilst to the user that might not

00:04:44: make that much of a difference because

00:04:46: fetching that data often is pretty quick, it

00:04:49: still can because they might temporarily

00:04:52: see some loading spinner or some

00:04:55: progress bar whilst they're waiting for

00:04:57: the data.

00:04:58: So it can be annoying.

00:04:59: But what's even worse is that all those

00:05:02: search engine crawlers would see an

00:05:05: empty page.

00:05:06: And that can really hurt your search

00:05:09: rankings because to those crawlers, your

00:05:12: page doesn't have any content.

00:05:15: So that's one important problem that's,

00:05:18: for example, solved by that seamless

00:05:20: integration of frontend and backend and

00:05:24: by blending that code and blending

00:05:26: those two ends, so to say.

00:05:28: Another thing that can get easier and

00:05:31: possibly also more secure would be

00:05:34: authentication because we can, of

00:05:36: course, also authenticate users when

00:05:39: building separated frontends and

00:05:42: backends.

00:05:43: For example, with JSON web tokens,

00:05:45: that would be a popular approach.

00:05:48: But that approach also has certain

00:05:51: disadvantages.

00:05:53: For example, that those tokens are then

00:05:56: the only thing that identifies a user.

00:05:59: And if for some reason, such a token

00:06:02: would get stolen, if an attacker could get

00:06:06: hold of such a token of an authenticated

00:06:09: user, they could basically assume their

00:06:12: identity and then send requests on

00:06:16: behalf of that user.

00:06:17: Now, there are defense mechanisms

00:06:19: against that.

00:06:20: For example, those tokens are typically

00:06:23: short lived to make sure that if they do

00:06:26: get stolen, they are not available for a

00:06:29: long time period.

00:06:30: But still, it can be a problem.

00:06:33: And if you have a seamless integration,

00:06:36: implementing session based

00:06:38: authentication, where the

00:06:40: authentication status is stored on the

00:06:43: server instead of the client,

00:06:45: implementing that is easier.

00:06:48: And that can also add an extra layer of

00:06:51: security.

00:06:52: It can also be easier than implementing

00:06:54: authentication tokens, JSON web

00:06:57: tokens, and storing them on the client.

00:06:59: So that's another area where those meta

00:07:02: frameworks and that seamless

00:07:04: integration of backend and frontend can

00:07:07: potentially solve certain problems, or at

00:07:10: least make certain common things like

00:07:13: user authentication easier and

00:07:16: straightforward to implement.

00:07:18: And that, of course, can be a great thing.

00:07:21: There also is another advantage I see

00:07:23: when using such meta frameworks.

00:07:26: And that would be that since you are in

00:07:30: the end blending those ends, you can

00:07:33: still use all the knowledge you have

00:07:36: about React or Vue or Angular to render

00:07:40: the user interface.

00:07:41: And you can still add all that client side

00:07:43: interactivity you want to add.

00:07:45: Because the great thing about those

00:07:48: meta frameworks is that once they did

00:07:51: send back that first response that

00:07:54: contains all the content already, as I

00:07:56: described, once that happened, it's

00:07:59: again client side JavaScript that takes

00:08:02: over and in the end gives the user this

00:08:05: single page application experience

00:08:08: again, where everything on the page is

00:08:11: again updated by client side JavaScript

00:08:13: code.

00:08:14: And behind the scenes new data or new

00:08:17: HTML code is fetched from the backend.

00:08:21: But as a user of the website, you still

00:08:23: have all the instant transitions and the

00:08:26: great user experience you often get from

00:08:29: single page applications.

00:08:31: So you keep those advantages, but you

00:08:35: enrich them with more advantages.

00:08:38: And of course, since you have that

00:08:41: seamless integration, you do render all

00:08:44: the content that's being sent back from

00:08:47: the backend to the frontend on that first

00:08:49: request.

00:08:50: You do that all with the templating

00:08:53: language you already know and love.

00:08:56: So with JSX, for example, if you're using

00:08:59: React, you don't have to use a separate

00:09:04: templating language to dynamically

00:09:06: generate HTML code on the server.

00:09:10: And that is what you would typically do

00:09:12: when building backends that send back

00:09:16: HTML instead of just data without such a

00:09:19: meta framework.

00:09:20: If you would build a backend with, for

00:09:23: example, Node.js and Express, as many

00:09:28: companies still do it because it is a fine

00:09:30: way, then you would typically either

00:09:33: create an API, a REST API, for example,

00:09:37: that's then used by a separated

00:09:39: frontend.

00:09:40: But if you want to build an integrated

00:09:42: full stack application without such a

00:09:45: meta framework, you would typically do

00:09:48: that by using a templating engine on

00:09:51: the backend in that Node Express code.

00:09:54: And here you have popular options like

00:09:58: EJS or handlebars and so on.

00:10:01: But these are all separate templating

00:10:04: engines you have to learn so that you

00:10:07: understand how you can use them to

00:10:09: render the content you want to render.

00:10:11: So it's an extra thing to learn.

00:10:14: And then if you want to add client-side

00:10:16: interactivity, you have to add React or

00:10:20: Vue as an extra dependency to that

00:10:22: project and manually write all the code

00:10:26: that makes sure that it takes over once

00:10:29: the page has been loaded in the

00:10:31: browser of your visitor.

00:10:33: And you manually have to set up all the

00:10:36: extra API endpoints, which then could

00:10:39: be used by that frontend library if it

00:10:43: wants to fetch or send new data after

00:10:46: that initial first page load.

00:10:48: So that would be more complex than

00:10:50: using such a meta framework.

00:10:52: And for all those reasons, I think that if

00:10:55: you want to build a full stack application

00:10:58: that has all the advantages you know

00:11:01: from working with React or Angular or

00:11:04: Node, if you want to do that, then

00:11:07: picking up such a meta framework is

00:11:10: really important and a good idea.

00:11:13: Now, it's also worth noting, though, that

00:11:15: we're still in the early days of this entire

00:11:19: development and evolution of frontend

00:11:23: web development, if you want to call it

00:11:25: like that.

00:11:26: Of course, Next.js, for example, which is

00:11:29: arguably the most important and

00:11:32: popular meta framework for React, has

00:11:36: already been around for many years, but

00:11:38: it's only been recently for one and a half

00:11:41: years or probably two years now that

00:11:46: they really moved quickly towards that

00:11:49: integrated approach and towards a

00:11:52: world where the frontend and backend

00:11:55: code blend together and blend into

00:11:58: each other, so to say.

00:11:59: That's a relatively new development.

00:12:02: And it is a development which we now

00:12:04: see in other meta frameworks as well.

00:12:08: But it's still pretty new and therefore, of

00:12:10: course, there still are some rough edges

00:12:14: and some new patterns to be learned

00:12:17: and some things to be understood to, for

00:12:20: example, make sure, as I mentioned

00:12:22: before, that your code doesn't end up on

00:12:25: the wrong end and you're getting

00:12:27: strange bugs or you're exposing data in

00:12:31: places where it shouldn't be exposed.

00:12:33: So there also are pitfalls related to that,

00:12:37: also because it is so new.

00:12:39: But ultimately, as always in the world of

00:12:43: programming, things will, of course,

00:12:45: become better and smoother and

00:12:48: patterns will emerge and certain

00:12:50: problems will disappear.

00:12:52: Well, and I guess new problems will

00:12:53: appear, but you get my point.

00:12:56: I think we're definitely heading towards

00:12:59: such a world where those meta

00:13:01: frameworks will be super important,

00:13:04: though I will also say that this is still just

00:13:07: one area of web development.

00:13:11: We absolutely still have those separated

00:13:15: frontend and backend applications and

00:13:18: we absolutely still have full stack

00:13:21: applications where HTML code is

00:13:24: rendered on the server with help of

00:13:26: templating engines like EJS or, for

00:13:29: example, in PHP-based backends with

00:13:33: Laravel's Blade engine.

00:13:36: So we definitely have those applications

00:13:38: as well and actually those websites and

00:13:41: applications are the majority.

00:13:44: So it's always important to keep in mind

00:13:46: that we're in a niche here, nonetheless in

00:13:50: an important niche, which I believe will

00:13:53: grow because it offers certain

00:13:55: advantages.

00:13:57: And the advantage is that we have the

00:13:58: best of both worlds, that single page

00:14:02: application experience, the great user

00:14:04: experience offered by that, combined

00:14:07: with all the advantages of rendering

00:14:09: content on the server and having such

00:14:11: full stack applications.

00:14:15: Now, as mentioned, Next.js is arguably

00:14:18: the most popular and important meta

00:14:20: framework, but for React we, for

00:14:23: example, also have Remix, which is a

00:14:26: competitor to Next.js, if you want to call

00:14:28: it like this, which is also growing in

00:14:31: popularity and becoming more and

00:14:32: more important and which offers, in my

00:14:36: opinion, certain advantages over Next.js,

00:14:39: though that probably would be a topic

00:14:42: for a separate episode or video.

00:14:45: Nonetheless, you have these two options

00:14:47: and if you are working with React, I

00:14:51: would simply recommend that you take

00:14:52: a look at both meta frameworks and you

00:14:55: go through their quick start guides to

00:14:58: see which one you like the most, for

00:15:00: example.

00:15:01: Now, if you're an Angular developer,

00:15:04: there are less choices.

00:15:06: Here you basically have analog.js and

00:15:09: this is a project which, as far as I can tell,

00:15:13: is a bit less mature than Next.js or

00:15:17: Remix.

00:15:17: It doesn't have the same set of features

00:15:20: and it has certain limitations, also

00:15:23: because it's mainly developed by just

00:15:25: one person.

00:15:26: Though I believe that meta frameworks

00:15:29: will be and will mostly become so

00:15:33: important that we'll see more

00:15:35: development in that area in the Angular

00:15:38: world as well.

00:15:40: Maybe because the Angular team

00:15:42: makes analog.js or something like that

00:15:45: an official extension of the Angular

00:15:49: framework, so we might see more

00:15:51: development because of that or

00:15:53: because more community projects

00:15:55: come up.

00:15:56: Now, if you're a Vue developer, things are

00:15:59: actually different because there we do

00:16:01: have a very popular and successful meta

00:16:05: framework called Next.js and it's been

00:16:08: around since 2017, I think, so it's really

00:16:11: old by now but of course it has also

00:16:14: evolved over all that time and I would

00:16:17: say it's pretty comparable to Next.js

00:16:20: regarding its maturity, for example.

00:16:23: Now, it works differently but the main

00:16:26: idea is the same, that you can build

00:16:28: full-stack applications with Vue and that

00:16:31: you can blend back-end and front-end

00:16:33: and it has many features that help you

00:16:36: with that and that help you with

00:16:38: building complex and user-friendly web

00:16:42: applications and websites in general.

00:16:45: And therefore, as web developers, we

00:16:48: now essentially have one additional

00:16:50: option where besides traditional

00:16:54: full-stack applications where we, for

00:16:57: example, use Node, Express and then a

00:16:59: templating engine like EJS or separated

00:17:03: front-ends and back-ends, we now also

00:17:05: have that very intriguing option of

00:17:08: building full-stack applications where

00:17:11: we get the best of both worlds by

00:17:13: seamlessly integrating and blending

00:17:16: front-end and back-end with those meta

00:17:19: frameworks.

00:17:20: And of course, we have those rough

00:17:22: edges you should be aware of and you

00:17:25: should expect but those will absolutely

00:17:28: become smoother in the future and

00:17:31: therefore, I'm convinced that every

00:17:34: React, Angular or Vue developer should

00:17:37: also at least take a look at those meta

00:17:40: frameworks.