10 уеб приложения, направени с Backbone.js [казус]
Били ли сте някога заплетени в спагети код? Бихте ли предпочели да нахраните приложението си по-здравословно? Ако е така, погледнете какво може да се постигне с Backbone.js. гръбнак е библиотека на JavaScript, която е свободно базирана на модела на модела View-Controller, но тъй като няма елемент на контролера, по-добре е да го наричаме MV * рамка.
Тя ви помага да изградите бързи, лъскави и богати на данни уеб страници с една страница, запазва логиката на данните е отделена от потребителския ви интерфейс, Ви спестява да обвързвате данните си с DOM и скалира, когато приложението ви расте. Тъй като Backbone се синхронизира с всеки RESTful API по подразбиране, лесно можете да свържете приложението от страна на клиента към съществуващия си от сървъра API чрез интерфейс RESTful JSON.
В тази публикация ще изучаваме 10 уеб приложения, които използват функциите на библиотеката Backbone, за да ви помогнат да разберете потенциала на Backbone.js за бъдещите си проекти за уеб приложения.
1. Trello
Trello е приложение за онлайн сътрудничество и управление на проекти, което ви помага да организирате проектите си в дъски, контролни списъци, карти, списъци с карти и ви предоставя инструменти като разговори за комуникация с членове на екипа.
Trello е построен от земята с Backbone.js. Backbone работи заедно с HTML5 History API и езика на шаблоните за шаблони на Mustache в интерфейса. Всички елементи на Trello Tech Stack са проектирани по начин, който е довел до a поддръжка на клиент, който лесно се справя с актуализации, и динамично се синхронизира със сървъра при всяко задействане на DOM събитие.
Trello използва Backbone Model и Views за своите обекти, като карти или членове, и Backbone колекции за свързани модели - например карти в списък. Разработчиците също изгради свой собствен клиентски моделен кеш за по-бързи актуализации и още ефективно използване на кода.
2. Foursquare
Най-вероятно вече сте чували за това четвъртит, популярното приложение за социални мрежи, базирано на местоположението, което ви позволява да споделяте места с приятелите си по целия свят.
Основният JavaScript API на Foursquare е изграден около Backbone модели, където Класове на моделите на API за Foursquare (като Потребители, Места и Check-ins) са подкласовете на класовете Backbone Model и наследяват техните методи и свойства.
Изпълнението на кода може да бъде скицирано по следния начин: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Да, точно така, Backbone позволява на разработчиците да напишете хубав обектно-ориентиран JavaScript.
Гръбните изгледи също имат своята роля в приложението Foursquare, тъй като подобряват потребителския опит с подобни функции карти и списъци на началната страница. Освен от Backbone, JavaScript API на Foursquare също използва jQuery, Underscore.js (което е единствената твърда зависимост на Backbone) и компилаторът Closure.
3. Календар на Basecamp
Базов лагер, популярното приложение за управление на проекти използва Backbone.js за своята функция Календар.
Основната цел на проекта бе да създаде интерактивен интерфейс, който прави интуитивен групов график възможно се обновява в милисекунди. В Basecamp Calendar Backbone визуализира Views в ECO (Embedded CoffeeScript) шаблони всеки път, когато се актуализират модели (клиентски данни).
Интересно е да се отбележи, че екипът на разработчиците не е направил цялото Basecamp приложение на една страница, което е основният случай на използване на Backbone.js, а само използва библиотеката в функцията Calendar, където те наистина могат да се възползват от нейните предимства. Просто показва, че не е необходимо да изграждате пълноценно приложение с една страница с Backbone; по-добре е да помислите внимателно къде може да се приложи.
Прочетете повече за Backbone antipatterns, за да решите дали имате нужда от Backbone за цялото ви приложение или не.
4. Flowdock
Flowdock е приложение за комуникация в екип в реално време, което ви предоставя функции като групов чат, входящи кутии на екипи и работни потоци в реално време
Flowdock е построен от основата на Backbone.js. Основното предизвикателство пред екипа за разработка беше да се даде възможност за съобщения и работни потоци в реално време. По подразбиране Backbone.js се свързва със сървърната страна през интерфейс RESTful, който не позволява поток на данни в реално време. Затова разработчиците реши да запази съобщения чрез Socket.io двигателя в реално време вместо REST API.
За да постигнат това, те е написал персонализиран метод Наречен Backbone.sync. Тъй като Socket.io също е JavaScript библиотека, тя прави комуникацията между интерфейса на JavaScript и бекенда (Node.js) безпроблемно. Flowdock е предимно Rails приложение на сървърната страна, но те имат отделен Node.js backend, който обработва връзките на Socket.io.
Flowdock подобрява потребителския опит в реално време още повече с Bacon.js, удобна JavaScript библиотека, която позволява функционално реактивно програмиране. Функцията EventStreams на Bacon.js помага на Flowdock да поддържа актуалния си модел и колекции Backbone.
5. Търсене на коктейл
Търсене на коктейл е приложение с отворен код, което ви дава възможност да погледнете кода на много проста реализация на Backbone.js. Бекендът се захранва от Python, но това, което ни интересува, е файлът script.js на приложението.
Ако прегледате кода, можете да видите много основна структура на рамката Model-View - тя съдържа един Модел дефинирани в. \ t коктейл клас, който не променя настройките по подразбиране на родителския клас на Backbone.Model, един Събиране на гръбнака за резултатите от търсенето и 3 Преглед на опорните линии, всяка добавя нови методи към Backbone.View родителски клас.
Ако погледнете файла index.html, можете да разберете как разработчика е добавил Backbone.js и неговите зависимости, Underscore.js и JQuery в главата. Underscore.js е единствената твърда зависимост на Backbone, докато е необходимо jQuery ако искате да манипулирате DOM с помощта на Backbone Views (какъвто е случаят с приложението за търсене на коктейл).
6. Bitbucket
Bitbucket е хостинг за изходния код и приложение за управление на кода, подобно на Github. Атласиан, компанията зад него използва Backbone в JIRA софтуер за проследяване на търговски издания, другият им основен продукт също.
По време на пълното използване на Backbone.js в техните приложения, екипът на разработчиците откри няколко неща, които са пропуснали от Backbone. Те се срещнаха много тихи повреди, причинени от разхлабените дефиниции на Backbone.js. Това основно означава, че Модели, Колекции и Изгледи не определят непременно персонализираните събития, които излагат. И ако това не е достатъчно, моделите дори не винаги определят атрибути те излагат.
Тази разрешителна природа е функция, обичана от много разработчици, но не и от екипа на Atlassian, така че те разработиха собствено разширение Backbone, наречено Backbone.Brace, добавя миксини и самодокументирани атрибути и събития в библиотеката.
Ако сте раздразнен от едно и също нещо, можете да добавите Backbone.Brace към собственото си приложение, тъй като това е проект с отворен код, хостван от самата Bitbucket. BitBucket използва езика на шаблоните за мустаците точно като Trello за визуализиране на Backbone Views на интерфейса.
7. SoundCloud
SoundCloud е популярна платформа за разпространение на аудио, където можете да записвате, качвате и споделяте свои собствени аудио или да слушате музика безплатно.
Разработчиците на SoundCloud използваха Backbone.js първо като интерфейсна рамка на своето мобилно приложение, но те го харесаха толкова много, че го използваха и на клиентската страна на десктоп уебсайта. В техния блог в Backstage обясняват своя избор на рамка с способността на Backbone осигуряват солидна структурна основа, докато все още остават гъвкави.
Мащабиране е основна грижа за аудио стрийминг ап, и SoundCloud признава, че това “има повече общо с организацията, отколкото с изпълнението” което прави добре организираната, но лека Backbone идеален избор за тях.
SoundCloud използва семантичната шаблонна система Handlebars за визуализиране на Backbone Views на интерфейса.
8. AirBnB
Airbnb е един безумно успешен пазар на общността, където можете да намерите и резервирате различни видове настаняване в почти 200 страни по света
AirBnB първо използва Backbone.js в своето мобилно приложение точно като SoundCloud, но по-късно я използва все повече и повече в своите функции за уеб приложения като Wishlist, Match, Search, Community and Payments. AirBnB обичаше Backbone толкова много, че не само се съгласиха да го използват на интерфейса, но също така искаха да направят възможно пускането на библиотеката в гръб.
Те по-късно направиха тяхната библиотека на сървърната база, Rendr, с отворен код и достъпни на страницата им в Github. Rendr е написан на Node.js и следва философията на “налагане на минимална структура, позволяваща на разработчика да използва библиотеката по най-подходящия начин за тяхното прилагане” точно като самата Backbone
Ако се интересувате повече от технологичния стек на AirBnB, прочетете публикацията им в блога им за пътуването им от сървъра на Rails към Светия Граал на едновременно използване на Backbone както от страна на клиента, така и от страна на сървъра.
9. Hulu
Hulu е приложение за видео стрийминг, което ви позволява да гледате телевизионни предавания и филми безплатно, ако се намирате в САЩ.
Hulu използва Backbone.js, за да изгради безпроблемно и бързо потребителско изживяване за любителите на филмите. Интерфейсът ви позволява да се движите бързо през приложението с леки преходи, докато навигирате. гръбнак спестява честотна лента за потребителите като скриптове и вградени видеоклипове не се презареждайте през цялото време.
Hulu пуска Rails двигател на задния панел и ако ви харесва забавни, но информативни разговори, можете да прочетете как екипът на разработчиците се е заплел с jQuery преди окончателно да реши да се промени на по-организирана рамка на опората.
Backbone.js позволи на Hulu да постепенно да конвертирате тяхното изобразяване от страна на сървъра към клиентска вместо да прави рисковано пренаписване на съществуващия им Rails backend.
10. Считайте
Countly е приложение за мобилни анализи в реално време, което ви позволява да проследявате ефективността на приложението си за iPhone, Android или Windows Phone направо от прозореца на браузъра.
Обърнете внимание на забележителния списък на софтуера с отворен код, използван за разработване на платформата, включително суперзвездите от последните години: Nginx, MongoDB, Node.js за сървърната страна и разбира се Backbone.js за интерфейса.
Броя се използва библиотеката за семантични шаблони за ръчно управление, за да визуализира Backbone Views, които показват данните, подготвени и заредени с Backbone Models. Countly е приложение, удобно за разработчиците: то не само е лесно разширяемо, но и документацията му също така предоставя на разработчиците упътвания като тази на как да изграждате потребителски плъгини в началото на основния клиент на Backbone.
Бележка на редактора: Това е написано от Анна Монус за Hongkiat.com. Анна е уеб разработчик и автор на кодове с интерес към науката, изкуствения интелект и разрушителните технологии.
