SlideShare a Scribd company logo
1 of 55
Download to read offline
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Nir Noy
Building Applications
With the MEAN stack
About me
Nir Noy
Full stack Developer
Web Consultant
Speaker
Co-Organizer Of FrontEnd.IL Meetup Group
http://www.meetup.com/FrontEnd-IL
Upcoming Meetup
FrontEnd.IL Meetup – Advanced Angular 2
https://www.meetup.com/FrontEnd-IL/events/233531658/
27/9/2016 – The Passage Bar, Tel Aviv
Angular 2 With Redux
Change Detection in Angular 2
What is MEAN?
The MEAN Stack
The term MEAN stack refers to a collection of
JavaScript based technologies used to develop
web applications.
M E A N
Node.js
What is Node.js
A JavaScript runtime that is designed for
asynchronous IO operations
Very lightweight and fast
Being used by a growing number of companies:
The Node.js ecosystem
Node.js has a rapidly growing ecosystem:
Web frameworks:
Express
Socket.io
Database support
Sql Databases
NoSql Databases
Hosting and Cloud environments
IIS, Azure
Heroku
Joyent
Synchronous server operations
// GET api/countries
public string Get()
{
var client = WebRequest.Create("http://.../");
var response = client.GetResponse();
var stream = response.GetResponseStream();
var reader = new StreamReader(stream);
return reader.ReadToEnd();
}
Blocking I/O operation
The Cost of I/O
I/O Operations are expensive.
I/O Source CPU Cycles
L1 – Cache 3
L2 – Cache 14
RAM 250
Disk 41,000,000
Network 240,000,000
Handling I/O
Waiting for I/O operations to complete is one of
the most common performance bottlenecks.
There are several common solutions to handle
it:
Synchronous
Pros: simple.
Cons: blocking, can hold up other requests.
Fork a new process
Pros: efficient, not holding up other requests.
Cons: does not scale, ~100 connections=~100 processes .
Handling I/O
Threads:
Pros:
efficient, not holding up other requests but more
lightweight then executing another process
Cons:
memory-expensive - ~1MB per thread, complicated, need
to worry about controlling access and shared resources.
Traditional web-servers (IIS, Apache) today use
an optimized thread-per-connection model that
uses thread pools.
Handling I/O in Node.js
Node.js runs your code on a single thread.
All I/O operations are asynchronous and Non-
Blocking
Internally threads and processes are used but not
explicitly exposed to your code.
When an I/O operation completes, an event is
triggered and the result is passed to a callback
function.
Why Node.js
Lightweight and efficient
using non-blocking I/O keeps memory consumption
stable by reducing the number of threads.
Less context switching overhead.
Concurrency
using non-blocking I/O keeps the main thread
responsive and allowing it support tens of thousands
of concurrent connections.
One Language
allows reuse of resources between the client and
server.
Demo
Async server in Node.js
Node.js Event loop
I/O operations are evented and external events
are handled by Node’s Event loop.
Javascript functions are passed to a queue and
invoked when the return value from their
current I/O calls is available.
I/O Callbacks are invoked synchronously by the
order they returned.
Node.js Event loop
Server
Async
Workers
DDB, FS,
Network,
etc…
Request
Response
Request
Response
Demo
Node.js single thread
Node.js Usage
Running CPU intensive tasks (e.g. long running
loops) on Node.js’s main thread should be
avoided as it will block handling other requests
to the server.
Running CPU intensive tasks can be scaled out
to multiple node processes.
Node.js can run a managed cluster of multiple
processes to scale out an entire application.
Node.js process architecture
Node.exe
V8
CommonJS – Module loader
JavaScript Application
libuv
OS
Core Javascript modules for file
system, network, http, etc…
Responsible for loading modules
and manage dependencies.
Using CommonJS’s module
definition.
Multi-platform library written in C
that handles all async I/O
operations.
Google’s Javascript Engine.
Compiles the Javascript code to
native machine code.
Node Package Manager (NPM)
The Node Package Manager (NPM) provides a
management mechanism for modules:
Download and install
Version management
Deployment
Managing Dependencies
NPM packages are managed in a file called
package.json
package.json schema define fields like:
name, description
Version
Dependencies
Dependencies are being resolved during NPM
install
{
"name": "app",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.10.2",
"cookie-parser": "~1.3.3",
"debug": "~2.1.1",
"express": "~4.11.1",
"jade": "~1.9.1",
"lodash": "^3.3.1",
"morgan": "~1.5.1",
"serve-favicon": "~2.2.0"
}
}
A look at Package.json
Managing Dependencies
NPM packages are installed inside a folder
named node_modules
The folder is created inside the path where the
“npm install …” was executed.
When a npm module is required node will look
it up inside the node_modules folder of the
current path.
If the module is not found it is recursively searched
up the folder tree.
ExpressJS
Introduction to ExpressJS
Node.js http module provides bare-bones HTTP
server functionality
Building a modern web application server
would require implementing many common
features such as:
Routing
Session Management
Cookies & Requests Parsers
Request Logging
Introduction to ExpressJS
ExpressJS is a web application framework
inspired by Sinatra.
Express middleware provides an expendable
Http pipeline on top of Node.js's httpServer
An Express application is essentially a series of
middleware calls
A middleware is simply a function with access to
the request object, response object and a
callback to next middleware in line.
ExpressJS is available through npm
$ npm install express --save
ExpressJS provides a generator tool to quickly
create an application skeleton.
$ npm install express-generator –g
//run
$ express -h
ExpressJS Installation
Routing is one of the pillars of ExpressJS
To create a route use the app.verb convention
// respond with "Hello World!" on the homepage
app.get('/', function (req, res) {
res.send('Hello World!');
})
// accept POST request on the homepage
app.post('/', function (req, res) {
res.send('Got a POST request');
})
// accept PUT request at /user
app.put('/user', function (req, res) {
res.send('Got a PUT request at /user');
})
Routing
A router is an isolated instance of middlewares
and routes.
The router can have middleware and http VERB
routes added just like an application.
var router = express.Router([options]);
router.get('/events', function(req, res, next) {
// .. some logic here .. like any other middleware // ..
});
Routers
Routing and Parameters
Express support parameters as part of the URI
Declare a parameter in the URI by using a “:” in front
of it
Access query-string parameters using req.query
Use regular expressions
Demo
Express
MongoDB
MongoDB
MongoDB is a document database
Stores BSON (Binary JSON) documents
Can search based on data stored in the BSON
document
Easily return results in JSON
MongoDB is one of the Most popular databases
in the Node.js eco-system
ODM with Mongoose
Object Data Model (ODM) tools allow you to
create an object model in your applications that
map to documents
Mongoose allows you to create schemas for
objects and bind them to MongoDB documents
Demo
Express With Mongo
Angular 2
Angular 2 Overview
Angular 2 is a new framework for building
javascript applications.
Open source (MIT license), written by Google
Fast and small
Modern approach, tools and practices
Designed for modern architectures and
challenges
Setting up an Angular 2 Project
Angular 2 projects almost always use a build
Have many dependencies
Require a lot of configuration
There are several approaches to setting up
Angular 2 projects:
Manually
Using a Yeoman generator
Using the Angular 2 CLI
Using an Angular 2 seed project
https://github.com/angular/angular2-seed
Angular 2 Development
Environment
SystemJS / Webpack
• Javascript module bundler
Typescript + ES 2015
• A Javascript Superset
• Official Language of Angular 2
npm
• Node.js package manager.
Node.js
• Server Javascript runtime.
• Used For Webservers and scripting
tools
The Build Process
Written code and executed code are different
Any build system can be used (webpack,
SystemJS, gulp, etc.)
Develop
•Write code
using
TypeScript,
Less, etc.
Build
•Transpile
•Lint
•Test
•Prerender
Execute
• JavaScript in
the browser
• Natively on
other target
platforms
Basic Angular Project Structure
/package.json  the Node project file
/tsconfig.json  the TypeScript project file
/typings.json  the Typings manifest file
/node_modules  the Node modules folder
/typings  the Typings folder
/src  the source code folder
From MVC to Components
Components are a higher-
level abstraction than MVC
MV* Frameworks focuses on
controllers
Angular 2 focuses on
components
Component classes implement
logic
Controllers and views are
metadata
Components
(Angular 2)
Views and Controllers
(MV* frameworks)
Angular2 Architecture
An Angular2 application is a tree of
components.
Root
Component
Child
Compoment-A
grandChild
Compoment-A1
grandChild
Compoment-A2
Child
Compoment-B
grandChild
Compoment-B
Angular2 Architecture
Components Communicate in a unidirectional
data flow
Root
Component
Child
Compoment-A
grandChild
Compoment-A1
grandChild
Compoment-A2
Child
Compoment-B
grandChild
Compoment-B
Angular2 Architecture
Data is Flowing downwards.
Root
Component
Child
Compoment-A
grandChild
Compoment-A1
grandChild
Compoment-A2
Child
Compoment-B
grandChild
Compoment-B
DataBinding
Angular2 Architecture
Events are Flowing upwards.
Root
Component
Child
Compoment-A
grandChild
Compoment-A1
grandChild
Compoment-A2
Child
Compoment-B
grandChild
Compoment-B
DataBinding
EventBinding
Angular2 Architecture
Each Component Can consume injectable
Services.
Component
Service A
Service B
Service C
Angular2 Architecture
Components, Services, Directives and Pipes are
all defined inside Angular Modules
Module A
Component A Pipe A Service A Directive A
Module B
Component
B
Service BImports
Demo
Hello Angular 2
Scaffolding
Yeoman
Yeoman is Node.js based tool, that helps
kickstart new projects.
With a set of plugins called “generators” you
can scaffold complete projects or useful parts.
“Generators” promote a robust and opinionated
tehcnology stack based on common standards
and best practices.
Yeoman MEAN Generators
There Several Common MEAN generators:
angular-fullstack – Most updated MEAN generator
with angular 1.x
Meanjs – Generator by of the creators of MEAN
https://github.com/datatypevoid/vulgar - generator
with Angular 2 (updated to Angular 2 RC1)
Thank You
Nir Noy | @noynir | nirn@sela.co.il

More Related Content

What's hot

Node.js Workshop - Sela SDP 2015
Node.js Workshop  - Sela SDP 2015Node.js Workshop  - Sela SDP 2015
Node.js Workshop - Sela SDP 2015Nir Noy
 
Introduction to nodejs
Introduction to nodejsIntroduction to nodejs
Introduction to nodejsJames Carr
 
Top 30 Node.js interview questions
Top 30 Node.js interview questionsTop 30 Node.js interview questions
Top 30 Node.js interview questionstechievarsity
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN StackTroy Miles
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node jsAkshay Mathur
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaPlay Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaYevgeniy Brikman
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.jsWinston Hsieh
 
Build, logging, and unit test tools
Build, logging, and unit test toolsBuild, logging, and unit test tools
Build, logging, and unit test toolsAllan Huang
 
Introduction to node.js
Introduction to node.jsIntroduction to node.js
Introduction to node.jsDinesh U
 
Understanding the Single Thread Event Loop
Understanding the Single Thread Event LoopUnderstanding the Single Thread Event Loop
Understanding the Single Thread Event LoopTorontoNodeJS
 
Introduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureIntroduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureColin Mackay
 
Introduce about Nodejs - duyetdev.com
Introduce about Nodejs - duyetdev.comIntroduce about Nodejs - duyetdev.com
Introduce about Nodejs - duyetdev.comVan-Duyet Le
 
Node.js: A Guided Tour
Node.js: A Guided TourNode.js: A Guided Tour
Node.js: A Guided Tourcacois
 
Microservices with Micronaut
Microservices with MicronautMicroservices with Micronaut
Microservices with MicronautQAware GmbH
 
Java New Evolution
Java New EvolutionJava New Evolution
Java New EvolutionAllan Huang
 

What's hot (20)

Android concurrency
Android concurrencyAndroid concurrency
Android concurrency
 
Node.js Workshop - Sela SDP 2015
Node.js Workshop  - Sela SDP 2015Node.js Workshop  - Sela SDP 2015
Node.js Workshop - Sela SDP 2015
 
Introduction to nodejs
Introduction to nodejsIntroduction to nodejs
Introduction to nodejs
 
Introduction to NodeJS
Introduction to NodeJSIntroduction to NodeJS
Introduction to NodeJS
 
Node js internal
Node js internalNode js internal
Node js internal
 
Top 30 Node.js interview questions
Top 30 Node.js interview questionsTop 30 Node.js interview questions
Top 30 Node.js interview questions
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
Introduction to node.js
Introduction to node.jsIntroduction to node.js
Introduction to node.js
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node js
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaPlay Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and Scala
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Build, logging, and unit test tools
Build, logging, and unit test toolsBuild, logging, and unit test tools
Build, logging, and unit test tools
 
Introduction to node.js
Introduction to node.jsIntroduction to node.js
Introduction to node.js
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node js
 
Understanding the Single Thread Event Loop
Understanding the Single Thread Event LoopUnderstanding the Single Thread Event Loop
Understanding the Single Thread Event Loop
 
Introduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureIntroduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azure
 
Introduce about Nodejs - duyetdev.com
Introduce about Nodejs - duyetdev.comIntroduce about Nodejs - duyetdev.com
Introduce about Nodejs - duyetdev.com
 
Node.js: A Guided Tour
Node.js: A Guided TourNode.js: A Guided Tour
Node.js: A Guided Tour
 
Microservices with Micronaut
Microservices with MicronautMicroservices with Micronaut
Microservices with Micronaut
 
Java New Evolution
Java New EvolutionJava New Evolution
Java New Evolution
 

Similar to Building Applications With the MEAN Stack

Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN StackRob Davarnia
 
Create Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express FrameworkCreate Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express FrameworkEdureka!
 
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperEdureka!
 
Day in a life of a node.js developer
Day in a life of a node.js developerDay in a life of a node.js developer
Day in a life of a node.js developerEdureka!
 
Net core vs. node.js what to choose when
Net core vs. node.js  what to choose when Net core vs. node.js  what to choose when
Net core vs. node.js what to choose when Katy Slemon
 
Fundamental of Node.JS - Internship Presentation - Week7
Fundamental of Node.JS - Internship Presentation - Week7Fundamental of Node.JS - Internship Presentation - Week7
Fundamental of Node.JS - Internship Presentation - Week7Devang Garach
 
Node JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web AppNode JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web AppEdureka!
 
Node Session - 1
Node Session - 1Node Session - 1
Node Session - 1Bhavin Shah
 
Running Node Applications on iOS and Android
Running Node Applications on iOS and AndroidRunning Node Applications on iOS and Android
Running Node Applications on iOS and Androidukadakal
 

Similar to Building Applications With the MEAN Stack (20)

Introduction to Node.JS
Introduction to Node.JSIntroduction to Node.JS
Introduction to Node.JS
 
Node js
Node jsNode js
Node js
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
 
Java script framework
Java script frameworkJava script framework
Java script framework
 
Create Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express FrameworkCreate Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express Framework
 
Best node js course
Best node js courseBest node js course
Best node js course
 
Node js Introduction
Node js IntroductionNode js Introduction
Node js Introduction
 
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js Developer
 
Day in a life of a node.js developer
Day in a life of a node.js developerDay in a life of a node.js developer
Day in a life of a node.js developer
 
Beginners Node.js
Beginners Node.jsBeginners Node.js
Beginners Node.js
 
Proposal
ProposalProposal
Proposal
 
Net core vs. node.js what to choose when
Net core vs. node.js  what to choose when Net core vs. node.js  what to choose when
Net core vs. node.js what to choose when
 
Fundamental of Node.JS - Internship Presentation - Week7
Fundamental of Node.JS - Internship Presentation - Week7Fundamental of Node.JS - Internship Presentation - Week7
Fundamental of Node.JS - Internship Presentation - Week7
 
Node JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web AppNode JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web App
 
Meanstack overview
Meanstack overviewMeanstack overview
Meanstack overview
 
Nodejs
NodejsNodejs
Nodejs
 
Node js
Node jsNode js
Node js
 
Node Session - 1
Node Session - 1Node Session - 1
Node Session - 1
 
Running Node Applications on iOS and Android
Running Node Applications on iOS and AndroidRunning Node Applications on iOS and Android
Running Node Applications on iOS and Android
 
MERN PPT
MERN PPTMERN PPT
MERN PPT
 

Recently uploaded

MinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young EntrepreneurMinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young EntrepreneurPriyadarshini T
 
Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridMathew Thomas
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...jackiepotts6
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckNaval Singh
 
8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.Ritesh Kanjee
 
MUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsMUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsUniversity of Antwerp
 
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityLarge Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityRandy Shoup
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevpmgdscunsri
 
Technical improvements. Reasons. Methods. Estimations. CJ
Technical improvements.  Reasons. Methods. Estimations. CJTechnical improvements.  Reasons. Methods. Estimations. CJ
Technical improvements. Reasons. Methods. Estimations. CJpolinaucc
 
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxCYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxBarakaMuyengi
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsconfluent
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleShane Coughlan
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tipsmichealwillson701
 
Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houstonjennysmithusa549
 
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Inc
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdfOffsiteNOC
 
Building Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startBuilding Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startMaxim Salnikov
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptxAGATSoftware
 
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...MyFAA
 

Recently uploaded (20)

MinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young EntrepreneurMinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
 
Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM Grid
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deck
 
8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.
 
MUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsMUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow Models
 
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityLarge Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
 
Technical improvements. Reasons. Methods. Estimations. CJ
Technical improvements.  Reasons. Methods. Estimations. CJTechnical improvements.  Reasons. Methods. Estimations. CJ
Technical improvements. Reasons. Methods. Estimations. CJ
 
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxCYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insights
 
20140812 - OBD2 Solution
20140812 - OBD2 Solution20140812 - OBD2 Solution
20140812 - OBD2 Solution
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scale
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tips
 
Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houston
 
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf
 
Building Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startBuilding Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to start
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
 
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
 

Building Applications With the MEAN Stack

  • 1. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com Nir Noy Building Applications With the MEAN stack
  • 2. About me Nir Noy Full stack Developer Web Consultant Speaker Co-Organizer Of FrontEnd.IL Meetup Group http://www.meetup.com/FrontEnd-IL
  • 3. Upcoming Meetup FrontEnd.IL Meetup – Advanced Angular 2 https://www.meetup.com/FrontEnd-IL/events/233531658/ 27/9/2016 – The Passage Bar, Tel Aviv Angular 2 With Redux Change Detection in Angular 2
  • 5. The MEAN Stack The term MEAN stack refers to a collection of JavaScript based technologies used to develop web applications.
  • 6. M E A N
  • 8. What is Node.js A JavaScript runtime that is designed for asynchronous IO operations Very lightweight and fast Being used by a growing number of companies:
  • 9. The Node.js ecosystem Node.js has a rapidly growing ecosystem: Web frameworks: Express Socket.io Database support Sql Databases NoSql Databases Hosting and Cloud environments IIS, Azure Heroku Joyent
  • 10. Synchronous server operations // GET api/countries public string Get() { var client = WebRequest.Create("http://.../"); var response = client.GetResponse(); var stream = response.GetResponseStream(); var reader = new StreamReader(stream); return reader.ReadToEnd(); } Blocking I/O operation
  • 11. The Cost of I/O I/O Operations are expensive. I/O Source CPU Cycles L1 – Cache 3 L2 – Cache 14 RAM 250 Disk 41,000,000 Network 240,000,000
  • 12. Handling I/O Waiting for I/O operations to complete is one of the most common performance bottlenecks. There are several common solutions to handle it: Synchronous Pros: simple. Cons: blocking, can hold up other requests. Fork a new process Pros: efficient, not holding up other requests. Cons: does not scale, ~100 connections=~100 processes .
  • 13. Handling I/O Threads: Pros: efficient, not holding up other requests but more lightweight then executing another process Cons: memory-expensive - ~1MB per thread, complicated, need to worry about controlling access and shared resources. Traditional web-servers (IIS, Apache) today use an optimized thread-per-connection model that uses thread pools.
  • 14. Handling I/O in Node.js Node.js runs your code on a single thread. All I/O operations are asynchronous and Non- Blocking Internally threads and processes are used but not explicitly exposed to your code. When an I/O operation completes, an event is triggered and the result is passed to a callback function.
  • 15. Why Node.js Lightweight and efficient using non-blocking I/O keeps memory consumption stable by reducing the number of threads. Less context switching overhead. Concurrency using non-blocking I/O keeps the main thread responsive and allowing it support tens of thousands of concurrent connections. One Language allows reuse of resources between the client and server.
  • 17. Node.js Event loop I/O operations are evented and external events are handled by Node’s Event loop. Javascript functions are passed to a queue and invoked when the return value from their current I/O calls is available. I/O Callbacks are invoked synchronously by the order they returned.
  • 18. Node.js Event loop Server Async Workers DDB, FS, Network, etc… Request Response Request Response
  • 20. Node.js Usage Running CPU intensive tasks (e.g. long running loops) on Node.js’s main thread should be avoided as it will block handling other requests to the server. Running CPU intensive tasks can be scaled out to multiple node processes. Node.js can run a managed cluster of multiple processes to scale out an entire application.
  • 21. Node.js process architecture Node.exe V8 CommonJS – Module loader JavaScript Application libuv OS Core Javascript modules for file system, network, http, etc… Responsible for loading modules and manage dependencies. Using CommonJS’s module definition. Multi-platform library written in C that handles all async I/O operations. Google’s Javascript Engine. Compiles the Javascript code to native machine code.
  • 22. Node Package Manager (NPM) The Node Package Manager (NPM) provides a management mechanism for modules: Download and install Version management Deployment
  • 23. Managing Dependencies NPM packages are managed in a file called package.json package.json schema define fields like: name, description Version Dependencies Dependencies are being resolved during NPM install
  • 24. { "name": "app", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "body-parser": "~1.10.2", "cookie-parser": "~1.3.3", "debug": "~2.1.1", "express": "~4.11.1", "jade": "~1.9.1", "lodash": "^3.3.1", "morgan": "~1.5.1", "serve-favicon": "~2.2.0" } } A look at Package.json
  • 25. Managing Dependencies NPM packages are installed inside a folder named node_modules The folder is created inside the path where the “npm install …” was executed. When a npm module is required node will look it up inside the node_modules folder of the current path. If the module is not found it is recursively searched up the folder tree.
  • 27. Introduction to ExpressJS Node.js http module provides bare-bones HTTP server functionality Building a modern web application server would require implementing many common features such as: Routing Session Management Cookies & Requests Parsers Request Logging
  • 28. Introduction to ExpressJS ExpressJS is a web application framework inspired by Sinatra. Express middleware provides an expendable Http pipeline on top of Node.js's httpServer An Express application is essentially a series of middleware calls A middleware is simply a function with access to the request object, response object and a callback to next middleware in line.
  • 29. ExpressJS is available through npm $ npm install express --save ExpressJS provides a generator tool to quickly create an application skeleton. $ npm install express-generator –g //run $ express -h ExpressJS Installation
  • 30. Routing is one of the pillars of ExpressJS To create a route use the app.verb convention // respond with "Hello World!" on the homepage app.get('/', function (req, res) { res.send('Hello World!'); }) // accept POST request on the homepage app.post('/', function (req, res) { res.send('Got a POST request'); }) // accept PUT request at /user app.put('/user', function (req, res) { res.send('Got a PUT request at /user'); }) Routing
  • 31. A router is an isolated instance of middlewares and routes. The router can have middleware and http VERB routes added just like an application. var router = express.Router([options]); router.get('/events', function(req, res, next) { // .. some logic here .. like any other middleware // .. }); Routers
  • 32. Routing and Parameters Express support parameters as part of the URI Declare a parameter in the URI by using a “:” in front of it Access query-string parameters using req.query Use regular expressions
  • 35. MongoDB MongoDB is a document database Stores BSON (Binary JSON) documents Can search based on data stored in the BSON document Easily return results in JSON MongoDB is one of the Most popular databases in the Node.js eco-system
  • 36. ODM with Mongoose Object Data Model (ODM) tools allow you to create an object model in your applications that map to documents Mongoose allows you to create schemas for objects and bind them to MongoDB documents
  • 39. Angular 2 Overview Angular 2 is a new framework for building javascript applications. Open source (MIT license), written by Google Fast and small Modern approach, tools and practices Designed for modern architectures and challenges
  • 40. Setting up an Angular 2 Project Angular 2 projects almost always use a build Have many dependencies Require a lot of configuration There are several approaches to setting up Angular 2 projects: Manually Using a Yeoman generator Using the Angular 2 CLI Using an Angular 2 seed project https://github.com/angular/angular2-seed
  • 41. Angular 2 Development Environment SystemJS / Webpack • Javascript module bundler Typescript + ES 2015 • A Javascript Superset • Official Language of Angular 2 npm • Node.js package manager. Node.js • Server Javascript runtime. • Used For Webservers and scripting tools
  • 42. The Build Process Written code and executed code are different Any build system can be used (webpack, SystemJS, gulp, etc.) Develop •Write code using TypeScript, Less, etc. Build •Transpile •Lint •Test •Prerender Execute • JavaScript in the browser • Natively on other target platforms
  • 43. Basic Angular Project Structure /package.json  the Node project file /tsconfig.json  the TypeScript project file /typings.json  the Typings manifest file /node_modules  the Node modules folder /typings  the Typings folder /src  the source code folder
  • 44. From MVC to Components Components are a higher- level abstraction than MVC MV* Frameworks focuses on controllers Angular 2 focuses on components Component classes implement logic Controllers and views are metadata Components (Angular 2) Views and Controllers (MV* frameworks)
  • 45. Angular2 Architecture An Angular2 application is a tree of components. Root Component Child Compoment-A grandChild Compoment-A1 grandChild Compoment-A2 Child Compoment-B grandChild Compoment-B
  • 46. Angular2 Architecture Components Communicate in a unidirectional data flow Root Component Child Compoment-A grandChild Compoment-A1 grandChild Compoment-A2 Child Compoment-B grandChild Compoment-B
  • 47. Angular2 Architecture Data is Flowing downwards. Root Component Child Compoment-A grandChild Compoment-A1 grandChild Compoment-A2 Child Compoment-B grandChild Compoment-B DataBinding
  • 48. Angular2 Architecture Events are Flowing upwards. Root Component Child Compoment-A grandChild Compoment-A1 grandChild Compoment-A2 Child Compoment-B grandChild Compoment-B DataBinding EventBinding
  • 49. Angular2 Architecture Each Component Can consume injectable Services. Component Service A Service B Service C
  • 50. Angular2 Architecture Components, Services, Directives and Pipes are all defined inside Angular Modules Module A Component A Pipe A Service A Directive A Module B Component B Service BImports
  • 53. Yeoman Yeoman is Node.js based tool, that helps kickstart new projects. With a set of plugins called “generators” you can scaffold complete projects or useful parts. “Generators” promote a robust and opinionated tehcnology stack based on common standards and best practices.
  • 54. Yeoman MEAN Generators There Several Common MEAN generators: angular-fullstack – Most updated MEAN generator with angular 1.x Meanjs – Generator by of the creators of MEAN https://github.com/datatypevoid/vulgar - generator with Angular 2 (updated to Angular 2 RC1)
  • 55. Thank You Nir Noy | @noynir | nirn@sela.co.il

Editor's Notes

  1. 33
  2. 37