Full-stackJavaScriptDevelopmentalati za pomoć u razvoju JavaScriptaplikacija                Krešimir Antolić (@kantolic)  ...
JavaScript
Server Side● JavaScript - jezik● node.js - platforma● express - web framework
Templating Engines● Mustache  ○ minimal; passive view● Handlebars  ○ minimal on steroids: mustache + helpers● Jade  ○ HAML...
Server Side - zaključak● Rezultat  ○ server-side website / webapp  ○ isto kao i PHP/Ruby/Python/ASP.Net itd.● Node.js  ○ n...
Client Side● server zadužen samo za manipulaciju  podataka● preglednik zadužen za prikaz podataka i  korisničkih akcija
Client Side● 1. generacija: libraryji● 2. generacija: MV* frameworci   ○ trenutno u fokusu● 3 generacija   ○ trenutno još ...
Client Side - MV*● KnockoutJs● BackboneJs   ○ +MarionetteJS● AngularJs● EmberJs● CanJS● ...
Client Side - UX● Bootstrap● Kendo UI● jQueryUI● YUI● ExtJs● Dojo
ModularizacijaAMD - Asynchronous Module Definition● RequireJs● almond● Curl● StealJS
Debugging● Browser tools  ○ Firefox FireBug  ○ Chrome Dev Tools  ○ Opera DragonFly● Mobile  ○ Chrome (4+, adb)  ○ iOS 6 - ...
Testing● Testing  ○ Jasmine, Mocha, Chai,    SinonJs  ○ CasperJs + PhantomJs  ○ TestSwarm● CI  ○ self-hosted: TeamCity, Je...
Dev tooling● Build  ○ Maven?  ○ Ručno pisane skripte?  ○ GruntJs
GruntJs - JS alati● Kvaliteta JS koda  ○ JSLint / JSHint● Optimizacija JS koda  ○ concatenatori  ○ minifieri  ○ uglifieri ...
GruntJs - CSS alati● CSS preprocessori  ○ Less  ○ Sass● CSS minifier
GruntJs - Testing alati● Test runneri  ○ Mocha - server-side  ○ Mocha - client-side  ○ Jasmine  ○ CasperJs / PhantomJs
GruntJs - Deployment alati● Build process  ○ clean deployment target  ○ build - concat, lint, minify, uglify...  ○ copy as...
GruntJS rulez!● uglavnom sve dostupno kao GruntJs plugin  ○ ...ili će uskoro biti...
Uspjeh Batman!
LinksServer Side ●    node.js -http://nodejs.org/ ●    express http://expressjs.com/Templating ●    Mustache - http://must...
LinksUX ●   Bootstrap - http://twitter.github.com/bootstrap/ ●   Kendo UI - http://www.kendoui.com/ ●   jQueryUI - http://...
LinksTesting ●      Mocha - http://visionmedia.github.com/mocha/ ●      Chai - http://chaijs.com/ ●      Jasmine - http://...
Upcoming SlideShare
Loading in...5
×

Full stack java script development

2,359

Published on

Presentation from a Code@Six Zagreb User Group held on 7th November 2012

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,359
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Full stack java script development

  1. 1. Full-stackJavaScriptDevelopmentalati za pomoć u razvoju JavaScriptaplikacija Krešimir Antolić (@kantolic) Tomislav Capan (@tomislavcapan)
  2. 2. JavaScript
  3. 3. Server Side● JavaScript - jezik● node.js - platforma● express - web framework
  4. 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. 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. 6. Client Side● server zadužen samo za manipulaciju podataka● preglednik zadužen za prikaz podataka i korisničkih akcija
  7. 7. Client Side● 1. generacija: libraryji● 2. generacija: MV* frameworci ○ trenutno u fokusu● 3 generacija ○ trenutno još fuzzy budućnost ○ cilj: integracija
  8. 8. Client Side - MV*● KnockoutJs● BackboneJs ○ +MarionetteJS● AngularJs● EmberJs● CanJS● ...
  9. 9. Client Side - UX● Bootstrap● Kendo UI● jQueryUI● YUI● ExtJs● Dojo
  10. 10. ModularizacijaAMD - Asynchronous Module Definition● RequireJs● almond● Curl● StealJS
  11. 11. Debugging● Browser tools ○ Firefox FireBug ○ Chrome Dev Tools ○ Opera DragonFly● Mobile ○ Chrome (4+, adb) ○ iOS 6 - Safari dev tools ○ external (weinre, jsconsole)..
  12. 12. Testing● Testing ○ Jasmine, Mocha, Chai, SinonJs ○ CasperJs + PhantomJs ○ TestSwarm● CI ○ self-hosted: TeamCity, Jenkins ○ SaaS: Travis CI, CircleCI
  13. 13. Dev tooling● Build ○ Maven? ○ Ručno pisane skripte? ○ GruntJs
  14. 14. GruntJs - JS alati● Kvaliteta JS koda ○ JSLint / JSHint● Optimizacija JS koda ○ concatenatori ○ minifieri ○ uglifieri ○ client-side template builderi
  15. 15. GruntJs - CSS alati● CSS preprocessori ○ Less ○ Sass● CSS minifier
  16. 16. GruntJs - Testing alati● Test runneri ○ Mocha - server-side ○ Mocha - client-side ○ Jasmine ○ CasperJs / PhantomJs
  17. 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. 18. GruntJS rulez!● uglavnom sve dostupno kao GruntJs plugin ○ ...ili će uskoro biti...
  19. 19. Uspjeh Batman!
  20. 20. LinksServer 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/#templateClient-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. 21. LinksUX ● 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. 22. LinksTesting ● 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×