Full stack java script development

  • 2,128 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,128
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
34
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/