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

Full-stack JavaScript Development

Full-stack JavaScript Development

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

Avatar for Tomislav Capan

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)
  2. Templating Engines • Mustache ◦ minimal; passive view • Handlebars

    ◦ minimal on steroids: mustache + helpers • Jade ◦ HAML-like; (pre)bogat • Underscore ◦ minimalan, dolazi uz underscore toolkit
  3. Server Side - zaključak • Rezultat ◦ server-side website /

    webapp ◦ isto kao i PHP/Ruby/Python/ASP.Net itd. • Node.js ◦ not a silver bullet
  4. Client Side • server zadužen samo za manipulaciju podataka •

    preglednik zadužen za prikaz podataka i korisničkih akcija
  5. Client Side • 1. generacija: libraryji • 2. generacija: MV*

    frameworci ◦ trenutno u fokusu • 3 generacija ◦ trenutno još fuzzy budućnost ◦ cilj: integracija
  6. Client Side - MV* • KnockoutJs • BackboneJs ◦ +MarionetteJS

    • AngularJs • EmberJs • CanJS • ...
  7. Client Side - UX • Bootstrap • Kendo UI •

    jQueryUI • YUI • ExtJs • Dojo
  8. Debugging • Browser tools ◦ Firefox FireBug ◦ Chrome Dev

    Tools ◦ Opera DragonFly • Mobile ◦ Chrome (4+, adb) ◦ iOS 6 - Safari dev tools ◦ external (weinre, jsconsole)..
  9. Testing • Testing ◦ Jasmine, Mocha, Chai, SinonJs ◦ CasperJs

    + PhantomJs ◦ TestSwarm • CI ◦ self-hosted: TeamCity, Jenkins ◦ SaaS: Travis CI, CircleCI
  10. GruntJs - JS alati • Kvaliteta JS koda ◦ JSLint

    / JSHint • Optimizacija JS koda ◦ concatenatori ◦ minifieri ◦ uglifieri ◦ client-side template builderi
  11. GruntJs - Testing alati • Test runneri ◦ Mocha -

    server-side ◦ Mocha - client-side ◦ Jasmine ◦ CasperJs / PhantomJs
  12. GruntJs - Deployment alati • Build process ◦ clean deployment

    target ◦ build - concat, lint, minify, uglify... ◦ copy assets to target ◦ run tests ◦ exec shell scripts ◦ watchers
  13. 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/
  14. 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
  15. 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/