Presentation from a Code@Six Zagreb User Group held on 7th November 2012

1. Full-stack
JavaScript
Development
alati za pomoć u razvoju JavaScript
aplikacija
Krešimir Antolić (@kantolic)
Tomislav Capan (@tomislavcapan)

2. JavaScript

3. Server Side
● JavaScript - jezik
● node.js - platforma
● express - web framework

4. Templating Engines
● Mustache
○ minimal; passive view
● Handlebars
○ minimal on steroids: mustache + helpers
● Jade
○ HAML-like; (pre)bogat
● Underscore
○ minimalan, dolazi uz underscore toolkit

5. Server Side - zaključak
● Rezultat
○ server-side website / webapp
○ isto kao i PHP/Ruby/Python/ASP.Net itd.
● Node.js
○ not a silver bullet

6. Client Side
● server zadužen samo za manipulaciju
podataka
● preglednik zadužen za prikaz podataka i
korisničkih akcija

7. Client Side
● 1. generacija: libraryji
● 2. generacija: MV* frameworci
○ trenutno u fokusu
● 3 generacija
○ trenutno još fuzzy budućnost
○ cilj: integracija

8. Client Side - MV*
● KnockoutJs
● BackboneJs
○ +MarionetteJS
● AngularJs
● EmberJs
● CanJS
● ...

9. Client Side - UX
● Bootstrap
● Kendo UI
● jQueryUI
● YUI
● ExtJs
● Dojo

10. Modularizacija
AMD - Asynchronous Module Definition
● RequireJs
● almond
● Curl
● StealJS

11. Debugging
● Browser tools
○ Firefox FireBug
○ Chrome Dev Tools
○ Opera DragonFly
● Mobile
○ Chrome (4+, adb)
○ iOS 6 - Safari dev tools
○ external (weinre, jsconsole)..

12. Testing
● Testing
○ Jasmine, Mocha, Chai,
SinonJs
○ CasperJs + PhantomJs
○ TestSwarm
● CI
○ self-hosted: TeamCity, Jenkins
○ SaaS: Travis CI, CircleCI

13. Dev tooling
● Build
○ Maven?
○ Ručno pisane skripte?
○ GruntJs

14. GruntJs - JS alati
● Kvaliteta JS koda
○ JSLint / JSHint
● Optimizacija JS koda
○ concatenatori
○ minifieri
○ uglifieri
○ client-side template builderi

15. GruntJs - CSS alati
● CSS preprocessori
○ Less
○ Sass
● CSS minifier

16. GruntJs - Testing alati
● Test runneri
○ Mocha - server-side
○ Mocha - client-side
○ Jasmine
○ CasperJs / PhantomJs

17. GruntJs - Deployment alati
● Build process
○ clean deployment target
○ build - concat, lint, minify, uglify...
○ copy assets to target
○ run tests
○ exec shell scripts
○ watchers

18. GruntJS rulez!
● uglavnom sve dostupno kao GruntJs plugin
○ ...ili će uskoro biti...

19. Uspjeh Batman!

20. Links
Server 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/

21. Links
UX
● 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

22. Links
Testing
● 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/