NODE.JS & WEBAPPSosk1/vefforritun/2014/pdf/22.nodejs.pdf · node.js & webapps fyrirlestur 22, 10....
Transcript of NODE.JS & WEBAPPSosk1/vefforritun/2014/pdf/22.nodejs.pdf · node.js & webapps fyrirlestur 22, 10....
NODE.JS &WEBAPPSFYRIRLESTUR 22, 10. NÓVEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, [email protected]
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; }}