JavaScript

JavaScript na frontendu Miho Tomić

3 JavaScriptEvolucija

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) { 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(); }); }); }); });

JavaScript evolucija • jQuery je odličan, ali... • callback hell $.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(); }); }); }); });

JavaScript evolucija Što nam je potrebno? • Apstrakcija • Razdvajanje UI od podataka • Pojednostavniti callback

JavaScript evolucija Što nam je potrebno? • RESTfulservis za rad s podacima • Eventi • Templatesustav • „Maleni” JavaScriptframework • Sustav za navigaciju stranicama

Postoji rješenje  Javascript framework

Angular.js Ember.js Fidel Sammy.js Cappucino Agility.js JavascriptMVC Sproutcore Batman.js CanJS Backbone.js Knockout.js

Backbone.js

Backbone.js Nudistrukturu 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 Model / CollectionTemplate (View) View (Controller) Router

Model • Predstavlja podatke • Perzistencija • Eventi

Backbone.js Model / Collection- View - Template - Router Model • Fetch HTTP GET /url • Save (novi) HTTP POST /url • Save HTTP PUT /url/id • Destroy HTTP DELETE /url/id

Backbone.js Model / Collection- View - Template - Router var Item = Backbone.Model.extend({idAttribute: “id”, url: “/items”});

Backbone.js Model / Collection- View - Template - Router var item = new Item(); item.set({ name: “Appstart” }); // trigger event change item.save(); // trigger event sync

Collection • Lista modela • Underscore metode

Backbone.js Model / Collection- View - Template - Router var Items = Backbone.Collection.extend({model: Item, url: "/items"});

Backbone.js Model / Collection- View - Template - Router var items = new Items(); items.fetch(); // trigger reset

View • Manipulacija DOM-a • Delegira DOM evente • Sadrži Model / Collection

Backbone.js Model / Collection- View - Template - Router View View (Collection) View (Model)

Backbone.js Model / Collection- View - Template - Router varListView = 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) { varitemView = new ItemView({ varItemView = 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.js Model / Collection- View - Template - Router varListView = 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) { varitemView = new ItemView({ varItemView = 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.js Model / Collection- View - Template - Router varListView = 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) { varitemView = new ItemView({ varItemView = 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.js Model / Collection- View - Template - Router var items = new Items(); varlistView = new ListView({collection: items }); items.fetch();

Template (Underscore.js) JavaScript template služe za prikaz podataka modela. • Mustache • HandleBars

Backbone.js Model / Collection- View - Template - Router <script type="text/template" id="item-template"><li> <%= name %></li> </script>

Backbone.js Model / Collection- View - Template - Router varItemView = Backbone.View.extend({… template: _.template($("#item-template").html()), render: function () { this.$el.html(this.template(this.model.toJSON()));return this; } … });

Router • Mapiranje url u funkcije • Omogućuje povijest

Backbone.js Model / Collection- View - Template - Router varAppRouter = 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

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

JavaScript

JavaScript

Presentation Transcript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JAVASCRIPT

JavaScript

JavaScript

JavaScript

Javascript

JavaScript

JAVASCRIPT

JAVASCRIPT

JavaScript