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

Full-stack JavaScript Development (rev. 2013)

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

8aba5b0bf34593a56a3a3c733c021ab2?s=128

Tomislav Capan

October 22, 2013
Tweet

More Decks by Tomislav Capan

Other Decks in Technology

Transcript

  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 - UX • Bootstrap • Foundation, etc gridovi

    • Topcoat • Purecss • Kendo UI • jQueryUI • YUI
  9. Client Side - MV* • KnockoutJs • BackboneJs ◦ +MarionetteJS

    • AngularJs • EmberJs • CanJS • ...
  10. Modularizacija AMD - Asynchronous Module Definition • RequireJs • almond

    • Curl • StealJS
  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)..
  12. Testing • Testing ◦ Jasmine, Mocha, Chai, SinonJs ◦ CasperJs

    + PhantomJs ◦ TestSwarm, BrowserStack • CI ◦ self-hosted: TeamCity, Jenkins ◦ SaaS: Travis CI, CircleCI
  13. Project Scaffold • Yo (aka Yeoman) • Brunch

  14. Package Manager • Bower • Jam • Ender

  15. Dev tooling • Build ◦ Maven? ◦ Ručno pisane skripte?

    ◦ GruntJs
  16. GruntJs - JS alati • Kvaliteta JS koda ◦ JSLint

    / JSHint • Optimizacija JS koda ◦ concatenatori ◦ minifieri ◦ uglifieri ◦ client-side template builderi
  17. GruntJs - CSS alati • CSS preprocessori ◦ Less ◦

    Sass (libSass) ◦ Stylus • CSS minifier
  18. GruntJs - Testing alati • Test runneri ◦ Mocha -

    server-side ◦ Mocha - client-side ◦ Jasmine ◦ CasperJs / PhantomJs
  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
  20. GruntJS rulez! • uglavnom sve dostupno kao GruntJs plugin ◦

    ...ili će uskoro biti...
  21. Full Stack Yeoman

  22. Uspjeh Batman!

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