JavaScript

JAVASCRIPTna frontendu

Miho Tomić

3

JavaScriptEvolucija

JAVASCRIPT EVOLUCIJA

• jQuery je odličan

JAVASCRIPT EVOLUCIJA

$.getJSON("/items", function (data) {

var list = "";$.each(data, function (index, value) {

list += "<li id=\"item-" + value.Id + "\">" + value.Name + "</li>";});$("ul").append(list);

$("li").click(function () {var $this = $(this);var id = $this.attr("id").replace("item-", "");$.post("/items", { id: id }, function () {

$this.fadeOut(function () {$this.remove();

});});

});});

• jQuery je odličan, ali...

JAVASCRIPT EVOLUCIJA

$.getJSON("/items", function (data) {

var list = "";$.each(data, function (index, value) { list += "<li id=\"item-" + value.Id + "\">" + value.Name + "</li>";});$("ul").append(list);

$("li").click(function () {var $this = $(this);var id = $this.attr("id").replace("item-", "");$.post("/items", { id: id }, function () {

$this.fadeOut(function () {$this.remove();

});});

});});

• jQuery je odličan, ali...• callback hell

JAVASCRIPT EVOLUCIJA

• Apstrakcija

• Razdvajanje UI od podataka

• Pojednostavniti callback

JAVASCRIPT EVOLUCIJA

Što nam je potrebno?

Što nam je potrebno?• RESTful servis za rad s podacima

• Eventi

• Template sustav

• Sustav za navigaciju stranicama

• „Maleni” JavaScript framework

JAVASCRIPT EVOLUCIJA

Postoji rješenje Javascript framework

Knockout.js

CanJS

JavascriptMVC

Cappucino

Sproutcore

Batman.js

Ember.js Angular.js

Agility.jsSammy.js

Fidel

Backbone.js

Backbone.js

Nudi strukturu web aplikaciji: • Model

• Collection

• View

BACKBONE.JS

• jQuery

• Underscore.js

• Json2.js

BACKBONE.JS

MVC

Model / CollectionTemplate (View)View (Controller)Router

BACKBONE.JS

MVC

Model / Collection

Template (View)View (Controller)Router

BACKBONE.JS

MVC

Model / CollectionTemplate (View)

View (Controller)Router

BACKBONE.JS

MVC

Router

BACKBONE.JS

Model / CollectionTemplate (View)View (Controller)

MVC

BACKBONE.JS

Model / CollectionTemplate (View)View (Controller)Router

• Predstavlja podatke

• Perzistencija

• Eventi

MODEL

Backbone.jsModel / Collection - View - Template - Router

Model

• Fetch HTTP GET /url

• Save (novi) HTTP POST /url

• Save HTTP PUT /url/id• Destroy HTTP DELETE /url/id

var Item = Backbone.Model.extend({idAttribute: “id”,

url: “/items”});

Backbone.jsModel / Collection - View - Template - Router

var item = new Item();item.set({name: “Appstart”

}); // trigger event changeitem.save(); // trigger event sync

Backbone.jsModel / Collection - View - Template - Router

Collection• Lista modela• Underscore metode

var Items = Backbone.Collection.extend({model: Item,url:

"/items"});

Backbone.jsModel / Collection - View - Template - Router

var items = new Items();items.fetch(); // trigger reset

Backbone.jsModel / Collection - View - Template - Router

View• Manipulacija DOM-a

• Delegira DOM evente• Sadrži Model / Collection

Backbone.jsModel / Collection - View - Template - Router

View

View (Collection)

View (Model)

var ListView = Backbone.View.extend({ el: $("ul"),

initialize: function () { this.collection.bind("reset", this.render, this);},render: function () {this.collection.each(this.addItem, this);return this;

},addItem: function (item) {var itemView = new ItemView({ var ItemView = Backbone.View.extend({

model: item tagName: "li",}); render: function () {

this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));itemView.render(); return this;} }

}); });

Backbone.jsModel / Collection - View - Template - Router

var ListView = Backbone.View.extend({el: $("ul"),initialize: function () {this.collection.bind("reset", this.render, this);},render: function () {this.collection.each(this.addItem, this);return this;},addItem: function (item) {var itemView = new ItemView({ var ItemView = Backbone.View.extend({

model: item tagName: "li",}); render: function () {this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));itemView.render(); return this;

} }}); });

Backbone.jsModel / Collection - View - Template - Router

var ListView = Backbone.View.extend({ el: $("ul"),

initialize: function () {this.collection.bind("reset", this.render, this);

},render: function () {this.collection.each(this.addItem, this);return this;},addItem: function (item) {var itemView = new ItemView({ var ItemView = Backbone.View.extend({

model: item tagName: "li",}); render: function () {

this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));itemView.render(); return this;

} }}); });

Backbone.jsModel / Collection - View - Template - Router

var ListView = Backbone.View.extend({ el: $("ul"),

initialize: function () {this.collection.bind("reset", this.render, this);

},render: function () {this.collection.each(this.addItem, this);return this;},addItem: function (item) {var itemView = new ItemView({ var ItemView = Backbone.View.extend({

model: item tagName: "li",}); render: function () {

this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));itemView.render(); return this;

} }}); });

Backbone.jsModel / Collection - View - Template - Router

var ListView = Backbone.View.extend({ el: $("ul"),

initialize: function () {this.collection.bind("reset", this.render, this);},render: function () {this.collection.each(this.addItem, this);return this;},addItem: function (item) {var itemView = new ItemView({ var ItemView = Backbone.View.extend({

model: item tagName: "li",}); render: function () {this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));itemView.render(); return this;

} }}); });

Backbone.jsModel / Collection - View - Template - Router

var ListView = Backbone.View.extend({ el: $("ul"),

initialize: function () {this.collection.bind("reset", this.render, this);},render: function () {this.collection.each(this.addItem, this);return this;},addItem: function (item) {var itemView = new ItemView({ var ItemView = Backbone.View.extend({

model: item tagName: "li",}); render: function () {

this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));itemView.render(); return this;

} }}); });

Backbone.jsModel / Collection - View - Template - Router

});

var items = new Items();var listView = new ListView({

collection: items

items.fetch();

Backbone.jsModel / Collection - View - Template - Router

Template (Underscore.js)

JavaScript template služe za prikaz podataka modela.

• Mustache• HandleBars

Backbone.jsModel / Collection - View - Template - Router

<script type="text/template" id="item-template"> <li>

<%= name %></li></script>

var ItemView = Backbone.View.extend({…template: _.template($("#item-template").html()),

render: function () {this.$el.html(this.template(this.model.toJSON()));return this;}…

});

Backbone.jsModel / Collection - View - Template - Router

Router• Mapiranje url u funkcije• Omogućuje povijest

Backbone.jsModel / Collection - View - Template - Router

var AppRouter = Backbone.Router.extend({ routes: {

"": "initialize“},initialize: function () {…

}});

Backbone.js

Linkedin

Backbone.js

FourSquare

Backbone.js

Groupon

Backbone.js

+• Malen• Moćan• Kod je čist (lako se održava)

-• Presložen (kod manjih aplikacija)• Nije pravi framework

3

AngularJS

• MVC framework

ANGULARJS

• MVC framework

• namijenjen CRUD aplikacijama

ANGULARJS

• MVC framework

• Namijenjen CRUD aplikacijama

• Two – way povezivanje podataka

ANGULARJS

• MVC framework

• Namijenjen CRUD aplikacijama

• Two – way povezivanje podataka• Dependency injection

ANGULARJS

• MVC framework

• Namijenjen CRUD aplikacijama

• Two – way povezivanje podataka• Dependency injection• Direktive

ANGULARJS

• MVC framework

• Namijenjen CRUD aplikacijama

• Two – way povezivanje podataka• Dependency injection• Direktive• Testiranje

ANGULARJS

3

Libraries

• Twitter Bootstrap

• Highcharts.js

• Jasmine.js

• Require.js

LIBRARIES

Tools

• IntelliJ IDEA / WebStorm

• Chrome Developers Tools

• Pagespeed

TOOLS

F5

TOOLS

3

Tips &Tricks

Tips & Tricks

Nije cilj naučiti sve frameworke!

Tips & Tricks

Angular ili BackBone?

miho.tomic@infobip.com

PITANJA?Hvala na pažnji