full stack java script development
DESCRIPTION
Presentation from a Code@Six Zagreb User Group held on 7th November 2012TRANSCRIPT
![Page 1: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/1.jpg)
Full-stack JavaScript Developmentalati za pomoć u razvoju JavaScript aplikacija
Krešimir Antolić (@kantolic) Tomislav Capan (@tomislavcapan)
![Page 2: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/2.jpg)
JavaScript
![Page 3: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/3.jpg)
Server Side
● JavaScript - jezik
● node.js - platforma
● express - web framework
![Page 4: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/4.jpg)
Templating Engines● Mustache
○ minimal; passive view
● Handlebars○ minimal on steroids: mustache + helpers
● Jade○ HAML-like; (pre)bogat
● Underscore○ minimalan, dolazi uz underscore toolkit
![Page 5: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/5.jpg)
Server Side - zaključak
● Rezultat○ server-side website / webapp
○ isto kao i PHP/Ruby/Python/ASP.Net itd.
● Node.js○ not a silver bullet
![Page 6: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/6.jpg)
Client Side
● server zadužen samo za manipulaciju podataka
● preglednik zadužen za prikaz podataka i korisničkih akcija
![Page 7: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/7.jpg)
Client Side● 1. generacija: libraryji
● 2. generacija: MV* frameworci○ trenutno u fokusu
● 3 generacija○ trenutno još fuzzy budućnost○ cilj: integracija
![Page 8: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/8.jpg)
Client Side - MV*● KnockoutJs
● BackboneJs○ +MarionetteJS
● AngularJs
● EmberJs
● CanJS
● ...
![Page 9: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/9.jpg)
Client Side - UX● Bootstrap
● Kendo UI
● jQueryUI
● YUI
● ExtJs
● Dojo
![Page 10: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/10.jpg)
ModularizacijaAMD - Asynchronous Module Definition
● RequireJs
● almond
● Curl
● StealJS
![Page 11: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/11.jpg)
Debugging● Browser tools
○ Firefox FireBug○ Chrome Dev Tools○ Opera DragonFly
● Mobile ○ Chrome (4+, adb)○ iOS 6 - Safari dev tools○ external (weinre, jsconsole)..
![Page 12: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/12.jpg)
Testing● Testing
○ Jasmine, Mocha, Chai,SinonJs
○ CasperJs + PhantomJs○ TestSwarm
● CI○ self-hosted: TeamCity, Jenkins○ SaaS: Travis CI, CircleCI
![Page 13: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/13.jpg)
Dev tooling
● Build○ Maven?
○ Ručno pisane skripte?
○ GruntJs
![Page 14: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/14.jpg)
GruntJs - JS alati
● Kvaliteta JS koda○ JSLint / JSHint
● Optimizacija JS koda○ concatenatori
○ minifieri
○ uglifieri
○ client-side template builderi
![Page 15: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/15.jpg)
GruntJs - CSS alati
● CSS preprocessori○ Less
○ Sass
● CSS minifier
![Page 16: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/16.jpg)
GruntJs - Testing alati
● Test runneri○ Mocha - server-side
○ Mocha - client-side
○ Jasmine
○ CasperJs / PhantomJs
![Page 17: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/17.jpg)
GruntJs - Deployment alati
● Build process○ clean deployment target
○ build - concat, lint, minify, uglify...
○ copy assets to target
○ run tests
○ exec shell scripts
○ watchers
![Page 18: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/18.jpg)
GruntJS rulez!
● uglavnom sve dostupno kao GruntJs plugin○ ...ili će uskoro biti...
![Page 19: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/19.jpg)
Uspjeh Batman!
![Page 20: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/20.jpg)
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/#template
Client-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/
![Page 21: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/21.jpg)
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
![Page 22: Full stack java script development](https://reader034.vdocuments.site/reader034/viewer/2022050804/54c82e824a7959e93d8b45f6/html5/thumbnails/22.jpg)
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/