Downloaded 38 times
Uploaded byTomislav Capan
Full stack java script development
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.
Full stack java script development
- 1. Full-stack JavaScript Development alati za pomoću razvoju JavaScript aplikacija Krešimir Antolić (@kantolic) Tomislav Capan (@tomislavcapan)
- 2.
- 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 ● serverzaduž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 - AsynchronousModule 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 - JSalati ● Kvaliteta JS koda ○ JSLint / JSHint ● Optimizacija JS koda ○ concatenatori ○ minifieri ○ uglifieri ○ client-side template builderi
- 15. GruntJs - CSSalati ● CSS preprocessori ○ Less ○ Sass ● CSS minifier
- 16. GruntJs - Testingalati ● Test runneri ○ Mocha - server-side ○ Mocha - client-side ○ Jasmine ○ CasperJs / PhantomJs
- 17. GruntJs - Deploymentalati ● Build process ○ clean deployment target ○ build - concat, lint, minify, uglify... ○ copy assets to target ○ run tests ○ exec shell scripts ○ watchers
- 18. GruntJS rulez! ● uglavnomsve dostupno kao GruntJs plugin ○ ...ili će uskoro biti...
- 19.
- 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/