10 Webböngésző a Backbone.js segítségével [Esettanulmány]

Volt már valaha a spagetti kóddal? Inkább táplálná az alkalmazását valami egészségesebbé? Ha igen, akkor vigyázzon rá, amit a Backbone.js segítségével lehet elérni. Hátgerinc egy olyan JavaScript könyvtár, amely lazán alapul a modell-nézet-vezérlő tervezési mintáján, de mivel hiányzik a vezérlőelem, jobb, ha MV * keretnek nevezzük.

Segít építeni gyors, sima és gazdag egyoldalas webes alkalmazások, megtartja a adat-logika külön a felhasználói felületétől, elmenti Önt az adatok DOM-hoz való összekapcsolásáról, és mérlegek, ahogy az alkalmazás növekszik. Mivel a Backbone alapértelmezés szerint szinkronizál bármely RESTful API-val, könnyen összekapcsolhatja ügyféloldali alkalmazását a meglévő kiszolgálóoldali API-val egy RESTful JSON interfészen keresztül.

Ebben a bejegyzésben 10 olyan webalkalmazást fogunk tanulmányozni, amelyek kihasználják a gerinchálózat funkcióit, hogy segítsen megragadni a potenciális Backbone.js-t a jövőbeli webalkalmazás projektekben.

1. Trello

Trello egy online együttműködési és projektmenedzsment alkalmazás, amely segít a projektek táblákba, ellenőrző listákba, kártyákba, kártyák listájába rendezni, és olyan eszközöket biztosít, mint a Csevegések a csapat tagjai kommunikációhoz.

Trello a földről felépült Backbone.js-tal. A gerinchálózat együtt működik a HTML5 előzmény API-val és a bajusz-logika nélküli sablonnyelvvel a frontenden. A Trello Tech Stack minden elemét úgy tervezték meg, hogy a karbantartható ügyfél, amely könnyen kezelheti a frissítéseket, és dinamikusan újra szinkronizálódik a kiszolgálóval DOM esemény bekövetkezésekor.

A Trello gerincmodellt és nézeteket használ az objektumaihoz, például a kártyákhoz vagy a tagokhoz, valamint a kapcsolódó modellek gerincgyűjteményeihez - például a listán szereplő kártyákhoz. A fejlesztők is saját ügyféloldali Modell gyorsítótárát építette mert gyorsabb frissítések és több hatékony kód újrahasználat.

2. Foursquare

Valószínűleg már hallottál róla Négyszögben, a népszerű helyalapú közösségi hálózatépítő alkalmazás, amely lehetővé teszi, hogy a világ minden tájáról megoszthassa helyeit barátaival.

A Foursquare alap JavaScript API a gerincmodellek köré épül, ahol a A Foursquare API modellosztályai (például Felhasználók, Helyszínek és Bejelentkezések) a gerincmodell osztályok és az alosztályok örökölje módszereit és tulajdonságait.

A kód végrehajtása a következőképpen felvázolható: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Igen, ez igaz, a gerinc lehetővé teszi, hogy a devs írjon szép objektum-orientált JavaScript-t.

A gerinchálózat nézetei is szerepet játszanak a Foursquare alkalmazásban, mivel növelik a felhasználói élményt olyan funkciókkal, mint például kezdőlap térképek és listák. A gerinc kivételével a Foursquare JavaScript API is használható jQuery, Underscore.js (amely a gerinces egyetlen függősége) és a bezárási fordító.

3. Basecamp naptár

Alaptábor, a népszerű projektmenedzsment alkalmazás a Backbone.js-ot használja a naptár funkciójához.

A Basecamp Naptár fő tervezési célja egy interaktív felület létrehozása volt intuitív csoportütemezés lehetséges, és frissíti magát milliszekundumban. A Basecamp naptárban a gerinchálózat megjeleníti az ECO (Embedded CoffeeScript) sablonokat, amikor a modellek (ügyféloldali adatok) frissülnek.

Érdekes megjegyezni, hogy a fejlesztőcsapat nem tette az egész Basecamp-ot egyetlen oldalalkalmazásra, amely a Backbone.js elsődleges felhasználási példája, hanem csak a naptár funkcióban használt könyvtárat használták fel, ahol valóban ki tudják használni az előnyeit. Csak azt mutatjuk be, hogy nem feltétlenül kell teljes egyoldalas alkalmazást építeni a gerinchálózattal; jobb, ha gondosan átgondoljuk, hol lehet alkalmazni.

További információ a Backbone antipatterns-ről, hogy eldöntse, hogy szükség van-e Backbone-ra az egész alkalmazás számára.

4. Flowdock

Flowdock egy valós idejű csapat kommunikációs alkalmazás, amely olyan funkciókat kínál, mint a csevegés, a csoportos üzenetek és a valós idejű munkafolyamatok

A Flowdock a földről felépült a Backbone.js tetején. A fejlesztési csapat fő kihívása a valós idejű üzenetek és munkafolyamatok engedélyezése volt. Alapértelmezés szerint a Backbone.js a RESTful interfészen keresztül csatlakozik a szerver oldalhoz, ami nem teszi lehetővé a valós idejű adatáramlást. Ezért a devs úgy döntött, hogy a Socket.io valós idejű motoron keresztül üzeneteket ment a REST API helyett.

Ennek eléréséhez egyéni módszert írt hívott Backbone.sync. Mivel a Socket.io is JavaScript könyvtár, a JavaScript-alapú frontend és a backend (Node.js) közötti kommunikáció zökkenőmentes. A Flowdock elsődlegesen a Rails alkalmazás a szerver oldalon, de külön Node.js hátterük van, amely a Socket.io kapcsolatokat kezeli.

Flowdock növeli a valós idejű felhasználói élményt még inkább a Bacon.js, egy praktikus JavaScript könyvtár, amely lehetővé teszi a funkcionális reaktív programozást. A. \ T Bacon.js segíti a Flowdockot a gerinchálózat és a gyűjtemények naprakészen tartásában.

5. Koktél keresés

Koktél keresés egy nyílt forráskódú alkalmazás, amely lehetőséget ad arra, hogy vessen egy pillantást a Backbone.js nagyon egyszerű megvalósításának kódjára. A hátteret a Python táplálja, de mi érdekes számunkra az alkalmazás script.js fájlja.

Ha megvizsgálja a kódot, akkor a Model-View- * keretrendszer nagyon alapszerkezete látható: egyet tartalmaz Modell meghatározott Koktél osztály, amely nem változtatja meg a Backbone.Model szülő osztály alapértelmezett beállításait Gerincgyűjtemény a keresési eredmények és a 3 gerinces nézet esetében mindegyik új módszert ad hozzá a Backbone.View szülő osztály.

Ha megnézed az index.html fájlt, megtudhatod, hogy a fejlesztő hozzáadta a Backbone.js-t és annak függőségeit, Underscore.js és jQuery a fejrészben. Az Underscore.js a gerinchálózat egyetlen nehéz függősége, míg a jQuery szükséges ha a DOM-ot a gerinces nézetek segítségével szeretné manipulálni (ami a Cocktail Search alkalmazás esetében van).

6. Bitbucket

Bitbucket a Githubhoz hasonló forráskód-tárhely és kódkezelő alkalmazás. Az Atlassian, a mögötte lévő cég a Backbone-t használja a JIRA kereskedelmi kérdéskövető szoftverében, a másik fő termékükben is.

A Backbone.js alkalmazásainak alapos felhasználása során a fejlesztőcsapat néhány olyan dolgot talált, amelyeket hiányzott a Backbone. Találkoztak sok csendes hiba, amit a Backbone.js laza definíciós konvenciói okoztak. Ez alapvetően azt jelenti, hogy modellek, gyűjtemények és nézetek nem feltétlenül határozza meg azokat az egyéni eseményeket, amelyeket feltárnak. És ha ez nem elég, a modellek még mindig nem határozzák meg attribútumok ki vannak téve.

Ez a megengedő természet sok fejlesztő által kedvelt tulajdonság, de nem az Atlassian csapat, így saját Backbone kiterjesztésüket, a Backbone-t fejlesztették ki. a mixins és a saját dokumentációjú attribútumokat és eseményeket hozzáadja a könyvtárhoz.

Ha ugyanaz a dolog bosszantja, akkor hozzáadhatja a Backbone.Brace-t a saját alkalmazásához, mivel ez egy nyílt forráskódú projekt, amelyet maga a Bitbucket tárol. A BitBucket a bajusz sablon nyelvét használja, mint a Trello, a Backbone Views megjelenítéséhez.

7. SoundCloud

SoundCloud egy népszerű hangelosztási platform, ahol saját hangját rögzítheti, feltöltheti és megoszthatja, vagy zenét hallgathat ingyenesen.

A SoundCloud fejlesztői először a Backbone.js-t használták mobilalkalmazásuk frontrendszerének, de annyira tetszett, hogy az asztali webhelyük kliens oldalán is használják. A Backstage blogjukban megmagyarázzák a keretrendszer választását a Backbone képességével szilárd strukturális alapokat, miközben továbbra is rugalmasak.

A skálázás az audio streaming alkalmazás egyik fő problémája, és a SoundCloud elismeri, hogy az “jobban kapcsolódik a szervezethez, mint a végrehajtás” ami a jól szervezett, de a könnyű gerincet ideális választás számukra.

A SoundCloud a Kezelőelemek szemantikai sablonrendszerét használja a Backbone Views megjelenítésére a frontenden.

8. AirBnB

Airbnb egy rendkívül sikeres közösségi piac, ahol különböző típusú szálláshelyeket találhat és foglalhat el közel 200 országban világszerte

Az AirBnB először a SoundCloud-hoz hasonlóan használt mobilalkalmazásában a Backbone.js-t, de később egyre többet használta fel webes alkalmazásaiban, például a Wishlists, a Match, a Search, a közösségek és a fizetések területén. Az AirBnB annyira szerette a gerincét, hogy nem csak a frontenden használta, hanem azt is, hogy lehetővé tette a könyvtár hátterének futtatását.

Később a szerveroldali gerinckönyvtárat, a Rendr-t, nyílt forráskódúvá tette és elérhető a Github oldalon. Rendr a Node.js-ban van írva, és követi a filozófiát “minimális struktúra bevezetése, amely lehetővé teszi a fejlesztő számára, hogy alkalmazását a legmegfelelőbb módon használja” éppen úgy, mint maga a gerinc

Ha jobban érdekli az AirBnB tech stackje, olvassa el a blogbejegyzésüket a Rails backendtől a Szent Grálig. A gerinc egyidejű használata mind az ügyfél-, mind a szerver oldalon.

9. Hulu

Hulu egy videó streaming alkalmazás, amely lehetővé teszi a TV-műsorok és filmek ingyen megtekintését, ha az Egyesült Államokban található.

Hulu a Backbone.js-ot használta, hogy a film szerelmeseinek zökkenőmentes és gyors felhasználói élményt nyújtson. Az interfész lehetővé teszi, hogy gyorsan navigáljon az alkalmazáson, és navigáljon. Hátgerinc sávszélességet takarít meg a felhasználók számára szkriptek és beágyazott videók ne kapjon újratöltést mindig.

Hulu egy Rails motort futtat a backenden, és ha tetszik szórakoztató, de informatív beszélgetés, akkor olvassa el hogy a fejlesztőcsapat összefonódott a jQuery-vel mielőtt végül úgy döntött, hogy a szervezett gerinchálózat.

Backbone.js megengedte Hulu-nak fokozatosan konvertálja a renderelést szerveroldali kliens oldalra ahelyett, hogy kockáztatná a meglévő Rails hátteret.

10. Számlálás

Countly egy valós idejű mobilanalitikai alkalmazás, amely lehetővé teszi iPhone, Android vagy Windows Phone alkalmazás teljesítményének nyomon követését közvetlenül a böngészőablakban.

Tekintse meg a platform fejlesztéséhez használt nyílt forráskódú szoftverek listáját, beleértve az utóbbi évek szupersztárjait: Nginx, MongoDB, Node.js a szerver oldalon, és természetesen a Backbone.js-t a frontend számára.

A Backbone-nézetek megjelenítéséhez a Backbone Model-eket előállított és betöltött adatok megjelenítéséhez használjuk a Handlebars szemantikus sablonkönyvtárat. Számos fejlesztőbarát alkalmazás: ez nemcsak könnyen bővíthető, hanem dokumentációi a devsoknak is ilyen útmutatókkal szolgálnak hogyan lehet egyéni bővítményeket építeni a mag-gerinc kliens tetején.

A szerkesztő megjegyzése: Ezt írja Anna Monus a Hongkiat.com-hoz. Anna egy webfejlesztő és kódíró, aki a tudomány, a mesterséges intelligencia és a zavaró technológiák iránt érdeklődik.