Seznámení s Backbone.js

Páteř poskytuje strukturu, která usnadňuje vývoj frontendu aplikace. Vzhledem k tomu, že se vlastnosti nebo funkce aplikace mění, může být psaný javascript obtížně čitelný, laditelný a v případě potřeby refaktorovat. Backbones organizuje data, která vytváříme, vytváří modely pro naplnění těchto dat a synchronizuje tato data se serverem a ze serveru.

Jak bylo řečeno na Backbone.org "Jeho cílem je poskytnout "minimální sadu strukturování dat (modely a kolekce) a uživatelské rozhraní (zobrazení a adresy URL) a zároveň ponechat vývojářům výběr rozšíření pro vylepšenou funkčnost." Frameworky jako Angular a React jsou populárnější na tentokrát ale mnoho webových aplikací využívá páteř a lze očekávat, že v tom budou pokračovat, dokud nebude vyžadována změna. Páteř je pohodlně nakonfigurována s RESTful API pro přístup k metodám HTTP.

Modely a zobrazení

Designové paradigma implementované pomocí Backbone.js se nazývá MVP (Model–view–presentation). MVP je běžný návrhový vzor při vývoji uživatelského rozhraní. Tradičně tento vzor přebírá rozvinutou programovou logiku a rozděluje ji na čtyři vzájemně propojené komponenty. MVC je vzor, ​​který je v javascriptu velmi oblíbený díky své schopnosti oddělit data a uživatelské rozhraní a zároveň zachovat synchronizaci aplikací.

Model

Dynamická reprezentace kódovaného objektu obsahujícího vazby klíč/hodnota označované také jako data. Poskytování dat pohledu je ústředním prvkem návrhového vzoru. model pracuje nezávisle na uživatelském rozhraní a spravuje logiku a data aplikace. Získává uživatelský vstup z ovladače. Když se data změní, model spustí událost, která aktualizuje kontrolér. Modely se používají kdekoli v aplikaci, kde jsou potřeba data.

Zobrazit

pohled je prezentace dat, která jsou reprezentována modelem v určitém formátu. Poslouchá události z uživatelského rozhraní. Zabývá se interaktivitou webové aplikace a uživatelským vstupem. Tento vstup je poté odeslán do modelu. Pohledy se vykreslují podle změn odeslaných z modelu nebo modelů. Neobsahují žádná data, ale vytvářejí html, který má být odeslán do objektového modelu dokumentu nebo DOM.

// create a collection class or model by extending Backbone.Model
let Default = Backbone.Model.extend({
  // when initialize is called it tells an object to listen to an event on another object
  initialize: function(){
    this.listenTo(this.Model, "change", this.render);
  },


  default: {
    username: '',
    location: ''
  },

  greetUser: function(username){
    //does something
  },

  render: function(){
    //do something
  }
});

//create a new instance
let visitor1 = new Default({
  username: 'SamBot',
  location: 'Jupiter'
})

let default = new Default();

Sbírka

Objednaná sada nebo seznam modelů. Kolekce umožňují vývojářům na jednom místě naslouchat změnám, ke kterým dochází na jakémkoli modelu, který je v kolekci. Pomocné funkce jsou klíčové při manipulaci s daty v modelech, které patří do kolekce. Backbone.org poskytuje metody včetně metod Underscore.js, které dávají vývojářům možnost manipulovat s daty.

Předvádějící

Prezentující Za tok spouštění webové aplikace odpovídá přednášející. Když jsou provedeny změny v uživatelském rozhraní, prezentující interaguje s ovladačem, vyhodnotí vstupní data a převede je na příkaz, než kontaktuje model, aby potenciálně vrátil výsledky nebo odpověď od změny uživatele prostřednictvím zobrazení.

Závěr

Jednou z hlavních předností práce s BackBone.j je snadná konfigurace, když na projektu pracuje více než jeden vývojář současně. Pozdější úpravy budou také zjednodušeny díky oddělení problémů, které vývojářům umožní testovat pohledy jednotlivě. Nevýhodou je, že aplikace vytvořené pomocí BackBone.js mají obvykle mnoho interakcí mezi tím, co uživatelé používají, a tím, co vidí. Práce s BackBone.js bude představovat křivku učení pro vývojáře, kteří možná předtím tento rámec nepoužívali. To lze považovat za nevýhodu, ale protože mnoho organizací využívá jeho funkce, je nutné se to naučit.

Děkuji za přečtení! Šťastné kódování!

Kredity
https://backbonejs.org/#
https://adrianmejia.com/backbone-dot-js-for-absolute-beginners-getting-started/
https://www.youtube.com/watch?v=PcTVQyrWSSs
https://cs.wikipedia.org/wiki/Backbone.js