{"id":17771237,"url":"https://github.com/azproduction/talk-404fest","last_synced_at":"2025-04-01T15:24:25.141Z","repository":{"id":139813533,"uuid":"13536745","full_name":"azproduction/talk-404fest","owner":"azproduction","description":"Backbone в Яндексе","archived":false,"fork":false,"pushed_at":"2013-10-29T18:36:47.000Z","size":17772,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-07T09:43:26.212Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://azproduction.ru/talk-404fest","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/azproduction.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-13T09:22:10.000Z","updated_at":"2014-11-02T13:20:24.000Z","dependencies_parsed_at":"2023-03-13T10:45:21.810Z","dependency_job_id":null,"html_url":"https://github.com/azproduction/talk-404fest","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azproduction%2Ftalk-404fest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azproduction%2Ftalk-404fest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azproduction%2Ftalk-404fest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azproduction%2Ftalk-404fest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azproduction","download_url":"https://codeload.github.com/azproduction/talk-404fest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246660559,"owners_count":20813437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-26T21:30:40.933Z","updated_at":"2025-04-01T15:24:25.123Z","avatar_url":"https://github.com/azproduction.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Backbone в Яндексе\n\n## Целевая аудитория\n\n * Web-разработчики разного уровня подготовки\n\n## Цели\n\n(Что мы хотим донести до слушателя)\n\n * Нужно мыслить компонентами (WebComponents, BEM, BEMJSON)\n * data-bind - меньше кода, меньше ошибок, парвильные потоки данных model-\u003eview\n * Backbone.js - гибкая библиотека\n\n### Побочные цели\n\n * Модули - это хороший тон (CommonJS, LMD)\n * Promise - на много гибче чем Callback\n * Модели должны подчинять представление\n \n## Конфликты\n\n(Конфликт технологий, идей, принципов. А или Б)\n\n * Framework vs Library\n * BEM aka WebComponents vs стандартный подход\n * BEMJSON vs TPL+CSS+JS\n * Модули vs Хаотическая организация проекта\n * Ручная сборка или автоматическая\n * Grunt.js vs Makefile\n * data-bind vs Шаблоны на строках\n * Promise vs Callback\n\n## Проблемы\n\n(Проблемы, которые решаются в докладе. То, что мешало или затрудняло решение задачи.)\n\n * Не знали что выбрать (Backbone, Angular, ...)\n * Использовали строчные шаблоны\n * Проект был организован на неймспейсах (без модулей)\n * Раньше сталкивались с Callback Pyramid of Doom\n * Раньше использовали ручную пересборку (Makefile) или пересборку по требованию (Сервер)\n\n## Структура доклада\n\n * Кто вы такие?\n   * Слайт про докладчиков: фотки, имена, откуда, наши проекты\n * Задача - m.taxi.yandex.ru\n   * SPA\n   * Выбор MV* фреймворка/библиотеки\n     * Выбирали из таких-то, выбрали Backbone\n * Backbone.js\n   * Легко использовать с текущим подходом к разработке\n   * Ничего не навязывает\n   * View - интерфейс\n   * Легко заточить под наши условия\n     * Не REST\n     * Лагающие сети\n * BEM\n   * BEM это WebComponents\n     * Но можно использовать сейчас \n   * Почему мы используем компонентный подход\n     * Разделение на логические и изолированные блоки\n       * Нет конфликтов\n       * Легко реиспользовать\n   * HTML, CSS, JS - это ассемблер веба \n     * Проще компоновать проект блоками\n   * Можно создавать бибблиотеку блоков\n   * Пример datepicker\n * BEMJSON\n   * Мета-шаблон - это структура страницы без мусора, только блоки\n     - HTML - шум\n     - Сегодня многие компоненты сложные: созержат кучу HTML, CSS, JS\n     - Описать компонент проще в JSON, чем тащить кучу HTML\n     - Компонентный JS должен быть декларативным (запускаться над блоком сам)\n   * Пример страницы со сложным элементом на BEMJSON\n     - Сравнить с чистым HTML\n   * Мз BEMJSON мы получаем все составляющие блоков CSS, JS, TPL(даже PHP) или HTML\n     - Интерактивный пример с автопересборкой шаблона (как jsfiddle: BEMJSON, CSS, JS, результат)\n * data-bind\n   * Почему не конкатинация строк?\n   * Меньше кода во view\n   * Почему мы выбрали Rivets.js а не Knockback\n   * Генерация шаблонов из BEMJSON\n     * Пример кода и результата\n     * BEMHTML не стоит показываьть\n * Модули\n   * Раньше были неймспейсы и файлы\n     * Произвольный доступ кмодулю\n     * Не понятно от чего зависит модуль\n     * Не понятно что предоставляет модуль\n   * Решили использовать CommonJS\n     * Проще писать\n     * Node.js-friendly\n   * Сборка CommonJS с LMD\n     * Запуск CommonJS в браузере \n     * Код полностью изолирован от третьей стороны \n     * Организация различных сборок (локализованных, под разные окружения)\n     * Можно использовать динамический require\n * Callback Pyramid of Doom\n   * Раньше использовали смешанный подход то промисы, то колбэки\n   * Решили все сделать на промисах\n     * Почему не коллбэки вы можете узнать из мего доклада\n   * Много непредсказуемой асинхронности\n     * Пример с обрывом соединения \n     * Обрыв соединения легко обрабатывается на промисах\n     * Пример с promise-attempt (несколько обрывов, запрос решения пользователя)\n   * Модальное окно - прекрасно укладывается в абстракцию промис\n * Сборка\n   * Сегодня все пересоирается \n   * Раньше пересобирали руками или на сервере\n   * Теперь используем grunt для сборки и валидации кода\n     * Заставляем писать сразу хороший код\n     * Проект не пересоберется если код плохой\n   * Используем \n     * grunt-watch\n     * grunt-jshint + .jshintrc\n     * grunt-jscs + .jscs.json\n     * grunt-enb - Пересборка компонент\n     * grunt-lmd - Пересбрка логики\n * Выводы\n   * Нужно мыслить компонентами (WebComponents, BEM, BEMJSON) иначе можно запутаться в сложных интферйсах\n   * data-bind - меньше кода, меньше ошибок, парвильные потоки данных model-\u003eview\n   * Backbone.js - гибкая библиотека, которая ни к чему не обязывает\n   * Promise - хорошо работает в непредсказуемой асинхронности\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazproduction%2Ftalk-404fest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazproduction%2Ftalk-404fest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazproduction%2Ftalk-404fest/lists"}