Your SlideShare is downloading. ×
0
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Full stack java script development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Full stack java script development

2,323

Published on

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

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,323
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Full-stackJavaScriptDevelopmentalati za pomoć u razvoju JavaScriptaplikacija 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. ModularizacijaAMD - 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. 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. 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. 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/

×