Weitere ähnliche Inhalte
Ähnlich wie Full stack java script development (20)
Kürzlich hochgeladen (20)
Full stack java script development
- 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
- 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
- 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
- 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/