Full-stack JavaScript Development (rev. 2013)

A revisited and updated version presentation on full-stack JS tools for FutureDev Zagreb User Group meeting held on 22nd October 2012

Transcript

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

   View Slide

2. JavaScript
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

8. Client Side - UX
   ● Bootstrap
   ● Foundation, etc gridovi
   ● Topcoat
   ● Purecss
   ● Kendo UI
   ● jQueryUI
   ● YUI
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. Project Scaffold
    ● Yo (aka Yeoman)
    ● Brunch
    

    View Slide

14. Package Manager
    ● Bower
    ● Jam
    ● Ender
    

    View Slide

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

    View Slide

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

    View Slide

17. GruntJs - CSS alati
    ● CSS preprocessori
    ○ Less
    ○ Sass (libSass)
    ○ Stylus
    ● CSS minifier
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Full Stack
    Yeoman
    

    View Slide

22. Uspjeh Batman!
    

    View Slide

23. 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/
    

    View Slide

24. 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
    Scaffolding
    ● yo / yeoman - http://yeoman.io/ | https://github.com/yeoman/yo
    ● brunch - http://brunch.io/
    

    View Slide

25. 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/
    

    View Slide