MEAN Stack for beginners

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