TDP013 JavaScript,Node.js, Mocha, Istanbul,Mongo Anders Fröberg Institutionen för Datavetenskap
Load up your guns, and bring your friends This is the end, My only Friend, the end Äntligen stod prästen i predikstolen I ll be back
Innan vi börjar Redovisa labbar gitlab.ida.liu.se Dödlinje (Seminarium, screencast och kod) I slutets av HT1:13/10 (eller någon dag innan) I (om)tenta-p 17/10-28/10
ECMAScript Specifikationen för JavaScript och JScript Specificeras (delvis) av JavaScript och JScript Innehåller inte Document Object Model (DOM) 4
Användning av ECMAScript Mozilla Firefox Google Chrome Google documents Microsoft.NET Framework Adobe Flash Adobe Acrobat 5
ECMAScript edition 5 Lanserades 2009 Tidigare version (mycket av online exempel) Stöd för JSON Uppdatering 5.1 Lanserades 2011 (Mer) kompatibel med edition 3 6
ECMAScript edition 6 Lanserades Juni 2015 Nuvarande version Officially known as ECMAScript 2015 Icke fullständig stöd i webbläsarna ännu Går att översätta ES6->ES5 (source-to-source compiler) 7
ECMAScript 2015 and ES6 Nyheter i språket arrows classes enhanced object literals template strings destructuring default + rest + spread let + const iterators + for..of generators unicode modules module loaders map + set + weakmap + weakset proxies symbols subclassable built-ins promises math + number + string + array + object APIs binary and octal literals reflect api tail calls 8
7th and 8th Ecmascript 2016 Juni 2016 Ecmascript 2017 Juni 2017 9
10 PROGRAMMERING
Tilldelningar och scope Tidigare Variabler kan var som helst definieras globalt Funktioner har bara ett scope Ny let Block scope 11
Tilldelningar och scope function functiona() { variable = Hello, world ; } function functionb() { return variable; } functiona(); functionb(); // Returnerar Hello, world 12
Tilldelningar och scope function functiona() { var variable = Hello, world ; } function functionb() { return variable; } functiona(); functionb(); // ReferenceError: variable is not defined 13
Tilldelningar och scope var persons = new Array(); persons[ Anders ] = Froberg ; persons[ Erik ] = Berglund ; function functionc() { for (p in persons) { alert(p); } } functionc(); alert(p); 14
Tilldelningar och scope var persons = new Array(); persons[ Anders ] = Froberg ; persons[ Erik ] = Berglund ; function functionc() { for (var p in persons) { alert(p); } } functionc(); alert(p); 15
Tilldelningar och scope var persons = new Array(); persons[ Anders ] = Froberg ; persons[ Erik ] = Berglund ; function functionc() { for (var p in persons) { alert(p); } alert(p); } functionc(); 16
Tilldelningar och scope function functiond() { if (1 == 1) { var variable = Hello, world ; } alert(variable); } functiond(); 17
Objektorienterad programmering JavaScript använder prototyping till skillnad från Java/Python/C++ JavaScript stödjer endast arv från en (1) prototyp Vanlig objektorienterad programmering i JavaScript är möjligt, men kostar mer minne då varje objekt definierar sina egna funktioner. 18
Prototyping Funktioner är motsvarigheten till klasser Funktioner kan innehålla funktioner Klasser kan utökas efter att objekt har skapats Objekt kan utökas efter att de skapats 19
Prototyping function Animal() { // Constructor alert( Animal::Constructor ); } Animal.prototype.talk = function() { // Method return undefined; } var myanimal = new Animal(); alert(myanimal.talk()); Animal.prototype.scream = function() { return undefined; } alert(myanimal.scream()); 20
Prototyping function Animal() { // Constructor alert( Animal::Constructor ); } Animal.prototype.talk = function() { // Method return sound ; } var myanimal = new Animal(); Animal.prototype.whisper = function() {v return. ; } myanimal.scream = function() { return SOUND! ; } alert(myanimal.whisper()); alert(myanimal.talk()); alert(myanimal.scream()); 21
Arv (inheritance) Utökar egentligen bara ett objekt med fler prototyper Konstruktorn till sub-klassen måste refereras explicit, annars används konstruktorn för föräldern Konstruktorn i föräldern måste anropas när arvet definieras 22
Arv (inheritance) function Dog() { Animal.call(this); alert( Dog::Constructor ); } Dog.prototype = new Animal(); Dog.prototype.constructor = Dog; Dog.prototype.talk = function() { return woff woff ; } var mydog = new Dog(); alert(mydog.talk()); 23
Callbacks Funktioner som argument till funktioner Lämnar över ansvaret för att fånga upp data och event till den kallade funktionen Stor del av JavaScript och tredjeparts-bibliotek Om jag ger dig mitt telefonnummer så ringer du mig när du laddat ner nästa avsnitt av The Newsroom (2012) [red. anm. från itunes]... 24
The road to hell is paved with good intentions DOCUMENT OBJECT MODEL 25
26
27
Noder Varje element i ett HTML dokument är en nod i DOM-trädet (inklusive <!-- kommentarer -->) Det finns 12 olika typer av noder element, TextNode och AttributeNode är de tre typer som är intressanta för webbdesign 28
Navigera i DOM getelementbyid( param ) returnerar ett (1) element om det existerar ett element med angivet ID. getelementbytagname( param ) returnerar en lista med element som det existerar ett eller flera sådana element. 29
Operationer på noder element.childnodes returnerar en lista med alla noder direkt under element i DOM-trädet. element.parentnode returnerar den nod som finns direkt ovanför element i DOM-trädet. element.nextsibling returnerar den nod som finns direkt till höger och på samma nivå som element i DOM-trädet. element.previoussibling returnerar den nod som finns direkt till vänster och på samma nivå som element i DOM-trädet. 30
Modifiera DOM-trädet document.createelement( param ) skapar ett nytt element. document.createtextnode( param ) skapar en ny TextNode. element.appendchild(element) placerar det angivna elementet sist i listan av noder direkt under det specificerade elementet. element.removechild(element) tar bort ett element från listan av noder direkt under det specificerade elementet. 31
32
Återblick - Progressive Enhancement
HTML, CSS, JavaScript - Klienten
Den statiska webben... Vi känner till HTML, CSS och JavaScript. Dokument som skickas till och tolkas av webbläsaren. Informationen är dock statisk, dessa dokument förändras aldrig. Vad innebär en dynamisk webb? Är det ett problem?
Klient 1 begär statiska dokument (html, css, js) Klient 1 och Klient 2 känner inte till varandra. Klient 2 begär statiska dokument (html, css, js)
Användare fyller i formulär. Annons visas på hemsidan. Vem skapar HTML, CSS och Javascript för annonssidan?
Söker på ordet bike, så listas bilder och text. Hur skapades den här listan? Vem skrev HTML, CSS och Javascript? Hur visste de att jag skulle söka på bike? Finns det färdiga HTML sidor för alla tänkbara nyckelord?
Det saknas något... Det räcker alltså inte med att kunna HTML, CSS och Javascript för att uppnå det dynamiska som ofta visas på webbplatser idag.???? Men webbläsaren förstår inget annat än HTML, CSS och Javascript.
Vi behöver något som kan dynamiskt skapa innehåll som vi kan presentera för användaren
Statisk filserver Vi vill kunna skicka information till servern via HTTP som vi senare kan hämta igen och uppdatera vår sida med.?
Node.js En miljö för att köra JavaScript på servern, dvs man kan köra JavaScript utanför webbläsaren. Bygger vidare på V8 - Googles opensource JavaScript motor. Node.js är inte en HTTP server, men det är väldigt lätt att skriva en sådan i Node.js. JavaScript har en event-struktur med callbacks som används kraftigt i Node.js, därför kan det vara lite ovant i början för programmerare som inte arbetat så förut. Man hittar Node.js på GitHub
Callbacks Funktioner som argument till funktioner Lämnar över ansvaret för att fånga upp data och event till den kallade funktionen Stor del av JavaScript och tredjeparts-bibliotek Om jag ger dig mitt telefonnummer så ringer du mig när du laddat ner nästa avsnitt av The Newsroom (2012) [red. anm. från itunes]... 44
Node.js Med Node.js skapar vi en HTTP server med hjälp av JavaScript Denna server kan ta emot data skickat via HTTP GET och POST (och andra HTTP metoder), och skicka tillbaka data i t ex JSON format Förutom att ta emot och skicka tillbaka data så kan Node.js kommunicera med en databas Detta gör det möjligt att ha persistent data som vi kan skriva och hämta ifrån
Node.js Hello World! var http = require( http ); Require används för att använda funktioner från andra moduler (filer). Detta modulsystem tillhör Node.js och kan inte användas när man skriver JavaScript i Webbläsaren. http.createserver( function(request, response) { }).listen(8888); Vi använder http (den modul vi inkluderade) och anropar funktionen createserver. Som argument till funktionen skickar vi en callback funktion. Denna funktion kommer exekveras för varje HTTP request.
Node.js Hello World! var http = require( http ); http.createserver( function(request, response) { }).listen(8888); response.writehead(200, { Content-Type : text/plain }); response.write( Hello World ); response.end(); Returnera HTTP status 200 och Hello World för alla anrop till servern.
HTTP GET Såhär kan vi skicka parametrar till vår server för att testa att det fungerar som tänkt. Namnet på parametern är "name" och värdet är "marcus".
Node.js GET Parameters var http = require('http'); var url = require('url'); http.createserver(function(request,response) { var urlparts = url.parse(request.url, true); }).listen(8888); response.writehead(200, {'Content-Type':'text/plain'}); response.write('hello, ' + urlparts.query['name']); response.end();
Node.js GET Parameters var http = require('http'); var url = require('url'); http.createserver(function(request,response) { var urlparts = url.parse(request.url, true); }).listen(8888); response.writehead(200, {'Content-Type':'text/plain'}); response.write('hello, ' + urlparts.query['name']); response.end(); Anropa detta: http://localhost:8888/?name=marcus Output: Hello, Marcus
Det klassiska sättet servern tar hand om requests att skapa en ny tråd för varje inkommande anrop, dessa trådar delar CPU tid. Ett problem med detta är att det tar tid att skapa trådar (och minne), och har man många små requests blir det krävande.
I Node.js har vi bara en tråd. Alla requests hamnar i en event-loop. Detta gör att vi slipper de restriktioner och overhead som det innebär med trådade servrar. Läs mer på node.js/about
Node.js Event-loop Node.js använder bara en tråd, alla requests kör i denna. Detta innebär att man måste tänka sig för på vissa punkter. Om Node.js väntade på varje rad kod att exekvera innan den fortsatte skulle detta innebära att alla som gjorde anrop till servern fick vänta. var data = module.longrunningprocess(); Om vi är oförsiktiga och använder kod som denna på fel ställe kan det resultera i att alla anrop får vänta väldigt länge på varandra.
Node.js Event-loop http.createserver( function(request, response) { var data = module.longrunningprocess(); }).listen(8888); Servern kan inte ens börja ta hand om inkommande requests tills den första är klar.
Node.js Asynchronous callback module.longrunningprocess(function(data) { //Do something }); Istället för att vänta på svar från en funktion som tar lång tid så skickar vi med en callback. När funktionen är klar exekveras vår callback. På så vis kan vi fortsätta hantera andra requests i väntan på longrunningprocess() Asynchronous callbacks är ett centralt begrepp i Node.js och används väldigt mycket
Node.js Vi har tittat på callbacks som en del av Node.js Innan vi tittar på ett större exempel ska vi titta på: Egna moduler Organisation av filer i projekt NPM (plugin system till Node.js) Istanbul (code-coverage) Mocha (unit tests)
Node.js - Modules var http = require("http"); function start() { function onrequest(request, response) { console.log("request received."); response.writehead(200, {"Content-Type": "text/plain"}); response.write("hello World"); response.end(); Vi använde tidigare http } modulen, hur skapar vi egna? http.createserver(onrequest).listen(8888); console.log("server has started."); } exports.start = start; Spara koden i en fil som kallas server.js Lite annorlunda upplägg på server koden här
Node.js - Modules var server = require("./server"); server.start(); I en annan fil kan vi nu inkludera vår modul server
Node.js - Organisation & NPM Skapa en mapp för projektet (projektmappen) I projektmappen skapar man mapparna lib och test NPM är ett paket system som laddar ner moduler, lite som apt i Debian baserade Linux system När man använder NPM skall man stå i roten av projektet (dvs projektmappen) Första gången man använder NPM skapas mappen node_modules i projektmappen. 13
Mocha Testning av Node.js Stå i roten av projektet och exekvera npm install mocha -g //installera globalt npm install should npm install superagent Skriv testfall och placera de i mappen test Observera: Testverktyget Mocha tillåter många olika sätt att skriva testfall på. mocha 15
Mocha Code Coverage Installera Istanbul npm install istanbul -g istanbul cover _mocha -- test 16
Node.js Standard uppsättning /lib requesthandlers.js route.js server.js main.js /lib-coverage "instrumented" versioner /npm_modules Installerade moduler /test test.js Läs på http://www.nodebeginner.org/ 14
Node.js Express Ett ramverk för node Underlätta och snabba upp utveckling av node.js backends mkdir app cd app npm init npm install express save var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('hello World!'); }); var server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('example app listening at http://%s:%s', host, port); }); 14
Node.js express-generator Stövelstroppa utvecklingen npm install express-generator -g Ramverk byggda uppe på express Feathers: Build prototypes in minutes and production ready real-time apps in days. ItemsAPI: Search backend for web and mobile applications built on Express and Elasticsearch. KeystoneJS: Website and API Application Framework / CMS with an auto-generated React.js Admin UI. Kraken: Secure and scalable layer that extends Express by providing structure and convention. LEAN-STACK: The Pure JavaScript Stack. LoopBack: Highly-extensible, open-source Node.js framework for quickly creating dynamic end-to-end REST APIs. MEAN: Opinionated fullstack JavaScript framework that simplifies and accelerates web application development. Sails: MVC framework for Node.js for building practical, production-ready apps. Bottr: Framework that simplifies building chatbot applications. Hydra-Express: Hydra-Express is a light-weight library which facilitates building Node.js Microservices using ExpressJS. Blueprint: Highly-configurable MVC framework for composing production-ready services from reusable components Locomotive: Powerful MVC web framework for Node.js from the maker of Passport.js
Laboration 2 Kom ihåg att en del av kravlistan är att installera Node.js, NPM, express, Mocha, Istanbul och MongoDB. Men hjälp gärna varandra, detta räknas inte som fusk. 17
TDP013 MongoDB & Node.js MongoDB Driver Anders Fröberg Institutionen för Datavetenskap (IDA)
Statisk filserver Vi vill kunna skicka information till servern via HTTP som vi senare kan hämta igen och uppdatera vår sida med. Node.js
Information skickas in via s k query eller förfrågan till databasen. Information hämtas från databasen via en annan typ av query.
Vi vill att detta ska ske från Node.js, eftersom det är vår server som skall skriva till och hämta data via queries. Man kan ofta nå databasen från command line, vilket vi också ska titta på.
ID NAME BALANCE 1 Anders 100 2 Erik 20 3 Jalal 200 Cassandra CouchDB MongoDB DynamoDB Datastore... Sparar information annorlunda, grafer, key-value, json, xml, etc...
MongoDB - humongous db Istället för att spara information i tabeller (som vi är vana vid hos SQL databaser så som MySQL), så sparas information som JSON objekt. JSON objekten sparas i Collections, t ex Movie, Actor, Director etc, detta kan man jämföra med tabeller hos SQL databaser. Den stora skillnaden är att vi aldrig talar om för databasen vad en Movie innehåller, dvs vi definierar aldrig några kolumner. Vi säger bara till MongoDB att spara ett JSON objekt som en Movie. Det finns alltså ingen garanti att två Movie objekt innehåller samma typer av värden, t ex title, length, etc...
MongoDB - Exempel (MongoDB måste vara installerad och startad) Logga in via terminal: mongo Visa alla databaser: show dbs JSON objekt Använd databasen tdp013: use tdp013 OBS: Om databasen inte finns så skapas den Spara ett nytt objekt i collection movie i tdp013: db.movie.insert({ a : 1 }) Lista alla objekt i collection movie: db.movie.find() Läs på om alla funktioner i MongoDB dokumentationen
Node.js MongoDB Driver npm install mongodb (stå i projektmappen) var mongo = require('mongodb'); var server = new mongo.server('localhost', 27017); var db = new mongo.db('tdp013, server); db.open(function(err, db) { if(!err) { console.log("we are connected"); } }); Återigen, async callbacks...
Node.js MongoDB Driver Alla JSON objekten hamnar i db.collection( person', function(err, collection) { samma collection person, men inte alla definierar age var doc1 = {name : 'anders'}; var doc2 = {name : 'rita'}; var docs = [{name : 'd', age : 25}, {name : 'f', age : 22}]; collection.insert(doc1); collection.insert(doc2, function(err, result) { console.log("inserted doc2"); }); }); } }); collection.insert(docs); Om man vill kan man definiera en callback
Node.js MongoDB Driver var findbyname = function(namevalue, callback) { db.open(function(err, db) { if(!err) { db.collection( person', function(err, collection) { collection.find({ name : namevalue }).toarray(function(err, docs) { callback(docs); }); });}});}; findbyname('anders', function(docs) { console.log(docs); db.close(); });
Node.js MongoDB Driver - Find Terminal: db.person.find() { "name" : "anders", "_id" : ObjectId("500c6a8dce38750d46000001") } { "name" : "rita", "_id" : ObjectId("500c6a8dce38750d46000002") } { "name" : "d", "age" : 25, "_id" : ObjectId("500c6a8dce38750d46000003") } { "name" : "f", "age" : 22, "_id" : ObjectId("500c6a8dce38750d46000004") } Alla objekt som skrivs till databasen får ett ObjectId
Node.js MongoDB Driver - Id var findbyid = function(stringid, callback) { db.open(function(err, db) { if(!err) { var objectid = new mongo.objectid(stringid); db.collection( person', function(err, collection) { collection.findone({ _id : objectid}, function(err, docs) { callback(docs); }); });}});}; findbyid("500c6a8dce38750d46000002", function(docs) { console.log(docs); });
Nu har vi alla bitar vi behöver för att uppnå det vi först eftersökte... Laboration 2
www.liu.se