Full stack java script development

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 ● serverzaduž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 - AsynchronousModule 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 - JSalati ● Kvaliteta JS koda ○ JSLint / JSHint ● Optimizacija JS koda ○ concatenatori ○ minifieri ○ uglifieri ○ client-side template builderi
• 15.
  GruntJs - CSSalati ● CSS preprocessori ○ Less ○ Sass ● CSS minifier
• 16.
  GruntJs - Testingalati ● Test runneri ○ Mocha - server-side ○ Mocha - client-side ○ Jasmine ○ CasperJs / PhantomJs
• 17.
  GruntJs - Deploymentalati ● Build process ○ clean deployment target ○ build - concat, lint, minify, uglify... ○ copy assets to target ○ run tests ○ exec shell scripts ○ watchers
• 18.
  GruntJS rulez! ● uglavnomsve 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/