Your search for “Next, Nuxt and Nest” brought you here. Welcome!
This explainer is for those of you who heard about Next, Nuxt and Nest but already know how to go to Github, Stack Overflow or other resources and wanted a simplified explanation of the big picture. Time for some history.
(quote courtesy of: Simplytechnologies.net)
“The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads. Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run.”
“Back in the early 90s, animations, interactions, and other forms of small automation were envisioned as part of the “web of the future.””
“Marc Andreessen, founder of Netscape Communications, believed that, as such, a small scripting language was needed that could interact with the DOM (Document Object Model or computer programming interface for HTML and XML documents), making content more dynamic and interactive.”
“The trick was that this scripting language shouldn’t be targeted to brainy developers and people with experience in software engineering, the scripting language was to cater to a different audience: designers.”
“HTML was still young and simple enough for non-developers to pick up, so whatever was to be part of the browser needed to be simple, flexible, and accessible to people less specialized—a network administrator, for example, tasked to write scripts part time.”
What is Node.js and why was it important?
“A common task for a web server can be to open a file on the server and return the content to the client.” (via W3 Schools) “Clients” retrieving that content may use browsers but it must be retrieved from servers.
One example of Node.js’ value is Airbnb’s site:
“This has given rise to awesome projects like Angular, React and Vue, which improve developer productivity and enable the creation of fast, testable, and extensible front-end applications.”
What’s Angular (released as “AngularJS” in 2010):
“It aims to simplify both the development and the testing of such applications… along with components commonly used in rich Internet applications.”
Despite its early success, AngularJS was almost eclipsed by another framework called React, which forced a revamp leading to “Angular” in 2016. Angular has evolved into a framework for designing and building enterprise-grade software applications. But its popularity has flattened.
What’s React (released in 2013):
React’s philosophy is “Learn Once, Write Anywhere.”
Software Engineers can use it to build for the Web (React), Mobile (React Native), and Desktop (Electron). It can do this for the Back-end/Server-side (with Node.js), with bragging rights of “best in class Server-Side Rendering (SSR) with excellent SEO support”. React’s popularity, driven by Facebook’s needs, continues to grow.
In terms of Awareness, interest and satisfaction, React remains in the lead.
React has grown to over 70% in terms of developers’ positive experiences. But it’s not alone. There are other up and coming projects such as Vue.
What’s VUE (released in 2013):
In the words of its creator, ex-Google engineer Evan You, “Vue.js is a library for building web interfaces. Together with some other tools you can also call it a “framework”, although it’s more like a set of optional tools that work together really well.” Vue is described as a mashup of Angular’s “view layer” and React’s “Virtual DOM”.
“Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.”
“The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.”
“The component system is another important concept in Vue, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components.”
It looks like Vue.js is on track to keep growing in popularity for projects.
More on SPAs. They have an edge over traditional websites – user interfaces
update quickly. There are tradeoffs: longer load times, and no content initially on the page for SEO – i.e. a blank HTML page. Why is this good?
An example of SPA’s in action was Airbnb’s 2013 site launch:
“the browser is provided with all of the necessary code on initial page load, loading any other resources dynamically, without the need to reload or navigate to a different page. Because the application is executed the same way both server- and client-side it is more manageable and debuggable as the difference between the server-side and client-side code is not the language or templating system used, but rather what and how data is provided.”
In the middle of this enters yet another layer of new resources.
New layers on top of Angular, React and Vue: Next, Nuxt & Nest
Next: framework to create React server-side rendered and static web applications
Nuxt: framework to create Vue applications that supports universal applications.
Nest: framework inspired by Angular using Node.js for efficient and scalable server-side applications.
The differences between these frameworks:
Nuxt (via the Nuxt.org site) “is an MIT licensed open source project” and “is a progressive framework based on Vue.js to create modern web applications”.
Nuxt as a Vue.js framework can make complex, fast, and universal web applications quickly – it makes creating universal apps easier. Universal apps uses code that can execute both on the client and the server side.
Next and Nuxt “make their respective frameworks, React and Vue, easier to work with thanks to built in configurations and “they both target the universal (shared code between client and server) webapp use case.” (Quora)
Nuxt is promoted as “a strong architecture following official Vue guidelines. Incrementally adoptable, it can be used to create – from static landing pages to complex enterprise ready web applications”.
Remember that we said “SPAs have an edge over traditional websites – user interfaces update quickly. But there are tradeoffs for SPAs: longer load times and no content initially on the page for SEO.” Universal apps can speed up page load times and enable content for SEO crawling needs.
Writing universal apps in Vue means two jobs, writing for both the front end, the client side, and then the server side. Nuxt reduces this work.
Regarding developer use of these frameworks, it’s early days.
Nest is a framework, inspired by Angular, written in TypeScript (which was created by Microsoft) – which can be used to build efficient and enterprise level server-side applications. It has elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).
Nest is a back-end framework – it’s not about front-end code – it’s all “back-end”. It’s structure is like Angular. Via Nest.js’ site: “Nest provides an out-of-the-box application architecture which allows developers and teams to create highly testable, scalable, loosely coupled, and easily maintainable applications.”
More resources means more questions than answers and this is where web developers and technical consultants with experience and insight can help. With every change and update, there is more to do and more that’s possible to build. This is what excites us and gets us out of sleep mode every day.
Don’t hesitate to reach out to us and ping us, text us or call us if you have work in mind.