NODE.JS &WEBAPPSFYRIRLESTUR 22, 10. NÓVEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, KJARNI@GMAIL.COM

VINSÆLIR PAKKAR – functional programming helper library

– higher-order functions and common patterns forasynchronous code

– Simplified HTTP request client

– Sinatra inspired web development framework

underscore

async

request

express

VINSÆLIR PAKKAR – Real-time apps made cross-browser & easy

with a WebSocket-like API

– simple, flexible, fun test framework

– A utility library delivering consistency,customization, performance, & extras.

Skrifað til að bæta underscore,

socket.io

mocha

lodash

orðið að supersetti meðt.d. betra performance

GRUNTTask runner

Sér um handvirku hlutina og gerir þá sjálfvirka – útbúa cssúr preprocessor, minifia script og css, þjappa myndumo.s.fr.

Byggt á tasks sem er safnað saman í flæði

til að gera allskonarMikið til af plugins

http://gruntjs.com/

GRUNT DÆMImodule.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']);};

GULPStreymandi build system

Byggt til að vera einfalt, hratt og auðvelt að læra

fyrir sértæka virkniPlugins notuð

http://gulpjs.com/

GULP DÆMIvar gulp = require('gulp');var uglify = require('gulp-uglify');gulp.task('compress', function() { gulp.src('lib/*.js') .pipe(uglify()) .pipe(gulp.dest('dist'))});

BOWERSér um pakka fyrir framenda

Virkar á svipaðan hátt og NPM

Einfalt að sækja, uppfæra og henda pökkum

http://bower.io/

YEOMANSamansafn af tólum og best practices við að byggja vefi

Útbýr strúktúr fyrir verkefnið þitt – scaffolding

Vinnur með Bower og Grunt

http://yeoman.io/Screencast um Yeoman

PROMISESPromises eru notuð til að samstilla async kóða

Staðgengill gildis sem mun koma í framtíðinni

Auðveldar að vissu leiti að vinna með async kóða

PROMISESPromises voru í node.js core í fyrstu útgáfum en vorutekin út

Alltaf verið eitthvað um notkun en callbacks verið mestnotuð

Búið að staðla promises viðmót í Javascript með

að koma sterkt inn með góðri, hraðri útfærslu

Promises/A+

Bluebird

DÆMI, CALLBACKSfs.readFile("file.json", function(err, val) { if( err ) { console.error("unable to read file"); } else { try { val = JSON.parse(val); console.log(val.success); } catch( e ) { console.error("invalid json in file"); } }});

DÆMI, PROMISESfs.readFileAsync("file.json").then(JSON.parse).then(function(val) { console.log(val.success);}).catch(SyntaxError, function(e) { console.error("invalid json in file");}).catch(function(e){ console.error("unable to read file")});

JAVASCRIPT COMPILERSEkki allir sem vilja skrifa í JavaScript

Forritunarmál sem þýdd eru í JavaScript

Leysa vankanta á málinu eða bæta við virkni

COFFEESCRIPTBætir við ýmsum sykri, innblásnum af Ruby, Python ogHaskell

Léttir töluvert á línumagni og er lesanlegra

Getur flækt hlutina þar sem þú ert alltaf á endanum aðþýða yfir í JavaScript

COFFEESCRIPTnumber = 42opposite = truenumber = -42 if opposite

square = (x) -> x * x

list = [1, 2, 3, 4, 5]

http://coffeescript.org/

TYPESCRIPTForritunarmál frá Microsoft sem er application-scale

Bætir við statískum týpum og hlutbundinni forritun

Strangt "ofursett" af JavaScript

http://www.typescriptlang.org/

TYPESCRIPT DÆMIclass Student { fullname : string; constructor(public firstname, public middleinitial, public this.fullname = firstname + " " + middleinitial + " " + lastname; }}

interface Person { firstname: string; lastname: string;}

function greeter(person : Person) { return "Hello, " + person.firstname + " " + person.lastname;}

var user = new Student("Jane", "M.", "User");

NÁNARMixu's Node book

The Node Beginner Book

The Art of Node

NodeUp: A Node.js Podcast

WEB APPSVerður alltaf þægilegra og þægilegra að skrifa vefforrit

All flest "mjóir" clientar – treysta á bakenda til að sjá ummest af vinnu

Ný tækni bíður upp á að vefforrit eru jafngóð eða jafnvelbetri en "feitir" clientar

VEFFORRIT – KOSTIRAðgengileg án uppsetningar – þarft aðeins vafra – og ámörgum mismunandi stýrikerfum

Auðvelt að uppfæra, vafri sækir nýjustu útgáfu þegar húner til

Með HTML5 er möguleiki á að gera mjög gagnvirk viðmót

VEFFORRIT – ÓKOSTIRÞurfum í flestum tilfellum nettengingu

Offline first hugmyndafræðin er þó að vinna gegn því

Engin leið til að "eiga" forritið – ef það er fjarlægt er þaðfarið

Bundin af vöfrum, stuðning þeirra og notkun meðalalmennings – þó alltaf minna og minna

ARKITEKTÚRÍ mörgum tilfellum er vef skipt í framenda, bakenda oggagnalag

MVC er mynstur sem er mikið notað til að ná fram þessariskiptingu

Multilayered/multitier arkitektúr einnig til staðar, sér í lagiþriggja-laga

MULTILAYERED/MULTITIERARKITEKTÚR

Leið til að skipta client-server laginu upp þannig aðauðveldara sé að bæta við virkni en ef öllu er blandaðsaman

Þriggja laga arkitektúr algengur og skiptist í:

Presentation – viðmót

Application – forrit

Data – gögn

Layer á við rökrétta uppbyggingu kerfis en tier við fýsískauppbyggingu

MVCModel–view–controller

Kom snemma fram þegar farið var að vinna með GUI

Útfært í Smalltalk á sjöunda áratugnum

Mikið notað í frameworkum fyrir vefforritun

MVCModel – sér um gögnin okkar og ekkert annað, ekkibundið við view eða controller

View – birtir gögn og sendir aðgerðir til controller, geturverið sjálfstætt eða bundið við model

Controller – lætur view fá model gögn og túlkar aðgerðir,bundið við model og view

http://tomdalling.com/blog/software-design/model-view-controller-explained/http://www.codinghorror.com/blog/2008/05/understanding-model-view-controller.html

MVC KOSTIRHelsti kostur MVC er að gera model endurnýtanleg ánbreytinga

Model er ekki háð því hvernig það er birt og því getum viðeinfaldað það

Verður auðvelt að útfæra nýja birtingu á sömu gögn ogjafnvel að útfæra endurnýtanleg view

GAGNAGRUNNARÞurfum að velja gagnagrunn sem hentar verkefninu

SQL

Open source – MySQL, sqlite, postrgresql

Lokaðir – Oracle, MSSQL, DB2

NoSQL

CoucheDB, MongoDB, redis, Cassandra

FORRITUNARUMHVERFIAll flest forritunarumhverfi hafa stuðning við vefforritun

Sum henta betur en önnur og hafa traust forritasöfn fyrirvefinn

HTTP stuðningur, öryggi, caching o.fl

.NET, PHP, Java, Python, Ruby, node.js þau helstu

FRAMEWORKSHvert forritunarumhverfi hefur upp á að bjóða mörgmismunandi framework

Leysa algeng vandamál og létta algeng verkefni

Hvetja til góðra vinnubragða, skipulags og endurnýtingar

FRAMEWORKS – DÆMIJava – Java EE, Spring, Grails

.NET – ASP.NET, MVC

PHP – CakePHP, Zend Framework, Symfony

Python – Django, web2py, Flask

Ruby – Ruby on Rails, Sinatra

Node.js – Express, Geddy

ROUTINGFramework geta hjálpað okkur við að útbúa góð og skýrURL

"Friendly URL" eru slóðir sem auðvelt er að lesa úr ognota, bæði af fólki og vélum

/programming/weben ekki/?category=programming&sub=web

Einnig stuðningur við gagnaflutning, t.d. senda heiltölugegnum URL

/blog/entry/1 skilar okkur færslu með id = 1 fyrir blog

ROUTING DÆMI - DJANGOfrom django.conf.urls import patterns, url

urlpatterns = patterns('', url(r'^articles/2003/$', 'news.views.special_case_2003'), url(r'^articles/(\d{4})/$', 'news.views.year_archive'), url(r'^articles/(\d{4})/(\d{2})/$', 'news.views.month_archive' url(r'^articles/(\d{4})/(\d{2})/(\d+)/$', 'news.views.article_detail')

ROUTING DÆMI – .NET MVCRoutes.MapRoute( "Default", "{controller}/{action}/{id}", new { controller = "Home", action="Index", id = 1 });

TEMPLATINGTil að birta síðu þurfum við að hafa útlit fyrir hana –eitthvað ákveðið HTML

Template leyfa okkur að útbúa útlit óháð virkni, við fáumgögn og við birtum þau á ákveðinn hátt

Mörg template mál til

TEMPLATE DÆMI –MUSTACHE<h1>{{header}}</h1>{{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}}{{/items}}{{#empty}} <p>The list is empty.</p>{{/empty}}

TEMPLATE DÆMI - XSLT<xsl:template match="/people"> <html> <head> <xsl:value-of select="heading" /></head> <body> <h1>People</h1> <ul> <xsl:apply-templates select="person"> <xsl:sort select="family-name" /> </xsl:apply-templates> </ul> </body> </html> </xsl:template>

FRAMEWORKMörg framework nota MVC

Þarf að setja upp kóða á sérstakan hátt – í sérstakarmöppur

Sum framework geta búið til módelið okkar í gagnagrunniútfrá kóða

http://msdn.microsoft.com/en-us/library/dd410120(VS.98).aspx

MODEL DÆMI – DJANGOfrom django.db import models

class Question(models.Model): question_text = models.CharField(max_length=200) pub_date = models.DateTimeField('date published')

class Choice(models.Model): question = models.ForeignKey(Question) choice_text = models.CharField(max_length=200) votes = models.IntegerField(default=0)

MODEL DÆMI – DJANGOBEGIN;CREATE TABLE "polls_question" ( "id" integer NOT NULL PRIMARY KEY AUTOINCREMENT, "question_text" varchar(200) NOT NULL, "pub_date" datetime NOT NULL);CREATE TABLE "polls_choice" ( "id" integer NOT NULL PRIMARY KEY AUTOINCREMENT, "question_id" integer NOT NULL REFERENCES "polls_poll" ("id" "choice_text" varchar(200) NOT NULL, "votes" integer NOT NULL);COMMIT;

MODEL DÆMI – ASP.NETMVCpublic class Movie { public int Id { get; set; }

[Required(ErrorMessage="Title is a required field.")] public string Title { get; set; }

public DateTime ReleaseDate { get; set; }

[Required(ErrorMessage="Price is a required field.")] [Range (1, 100, ErrorMessage = "Price must be between 1 and 100." public Decimal Price { get; set; }}