The document discusses various tools that can help with full-stack JavaScript development, including Node.js for the server side, templating engines like Mustache and Handlebars, MV* frameworks on the client side like Angular and Ember, debugging tools, testing frameworks, build tools like Grunt, and more. It provides an overview of the options available at each stage of development.

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/