Web Development with AngularJS, NodeJS and ExpressJS
-
Upload
joao-rocha-da-silva -
Category
Engineering
-
view
260 -
download
3
Transcript of Web Development with AngularJS, NodeJS and ExpressJS
![Page 1: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/1.jpg)
Laboratory of Databases and Web Applications
Web development usingExpress, Node, Angular
João Rocha da Silva (FEUP InfoLab, room I123) Contact: [email protected]
![Page 2: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/2.jpg)
Contents
1. The MEAN Stack2. 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
![Page 3: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/3.jpg)
Javascript across the whole stack Image from https://codegeekk.wordpress.com/2015/03/07/explore-mean-stack-at-2015/
![Page 4: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/4.jpg)
NodeJS
![Page 5: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/5.jpg)
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
![Page 6: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/6.jpg)
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/
![Page 7: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/7.jpg)
// 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 World\n");
});
// 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/
![Page 8: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/8.jpg)
ExpressJS
![Page 9: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/9.jpg)
Image from http://javascript.tutorialhorizon.com/2014/09/19/understanding-expressjs-middleware-with-a-visual-example/
![Page 10: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/10.jpg)
id username firstname surname
1 joao João Rocha
Example: Listing all users
Database table
![Page 11: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/11.jpg)
● The NodeJS Web Server
● The ExpressJS framework and MVC○ Routes (“Controllers”)○ DB access with Sequelize
○ Templating using Embedded
JavaScript (Views)
● AngularJS for client side JS apps○ Views○ Controllers○ Services vs. Factories
Route (JS)
GET /users/all ->
function(req,res){
//1. Fetch from DBUser.findAll(…
//2. Render viewres.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
![Page 12: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/12.jpg)
Database Querying APIModel
instancesModel
Object-Relational Mapping (ORM) for NodeJS
● User “Class”
“One for each DB table”
● Instances
“One for each table row”
![Page 13: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/13.jpg)
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
![Page 14: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/14.jpg)
Lots of libraries on the ecosystem
Package manager for the webCSS, JS, HTML, Images...
BowerPackage manager for NodeJSLibraries
Node Package Manager
![Page 15: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/15.jpg)
AngularJS
![Page 16: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/16.jpg)
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...
![Page 17: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/17.jpg)
● 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)
![Page 18: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/18.jpg)
Image from https://www.mutuallyhuman.com/blog/2014/05/08/angularjs-services-and-factories-done-right/
![Page 19: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/19.jpg)
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
![Page 20: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/20.jpg)
Live coding session
![Page 21: Web Development with AngularJS, NodeJS and ExpressJS](https://reader034.fdocuments.net/reader034/viewer/2022042611/5871ab2e1a28abda6a8b57f5/html5/thumbnails/21.jpg)
Code for this presentation available athttps://github.com/silvae86/lbaw_2016_tutorial
Joao 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.