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.
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.
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.
NativeScript is a JS framework for building mobile apps using plain JS, Typescript, Angular, Vue.js, React etc.
NoSQL Json 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
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 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 is very similar to MEAN with one exception — Angular is exchanged with React. So as MEAN, MERN includes MongoDB, Express, React and Node.js.
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.
Why I didn't wrote about plain JS?
Thank you for being part of my JS story.