MEAN stands for MongoDb, Express, AngularJS and Node. Node is the basis of the stack. Express supplies a comfortable entrance to HTTP. AngularJS serves the client with the help of an MVC Pattern (Model View Controller). MongoDB is a document-oriented NoSQL database, which can deal directly with JSON data. Everything together illustrates a complete server and client page environment on the basis of JavaScript. Certainly, there’s way more to it in practice:
HTML as a basis for CSS, at best in a group with a preprocessor such as LESS and a CSS Framework such as Bootstrap
a design template as a basis for more complex controls (usually a Bootstrap theme)
extension libraries for the server (via npm) and the client (via Bower)
The Package Manager
In the JavaScript world, several package managers have been developed. But why are such additional tools needed at all? Wikipedia has the following answer for this:
A package management software makes the comfortable administration possible of software, which is present in complex program form or on an operating system. In addition installing, updating and deinstallation.
A package management always consists of a Repository and a client. In some cases the Repository is only the source of the description, not contents. One uses in the JavaScript world :
npm, that is, the Node package manager. It comes along automatically, if Node is installed. All server page packages are called up and installed over Npm. Npm can also supply further tools. Npm serves also to install the package manager for the client packages, Bower:
Boweradministers client page Frameworks and libraries. Bower even administers no data, but only descriptions. The packages are called up over Gitfrom GitHub. As such, it is guaranteed that the most current versions are there and the developers of the libraries for the distribution on various Repositories don’t have to care about that themselves.
Windows Repositories for client libraries
Git brings along a simple GUI and command line tools. Whoever works with Powershell should take a look at Chocolatey. This project brings the JavaScript world together with the Windows world. Here you work with the original tools, since this is more transparent and direct. Chocolatey simplifies some things, covered in addition to the connections, which is rather obstructive when learning.
Libraries and Frameworks
Libraries offer a set of elementary functions. Jquery, for example, allows the manipulation of DOM elements. However, Frameworks offer certain functions and a pattern for complete applications.
AngularJS realizes the client page MVC Pattern and places bidirectional data connection (apart from many other functions). Surely there are intersections between both and the demarcation is often not so clear, but it makes it more simple to meet a selection. Several (many) libraries often co-exist, while you should choose only one Framework. While keeping a close watch, we should also see that web applications are split—in client and server. Thus, it is necessary to find an amount of libraries and (!) a Framework for the client and then again with the server.
Basis Libraries of the Server
In this book series a form of the MEAN stack is presented. MEAN stands for:
MongoDB/MySQL
Express
AngularJS
Node
That is striking, but only the half truth. The choice of the database is often not primary and most components are often not sufficient in order to illustrate the entire Web stack. It should be considered for the server, that:
As server page, Routing Framework and Express middleware is used. It supplies the Routing functions and is an efficient application framework.
As Template library, Pug is used, which takes over the production of the HTML forms instead of Razor, as far as this takes place on the server.
Client Page Libraries
Thus we can deliver web pages and make services available. The client support remains:
AngularJS as the comprehensive framework for the structuring of the pages
Bootstrap as design and style framework
jQuery as implicitly library used by Bootstrap for the access to the Document Object Model (DOM)
All of this would also be used in the ASP.NET world. Here .NET offers no direct entrance, because the client can be served only over JavaScript.
Unit Tests
JavaScript as an underlying language is comparatively weak. Also, with the detour over TypeScript or the new functions in ES 6, the depth and accuracy of the code monitoring of a compilor language are not on the same level as with Java or C#. Therefore, a still greater importance is attached to unit tests:
Principles
The way Web applications are developed has changed a lot in the recent years. Dynamic elements in the browser are normal and the running of complete applications in JavaScript is frequently used. The browser becomes a kind of mini–operating system, which avails itself in the net of various data sources—the services of our servers.
Web Apps
Applications are called Web Apps if they exist directly in the browser and communicate only with the server in order to reload data dynamically. The server thereby first delivers the app and then supports it by services, for example to the access of a database. The server places thereby a so called API (Application Programming Interface) as available. Usually this is based on JSON.
Web sites
Most web sites are rather classically programmed. That means the detectability of contents through search engines, extremely short load times, and simple structure. The server produces finished HTML and all dynamic elements by manipulating the HTML with the help of small scripts. Forms are used for interaction and the indicator functions by the server steered. Web sites are then supported by JavaScript so that they appear interactive, which is necessary in order to appear modern and functional.
However, this approach is problematic for several reasons. They must hold two code environments separately from each other: on the one hand for the browser, on the other hand for the server. Both worlds are closely connected. Changes on one page can release errors on the other page. This entwinement is critical and hardly permanently controllable.
Stateless HTML
If Web Apps are not an option (complex, slow, not a search engine suite) and also not web sites (maintenance-unfriendly, faulted), then it is time to think about a new strategy. This is where Node comes in, because the separation of the code environments is by far less drastic, if the same programming language is used. Additionally, a certain programming style should be used. This is so-called stateless HTML.
Stateless HTML is a piece of HTML that is always identical to the condition of the web site and independent. Whether the user is registered or not, whether it is morning or afternoon, it is all the same. No matter which geographical place was used, the HTML of the page is always alike. Thus a significant part of maintenance cost is lost. Parts of the page, which are dependent on the user or action, do not become part of the HTML. They are procured like a Web App by services and provided dynamically. Thus, simple loading from HTML pages is in Node, as in the examples shown.
Imagine a page with contents, which readers can discuss. The contents part is for all users directly. Also, each search engine sees the same contents. This part is static and condition-independent. That does not mean that the articles must lie statically on the hard disk. They can be assembled on the server from a database. It is part of the panel and completely dynamic against it. Each user sees his own contributions differently and has perhaps personalized the representations. This part is provided and delivered differently.
The approach does not only simplify programming. It also increases the performance clearly. The less dynamic portion is easier to process on the server and on the client. A cache can be used comprehensively and be further relieved from the server. Also, in the event of an error delivering of static pages, it is more robust and more reliable. The omission of the dynamic functions is annoying, but the page remains complete and searchable. However, an improvement of the user experience is crucial.
The User Experience
Modern Web applications are complex. There is a user login, account administration, carts, evaluation systems, and much more. Each of these functions consists of HTML pages, which supply the primary organization. Typical pages look as follows:
1 <!DOCTYPE html>2 <html>34 <head>5 <meta charset="utf-8">6 <title>File Manager</title>7 <link rel="stylesheet" href="style.css">8 <script defer src="app.js"></script>9 </head>1011 <body>12 <nav>13 <a href="/">Home</a>14 <a href="/show">Files</a>15 <a href="/upload">Upload</a>16 <div class="account-menu">17 <!-- Dynamic Part -->18 </div>19 </nav>2021 <section id="main">22 <!-- This is where your content goes -->23 <h1>Welcome to our File Manager</h1>24 Manage your files online.25 </section>2627 <footer>28 Copyright © 201629 </footer>30 </body>3132 </html>
This page loads extremely quickly and represents contents immediately. Then, the application script app.js is loaded and settles some things dynamically:
checks by means of Cookie and AJAX whether the user is registered
loads the dynamic menu for the user
configures static contents dynamically
The first two points are obvious. The latter is somewhat subtler. Naturally, nobody wants to provide the same HTML again and again for many content pages. Here you could proceed differently. Use JavaScript in order to call static contents up from the server. In addition, all links which load pages and use the same layout are intercepted by JavaScript and the site, as it is loaded from the server. Contents are extracted, namely the part which is located in the main section ‘<section id=”main”>’. This part is then exchanged. The advantage consists of the fact that the static HTML is unchanged. It does not depend on a situation. Thus, application at complexity is less. Nevertheless, the user has the soft load behavior of an AJAX-driven application. If you still adapt the History in the browser of the page now, it is nearly perfect (with the API of the browser).
Summary
With the organization and structuring of a Node application you must first know what you want to build—a Web app or a web site.
With a Web app, you concentrate on Frameworks such as AngularJS. Node supplies the app as collection from an HTML page and some to JavaScript files. A variety of support services makes it possible for the app to communicate with the server.
With a web site, it is better to only use jQuery and to add somewhat smart JavaScript elements dynamically. Node supplies static HTML pages and some support services.