Full stack java script development
Upcoming SlideShare
Loading in...5
×
 

Full stack java script development

on

  • 2,585 views

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

Statistics

Views

Total Views
2,585
Views on SlideShare
2,556
Embed Views
29

Actions

Likes
3
Downloads
33
Comments
0

5 Embeds 29

http://www.linkedin.com 21
https://twitter.com 4
https://www.linkedin.com 2
https://si0.twimg.com 1
http://jolidev10-jolicloud.dotcloud.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Full stack java script development Full stack java script development Presentation Transcript

  • Full-stackJavaScriptDevelopmentalati za pomoć u razvoju JavaScriptaplikacija Krešimir Antolić (@kantolic) Tomislav Capan (@tomislavcapan)
  • 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-like; (pre)bogat● Underscore ○ minimalan, dolazi uz underscore toolkit
  • Server Side - zaključak● Rezultat ○ server-side website / webapp ○ isto kao i PHP/Ruby/Python/ASP.Net itd.● Node.js ○ not a silver bullet
  • 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š fuzzy budućnost ○ cilj: integracija
  • 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 - Safari dev tools ○ external (weinre, jsconsole)..
  • Testing● Testing ○ Jasmine, Mocha, Chai, SinonJs ○ CasperJs + PhantomJs ○ TestSwarm● CI ○ self-hosted: TeamCity, Jenkins ○ SaaS: Travis CI, CircleCI
  • Dev tooling● Build ○ Maven? ○ Ručno pisane skripte? ○ GruntJs
  • GruntJs - JS alati● Kvaliteta JS koda ○ JSLint / JSHint● Optimizacija JS koda ○ concatenatori ○ minifieri ○ uglifieri ○ client-side template builderi
  • 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 assets to target ○ run tests ○ exec shell scripts ○ watchers
  • 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://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/
  • 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
  • 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/