Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Написание сложных интерфейсов с Backbone.js

JavaScript
image

Backbone.js это каркас для создания RIA JavaScript приложений, его автором является Jeremy Ashkenas, создатель CoffeeScript, Backbone является частью компании Document Cloud ей же «принадлежит» Underscrore.js. Backbone — очень легкая библиотека, помогающая вам создавать интерфейсы. Она может работать с любыми библиотеками, к которым вы привыкли.
Backbone это набор классов, размером менее 4Кб, которые формируют структуру вашего кода и помогают создавать качественные MVC веб-приложения.
Backbone формирует структуру тяжелых JavaScript приложений, внесением моделей с key-value подобным хранилищем и своими событиями, коллекций с богатыми API, видов (ориг. views) с декларативной обработкой событий и соединяет все это в в одно приложение, поддерживающее RESTful JSON интерфейс.

Backbone не может работать без Underscore.js. Для поддержки REST API и работы с DOM элементами в Backbone.View настоятельно рекомендуется подключить json2.js и jQuery-подобную библиотеку: jQuery или Zepto

В статье будет рассмотрена структура Backbone.js, будет поэтапно создано простое Todo приложение.
Читать дальше →
Всего голосов 108: ↑103 и ↓5 +98
Просмотры97.7K
Комментарии 47

Пишем одностраничный клиент на javascript

Разработка веб-сайтов
Данная статья является вольным переводом. Оригинал тут.

Введение


Думаю, ни для кого не секрет, что клиентские приложения в современных веб-сервисах становится все сложнее и количество JS кода в них растет. До недавнего времени архитектура клиентской части, как правило, разрабатывалась с нуля и была специфична для каждого проекта. Не удивительно что приходилось снова и снова сталкиваться с типичными задачами.
К MVC-фреймворкам на серверной стороне все уже привыкли, но JS код на клиенте часто бывает плохо структурирован.

Предлагаю ознакомиться с решением на базе backbone.js, underscore.js и jQuery, которое поможет решить эту проблему.

Постановка задачи


Каким бы мы хотели видеть наше приложение? Вот основные моменты, которые мне кажутся важными:
  1. Должен быть удобный способ описать модели нашей предметной области.
  2. Любые изменения в модели должны немедленно отражаться в пользовательском интерфейсе, если модель в нем представлена каким-либо образом.
  3. Понятная и легко-поддерживаемая структуризация кода в стиле MVC.


Попробуем решить эти задачи на примере простого приложения «Каталог фильмов».
Поехали!
Всего голосов 70: ↑64 и ↓6 +58
Просмотры46.4K
Комментарии 51

Knockout, практический опыт использования

JavaScript
Некоторое время назад я обещал рассказать о нашем опыте работы с Knockout. Мы используем данную библиотеку в одном из проектов в течение последних 4 месяцев. Это немного, но за это время команда набрала некоторый опыт, который, я думаю, может быть интересен читателям.
Осторожно, много текста!
Всего голосов 62: ↑59 и ↓3 +56
Просмотры68.9K
Комментарии 23

Backbone.js для «чайников»

JavaScript
Backbone.js для чайников
Как то поздним вечерком мне пришла мысль изучить Backbone.js и привязать его к уже написанному на jQuery сервису. Сервис уже серьёзно расширился и меня достало это нагромождение обработчиков кликов, запросов и логики. Поэтому, я как усердный школьник полез в официальную документацию. Но либо я тупой, либо мой английский меня подкачал, либо то и другое вместе, но я не черта не понял. Я прочитал уже второй раз, внимательно, и для особо одарённых мест использовал google translate. Прочитал также и пример ToDo List. Всё показалось понятно, ровно до той поры пока я не стал писать. После чего я взял всё что нашел по этой библиотеке, как на английском так и переводы. Прочтя кипу документации я решил, что сейчас вроде всё понял. Я напрягся, но… Не вышел каменный цветок у мастера Данилы, т.е. вышло, но это явно был не цветок, и камень как то неправильно пах. Тогда, как прилежный ученик, я решил написать «Hello, KittyWorld» с нуля. Попутно комментируя и сохраняя шаги в hg, у меня получилось введение в backbone.js framework для таких как я, особо одарённых.
Данные 7 шагов с комментариями.
Всего голосов 113: ↑110 и ↓3 +107
Просмотры277.2K
Комментарии 51

Практический пример использования Backbone

JavaScript
Из песочницы
В данной заметке речь пойдет об использовании Backbone, а в частности, примеры кода работающего с сервером. Это должен быть некий промежуточный пункт в блужданиях Ищущего, так как иначе начать им пользоваться очень сложно, а вероятность отказаться от идеи перехода стремится к единице.

Зачем вообще нужна данная публикация? Тут уже были статьи по теме, но они затрагивают лишь очень поверхностно то, о чем и так написано в документации, хотя следовало бы показать пути недокументированные. Именно так: backbone это не комплексная standalone библиотека вроде Jquery, которую и не тронешь, не сломав. Данная библиотека предназначена лишь для построения приблизительной структуры; мы же можем лепить из данного материала то, что нам нужно. Еще раз: тут нет смысла искать готовые паттерны, буква в букву примеры не нужно перепечатывать, все равно не поможет. Нужно научиться пользоваться инструментом, после чего уже бросаться в бой.
Читать дальше →
Всего голосов 32: ↑27 и ↓5 +22
Просмотры43.6K
Комментарии 37

Практическое применение Backbone.View

JavaScript

В своем прошлом топике, я описал базовые принципы работы с фреймворком backbone.js, теперь предлагаю перейти к практике и сделать что-нибудь полезное.

Задача


Предположим, что на нашем сайте часто используются разного вида попапы. Все они обладают схожими чертами, их можно открывать в большом количестве, перетаскивать, закрывать. Кроме того различаются активные и неактивные попапы, причем активный расположен поверх остальных и не затенен (хм… я бы сказал, что это уже больше напоминает window-manager).
Вобщем как-то так:


В соответствии с заветами ООП, попробуем разработать класс для попапа, от которого мы сможем наследоваться и создавать попапы на свой вкус с общим для всех поведением.

Скачиваем backbone.js, jquery, jquery ui, underscore.js и
Вперед
Всего голосов 41: ↑35 и ↓6 +29
Просмотры27.4K
Комментарии 36

Оптимизируем работу с шаблонами в Backbone

Клиентская оптимизация
Знакомство с javascript-фреймворком Backbone я, как и многие, начинал с todo-туториала, на базе которого строилось дальнейшее использование фреймворка в своих проектах.

Но туториалы заканчиваются, и начинаются рабочие будни.

Читать дальше →
Всего голосов 20: ↑20 и ↓0 +20
Просмотры7.1K
Комментарии 5

Написание сервиса японских кросвордов на gae, backbone, underscore, require и еще с помощью черт знает чего

Google App Engine
Из песочницы

Вступление


Многие знают про инфраструктуру от google под названием gae, некоторые считают её слишком проприетарной, другие слишком дорогой. Да она не дешевая, и мы попробуем написать оптимальное приложение для gae, которое жрало бы очень мало ресурсов и в идеале не выходило из бесплатных квот даже при хабраэффекте. Опишу мои ошибки, удачные технологические решения при написания сервиса японских кроссвордов. Фишка сайта в том что он позволяет создавать свои кроссворды и из обычной картинки тоже и делиться ими с друзьями.
Для построения сайта используется след. технологии:
backbone.js — фреймворк для обработки запросов на javascript'е. C его помощью будем надеяться, что уложимся в бесплатные квоты, так как весь код выполняется на клиенте, с сервера запрашиваются только данные о кроссвордах в json формате.
require.js — библиотека для дозагрузки любых ресурсом(js, html), можно указать код, который выполнится после загрузки всех ресурсов. Идеальна если у вас есть на сайте javascript и он используется в 1% случаев, и вы не хотите включать js-файл в index.html, то она вам подойдет.
undescore.js — всякие плюшки для слежения за изменением всего объекта или за конкретным его свойством. Очень большая и крутая библиотека, но я использую её как шаблонизатор.
bootstrap — чтобы не заморачиться с дизайном.
less — не ну, а почему б не использовать? (Потому что мы можем)
Ну и конечно же gae — на чем все это будет крутиться.

Читать дальше →
Всего голосов 39: ↑37 и ↓2 +35
Просмотры3.6K
Комментарии 19

Перевод официальной документации по Backbone.JS

Разработка веб-сайтовOpen sourceJavaScript
Доброго времени суток!



В полку Open Source прибыло! Мы (@kulakowka, k12th, dhomich и я) рады представить вашему вниманию перевод официальной документации по Backbone.JS — каркасу для создания RIA приложений на JavaScript, автором которого является Jeremy Askenas — создатель CoffeeScript.
Читать дальше →
Всего голосов 125: ↑122 и ↓3 +119
Просмотры9.5K
Комментарии 48

Backbone.js и routes без хэшей

Разработка веб-сайтовJavaScript
Из песочницы
Практически все, кому приходилось работать с backbone, представляют себе, что это за штука такая — Router. Конечно, в приложении можно обойтись и без него, но удобство работы с приложением сильно проиграет.

Итак, роутер определяет, какую функцию (контроллер) следует использовать, опираясь на URL в строке браузера. Или, если быть точным, на хэш. Т.е. вы могли понаставить в интерфейсе своего приложения ссылок вида:

<a href="http://myapp.com/catalog/#action1">Сделать что-то полезное</a>

или даже

<a href="http://myapp.com/catalog/#action1/42">Сделать что-то полезное с параметром</a>

и всё прекрасно работало. Пользователь, в свою очередь, мог сохранить каждую из этих ссылок, и, в последствии, перейти по ним, сразу же активировав нужную функциональность. Единственный негативный момент во всём этом великолепии — наличие символа "#" (решетка). Не то, чтобы она была плоха сама по себе, но читабельность и «красивость» (с задних рядов мне ещё кто-то про RESTful что-то подсказывает) URL она портила.
Читать дальше →
Всего голосов 12: ↑9 и ↓3 +6
Просмотры2.9K
Комментарии 17

Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 1

AjaxРазработка веб-сайтовJavaScript
Перевод
(от 27 июля 2012)
При написании нативного веб-приложения легко начать чувствовать себя богом, способным работать просто с библиотекой работы с DOM (такой как jQuery) и горсткой сервисных плагинов. Вскоре возникает проблема в виде груды вложенных возвратных функций jQuery и разбросанных DOM-элементов без всякой структуры вместо приложения.

Короче, мы застреваем в спагетти-коде. К счастью, есть современные JS-фреймворки (библиотеки, задающие, кроме функций, правила организации кода --прим. перев.), помогающие поддерживать структуру и организованность в проекте, облегчающие ремонтопригодность в будущем.

■ Что такое MVC или, лучше сказать, MV*?


Эти современные библиотеки дают разработчикам простой путь к организации кода, используя вариации паттерна проектирования, известного как MVC (Model-View-Controller). MVC разделяет задачи в приложении на 3 части:
Читать дальше →
Всего голосов 58: ↑56 и ↓2 +54
Просмотры111K
Комментарии 23

Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 2

AjaxРазработка веб-сайтовJavaScript
Перевод
(Окончание перевода статьи Эдди Османи о сравнении и выборе библиотеки для проекта со значительной ролью JS на клиенте.)
Содержание первой части:

■ Что такое MVC или, лучше сказать, MV*?
■ Когда нам нужен MV*-фреймворк JS?
■ Где же мы будем нуждаться в MV*, а где нет?
■ Проблема выбора: слишком много вариантов?
■ TodoMVC: общее приложение для обучения и сравнения
■ Предложенные нами критерии выбора фреймворка
■ Dojo и усложнение фреймворков на JavaScript
■ Коллекция TodoMVC (фреймворки, на которых сделаны реализации тестового приложения Todo)
Читать дальше →
Всего голосов 87: ↑78 и ↓9 +69
Просмотры123.5K
Комментарии 18

Получение метаданных .NET на клиенте с использованием ajax

JavaScript.NETC#
Всем, кто программирует в среде ASP.NET MVC, хорошо известно, насколько широко используются метаданные в .NET вообще и в MVC в частности. В MVC, атрибуты применяются как при генерации разметки, так и при валидации данных, полученных с клиента.
При использовании классической модели программирования сайтов это прекрасно работает. Но что, если Вы работаете с использование ajax и формируете html разметку динамически на клиенте? Вы хотите иметь метаданные модели (далее МДМ) на клиенте? Я — да!
Читать дальше →
Всего голосов 10: ↑6 и ↓4 +2
Просмотры4.5K
Комментарии 2

Видеозапись доклада «Вся соль одностраничных приложений» с 404fest

Блог компании Ostrovok.ruJavaScript
Федя Шумов и Арсений Заречнев, фронт-енд разработчики из команды Островка, рассказали о
«Всей соли одностраничных приложений» на 404fest в Самаре.

Содержание доклада:


Читать дальше →
Всего голосов 41: ↑29 и ↓12 +17
Просмотры17.9K
Комментарии 10

Увидел свет новый Wordpress 3.5 «Элвин»

WordPressРазработка веб-сайтов
В самое замечательное время года Wordpress подготовил нам великолепный подарок – новый релиз «Элвин», о котором уже оставлено множество положительных откликов от блоггеров и разработчиков. Этот релиз назван в честь барабанщика Элвина Джонса, который играл с John Coltrane и многими другими.
А что нового?
Всего голосов 37: ↑28 и ↓9 +19
Просмотры18.4K
Комментарии 43

Flight — новый js-фреймворк от Twitter

Разработка веб-сайтовJavaScript
Сегодня команда Twitter представила общественности собственный фреймворк. Flight — это легкий компонентный javascript фреймворк, каждый компонент которого описывает поведение элементов на странице. На самом деле, вы скорее всего уже видели Flight в действии, потому что Twitter использует его для своих приложений. Вы можете посмотреть демонстрацию возможностей фреймворка в виде простейшего почтового клиента (код на github).

Новый фреймворк использует ES5-Shim для поддержки ES5 в старых браузерах и jQuery для манипуляции DOM. Также потребуется одна из реализаций AMD, например require.js или loadrunner.
Зачем нам еще один фреймворк?!
Всего голосов 145: ↑141 и ↓4 +137
Просмотры51.8K
Комментарии 39

От JQuery до Backbone

JavaScript
Из песочницы
Recovery mode
imageВ данной статье будет показано как можно реорганизовывать код написанный в «простом» JQuery стиле в код на Backbone, с использованием представлений, моделей, коллекций и событий. Реорганизация будет постепенной, так чтобы этот процесс дал четкое понимание основных абстракций в Backbone. Статья рассчитана на тех кто использует JQuery и хотел бы познакомится со схемой MVC для клиентского кода.
Читать дальше →
Всего голосов 90: ↑80 и ↓10 +70
Просмотры27.4K
Комментарии 43

Сравнение Angular, Backbone, CanJS и Ember

JavaScriptООП
Перевод
(Дата публикации оригинала — 12.04.2013)
Выбор JavaScript MVC фреймворка — тяжёлая работа. Нужно учесть много факторов, и число вариантов выбора может быть огромно. Достаточно взглянуть на проект ToDoMVC (о нем по-русски).

Я работал с 4 фреймворками: Angular, Backbone, CanJS и Ember. Поэтому решил сделать сравнение, чтобы помочь вам решить, какой из них использовать. Я выделю несколько факторов, которые вы можете использовать при выборе. Каждый фактор будет иметь оценку от 1 до 5 (больше — лучше). Я старался быть беспристрастным, но, конечно, оценки основаны на личном опыте.


Читать дальше →
Всего голосов 91: ↑83 и ↓8 +75
Просмотры94K
Комментарии 62

MVC-фреймворки на JavaScript: сравнение Marionette и Chaplin

Разработка веб-сайтовJavaScript
Перевод


Разработка JavaScript-приложений — горячая тема и люди интересуются какой же фреймворк лучше выбрать. В этой статье я сравню два из них.

Marionette и Chaplin — фреймворки, которые работают поверх популярной библиотеки Backbone.js. Оба хотят облегчить разработку одностраничных JS-приложений. В таких приложениях, фронтэнд выполняет задачи, которые в прошлом выполнялись на сервере (вроде рендеринга HTML из данных).

Бэкбон спроектирован, как минималистичная библиотека, а не как полноценный фреймворк. Мой опыт показал, что Бэкбон хорош только как ядро архитектуры JS-аппликейшна. И Марионетка, и Чаплин появились, потому что Бэкбон предоставляет мало структурирования для реальных приложений. Они решают те же проблемы. Так что между ними довольно много сходств — возможно, даже больше, чем отличий.

Читать дальше →
Всего голосов 58: ↑54 и ↓4 +50
Просмотры34.1K
Комментарии 15

Вывод метаданных модели MVC в динамическую разметку

JavaScript.NET
Из песочницы
В ASP.NET MVC метаданные — атрибуты, описывающие поля модели, используются как при генерации разметки (вывод названия поля, его заполнителя и т.д.), так и при валидации данных (вывод правил валидации). Условно можно выделить 2 вида валидации:
  • клиентская валидация
  • серверная валидация

Клиентская валидация хороша тем, что пользователь сразу же видит допущенные ошибки в заполнении полей и может внести поправки без необходимости отправлять данные серверу (ненавязчивая валидация). Именно этот тип валидации необходим в нашем случае.

в чем собственно проблема ?
При использовании классического подхода к генерации разметки все работает автоматически, но что если мы используем ajax и формируем html разметку динамически на клиенте? В этом случае автоматически ничего не добавится в разметку. Можно конечно же все необходимое добавить вручную и казалось бы проблема исчерпана, но здесь встает проблема дублирования кода, так как одни и те же данные приходится описывать дважды — на сервере и на клиенте, что в свою очередь влечет другие проблемы. В ряде случаев динамическая разметка очень удобна, но здесь встает вопрос о выводе метаданных модели и валидации данных на стороне клиента. Об этом речь пойдет далее.

Итак, необходимо реализовать автоматический вывод метаданных модели MVC на клиентскую сторону и ненавязчивую валидацию.
Читать дальше →
Всего голосов 6: ↑5 и ↓1 +4
Просмотры2.9K
Комментарии 0