JAVASCRIPT na frontendu Miho Tomić
JavaScript
Feb 15, 2016
JavaScript. n a frontendu. Miho Tomić. 3. JavaScript Evolucija. JavaScript evolucija. JavaScript evolucija. jQuery je odličan. JavaScript evolucija. jQuery je odličan, ali. $.getJSON("/items", function (data) { var list = ""; $.each(data, function (index, value) { - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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?
Related Documents
