Hey everyone. Thank you for your interest in Javascript on stage topic. In this article I will explain how we can build frontend, backend, mobile and desktop apps using only one programming language, Javascript. We are going to explore different technology stacks and javascript frameworks. You don't have to be a developer to understand the topic. I will not go deeply into the matter, but we will explore the matter in general. So, with that in mind, let's get started.
Javascript in action
Javascript is the world's most powerful programming language. Some of my colleagues will not agree with that. I'll buy you a beer. Today, you can build anything with JS, from frontend and backend to mobile and desktop apps. Some of the world's most popular platforms are using only JS for their development, including LinkedIn, PayPal, GoDaddy, Netflix, eBay, Uber etc. NASA, US government department to explore space also uses JS for their cloud-based systems. There are so many apps made with or using JS that we can't mention them all, but we will stick to the topic and I will write only about full stack JS.
Javascript players on the scene
The leading organization that develops and sponsors javascirpt frameworks and development tools is OpenJS Foundation. They sponsors one of the most famous frameworks like Node.js, jQuery, Express, Electron and so on. The following credits go to Microsoft, which develops Typescript, and after that, Google, which develops one of the most famous JS framework - Angular, based on Microsoft's Typescript. The next big player is Facebook's Meta, which develops the also widespread React framework. The next big name is Evan You, the creator of the Vue.js framework.
Most popular JavaScript Frameworks
Angular
Angular is Typescript-based web development framework. Its main purpose is to build frontend part of web application. But, in combination with NativeScript, it can become a powerful tool for building mobile apps. Also, in combination with ElectronJS we can build a desktop apps using Angular.
React
React is Javascript-based web development framework. Same as Angular, its main purpose is to build frontend part of web application. Its relative, React Native is used to build mobile apps. Also, in combination with ElectronJS, desktop apps can be built with React.
Vue.js
Same as React, Vue.js is Javascript-based web development framework. It's also used for building frontend part of web application. Same as for Angular, using NativeScript we can build mobile apps and by using Electron we can also build desktop apps.
NodeJS
NodeJs is not a framework neither a programming language. It's a cross-platform Javascript runtime used for building network applications. The main purpose of NodeJS is it's used for building powerful backend part of web application.
Express
Express is Javascript-based and worlds most popular NodeJS web application framework used for building backend part of web application.
NestJS
Same as Express, NestJS is NodeJS web application framework but it's built with and fully supports TypeScript. Full stack Angular developers, when it comes to backend, love to use NestJS because code structure is the same as in Angular.
ElectronJS
ElectronJS is a JS desktop application framework which enables developers to create desktop applications using javascript, html and CSS
NativeScript
NativeScript is a JS framework for building mobile apps using plain JS, Typescript, Angular, Vue.js, React etc.
NoSQL Json databases
NoSQL database is a computer program that uses a JSON (JavaScript Object Notation) format to store data. Its perfect compatibility with other JS-based parts of the stack ensures great speed and performance.
Document databases
Document databases are primarily built for storing information as documents, JSON documents. These systems can also be used for storing XML documents. So, NoSQL databases store data as Json objects rather than relational tables like in SQL databases.
The most popular document based databases are MongoDB and Couchbase and MongoDB is widely used as a part of JS technology stacks.
JS technology stacks
Within the JS ecosystem, a particular app consists of a combination of technologies, called a “stack.” A stack is a set of tools, languages, databases, Operating systems, scripting languages, APIs, web servers, frameworks, etc., that are utilized to develop the complete software solution.
In web development, particular app consists of 3 main elements:
- Frontend Framework
- Backend Framework
- Database
There can be also many other frameworks like CSS/HTML frameworks etc. The most popular JS full stack frameworks are MEAN, MERN and MEVN.
MEAN Stack
MEAN stack is the most popular JS technology stack. It’s an open-source technology bundle that includes MongoDB, Express, Angular and Node.js. Using MEAN, frontend part is built using Typescript while backend is JS.
MERN Stack
MERN is very similar to MEAN with one exception — Angular is exchanged with React. So as MEAN, MERN includes MongoDB, Express, React and Node.js.
MEVN Stack
Another member of the full stack JS family worth mentioning is MEVN. It's a combination of MongoDB, Express, Vue.js and Node.js
MEAN stack example
Now, we are going to show full stack JS in action. As an example, we are going to show a small movie database application. We are going to write movies to DB, and then read it. First, let's start with backend part. As the stack says, our backend is NodeJS/Express source code using MongoDB database. First, let's check out the DB model.
This is how MongoDB storage looks like. It consists of more Json documents that has key and value pairs. Keys are always strings and values can be strings, numbers, objects, arrays and booleans. Our shema has the folowing keys: name, quantity and category. Each of these keys can have a value using the rules defined in shema.
So, after adding some data to the DB, the Json export will look like this:
Let's now have a look into our routes.
Routing is a piece of NodeJS code to define how an application’s endpoints respond to frontend requests. Routes are connecting frontend calls with controllers. So the route createMovie calls the movie controller's function createMovie, and route getMovies calls the movie controller function getMovies. Let's check out the controller:
Controllers are processing incoming requests and returning responses to the frontend.
In app.js file we define:
So our backend urls will be http://localhost:3000/api/movies/createMovie and http://localhost:3000/api/movies/getMovies. Now that we have an API done, we can jump to the frontend part. We are not going to show full frontend code, just a service to see how we add and fetch data. The remaining code is to implement design which is now not important.
Angular services contain methods that communicate with components and backend API. Services are organizing and sharing business logic, Angular models, or data and functions with different components of an Angular application and backend. They are connected to components through dependency injection. So, our service has 2 functions: getMovies and addMovie. Function getMovies is fetching all the data from the backend URL BACKEND_URL defined in the code. addMovie function is using post method and it sends data to the backend which will store it in DB.
This is how basic CRUD application written with JS code looks like. If you are interested for the full source code of given example, you can visit my Github link at https://github.com/nbalog/MEAN-form-example.
Conclusion
So, we have discussed all the frameworks and technology stacks but we didn't talk about pure Javascript (plain Javascript). Plain javascript is a programming language, Javascript programming language without using any additional library or framework.
Why I didn't wrote about plain JS?
Because in the end, it's all about plain JS. Your browser doesn't know what Angular is. Mobile phones and computers don't know what NativeScript or Electron is. Etc. Everything that we build using frameworks is compiled into plain JS and then executed. But as Javascript developers, we have powerful tools and frameworks to make software development better.
Thank you for being part of my JS story.
