Skip to main content

Full stack JavaScript

This blog post might be outdated!
This blog post was published more than one year ago and might be outdated!
· 3 min read
Hagen Morano

Over the last years, there have been many exciting achievements in the JavaScript ecosystem. One of the most exciting is the development of full-stack JavaScript frameworks. Next.js is a good example of such a JavaScript framework using React under the hood.

Why is that exciting?

The traditional approach to building a web application is to separate the front end and the back end. Typically, the front end is built with a library like React, a framework like Angular, or even without any libraries or frameworks. The back end is then built in PHP or Java, on top, there are also additional frameworks for each programming language, like Symfony or Spring. Additionally, we need some kind of interface between the back end and the front end: An API. Usually, this is provided by the back-end team and has to be implemented or integrated into the front end by the front-end team. Even though there are ways to generate the mandatory code to consume said API - for example through the OpenAPI Generator(Given that it has been implemented considering OpenAPI standard) - the whole process is quite circumvented. There are multiple teams involved which leads to communication overhead, complexity, and therefore potential errors.

Here comes Next.js: A full stack framework based on JavaScript / TypeScript. Besides a state-of-the-art front-end development environment based on React, it comes with a back end included and is set up with a single line: npx create-next-app@latest --typescript

The exciting thing about Next.js is that it basically provides everything mentioned above: A front end, a back end, and an API. This dramatically reduces complexity: The whole code sits in one project, interfaces and types can be used in both front- and back-end, and code completion in many IDEs is available also. This means that one team (the JavaScript team) is now able to take care of all tasks omitting other technologies and programming languages. The results are way shorter development times, more robust applications, and less communication overhead.

What about data persistence?

Object-relational mapping tools ("ORM") facilitate the work with databases and have been around for "server-side" programming languages (e.g. Java or PHP) for quite some time. For larger applications, an appropriate ORM tool is an essential part of the technology stack to work with databases (querying data, updating database structure, versioning etc.).

With Prisma entering the stage, the JavaScript ecosystem also has a powerful ORM: Prisma supports a lot of different databases and integrates very well in full-stack JavaScript frameworks like Next.js.

What's next?

The JavaScript world is evolving fast: There are many innovative solutions rising fast. One of the most interesting at the time of writing is tRPC, a tool to build "end-to-end typesafe APIs" that even lowers the risk of potential corrupt or incomplete data in your application. Projects like create-t3-app are making it easy to kickstart full-stack JavaScript projects in minutes.

A great overview of all the tools and possibilities provided in the JavaScript ecosystem can be found at e.g. https://2021.stateofjs.com/en-US/. These are exciting times for being a JavaScript developer!