SlideShare a Scribd company logo
Laboratory of Databases and Web
Applications
Web development using
Express, Node, Angular
João Rocha da Silva (FEUP InfoLab, room I123) Contact: joaorosilva@gmail.com
Contents
1. The MEAN Stack
2. NodeJS
High-performance Javascript-based runtime environment
3. ExpressJS
An MVC web applications framework
4. AngularJS
Google framework for client apps in the browser
5. Live coding session + questions
Javascript across the whole stack
Image from https://codegeekk.
wordpress.com/2015/03/07/explore-
mean-stack-at-2015/
NodeJS
NodeJS
● JavaScript “on the server side”
● Built on Google’s Chrome V8 Javascript engine
○ Compiles JavaScript code to native machine code instead of
interpreting in real time
● Vibrant open-source community
○ Huge ecosystem of free libraries
NodeJS (continued)
● Single thread, event-driven
○ Asynchronous, nonblocking I/O (i.e. not blocking the main thread)
○ Numerous & simultaneous I/O operations become faster
● Very low memory consumption vs PHP, for example
○ Single process
○ Many more simultaneous connections per server instance
○ Node sleeps when there is nothing to be done
● Multicore support also available for clusters
In https://nodejs.org/en/about/
http://blog.soulserv.net/tag/node-js-vs-php/
// Load the http module to create an http server.
var http = require('http');
// Configure our HTTP server to respond with Hello World to all requests.
var server = http.createServer(function (request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.end("Hello Worldn");
});
// Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8000);
// Put a friendly message on the terminal
console.log("Server running at http://127.0.0.1:8000/");
In https://nodejs.org/en/about/
ExpressJS
Image from http://javascript.tutorialhorizon.com/2014/09/19/understanding-expressjs-middleware-with-a-visual-example/
id username firstname surname
1 joao João Rocha
Example: Listing all users
Database table
Route (JS)
GET /users/all ->
function(req,res)
{
//1. Fetch from DB
User.findAll(
…
//2. Render view
res.render(
‘users/all’,
{
users : users
}
);
}
[
{
"id" : 1,
"username" : "joao",
"firstname" : "João",
"surname" : "Rocha"
}
]
<html>
<h1>Viewing users</h1>
<% for (var user in
users… )
{ %>
Username : <%=user.
username%>
First Name:
<%=users.firstname%>
<% } %>
</html>
Model Route View
Client requests http://127.0.0.1:3000/users/all
Return Object array
Database Querying API
Model
instancesModel
Object-Relational Mapping (ORM) for NodeJS
● User “Class”
“One for each DB table”
● Instances
“One for each table row”
Sequelize is a promise-based ORM for Node.js and io.
js. It supports the dialects PostgreSQL, MySQL,
MariaDB, SQLite and MSSQL and features solid
transaction support, relations, read replication and
more.
Sequelize API Docs:
http://docs.sequelizejs.
com/en/latest/api/model/#findalloptions-
promisearrayinstance
Lots of libraries on the ecosystem
Package manager for the web
CSS, JS, HTML, Images...
Bower
Package manager for NodeJS
Libraries
Node Package Manager
AngularJS
AngularJS
● HTML is good for presenting information
○ But NOT good for storing it
● jQuery uses the DOM to store information, and you need to
set and get by element ID (usually)
○ Huge side effects as the code grows and different parts of the web
page are modified at the same time by many events
○ Harder and harder to debug and maintain
● No one likes to maintain spaghetti code...
● Angular separates business logic and data from the
presentation
○ Services and Factories for data access and storage
○ Views for presentation
○ Controllers are the “glue” between data and presentation
○ Routes switch between Views (Single Page Application)
AngularJS (cont’d)
Image from https://www.
mutuallyhuman.
com/blog/2014/05/08/angularjs-
services-and-factories-done-
right/
AngularJS + ExpressJS are good friends
● Excellent for supporting Mobile Apps + Web site
○ Implement a single JSON-based API
○ Consume JSON on mobile devices
○ Same JSON can be used to generate HTML on the client
○ No need to test two separate APIs, because the site itself uses the
“mobile” API
Live coding session
Code for this presentation available at
https://github.com/silvae86/lbaw_2016_tutorial
João Rocha da Silva is just finishing an Informatics
Engineering PhD at FEUP. He specializes on research data
management, applying the latest Semantic Web Technologies
to the adequate preservation and discovery of research
data assets.
He is experienced in many programming languages
(Javascript-Node, PHP with MVC frameworks, Ruby on Rails,
J2EE, etc etc) running on the major operating systems
(everyday Mac user). Regardless of language, he is a
quick learner that can adapt to any new technology
quickly and effectively.

More Related Content

What's hot (20)

MongoDB
MongoDBMongoDB
MongoDB
SPBRUBY
 
3rd Generation Web Application Platforms
3rd Generation Web Application Platforms3rd Generation Web Application Platforms
3rd Generation Web Application Platforms
Naresh Chintalcheru
 
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
Katy Slemon
 
JavaScript on the server - Node.js
JavaScript on the server - Node.jsJavaScript on the server - Node.js
JavaScript on the server - Node.js
Rody Middelkoop
 
Node.js Express Framework
Node.js Express FrameworkNode.js Express Framework
Node.js Express Framework
TheCreativedev Blog
 
Introduction to nodejs
Introduction to nodejsIntroduction to nodejs
Introduction to nodejs
James Carr
 
Rest api with node js and express
Rest api with node js and expressRest api with node js and express
Rest api with node js and express
GirlsInTechnology Nepal
 
Skillwise Dust JS Template
Skillwise Dust JS TemplateSkillwise Dust JS Template
Skillwise Dust JS Template
Skillwise Group
 
Module design pattern i.e. express js
Module design pattern i.e. express jsModule design pattern i.e. express js
Module design pattern i.e. express js
Ahmed Assaf
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
Cakra Danu Sedayu
 
Kickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanKickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with Yeoman
Patrick Buergin
 
Learn Developing REST API in Node.js using LoopBack Framework
Learn Developing REST API  in Node.js using LoopBack FrameworkLearn Developing REST API  in Node.js using LoopBack Framework
Learn Developing REST API in Node.js using LoopBack Framework
Marudi Subakti
 
Ng init | EPI Sousse
Ng init | EPI SousseNg init | EPI Sousse
Ng init | EPI Sousse
Hamdi Hmidi
 
Frontend Application Architecture, Patterns, and Workflows
Frontend Application Architecture, Patterns, and WorkflowsFrontend Application Architecture, Patterns, and Workflows
Frontend Application Architecture, Patterns, and Workflows
Treasure Data, Inc.
 
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff NorrisRESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
mfrancis
 
Single Page Apps with Drupal 8
Single Page Apps with Drupal 8Single Page Apps with Drupal 8
Single Page Apps with Drupal 8
Chris Tankersley
 
Pre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlifyPre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlify
nuppla
 
Intro to Vue
Intro to Vue Intro to Vue
Intro to Vue
Isatu Conteh
 
Web Services with Objective-C
Web Services with Objective-CWeb Services with Objective-C
Web Services with Objective-C
Juio Barros
 
OSGi and Spring Data for simple (Web) Application Development
OSGi and Spring Data  for simple (Web) Application DevelopmentOSGi and Spring Data  for simple (Web) Application Development
OSGi and Spring Data for simple (Web) Application Development
Christian Baranowski
 
3rd Generation Web Application Platforms
3rd Generation Web Application Platforms3rd Generation Web Application Platforms
3rd Generation Web Application Platforms
Naresh Chintalcheru
 
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
Katy Slemon
 
JavaScript on the server - Node.js
JavaScript on the server - Node.jsJavaScript on the server - Node.js
JavaScript on the server - Node.js
Rody Middelkoop
 
Introduction to nodejs
Introduction to nodejsIntroduction to nodejs
Introduction to nodejs
James Carr
 
Skillwise Dust JS Template
Skillwise Dust JS TemplateSkillwise Dust JS Template
Skillwise Dust JS Template
Skillwise Group
 
Module design pattern i.e. express js
Module design pattern i.e. express jsModule design pattern i.e. express js
Module design pattern i.e. express js
Ahmed Assaf
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
Cakra Danu Sedayu
 
Kickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanKickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with Yeoman
Patrick Buergin
 
Learn Developing REST API in Node.js using LoopBack Framework
Learn Developing REST API  in Node.js using LoopBack FrameworkLearn Developing REST API  in Node.js using LoopBack Framework
Learn Developing REST API in Node.js using LoopBack Framework
Marudi Subakti
 
Ng init | EPI Sousse
Ng init | EPI SousseNg init | EPI Sousse
Ng init | EPI Sousse
Hamdi Hmidi
 
Frontend Application Architecture, Patterns, and Workflows
Frontend Application Architecture, Patterns, and WorkflowsFrontend Application Architecture, Patterns, and Workflows
Frontend Application Architecture, Patterns, and Workflows
Treasure Data, Inc.
 
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff NorrisRESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
mfrancis
 
Single Page Apps with Drupal 8
Single Page Apps with Drupal 8Single Page Apps with Drupal 8
Single Page Apps with Drupal 8
Chris Tankersley
 
Pre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlifyPre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlify
nuppla
 
Web Services with Objective-C
Web Services with Objective-CWeb Services with Objective-C
Web Services with Objective-C
Juio Barros
 
OSGi and Spring Data for simple (Web) Application Development
OSGi and Spring Data  for simple (Web) Application DevelopmentOSGi and Spring Data  for simple (Web) Application Development
OSGi and Spring Data for simple (Web) Application Development
Christian Baranowski
 

Viewers also liked (20)

Serverless Microservices - Real life story of a Web App that uses AngularJS, ...
Serverless Microservices - Real life story of a Web App that uses AngularJS, ...Serverless Microservices - Real life story of a Web App that uses AngularJS, ...
Serverless Microservices - Real life story of a Web App that uses AngularJS, ...
Mitoc Group
 
0 to Angular in 45 Mins
0 to Angular in 45 Mins0 to Angular in 45 Mins
0 to Angular in 45 Mins
Craig Shoemaker
 
Media tools to express understanding
Media tools to express understandingMedia tools to express understanding
Media tools to express understanding
Brette Callaway
 
Node & Express as Workflow Tools
Node & Express as Workflow ToolsNode & Express as Workflow Tools
Node & Express as Workflow Tools
FITC
 
Scalable server component using NodeJS & ExpressJS
Scalable server component using NodeJS & ExpressJSScalable server component using NodeJS & ExpressJS
Scalable server component using NodeJS & ExpressJS
Andhy Koesnandar
 
Wallpaper Final Piece
Wallpaper Final PieceWallpaper Final Piece
Wallpaper Final Piece
Fern Brereton
 
Drafts Engl
Drafts EnglDrafts Engl
Drafts Engl
MichaelKania
 
μετάταξη & πραγματικότητα
μετάταξη & πραγματικότηταμετάταξη & πραγματικότητα
μετάταξη & πραγματικότητα
Σ.Ε.Π.Κ@
 
1335829820.8071 integrated%20hospital%20management%20system%20%5bihms%5d
1335829820.8071 integrated%20hospital%20management%20system%20%5bihms%5d1335829820.8071 integrated%20hospital%20management%20system%20%5bihms%5d
1335829820.8071 integrated%20hospital%20management%20system%20%5bihms%5d
ashlinrockey
 
Pawel Kuczinski
Pawel KuczinskiPawel Kuczinski
Pawel Kuczinski
maherran
 
Building a collaborative enterprise
Building a collaborative enterpriseBuilding a collaborative enterprise
Building a collaborative enterprise
SHAH JAHAN
 
집담회_6. 김문조
집담회_6. 김문조집담회_6. 김문조
집담회_6. 김문조
gojipcap
 
PRIMER TRIMESTRE
PRIMER TRIMESTREPRIMER TRIMESTRE
PRIMER TRIMESTRE
Tere Donet
 
Just Do it with jQuery
Just Do it with jQueryJust Do it with jQuery
Just Do it with jQuery
selfteachme
 
Introduction to SPA with AngularJS
Introduction to SPA with AngularJSIntroduction to SPA with AngularJS
Introduction to SPA with AngularJS
Riki Pribadi
 
Realtime web applications with ExpressJS and SocketIO
Realtime web applications with ExpressJS and SocketIORealtime web applications with ExpressJS and SocketIO
Realtime web applications with ExpressJS and SocketIO
Hüseyin BABAL
 
Lugares increíbles
Lugares increíblesLugares increíbles
Lugares increíbles
maherran
 
Chap001 (2) (1)
Chap001 (2) (1)Chap001 (2) (1)
Chap001 (2) (1)
SHAH JAHAN
 
Testing Javascript Apps with Mocha and Chai
Testing Javascript Apps with Mocha and ChaiTesting Javascript Apps with Mocha and Chai
Testing Javascript Apps with Mocha and Chai
Andrew Winder
 
Doubleclick Training in Hyderabad | DoubleClick Training in Ameerpet | Doub...
Doubleclick  Training in  Hyderabad | DoubleClick Training in Ameerpet | Doub...Doubleclick  Training in  Hyderabad | DoubleClick Training in Ameerpet | Doub...
Doubleclick Training in Hyderabad | DoubleClick Training in Ameerpet | Doub...
David Jacobs
 
Serverless Microservices - Real life story of a Web App that uses AngularJS, ...
Serverless Microservices - Real life story of a Web App that uses AngularJS, ...Serverless Microservices - Real life story of a Web App that uses AngularJS, ...
Serverless Microservices - Real life story of a Web App that uses AngularJS, ...
Mitoc Group
 
Media tools to express understanding
Media tools to express understandingMedia tools to express understanding
Media tools to express understanding
Brette Callaway
 
Node & Express as Workflow Tools
Node & Express as Workflow ToolsNode & Express as Workflow Tools
Node & Express as Workflow Tools
FITC
 
Scalable server component using NodeJS & ExpressJS
Scalable server component using NodeJS & ExpressJSScalable server component using NodeJS & ExpressJS
Scalable server component using NodeJS & ExpressJS
Andhy Koesnandar
 
Wallpaper Final Piece
Wallpaper Final PieceWallpaper Final Piece
Wallpaper Final Piece
Fern Brereton
 
μετάταξη & πραγματικότητα
μετάταξη & πραγματικότηταμετάταξη & πραγματικότητα
μετάταξη & πραγματικότητα
Σ.Ε.Π.Κ@
 
1335829820.8071 integrated%20hospital%20management%20system%20%5bihms%5d
1335829820.8071 integrated%20hospital%20management%20system%20%5bihms%5d1335829820.8071 integrated%20hospital%20management%20system%20%5bihms%5d
1335829820.8071 integrated%20hospital%20management%20system%20%5bihms%5d
ashlinrockey
 
Pawel Kuczinski
Pawel KuczinskiPawel Kuczinski
Pawel Kuczinski
maherran
 
Building a collaborative enterprise
Building a collaborative enterpriseBuilding a collaborative enterprise
Building a collaborative enterprise
SHAH JAHAN
 
집담회_6. 김문조
집담회_6. 김문조집담회_6. 김문조
집담회_6. 김문조
gojipcap
 
PRIMER TRIMESTRE
PRIMER TRIMESTREPRIMER TRIMESTRE
PRIMER TRIMESTRE
Tere Donet
 
Just Do it with jQuery
Just Do it with jQueryJust Do it with jQuery
Just Do it with jQuery
selfteachme
 
Introduction to SPA with AngularJS
Introduction to SPA with AngularJSIntroduction to SPA with AngularJS
Introduction to SPA with AngularJS
Riki Pribadi
 
Realtime web applications with ExpressJS and SocketIO
Realtime web applications with ExpressJS and SocketIORealtime web applications with ExpressJS and SocketIO
Realtime web applications with ExpressJS and SocketIO
Hüseyin BABAL
 
Lugares increíbles
Lugares increíblesLugares increíbles
Lugares increíbles
maherran
 
Chap001 (2) (1)
Chap001 (2) (1)Chap001 (2) (1)
Chap001 (2) (1)
SHAH JAHAN
 
Testing Javascript Apps with Mocha and Chai
Testing Javascript Apps with Mocha and ChaiTesting Javascript Apps with Mocha and Chai
Testing Javascript Apps with Mocha and Chai
Andrew Winder
 
Doubleclick Training in Hyderabad | DoubleClick Training in Ameerpet | Doub...
Doubleclick  Training in  Hyderabad | DoubleClick Training in Ameerpet | Doub...Doubleclick  Training in  Hyderabad | DoubleClick Training in Ameerpet | Doub...
Doubleclick Training in Hyderabad | DoubleClick Training in Ameerpet | Doub...
David Jacobs
 
Ad

Similar to Web Development with AngularJS, NodeJS and ExpressJS (20)

Web Applications Development with MEAN Stack
Web Applications Development with MEAN StackWeb Applications Development with MEAN Stack
Web Applications Development with MEAN Stack
Shailendra Chauhan
 
MEAN.js Workshop
MEAN.js WorkshopMEAN.js Workshop
MEAN.js Workshop
Michael Haberman
 
mearn-stack-new_ccvbhbhvgvgcdszsxdxfcf.pptx
mearn-stack-new_ccvbhbhvgvgcdszsxdxfcf.pptxmearn-stack-new_ccvbhbhvgvgcdszsxdxfcf.pptx
mearn-stack-new_ccvbhbhvgvgcdszsxdxfcf.pptx
aravym456
 
mearn-stackjdksjdsfjdkofkdokodkojdj.pptx
mearn-stackjdksjdsfjdkofkdokodkojdj.pptxmearn-stackjdksjdsfjdkofkdokodkojdj.pptx
mearn-stackjdksjdsfjdkofkdokodkojdj.pptx
aravym456
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
Balajihope
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
Rob Davarnia
 
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
Hariharan Ganesan
 
Node js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share pptsNode js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share ppts
HemaSenthil5
 
Meanstack Introduction by Kishore Chandra
Meanstack Introduction by Kishore ChandraMeanstack Introduction by Kishore Chandra
Meanstack Introduction by Kishore Chandra
Kishore Chandra
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
Krishnaprasad k
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
Krishnaprasad k
 
module for backend full stack applications 1.pptx
module for backend full stack applications 1.pptxmodule for backend full stack applications 1.pptx
module for backend full stack applications 1.pptx
hemalathas752360
 
Meanstack overview
Meanstack overviewMeanstack overview
Meanstack overview
Adthasid Sabmake
 
After the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEANAfter the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEAN
Jeff Fox
 
Mean stack
Mean stackMean stack
Mean stack
RavikantGautam8
 
What is mean stack?
What is mean stack?What is mean stack?
What is mean stack?
Rishabh Saxena
 
NodeJS
NodeJSNodeJS
NodeJS
Alok Guha
 
Basic API Creation with Node.JS
Basic API Creation with Node.JSBasic API Creation with Node.JS
Basic API Creation with Node.JS
Azilen Technologies Pvt. Ltd.
 
Node js Introduction
Node js IntroductionNode js Introduction
Node js Introduction
sanskriti agarwal
 
FULL stack -> MEAN stack
FULL stack -> MEAN stackFULL stack -> MEAN stack
FULL stack -> MEAN stack
Ashok Raj
 
Web Applications Development with MEAN Stack
Web Applications Development with MEAN StackWeb Applications Development with MEAN Stack
Web Applications Development with MEAN Stack
Shailendra Chauhan
 
mearn-stack-new_ccvbhbhvgvgcdszsxdxfcf.pptx
mearn-stack-new_ccvbhbhvgvgcdszsxdxfcf.pptxmearn-stack-new_ccvbhbhvgvgcdszsxdxfcf.pptx
mearn-stack-new_ccvbhbhvgvgcdszsxdxfcf.pptx
aravym456
 
mearn-stackjdksjdsfjdkofkdokodkojdj.pptx
mearn-stackjdksjdsfjdkofkdokodkojdj.pptxmearn-stackjdksjdsfjdkofkdokodkojdj.pptx
mearn-stackjdksjdsfjdkofkdokodkojdj.pptx
aravym456
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
Balajihope
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
Rob Davarnia
 
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
Hariharan Ganesan
 
Node js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share pptsNode js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share ppts
HemaSenthil5
 
Meanstack Introduction by Kishore Chandra
Meanstack Introduction by Kishore ChandraMeanstack Introduction by Kishore Chandra
Meanstack Introduction by Kishore Chandra
Kishore Chandra
 
module for backend full stack applications 1.pptx
module for backend full stack applications 1.pptxmodule for backend full stack applications 1.pptx
module for backend full stack applications 1.pptx
hemalathas752360
 
After the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEANAfter the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEAN
Jeff Fox
 
FULL stack -> MEAN stack
FULL stack -> MEAN stackFULL stack -> MEAN stack
FULL stack -> MEAN stack
Ashok Raj
 
Ad

Recently uploaded (20)

Pavement and its types, Application of rigid and Flexible Pavements
Pavement and its types, Application of rigid and Flexible PavementsPavement and its types, Application of rigid and Flexible Pavements
Pavement and its types, Application of rigid and Flexible Pavements
Sakthivel M
 
Ppt on the related on the solar power system for electric vehicle engineering
Ppt on the related on the solar power system for electric vehicle engineeringPpt on the related on the solar power system for electric vehicle engineering
Ppt on the related on the solar power system for electric vehicle engineering
ravindrabodke
 
ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025
Rahul
 
fHUINhKG5lM1WBBk608.pptxfhjjhhjffhiuhhghj
fHUINhKG5lM1WBBk608.pptxfhjjhhjffhiuhhghjfHUINhKG5lM1WBBk608.pptxfhjjhhjffhiuhhghj
fHUINhKG5lM1WBBk608.pptxfhjjhhjffhiuhhghj
yadavshivank2006
 
A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...
A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...
A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...
Journal of Soft Computing in Civil Engineering
 
社内勉強会資料_Chain of Thought .
社内勉強会資料_Chain of Thought                           .社内勉強会資料_Chain of Thought                           .
社内勉強会資料_Chain of Thought .
NABLAS株式会社
 
3. What is the principles of Teamwork_Module_V1.0.ppt
3. What is the principles of Teamwork_Module_V1.0.ppt3. What is the principles of Teamwork_Module_V1.0.ppt
3. What is the principles of Teamwork_Module_V1.0.ppt
engaash9
 
22PCOAM16 _ML_Unit 3 Notes & Question bank
22PCOAM16 _ML_Unit 3 Notes & Question bank22PCOAM16 _ML_Unit 3 Notes & Question bank
22PCOAM16 _ML_Unit 3 Notes & Question bank
Guru Nanak Technical Institutions
 
Third Review PPT that consists of the project d etails like abstract.
Third Review PPT that consists of the project d etails like abstract.Third Review PPT that consists of the project d etails like abstract.
Third Review PPT that consists of the project d etails like abstract.
Sowndarya6
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
djiceramil
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
djiceramil
 
Research_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptxResearch_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptx
niranjancse
 
The first edition of the AIAG-VDA FMEA.pptx
The first edition of the AIAG-VDA FMEA.pptxThe first edition of the AIAG-VDA FMEA.pptx
The first edition of the AIAG-VDA FMEA.pptx
Mayank Mathur
 
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
SharinAbGhani1
 
Strength of materials (Thermal stress and strain relationships)
Strength of materials (Thermal stress and strain relationships)Strength of materials (Thermal stress and strain relationships)
Strength of materials (Thermal stress and strain relationships)
pelumiadigun2006
 
11th International Conference on Data Mining (DaMi 2025)
11th International Conference on Data Mining (DaMi 2025)11th International Conference on Data Mining (DaMi 2025)
11th International Conference on Data Mining (DaMi 2025)
kjim477n
 
IntroSlides-June-GDG-Cloud-Munich community [email protected]
IntroSlides-June-GDG-Cloud-Munich community gathering@Netlight.pdfIntroSlides-June-GDG-Cloud-Munich community gathering@Netlight.pdf
IntroSlides-June-GDG-Cloud-Munich community [email protected]
Luiz Carneiro
 
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdfRearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Takumi Amitani
 
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbbTree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
RATNANITINPATIL
 
chemistry investigatory project for class 12
chemistry investigatory project for class 12chemistry investigatory project for class 12
chemistry investigatory project for class 12
Susis10
 
Pavement and its types, Application of rigid and Flexible Pavements
Pavement and its types, Application of rigid and Flexible PavementsPavement and its types, Application of rigid and Flexible Pavements
Pavement and its types, Application of rigid and Flexible Pavements
Sakthivel M
 
Ppt on the related on the solar power system for electric vehicle engineering
Ppt on the related on the solar power system for electric vehicle engineeringPpt on the related on the solar power system for electric vehicle engineering
Ppt on the related on the solar power system for electric vehicle engineering
ravindrabodke
 
ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025
Rahul
 
fHUINhKG5lM1WBBk608.pptxfhjjhhjffhiuhhghj
fHUINhKG5lM1WBBk608.pptxfhjjhhjffhiuhhghjfHUINhKG5lM1WBBk608.pptxfhjjhhjffhiuhhghj
fHUINhKG5lM1WBBk608.pptxfhjjhhjffhiuhhghj
yadavshivank2006
 
社内勉強会資料_Chain of Thought .
社内勉強会資料_Chain of Thought                           .社内勉強会資料_Chain of Thought                           .
社内勉強会資料_Chain of Thought .
NABLAS株式会社
 
3. What is the principles of Teamwork_Module_V1.0.ppt
3. What is the principles of Teamwork_Module_V1.0.ppt3. What is the principles of Teamwork_Module_V1.0.ppt
3. What is the principles of Teamwork_Module_V1.0.ppt
engaash9
 
Third Review PPT that consists of the project d etails like abstract.
Third Review PPT that consists of the project d etails like abstract.Third Review PPT that consists of the project d etails like abstract.
Third Review PPT that consists of the project d etails like abstract.
Sowndarya6
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
djiceramil
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
djiceramil
 
Research_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptxResearch_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptx
niranjancse
 
The first edition of the AIAG-VDA FMEA.pptx
The first edition of the AIAG-VDA FMEA.pptxThe first edition of the AIAG-VDA FMEA.pptx
The first edition of the AIAG-VDA FMEA.pptx
Mayank Mathur
 
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
SharinAbGhani1
 
Strength of materials (Thermal stress and strain relationships)
Strength of materials (Thermal stress and strain relationships)Strength of materials (Thermal stress and strain relationships)
Strength of materials (Thermal stress and strain relationships)
pelumiadigun2006
 
11th International Conference on Data Mining (DaMi 2025)
11th International Conference on Data Mining (DaMi 2025)11th International Conference on Data Mining (DaMi 2025)
11th International Conference on Data Mining (DaMi 2025)
kjim477n
 
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdfRearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Takumi Amitani
 
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbbTree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
RATNANITINPATIL
 
chemistry investigatory project for class 12
chemistry investigatory project for class 12chemistry investigatory project for class 12
chemistry investigatory project for class 12
Susis10
 

Web Development with AngularJS, NodeJS and ExpressJS

  • 1. Laboratory of Databases and Web Applications Web development using Express, Node, Angular João Rocha da Silva (FEUP InfoLab, room I123) Contact: [email protected]
  • 2. Contents 1. The MEAN Stack 2. NodeJS High-performance Javascript-based runtime environment 3. ExpressJS An MVC web applications framework 4. AngularJS Google framework for client apps in the browser 5. Live coding session + questions
  • 3. Javascript across the whole stack Image from https://codegeekk. wordpress.com/2015/03/07/explore- mean-stack-at-2015/
  • 5. NodeJS ● JavaScript “on the server side” ● Built on Google’s Chrome V8 Javascript engine ○ Compiles JavaScript code to native machine code instead of interpreting in real time ● Vibrant open-source community ○ Huge ecosystem of free libraries
  • 6. NodeJS (continued) ● Single thread, event-driven ○ Asynchronous, nonblocking I/O (i.e. not blocking the main thread) ○ Numerous & simultaneous I/O operations become faster ● Very low memory consumption vs PHP, for example ○ Single process ○ Many more simultaneous connections per server instance ○ Node sleeps when there is nothing to be done ● Multicore support also available for clusters In https://nodejs.org/en/about/ http://blog.soulserv.net/tag/node-js-vs-php/
  • 7. // Load the http module to create an http server. var http = require('http'); // Configure our HTTP server to respond with Hello World to all requests. var server = http.createServer(function (request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.end("Hello Worldn"); }); // Listen on port 8000, IP defaults to 127.0.0.1 server.listen(8000); // Put a friendly message on the terminal console.log("Server running at http://127.0.0.1:8000/"); In https://nodejs.org/en/about/
  • 10. id username firstname surname 1 joao João Rocha Example: Listing all users Database table
  • 11. Route (JS) GET /users/all -> function(req,res) { //1. Fetch from DB User.findAll( … //2. Render view res.render( ‘users/all’, { users : users } ); } [ { "id" : 1, "username" : "joao", "firstname" : "João", "surname" : "Rocha" } ] <html> <h1>Viewing users</h1> <% for (var user in users… ) { %> Username : <%=user. username%> First Name: <%=users.firstname%> <% } %> </html> Model Route View Client requests http://127.0.0.1:3000/users/all Return Object array
  • 12. Database Querying API Model instancesModel Object-Relational Mapping (ORM) for NodeJS ● User “Class” “One for each DB table” ● Instances “One for each table row”
  • 13. Sequelize is a promise-based ORM for Node.js and io. js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite and MSSQL and features solid transaction support, relations, read replication and more. Sequelize API Docs: http://docs.sequelizejs. com/en/latest/api/model/#findalloptions- promisearrayinstance
  • 14. Lots of libraries on the ecosystem Package manager for the web CSS, JS, HTML, Images... Bower Package manager for NodeJS Libraries Node Package Manager
  • 16. AngularJS ● HTML is good for presenting information ○ But NOT good for storing it ● jQuery uses the DOM to store information, and you need to set and get by element ID (usually) ○ Huge side effects as the code grows and different parts of the web page are modified at the same time by many events ○ Harder and harder to debug and maintain ● No one likes to maintain spaghetti code...
  • 17. ● Angular separates business logic and data from the presentation ○ Services and Factories for data access and storage ○ Views for presentation ○ Controllers are the “glue” between data and presentation ○ Routes switch between Views (Single Page Application) AngularJS (cont’d)
  • 19. AngularJS + ExpressJS are good friends ● Excellent for supporting Mobile Apps + Web site ○ Implement a single JSON-based API ○ Consume JSON on mobile devices ○ Same JSON can be used to generate HTML on the client ○ No need to test two separate APIs, because the site itself uses the “mobile” API
  • 21. Code for this presentation available at https://github.com/silvae86/lbaw_2016_tutorial João Rocha da Silva is just finishing an Informatics Engineering PhD at FEUP. He specializes on research data management, applying the latest Semantic Web Technologies to the adequate preservation and discovery of research data assets. He is experienced in many programming languages (Javascript-Node, PHP with MVC frameworks, Ruby on Rails, J2EE, etc etc) running on the major operating systems (everyday Mac user). Regardless of language, he is a quick learner that can adapt to any new technology quickly and effectively.