TDP013 Node.js, JSCoverage, Mocha. Marcus Bendtsen Institutionen för Datavetenskap

Relevanta dokument
TDP013. Node.js, Mocha, Istanbul. Anders Fröberg Institutionen för Datavetenskap

TDP013. JavaScript,Node.js, Mocha, Istanbul,Mongo. Anders Fröberg Institutionen för Datavetenskap

TDP013. Webbprogrammering och interaktivitet. AJAX, CORS & jquery. Marcus Bendtsen Institutionen för Datavetenskap (IDA)

Föreläsning 4 Serverskript PHP Validering av data med serverskript Formulär

Webbservrar, severskript & webbproduktion

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

E13 "Behind the Wild"

E12 "Evil is going on"

1ME323 Webbteknik 3 Lektion 6 API. Rune Körnefors. Medieteknik Rune Körnefors

F8 Webbteknologier 1. Dynamiska webbsidor

Ajax TruClient. Erfarenheter, tips och trix från Swedbank IT. Christian Gerdes Performance Engineer, LIGHTS IN LINE AB

TDP013. Innan AJAX Ett synkront webb. Med AJAX Ett Asynkront webb

TDP003 Projekt: Egna datormiljön

On-line produktion TDDC61

Modern webbutveckling. av Robert Welin-Berger

Användarhandledning Version 1.2

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, Internet började med ARPANET

Hybridappar. Utveckla mobilappar i HTML, Javascript och CSS

JAVASCRIPT-POWERED LOADRUNNER CHRISTIAN GERDES PERFORMANCE ENGINEER LIGHTS IN LINE AB

Prova på-laboration i PHP Johan Sjöholm johsj@ida.liu.se Institutionen för datavetenskap, Linköpings universitet

PHP. Dynamiska webbsidor

Webbprogrammering. Sahand Sadjadee

Avancerade Webbteknologier

Modul 8 Hantering av indata

Elektronisk publicering TNMK30

Exemple på Tentauppgifter Webbprogrammering

729G28. Webbprogrammering och databaser. Introduktion till webbutveckling med PHP. Jakob Pogulis Institutionen för Datavetenskap (IDA)

PHP. TNMK30 - Elektronisk publicering

Skissa och gissa. Individuellt Mjukvaruutvecklingsprojekt, 1DV430. Christian Nilsson, cn222gc, WP

Webbutveckling med AngularJS

Webbsidor och webbservrar

Introduktion Schenker-BTL AB, Stab IT Beskrivning över informationsintegreringmed Schenker, metodbeskrivning version 1.

Laboration 4. Laboration 4, Formulärvalidering. Inledning. Observera. Mål. Genomförande

WP-Edit. Robin Larsson Martin Davik. Examensarbete, grundnivå, 15 hp Datavetenskap Internetteknologprogrammet

Services + REST och OAuth

Webbprogrammering TDDD52

DB, DATA, LOGIC, EXPOSURE (WEB)

L04.1 Marodören. Inledning. Mål. Genomförande. Uppgift 1 Hello World. Moment I

Innehålls förteckning

TDP013. Innan AJAX Ett synkront webb. Med AJAX Ett Asynkront webb AJAX. Webbprogrammering och interaktivitet. AJAX, CORS,jQuery, PaaS, Projektet

TDP013. Webbprogrammering och interaktivitet. AJAX, CORS,jQuery, PaaS, Projektet. Anders Fröberg Institutionen för Datavetenskap (IDA)

E13 Behind the Wild. Dagens agenda. Cookies Context/ändra context Augmentation (förstärkning) Klassiskt arv Att låna metoder Namespaces Postludium

INTRODUKTION TILL ANGULAR JS

Slutrapport YUNSIT.se Portfolio/blogg

Laboration 1 XML, XPath, XSLT och JSON

Webbteknik II. Föreläsning 5. Restless farewell. John Häggerud, 2011

Introduktion till integrering av Schenkers e-tjänster. Version 2.0

Föreläsning 3. Programmering, C och programmeringsmiljö

Kursplanering Utveckling av webbapplikationer

On-line produktion TDDC61

Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer.

Föreläsning 3. Programmering, C och programmeringsmiljö

Grundkurs i programmering - intro

Piff och Puffs Chatsystem

emopluppen Användning av "Ant" Niklas Backlund Version: 1.4 ( 2002/04/26 07:27:52 UTC)

Tentamen etjänster och webbprogrammering

F8 Webbteknologier 2. PHP PHP: Hypertext Preprocessor

Alla filer som bearbetar PHP script ska avslutas med ändelsen.php, exempelvis ska en indexsida till en hemsida heta index.php

E-legitimationsnämndens legitimeringstjänster för test

Laboration 2 RESTful webb-api

Kort om World Wide Web (webben)

Programmering i C++ Kompilering från kommandoraden

Labora&on 8 Formulär övningar/uppgi6er

JAVASCRIPT. Beteende

Hå rd- och mjukvårukråv såmt rekommendåtioner fo r 3L Pro from version 2013.Q3

Elektronisk publicering TNMK30

JavaScript in SharePoint and not just for Apps. Wictor Wilén

Systemutvecklare SU14, Malmö

Axiell Arena. Optimering av prestanda

PHP-presentation Dataföreningens Open Source-nätverk

Karlstads Universitet, Datavetenskap 1

F8 Webbteknologier 2. EDA095 Nätverksprogrammering. Roger Henriksson Datavetenskap Lunds universitet

Installationsmanual Onepix RSS Vatech SVENSK

Guide för Innehållsleverantörer

Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem

Hå rd- och mjukvårukråv såmt rekommendåtioner fo r 3L Pro from version 2015.Q1

Introduktion till användning av linux-servern sledge och några övningsuppgifter

Webbprogrammering - 725G54 PHP. Foreläsning II

Axiell Arena Visa BOOK-IT:s resurser

Alla rättigheter till materialet reserverade Easec

Webbteknik II. Föreläsning 4. Watching the river flow. John Häggerud, 2011

Statistik från webbplatser

Webbgenvägar. Krishna Tateneni Yves Arrouye Översättare: Stefan Asserhäll

Webbtjänster med API er

E12 "Evil is going on"

Uppgiftskravstjänsten Teknisk anslutning för att hämta uppgiftskrav som öppna data. Version 1.0

Domänspecifika språk. TDP007 Konstruktion av datorspråk Föreläsning 5. Peter Dalenius Institutionen för datavetenskap

Skicka och hämta filer med automatik

Backcode. Jonathan Crusoe TDP019 Projekt: Datorspråk Linköpings universitet

Handledning för installation och komma igång med Joomla

SQUID. och andra cachelösningar

SLUTRAPPORT RUNE TENNESMED WEBBSHOP

1. Säkerhetskopiera den eller de byråer du har arbetat med via i Visma Klient.

98 / 100 Hastighet. PageSpeed Insights. Överväg att Fixa: Utnyttja cachelagring i webbläsare. 9 Godkända Regler. Mobil

Metoder. Inledande programmering med C# (1DV402)

1ME323 Webbteknik 3 Lek0on 6 API. Rune Körnefors. Medieteknik Rune Körnefors rune.kornefors@lnu.se

Linuxadministration 2 1DV421 - Laborationer Webbservern Apache, Mailtjänster, Klustring, Katalogtjänster

Programmeringteknik. Planering MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Användarmanual för. Internetbokningen. Version 1.0

Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 4. Peter Dalenius Institutionen för datavetenskap

Transkript:

TDP013 Node.js, JSCoverage, Mocha Marcus Bendtsen Institutionen för Datavetenskap

Å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."?

En miljö för att köra JavaScript på servern, dvs man kan köra JavaScript utanför webbläsaren. Node.js 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

Med Node.js skapar vi en HTTP server med hjälp av JavaScript Node.js 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".

var http = require('http'); var url = require('url'); Node.js GET Parameters 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) JSCoverage (code-coverage) Mocha (unit tests)

var http = require("http"); Node.js - Modules 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 Code Coverage Installera JSCoverage (inte en NPM modul) finns på GitHub Stå i projektmappen och exekvera jscoverage lib lib-coverage då skapas mappen lib-coverage och placerar instrumented versioner av lib filerna i mappen lib-coverage. De testfall man skriver skall testa de "instrumenterade" versionerna av servern, dvs de som finns i lib-coverage 16

Mocha Testning av Node.js Stå i roten av projektet och exekvera npm install mocha 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å, ta notis på hur källkoden från föreläsningen gör för att undvika friktion i arbetet../node_modules/.bin/mocha -R html-cov > coverage.html Öppna coverage.html för att se code-coverage 15

Node.js Live Demo /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

Laboration 2 Kom ihåg att en del av kravlistan är att installera Node.js, NPM, Mocha, JSCoverage och MongoDB. Men hjälp gärna varandra, detta räknas inte som fusk. Oftast måste man ladda ner källkoden för Node.js, NPM och JSCoverage och bygga själv. Kom ihåg att köra JScoverage varje gång ni ändrat er node.js kod innan ni kör Mocha 17

www.liu.se