Pull to refresh
  • by relevance
  • by date
  • by rating

Базовая архитектура веб-приложения на Backbone.js

JavaScript *
Разработчики часто просят рассказать о моём опыте использования Backbone.
Многие слышали об этом MVC-фреймворке, смотрели примеры и документацию, но не решаются начать с ним работать. Поэтому вчера я сделал мини-доклад на встрече MoscowJS, призванный рассказать о том, как мы построили базовую архитектуру и какие получили плюсы. И сегодня в этой статье я публикую слайды, схемы и краткое описание.


Читать дальше →
Total votes 88: ↑82 and ↓6 +76
Views 21K
Comments 33

Асинхронный UI: будущее веб-интерфейсов

Website development *
В то время как Ajax стал мейнстримом, пользовательские интерфейсы по-прежнему не могут похвастаться мгновенной отзывчивостью к действиям пользователя. Причина в том, что многие разработчики привыкли мыслить в терминологии «запрос/ответ» и думают, что UI должен работать параллельно с фронтэндом, дожидаясь ответа от сервера на каждый запрос. Но почему бы не обновлять интерфейс раньше, чем пришёл ответ?

Проблема довольно острая, потому что быстродействие является критически важной характеристикой UI. Например, по оценке Amazon, задержка загрузки страницы всего лишь в 0,1 секунды приводит к снижению оборота магазина на 1%. По оценке Google, задержка в 0,5 секунды уменьшает количество поисковых запросов на 20%.

Ruby/JavaScript-разработчик Алекс Маккоу (Alex MacCaw) из компании Twitter предлагает логичное решение проблемы: распространить принципы Ajax не только на фронтэнд, но и на пользовательский интерфейс. Он разработал соответствующий фремйворк для того, что называется AUI (асинхронный интерфейс пользователя).
Читать дальше →
Total votes 109: ↑100 and ↓9 +91
Views 6.6K
Comments 58

Backbone Boilerplate

JavaScript *
Американская компания Bocoup, как и многие другие веб-разработчики, постоянно использует в работе известный «пуленепробиваемый» шаблон для создания HTML5-сайтов HTML5 Boilerplate. Однако, сотрудники Bocoup решили не только пользоваться, но внести свой вклад в общее дело и выкатили для всеобщего пользования не менее концептуальную вещь — Backbone Boilerplate, набор лучших средств и приёмов для создания приложений Backbone.js.

Прямо из коробки мы получаем:
  • Backbone, Underscore и jQuery, всё это на базе HTML5 Boilerplate.
  • Инструмент Windows/Mac/Linux для прекомпиляции шаблонов, связывания и минификации всех библиотек, кода приложения и CSS.
  • Лёгкий веб-сервер node.js.
  • Многочисленные сниппеты кода для Backbone, облегчающие жизнь.
В Backbone Boilerplate логичная и элегантная файловая система (отдельно код, вспомогательные файлы, тесты, билды) и есть возможность создавать собственные классы Models/Collections/Views/Routers внутри модулей.

Разработчики говорят, что проект появился в результате их долгих попыток работать с другими шаблонами: оказалось, что в одних нет процесса сборки, другие налагают излишние ограничения. Новый Backbone Boilerplate призван исправить ситуацию и вполне может стать каноническим, каким стал тот же HTML5 Boilerplate.
Total votes 50: ↑46 and ↓4 +42
Views 8.9K
Comments 22

Альтернативный взгляд на плагин для маски ввода чисел и не только в input и textarea

jQuery *
Sandbox
Вдогонку к опубликованной раннее статье Плагин для маски ввода чисел в input, хотел бы поделиться своим взглядом на решение данной проблемы.

Подробности под Хаброкатом.

Читать дальше →
Total votes 13: ↑11 and ↓2 +9
Views 2.2K
Comments 7

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

Website development *Open source *JavaScript *
Доброго времени суток!



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

TodoMVC — «Hello, world» на стероидах

Website development *JavaScript *
Tutorial
Cуществует уже несколько десятков JavaScript-фреймворков для построения сложных приложений в браузере. Чтобы сравнить их между собой и выбрать наиболее подходящий, примитивного примера вроде классического «Hello, world» явно недостаточно. Более сложные и реалистичные примеры программ в книгах и документации каждого фреймворка могут сильно отличаться, и сравнивать их между собой затруднительно. Проект TodoMVC решает именно эту проблему. Это набор примеров реализации одного и того же простого, но вполне законченного веб-приложения с использованием разных фреймворков + эталонный пример на чистом JavaScript.

Приложение TodoMVC — это список дел. Дела можно добавлять, помечать как выполненные и удалять. Список должен сохраняться в локальном хранилище браузера. Приложение должно по возможности использовать стандартный шаблон HTML и CSS. Вот подробная спецификация приложения.
Читать дальше →
Total votes 51: ↑41 and ↓10 +31
Views 17K
Comments 17

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

JavaScript *
Sandbox

Введение в Spine.js


Spine представляет собой небольшой фрэймворк, который позволяет работать по схеме MVC, создавая приложения непосредственно на языке JavaScript, что обеспечивает логическое разделение кода, наследование моделей через классы и расширения. Также во многом этот инструмент базируется на Backbone.js API, так что те разработчики, которые имели дело с данным фрэймворком, без труда разберутся и в Spine (однако существует целый ряд существенных различий). Spine.js может работать совместно с HTML5 и асинхронными запросами сервера.
Читать дальше →
Total votes 39: ↑37 and ↓2 +35
Views 7.9K
Comments 17

Все JavaScript библиотеки в одном месте

JavaScript *

Jswiki — это проект на github, который постарался собрать все достойные JavaScript библиотеки и ресурсы. На страницах описания библиотек, так же собраны ссылки на статьи для начинающих, чтобы читатель мог как можно быстрее начать использовать ту или иную библиотеку.

Впервые увидел настолько полную wiki по JavaScript либам, не смог с вами не поделиться.
Total votes 88: ↑82 and ↓6 +76
Views 34K
Comments 22

Tracks Flow изнутри

Tracks Flow corporate blog
Что такое вложенный MVC? Как в одном проекте уживаются три бэкенд-сервера Node, php-fpm и IIS? Можно ли запустить музыкальный сервис на своем ноутбуке? И как вообще работает tracksflow.com изнутри?

Схема tracksflow.com

Читать дальше →
Total votes 12: ↑11 and ↓1 +10
Views 14K
Comments 33

Отображение зависимых данных на примере каскадных выпадающих списков

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

Короче не получилось… Отчасти из-за того, что я усложнил задачу до бесконечно выпадающих списков и из-за небольшой многословности Backbone.
Читать дальше →
Total votes 12: ↑7 and ↓5 +2
Views 3K
Comments 4

Backbone.js для разработки веб-приложений, Speakers’ Corner в Одессе c Артемом Тритьяком

Ciklum corporate blog Website development *
Для тех айтишников, кто на этой неделе решил насладиться морем и солнцем Одессы, отличная новость: вечер пятницы можно будет провести с пользой! В Одесском офисе Сиклум пройдет очередное мероприятие из серии Speakers’ Corner, в этот раз посвященное разработке веб-приложений с использованием Backbone.js от Артема Тритьяка.

В программе доклада обсуждение AMD, Backbone.js, архитектуры RESTful, работа с шаблонами. Вместе со слушателями поработаем с моделью.destroy() model а также рассмотрим необходимость использования Backbone.js {silent: true}. Специально для этого мероприятия Артем подготовил приложение на Backbone.js, чтобы продемонстрировать на реальных примерах его работу. Исходный код будет выложен в Github и доступен всем желающим.

О докладчике:
Артем Тритьяк является представителем connex.io, уже более 6 лет работает с JavaScript, Python и PHP как в рамках аутсорсингов проектов, так и в продуктовой команде, опирающейся на опыт сотрудников. Создавал софт для эмбедед устройств. Обо всем этом и многом другом он готов рассказать аудитории в будующую пятницу!
Читать дальше →
Total votes 9: ↑5 and ↓4 +1
Views 4.3K
Comments 5

Пишем реализацию MVC для Backbone

JavaScript *
image

Одним пасмурным утром я подумал, что было бы неплохо хорошенько прорефакторить один из моих старых проектов. Это некоммерческое легковесное приложение для кастомизации HUD в одном 3Д шутере. Писал я его 2 года назад, был горяч и неопытен. В результате куча отменного спагетти-кода, который, несмотря на все свои недостатки, делал своё дело. Став мудрее и опытнее, я решил полностью переписать приложение, дать ему новую архитектуру, упростить поддержку и обновление. Как это сделать? Ответ казался простым — использовать MVC, разделить на уровни и связать всё в единое целое. Так я столкнулся с проблемой выбора простого и эффективного фреймворка, который станет прочным фундаментом. После быстрого исследования я выбрал backbone.js. Очень понравился своей простотой и гибкостью. Можно просто открыть исходники и понять, как всё устроено и работает. Единственный нюанс, который не радовал — MV-паттерн. Размазывать логику по многочисленным views очень не хотелось, так родилась идея написать свой велосипед, который предоставит недостающие части головоломки. Плюс, создание чего-то нового — это всегда увлекательно и интересно. Недолго думая, я приступил к реализации контроллеров для backbone.
Читать дальше →
Total votes 13: ↑9 and ↓4 +5
Views 11K
Comments 33

Используем backbone.js под node.js

Node.JS *
Sandbox
Приветствую, уважаемые читатели Хабрахабра. Хочу поделиться с вами своим опытом использования backbone.js под node.js. Ранее я активно поработал с backbone.js на клиенте, и эта библиотека оказалась крайне удобной для структурирования кода.

Сервис без работы с какой либо базой данных — не сервис. В моем случае, в качестве СУБД была выбрана mongodb. Я посмотрел существующие решения ORM для mongodb, и мне показалось более удобным пользоваться знакомыми инструментами, тем более они же будут использоваться и на клиенте, поэтому решено было попробовать применить для моделей класс Backbone.Model и заодно проверить, как все это можно кастомизировать под mongodb.

Читать дальше →
Total votes 19: ↑14 and ↓5 +9
Views 15K
Comments 3

Асинхронная загрузка данных Backbone.js

Website development *JavaScript *
Добрый день! Я продолжу писать статьи о том, что пришлось писать на Backbone.js в ходе работе и с чем вы можете столкнуться. Сегодня речь пойдет про асинхронную загрузку данных, а точнее данных, которые часто нам нужны на сайте.
Читать дальше →
Total votes 14: ↑9 and ↓5 +4
Views 9.7K
Comments 4

ASP.NET MVC и ненавязчивая валидация с Backbone.js

JavaScript *.NET *
Sandbox
При разработке веб приложений, мы используем Asp.net MVC и backbone.js. При написании логики проверки достоверности у нас возникла проблема дублирования кода. Логику приходится описывать в модели на сервере и в модели backbone на клиенте. Хотелось бы автоматически перенести правила валиции с сервера на клиент. Для решения этой проблемы мы реализовали аналог стандартной ненавязчивой проверки достоверности данных MVC для backbone.js Подробности ниже.
Читать дальше →
Total votes 11: ↑8 and ↓3 +5
Views 3.6K
Comments 3

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

Website development *JavaScript *
Translation


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

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

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

Читать дальше →
Total votes 58: ↑54 and ↓4 +50
Views 34K
Comments 15

Как подружить Socket.IO и backbone.js

Website development *JavaScript *
Sandbox
Как мы все знаем, евенты backbone.js делятся на две категории:

  • Изменение информации в моделях/коллекциях
  • Евенты DOM — дерева

Недавно, мне необходимо было решить задачу подключения евентов socket.io к backbone, да так, что бы все было внутри приложения backbone, что бы евенты сокетов можно было объявить прямо во вьюхах и там же описать все действия, которые будут происходить по евенту.

Дабы не отступать от стиля backbone, хотелось реализовать возможность добавить событие socket.io так же, как событие DOM — дерева, а именно вот так:

var im = Backbone.View.extend({
  io_events: {
    'new_message': 'newMessage'
  },
  newMessage: function(message_data){
    //do something
  }
});

Долгие поиски по просторам интернета меня привели к подборке менее элегантных методов связки backbon'а и сокетов, которые, вроде, и решали задачу, но не так, как хотелось бы. Пришлось думать самому.
Читать дальше →
Total votes 10: ↑8 and ↓2 +6
Views 3K
Comments 3

O Backbone.js очень просто и кратко для любителей MVC-фреймворков

JavaScript *Programming *Ruby on Rails *
Tutorial
Об использовании JavaScript-фреймворка Backbone.js написано много, но просто и кратко — мало. Я постараюсь исправить этот недостаток и рассказать разработчикам web-приложений максимально просто, доступно и кратко о том, зачем им может пригодится этот фреймворк и как, в общих чертах, он работает. Профессионалы и специалисты по Backbone.js: можете не тратить время, этот рассказ для новичков. Если быть честным, то для чтения этой заметки не обязательно быть Rails-developer'ом, надеюсь, статья пригодится всем, кто работает с любым из МVC-фреймворком.

Читать дальше →
Total votes 52: ↑43 and ↓9 +34
Views 37K
Comments 38

Наследование в Backbone.js

Website development *JavaScript *
Коллеги, использующие Backbone.js! Вы задумывались, как работает наследование в этой библиотеке?
Знаете, как себя ведет Backbone.Model.extend({})?
И наверняка знаете и помните, что у extend два опциональных параметра: proto props и static props.
Если хотя бы на один выше заданный вопрос вы ответили отрицательно — прошу под кат.
Постараюсь порадовать пошаговым исследованием, схемками, табличками и примерами.
Читать дальше →
Total votes 15: ↑10 and ↓5 +5
Views 14K
Comments 1