Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Full-stack JavaScript Development

Full-stack JavaScript Development

Presentation from a [email protected] Zagreb User Group held on 7th November 2012

Tomislav Capan

November 07, 2012
Tweet

More Decks by Tomislav Capan

Other Decks in Programming

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 - MV*
    ● KnockoutJs
    ● BackboneJs
    ○ +MarionetteJS
    ● AngularJs
    ● EmberJs
    ● CanJS
    ● ...

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. Uspjeh Batman!

    View Slide

  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/

    View Slide

  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

    View Slide

  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/

    View Slide