This document provides an introduction to the MEAN stack for beginners. It discusses JavaScript standards and Node.js for the backend using Express.js. It also covers MongoDB as a NoSQL database and its advantages over relational databases. Finally, it discusses Angular as a frontend framework for building single page applications, its core concepts and advantages over other frameworks. The document aims to give beginners an overview of each technology that makes up the MEAN stack.

1. MEAN Stack for
Beginners

2. I am Fathi Jemli
Full stack engineer, DevOps and Big Data
enthusiast
@jemlifathi
Hello!

3. Schedule
◉ Introduction
◉ Node.js
○ JavaScript standards
○ Node.js (Express)
○ Overview of JavaScript
◉ MongoDB
○ NoSQL introduction
○ MongoDB as an example
◉ Angular framework
○ Single Page Application
○ Angular

4. Node.js
JavaScript Server Side runtime environment
1

5. ◉ Created 1995 at
NetScape
◉ Dynamic language
◉ Weakly typed
◉ Multi paradigm (event
driven, functional, OO)
◉ Supported by all modern
browsers
◉ JS ≠ Java
JavaScript (JS)
◉ Single thread
◉ Asynchronous

6. ECMAScript
◉ The scripting language
that forms the basis of
JavaScript.
◉ Each edition of ECMA
provides a set of new
features and standards.
JavaScript standards
(ECMAScript)
◉ ECMA 1: 1997
◉ ECMA 2: 1998
◉ …
◉ ECMA 6: 2015
◉ ECMA 7: 2016
◉ ECMA 8: 2017

7. V8
◉ Developed by “The
Chromium project” in
2008
◉ Used also by MongoDB
and Couchbase
◉ Compiles JS code into
machine code
Node.js (JavaScript Server-Side)
Node.js
◉ A runtime environment
for JS code server-side
◉ Created by Ryan Dahl in
2010
◉ Adds additional features
to Client side
JS(networking, file
system, etc)

8. Express.js
◉ Core concepts:
○ Middlewares
○ Routes
○ etc
◉ Standard Web
application framework
for Node.js
◉ Free and open source
◉ Designed for building
Web applications and
REST APIs

9. “
JavaScript is becoming more and
more popular and powerful.
“One language to rule them all”

10. MongoDB
Document oriented NoSQL database
2

11. NoSQL Introduction
◉ NoSQL(Not only SQL) ≠ Relational DBMS
◉ Data management concept for structural/non
structural and schema-less data
◉ Adopted by big companies such as Google and
Amazon as a solution for big data
◉ NoSQL paradigms:
○ Document oriented(MongoDB, CouchDB…)
○ Key/Value pairs(Redis...)
○ Column oriented(Cassandra...)
○ Graph oriented(Neo4J...)

12. MongoDB
◉ NoSQL document oriented DBMS
◉ The company behind Mongo is MongoDB Inc.
◉ Free and open source
◉ Using JSON like (BSON) to store data internally
◉ JSON like queries
◉ Distributed by default
◉ Supports data replication
◉ Supports binary storage

13. MongoDB data types
◉ Primitive data types like string, double,
boolean, etc.
◉ ObjectID: represents the unique ID of a
document
◉ Object: for nested objects
◉ Array: for lists
◉ Date/Timestamp
◉ Binary

14. MongoDB VS Relational DB
Solution/Unit
MongoDB Database Collection Document
Relational DB Database Relation(table) Tuple

15. Angular
Frontend JS framework
3

16. Single Page App (SPA)
◉ Single page load => enhance UI/UX
◉ Decrease requests to server => enhance
performance
◉ Bring the app burden to the client browser
◉ Simplifies application both development and
testing
◉ A lot of frameworks like Angular, React,
Backbone, Vue.js, etc.
◉ Mobile friendly

17. Angular
◉ Written by developers at Google
◉ Initial release: October 20, 2010
◉ MVVM(MVC) framework

18. Angular JS
◉ Features:
○ Two way data binding
○ Modular architecture
○ Dependency injection
◉ Core
○ Modules
○ Controllers/directives
○ Services/factories
○ Filters
○ Scope

19. Angular 2/4/5
◉ Features:
○ Using TypeScript for development => enhance code
structure and testing
○ Angular CLI: auto-generation and assistance from
app creation to deployment
○ Angular Universal: SEO optimized
○ Building the app as a set of components =>
reusability and testing
○ Powerful features like Http(rxjs), Reactive forms...
○ etc

20. Angular 2/4/5
◉ Core
○ Modules
○ Components
○ Services
○ Directives/pipes
○ Classes/interfaces
○ etc

21. MEAN Stack
The combination of all these technologies

23. Any questions ?
You can find me at
◉ @jemlifathi
◉ jemlifathi2013@gmail.com
Thanks!
Source code: Node.js + Angular 5