Full stack java script development
?
3 likes?2,242 views
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. 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 - MV* ● KnockoutJs ● BackboneJs ○ +MarionetteJS ● AngularJs ● EmberJs ● CanJS ● ...
- 9. Client Side - UX ● Bootstrap ● Kendo UI ● jQueryUI ● YUI ● ExtJs ● Dojo
- 10. Modularizacija AMD - Asynchronous Module 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 - JS alati ● Kvaliteta JS koda ○ JSLint / JSHint ● Optimizacija JS koda ○ concatenatori ○ minifieri ○ uglifieri ○ client-side template builderi
- 15. GruntJs - CSS alati ● CSS preprocessori ○ Less ○ Sass ● CSS minifier
- 16. GruntJs - Testing alati ● Test runneri ○ Mocha - server-side ○ Mocha - client-side ○ Jasmine ○ CasperJs / PhantomJs
- 17. GruntJs - Deployment alati ● Build process ○ clean deployment target ○ build - concat, lint, minify, uglify... ○ copy assets to target ○ run tests ○ exec shell scripts ○ watchers
- 18. GruntJS rulez! ● uglavnom sve dostupno kao GruntJs plugin ○ ...ili ?e uskoro biti...
- 19. Uspjeh Batman!
- 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/