Presentation from a [email protected] Zagreb User Group held on 7th November 2012
Full-stackJavaScriptDevelopmentalati za pomoć u razvoju JavaScriptaplikacijaKrešimir Antolić (@kantolic)Tomislav Capan (@tomislavcapan)
View Slide
JavaScript
Server Side● JavaScript - jezik● node.js - platforma● express - web framework
Templating Engines● Mustache○ minimal; passive view● Handlebars○ minimal on steroids: mustache + helpers● Jade○ HAML-like; (pre)bogat● Underscore○ minimalan, dolazi uz underscore toolkit
Server Side - zaključak● Rezultat○ server-side website / webapp○ isto kao i PHP/Ruby/Python/ASP.Net itd.● Node.js○ not a silver bullet
Client Side● server zadužen samo za manipulacijupodataka● preglednik zadužen za prikaz podataka ikorisničkih akcija
Client Side● 1. generacija: libraryji● 2. generacija: MV* frameworci○ trenutno u fokusu● 3 generacija○ trenutno još fuzzy budućnost○ cilj: integracija
Client Side - MV*● KnockoutJs● BackboneJs○ +MarionetteJS● AngularJs● EmberJs● CanJS● ...
Client Side - UX● Bootstrap● Kendo UI● jQueryUI● YUI● ExtJs● Dojo
ModularizacijaAMD - Asynchronous Module Definition● RequireJs● almond● Curl● StealJS
Debugging● Browser tools○ Firefox FireBug○ Chrome Dev Tools○ Opera DragonFly● Mobile○ Chrome (4+, adb)○ iOS 6 - Safari dev tools○ external (weinre, jsconsole)..
Testing● Testing○ Jasmine, Mocha, Chai,SinonJs○ CasperJs + PhantomJs○ TestSwarm● CI○ self-hosted: TeamCity, Jenkins○ SaaS: Travis CI, CircleCI
Dev tooling● Build○ Maven?○ Ručno pisane skripte?○ GruntJs
GruntJs - JS alati● Kvaliteta JS koda○ JSLint / JSHint● Optimizacija JS koda○ concatenatori○ minifieri○ uglifieri○ client-side template builderi
GruntJs - CSS alati● CSS preprocessori○ Less○ Sass● CSS minifier
GruntJs - Testing alati● Test runneri○ Mocha - server-side○ Mocha - client-side○ Jasmine○ CasperJs / PhantomJs
GruntJs - Deployment alati● Build process○ clean deployment target○ build - concat, lint, minify, uglify...○ copy assets to target○ run tests○ exec shell scripts○ watchers
GruntJS rulez!● uglavnom sve dostupno kao GruntJs plugin○ ...ili će uskoro biti...
Uspjeh Batman!
LinksServer Side● node.js -http://nodejs.org/● express http://expressjs.com/Templating● Mustache - http://mustache.github.com/● Handlebars - http://handlebarsjs.com/● Jade - http://jade-lang.com/● Underscore - http://underscorejs.org/#templateClient-side libs● KnockoutJs - http://knockoutjs.com/● BackboneJs - http://backbonejs.org/○ +MarionetteJS - http://www.marionettejs.com/● AngularJs - http://angularjs.org/● EmberJs - http://emberjs.com/● CanJS - http://canjs.us/
LinksUX● Bootstrap - http://twitter.github.com/bootstrap/● Kendo UI - http://www.kendoui.com/● jQueryUI - http://jqueryui.com/● YUI - http://yuilibrary.com/● ExtJs - http://www.sencha.com/products/extjs/● Dojo - http://dojotoolkit.org/Modularizacija:● RequireJs - http://requirejs.org/● almond - https://github.com/jrburke/almond● Curl - https://github.com/cujojs/curl● StealJS - http://javascriptmvc.com/docs.html#!stealjs
LinksTesting● Mocha - http://visionmedia.github.com/mocha/● Chai - http://chaijs.com/● Jasmine - http://pivotal.github.com/jasmine/● SinonJs - http://sinonjs.org/● PhantomJs - http://phantomjs.org/● CasperJs - http://casperjs.org/CI● CircleCI - https://circleci.com/● TeamCity - http://www.jetbrains.com/teamcity/● Travis CI - http://about.travis-ci.org/● Jenkins - http://jenkins-ci.org/Build● GruntJs - http://gruntjs.com/● Brunch - http://brunch.io/