10 webových aplikací vytvořených s páteřní sítí.js [Případová studie]

Byl jste někdy zapleten do špagetového kódu? Chtěli byste raději krmit svou aplikaci něčím zdravějším? Pokud ano, podívejte se na to, čeho lze dosáhnout pomocí Backbone.js. Páteř je knihovna JavaScriptu, která je volně založena na vzoru návrhu Model-View-Controller, ale protože jí chybí prvek Controller, je lepší ji nazývat frameworkem MV *.

Pomáhá vám budovat rychlý, elegantní a bohatý na data Jednodílné webové aplikace, udržuje vaše datové logiky oddělené od uživatelského rozhraní, šetří vás od vázání dat do DOM a stupnice, jak vaše aplikace roste. Synchronizace páteřní sítě se standardním rozhraním RESTful API umožňuje snadno propojit aplikaci na straně klienta s existujícím rozhraním API na straně serveru prostřednictvím rozhraní RESTful JSON.

V tomto příspěvku budeme studovat 10 webových aplikací, které využívají funkce páteřní knihovny, které vám pomohou pochopit potenciál, který má Backbone.js pro vaše budoucí webové aplikace..

1. Trello

Trello je aplikace pro online spolupráci a řízení projektů, která vám pomáhá organizovat vaše projekty do desek, kontrolních seznamů, karet, seznamů karet a poskytuje nástroje, jako jsou konverzace pro komunikaci členů týmu.

Trello byl postaven od základu s Backbone.js. Páteř spolupracuje s rozhraním API HTML5 History a logem bez jazyků na frontendu. Všechny prvky Trello Tech Stack byly navrženy tak, aby výsledkem bylo a udržovatelného klienta, který snadno zpracovává aktualizace, a dynamicky znovu synchronizuje se serverem kdykoliv je spuštěna událost DOM.

Trello používá pro své objekty, jako jsou karty nebo členové, a páteřní sbírky pro související modely - páteřní model a pohledy - například karty v seznamu. Vývojáři také postavili vlastní klientskou cache modelu pro rychlejší aktualizace a více efektivní opětovné použití kódu.

2. Foursquare

S největší pravděpodobností jste o tom už slyšeli Foursquare, populární aplikace sociálních sítí založená na poloze, která umožňuje sdílet místa s přáteli po celém světě.

Foursquare jádro JavaScript API je postaven na páteřních modelech, kde je Modelové třídy API rozhraní Foursquare (například Uživatelé, Místa a Odbavení) jsou podtřídami tříd páteřního modelu a zdědí jejich metody a vlastnosti.

Implementace kódu může být načrtnuta takto: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Ano, to je pravda psát pěkný objektově orientovaný JavaScript.

Páteřní pohledy mají také svou roli v aplikaci Foursquare, protože zvyšují uživatelský komfort s funkcemi jako mapy a seznamy domovské stránky. Jiné než Backbone, JavaScript API API Foursquare také využívá jQuery, Underscore.js (což je pouze páteřní závislost) a kompilátor uzavření.

3. Basecamp Kalendář

Základní tábor, populární aplikace pro správu projektů používá pro svůj kalendář funkci Backbone.js.

Hlavním cílem návrhu Basecamp Kalendář bylo vytvořit interaktivní rozhraní, které dělá intuitivní skupinové plánování možné, a aktualizace v milisekundách. V páteřní databázi Basecamp vykresluje zobrazení do šablon ECO (Embedded CoffeeScript), kdykoli jsou aktualizovány modely (data na straně klienta).

Je zajímavé poznamenat, že vývojářský tým nedělal celý Basecamp jednostránkovou aplikací, která je primárním případem Backbone.js, ale pouze knihovnu ve funkci Kalendář, kde by mohli skutečně využít svých výhod. Jen jde ukázat, že nemusíte nutně budovat plnou jednostránkovou aplikaci s páteří; je lepší pečlivě přemýšlet o tom, kde může být aplikován.

Přečtěte si více o páteřních antipatternech a rozhodněte se, zda potřebujete páteř pro celou vaši aplikaci.

4. Flowdock

Flowdock je aplikace pro komunikaci v reálném čase, která poskytuje funkce jako skupinový chat, týmové schránky a pracovní postupy v reálném čase

Flowdock byl postaven od základu na vrcholu Backbone.js. Hlavní výzvou vývojového týmu bylo umožnit zprávy a pracovní postupy v reálném čase. Ve výchozím nastavení se Backbone.js připojuje k straně serveru přes rozhraní RESTful, což neumožňuje tok dat v reálném čase. Proto devs rozhodl se ukládat zprávy přes stroj Socket.io v reálném čase namísto rozhraní REST API.

Aby toho bylo dosaženo napsal vlastní metodu volal Backbone.sync. Vzhledem k tomu, že Socket.io je také JavaScriptovou knihovnou, je bezproblémová komunikace mezi JavaScriptem řízeným frontendem a backendem (Node.js). Flowdock je primárně aplikace Rails na straně serveru, ale má samostatný Node.js backend, který zpracovává spojení Socket.io.

Flowdock zvyšuje v reálném čase uživatelské zkušenosti ještě více s Bacon.js, praktickou JavaScript knihovnou, která umožňuje funkční reaktivní programování. Funkce EventStreams funkce Bacon.js pomáhá společnosti Flowdock udržovat aktuální model páteře a sbírky.

5. Hledání koktejlu

Cocktail Hledat je open source aplikace, která vám dává možnost podívat se na kód velmi jednoduché implementace Backbone.js. Backend je poháněn Pythonem, ale to, co je pro nás zajímavé, je souboru script.js aplikace.

Pokud zkoumáte kód, můžete vidět velmi základní strukturu rámce Model-View- *: obsahuje jednu Modelka definováno v Koktejl třídy, která nezmění výchozí nastavení nadřazené třídy Backbone.Model, jedna Páteřní kolekce pro výsledky vyhledávání a 3 pohledy páteřní sítě přidává nové metody Backbone.View mateřské třídy.

Pokud se podíváte na soubor index.html, můžete zjistit, jak vývojář přidal Backbone.js a jeho závislosti, Underscore.js a jQuery v hlavové části. Underscore.js je jedinou tvrdou závislostí Backbone, když je potřeba jQuery Pokud chcete manipulovat s DOM pomocí Backbone Views (což je případ aplikace Cocktail Search).

6. Bitbucket

Bitbucket je zdrojový kód hosting a aplikace pro správu kódu podobné Github. Společnost Atlassian, která za ní stojí, využívá páteřní systém v komerčním softwaru JIRA pro sledování obchodních problémů, který je jejich hlavním produktem.

Během důkladného využití Backbone.js v jejich aplikacích, vývojový tým našel pár věcí, které vynechal z Backbone. Setkali se mnoho tichých selhání způsobených volnými definicemi konvencí Backbone.js. To v podstatě znamená, že modely, sbírky a pohledy nemusí nutně definovat vlastní události, které vystavují. A pokud to nestačilo, modely ani vždy nedefinují atributy vystavují.

Tato permisivní povaha je vlastnost, kterou miluje mnoho vývojářů, ale ne tým Atlassian, takže vyvinuli vlastní Backbone rozšíření zvané Backbone.Brace, které přidává do knihovny mixiny a vlastní zdokumentované atributy a události.

Pokud jste naštvaný stejnou věc, můžete přidat Backbone.Brace do své vlastní aplikace, jak je to open-source projekt hostovaný na Bitbucket sám. BitBucket používá jazyk Mustache templating stejně jako Trello pro vykreslování Backbone Views na frontendu.

7. SoundCloud

SoundCloud je populární audio distribuční platforma, kde můžete nahrávat, nahrávat a sdílet svůj vlastní zvuk, nebo poslouchat hudbu zdarma.

Vývojáři SoundCloudu použili nejprve Backbone.js jako rámec frontendu své mobilní aplikace, ale líbilo se jim to natolik, že je také používali na klientské straně svých webových stránek. Ve svém blogu Backstage vysvětlují svůj výběr rámce s páteřní schopností poskytnou pevný strukturální základ a přitom zůstanou flexibilní.

Změna měřítka je hlavním problémem aplikace pro streamování zvuku a aplikace SoundCloud ji uznává “má více společného s organizací než implementací” Díky tomu je dobře organizovaná, ale lehká páteř ideální volbou pro ně.

SoundCloud využívá systém sémantických šablon řídítek pro vykreslování páteřních pohledů na frontendu.

8. AirBnB

AirBnB je šíleně úspěšný komunitní trh, kde můžete najít a rezervovat různé typy ubytování v téměř 200 zemích světa

AirBnB nejprve použil Backbone.js ve své mobilní aplikaci stejně jako SoundCloud, ale později ji využíval stále více ve svých funkcích webových aplikací, jako jsou Wishlists, Match, Search, Communities a Payments. AirBnB milovala páteř natolik, že se neuspokojila pouze s jejím používáním na frontendu, ale chtěla také umožnit provoz knihovny v backendu..

Oni později vytvořili jejich serverovou páteřní knihovnu, Rendr, open source a jsou k dispozici na stránce Github. Rendr je napsán v Node.js a vychází z filozofie “uložení minimální struktury, což umožňuje vývojáři používat knihovnu nejvhodnějším způsobem pro jejich aplikaci” stejně jako páteř sama

Máte-li zájem o tech stack společnosti AirBnB, přečtěte si jejich blogový příspěvek o jejich cestě z backendu Rails do Svatého grálu současné využití páteře jak na straně klienta, tak na straně serveru.

9. Hulu

Hulu je aplikace pro streamování videa, která vám umožní sledovat televizní pořady a filmy zdarma, pokud se nacházíte v USA.

Hulu využil Backbone.js k vytvoření bezproblémového a rychlého uživatelského prostředí pro milovníky filmů. Rozhraní umožňuje rychle se pohybovat přes aplikaci s jemnými přechody při navigaci. Páteř šetří šířku pásma pro uživatele jako skripty a vložená videa nechápejte znovu po celou dobu.

Hulu provozuje na backendu Railsův motor a pokud máte rádi zábavné, ale informativní rozhovory, můžete si o nich přečíst jak se tým vývojářů zapletl s jQuery než se konečně rozhodne změnit organizovanější páteřní rámec.

Backbone.js dovolil Hulu k postupně převést jejich vykreslování ze strany serveru na stranu klienta místo riskantního přepisu stávajícího backendu Rails.

10. Hodně

Hodně je aplikace pro mobilní analýzu v reálném čase, která vám umožňuje sledovat výkon vašeho zařízení iPhone, Android nebo Windows Phone přímo z okna prohlížeče.

Podívejte se na pozoruhodný seznam open source softwaru, který byl použit pro vývoj platformy, včetně superstars posledních let: Nginx, MongoDB, Node.js pro server a samozřejmě Backbone.js pro frontend.

Využívá sémantické šablony šablon řídítek pro vykreslování páteřních pohledů, které zobrazují data připravená a načtená pomocí páteřních modelů. Hodně je aplikace vhodná pro vývojáře: je to nejen snadno rozšiřitelná, ale její dokumentace také poskytuje devs s tutoriály, jako je tento jak vytvořit vlastní pluginy na vrcholu hlavního páteřního klienta.

Poznámka editora: To napsala Anna Monus pro Hongkiat.com. Anna je webová vývojářka a spisovatelka se zájmem o vědu, umělou inteligenci a rušivé technologie.