Full-stack JavaScript Developmentalati za pomoć u razvoju JavaScript aplikacija

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/#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/

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/