https://github.com/azproduction/talk-404fest

Backbone в Яндексе
https://github.com/azproduction/talk-404fest

Last synced: 22 days ago
JSON representation

Backbone в Яндексе

• Host: GitHub
• URL: https://github.com/azproduction/talk-404fest
• Owner: azproduction
• Created: 2013-10-13T09:22:10.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2013-10-29T18:36:47.000Z (about 11 years ago)
• Last Synced: 2024-04-15T12:20:59.369Z (7 months ago)
• Language: CSS
• Homepage: http://azproduction.ru/talk-404fest
• Size: 16.9 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Backbone в Яндексе

## Целевая аудитория

 * Web-разработчики разного уровня подготовки

## Цели

(Что мы хотим донести до слушателя)

 * Нужно мыслить компонентами (WebComponents, BEM, BEMJSON)

 * data-bind - меньше кода, меньше ошибок, парвильные потоки данных model->view

 * Backbone.js - гибкая библиотека

### Побочные цели

 * Модули - это хороший тон (CommonJS, LMD)

 * Promise - на много гибче чем Callback

 * Модели должны подчинять представление

 

## Конфликты

(Конфликт технологий, идей, принципов. А или Б)

 * Framework vs Library

 * BEM aka WebComponents vs стандартный подход

 * BEMJSON vs TPL+CSS+JS

 * Модули vs Хаотическая организация проекта

 * Ручная сборка или автоматическая

 * Grunt.js vs Makefile

 * data-bind vs Шаблоны на строках

 * Promise vs Callback

## Проблемы

(Проблемы, которые решаются в докладе. То, что мешало или затрудняло решение задачи.)

 * Не знали что выбрать (Backbone, Angular, ...)

 * Использовали строчные шаблоны

 * Проект был организован на неймспейсах (без модулей)

 * Раньше сталкивались с Callback Pyramid of Doom

 * Раньше использовали ручную пересборку (Makefile) или пересборку по требованию (Сервер)

## Структура доклада

 * Кто вы такие?

   * Слайт про докладчиков: фотки, имена, откуда, наши проекты

 * Задача - m.taxi.yandex.ru

   * SPA

   * Выбор MV* фреймворка/библиотеки

     * Выбирали из таких-то, выбрали Backbone

 * Backbone.js

   * Легко использовать с текущим подходом к разработке

   * Ничего не навязывает

   * View - интерфейс

   * Легко заточить под наши условия

     * Не REST

     * Лагающие сети

 * BEM

   * BEM это WebComponents

     * Но можно использовать сейчас 

   * Почему мы используем компонентный подход

     * Разделение на логические и изолированные блоки

       * Нет конфликтов

       * Легко реиспользовать

   * HTML, CSS, JS - это ассемблер веба 

     * Проще компоновать проект блоками

   * Можно создавать бибблиотеку блоков

   * Пример datepicker

 * BEMJSON

   * Мета-шаблон - это структура страницы без мусора, только блоки

     - HTML - шум

     - Сегодня многие компоненты сложные: созержат кучу HTML, CSS, JS

     - Описать компонент проще в JSON, чем тащить кучу HTML

     - Компонентный JS должен быть декларативным (запускаться над блоком сам)

   * Пример страницы со сложным элементом на BEMJSON

     - Сравнить с чистым HTML

   * Мз BEMJSON мы получаем все составляющие блоков CSS, JS, TPL(даже PHP) или HTML

     - Интерактивный пример с автопересборкой шаблона (как jsfiddle: BEMJSON, CSS, JS, результат)

 * data-bind

   * Почему не конкатинация строк?

   * Меньше кода во view

   * Почему мы выбрали Rivets.js а не Knockback

   * Генерация шаблонов из BEMJSON

     * Пример кода и результата

     * BEMHTML не стоит показываьть

 * Модули

   * Раньше были неймспейсы и файлы

     * Произвольный доступ кмодулю

     * Не понятно от чего зависит модуль

     * Не понятно что предоставляет модуль

   * Решили использовать CommonJS

     * Проще писать

     * Node.js-friendly

   * Сборка CommonJS с LMD

     * Запуск CommonJS в браузере 

     * Код полностью изолирован от третьей стороны 

     * Организация различных сборок (локализованных, под разные окружения)

     * Можно использовать динамический require

 * Callback Pyramid of Doom

   * Раньше использовали смешанный подход то промисы, то колбэки

   * Решили все сделать на промисах

     * Почему не коллбэки вы можете узнать из мего доклада

   * Много непредсказуемой асинхронности

     * Пример с обрывом соединения 

     * Обрыв соединения легко обрабатывается на промисах

     * Пример с promise-attempt (несколько обрывов, запрос решения пользователя)

   * Модальное окно - прекрасно укладывается в абстракцию промис

 * Сборка

   * Сегодня все пересоирается 

   * Раньше пересобирали руками или на сервере

   * Теперь используем grunt для сборки и валидации кода

     * Заставляем писать сразу хороший код

     * Проект не пересоберется если код плохой

   * Используем 

     * grunt-watch

     * grunt-jshint + .jshintrc

     * grunt-jscs + .jscs.json

     * grunt-enb - Пересборка компонент

     * grunt-lmd - Пересбрка логики

 * Выводы

   * Нужно мыслить компонентами (WebComponents, BEM, BEMJSON) иначе можно запутаться в сложных интферйсах

   * data-bind - меньше кода, меньше ошибок, парвильные потоки данных model->view

   * Backbone.js - гибкая библиотека, которая ни к чему не обязывает

   * Promise - хорошо работает в непредсказуемой асинхронности