Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
full-stack-todo
Source code supporting my step-by-step tutorial for the development of a full-stack todo application. (by TracyGJG)
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
Our example application will be based on the ME*N stack where M is a MongoDB (but it could be MySQL, or any other) database. E is for Express, which is a backend framework that sits on top of Node.JS. There are others but Express is extremely common and will meet our needs well. N is for the JavaScript runtime Node.js but Deno and Bun are possible alternatives. Finally the * is for the frontend framework such as Angular (MEAN), React (MERN) or Vue (MEVN), to name a few. However, in our example we will not be using a framework (to keep it agnostic and besides it is not that complicated), instead we will be using the native web technologies (HTML, CSS and JS).
Our backend will be little more than a two-way translation layer between the database and the user interface (UI). Later in this post we will identify other responsibilities of a backend but our implementation will be kept simple to demonstrate the fundamental machinery and concepts. It is worth noting the backend comes in two parts, web server and application server. Both json-server and Express are able to facilitate these roles from the same URL. This is very useful for our tutorial because we do not have to configure the server to manage Cross-Origin Resource Sharing (CORS). It is quite typical for production systems to separate these server roles for all sorts of good reasons but for now it would just create an additional complication.
I have published the source code for this article in a GitHub repo, but I have to issue a word of caution. THIS IS NOT PRODUCTION CODE. For reasons discussed towards the end of this post, the code is for educational purposes only and should not be used in production.
Helmet helps “sanitise” the input, which might not have come from the UI directly. Mongoose is what is known as an Object Document Modelling (ODM), which defines a structure (schema) for the stored data, making it easier to manage in Express. These additions have been omitted from our example stack purely to simplify the tutorial and focus on the fundamental tiers and interfaces.
As is this implementation of the ME*N stack is exceptionally vulnerable to attack. There is no protection from error or misuse through the FE, which would be greatly improved by using a FE framework such as React, Angular, Vue etc. The FE/BE interface is also wide open to malicious actors. This can be improved by employing HTTPS to encrypt the communication path and implead “man-in-the-middle” attack. JWT can also be used to establish user authentication. The stack can also be made more robust and maintainable through the use of two Express middleware packages (Helmet and Mongoose).
Helmet helps “sanitise” the input, which might not have come from the UI directly. Mongoose is what is known as an Object Document Modelling (ODM), which defines a structure (schema) for the stored data, making it easier to manage in Express. These additions have been omitted from our example stack purely to simplify the tutorial and focus on the fundamental tiers and interfaces.
Our backend will be little more than a two-way translation layer between the database and the user interface (UI). Later in this post we will identify other responsibilities of a backend but our implementation will be kept simple to demonstrate the fundamental machinery and concepts. It is worth noting the backend comes in two parts, web server and application server. Both json-server and Express are able to facilitate these roles from the same URL. This is very useful for our tutorial because we do not have to configure the server to manage Cross-Origin Resource Sharing (CORS). It is quite typical for production systems to separate these server roles for all sorts of good reasons but for now it would just create an additional complication.