Full stack java script development
3 likes2,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.
More Related Content
What's hot (20)
Similar to Full stack java script development (20)
![Java script nirvana in netbeans [con5679]](https://cdn.slidesharecdn.com/ss_thumbnails/javascriptnirvanainnetbeanscon5679-160927041807-thumbnail.jpg?width=560&fit=bounds)
Recently uploaded (20)
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/