«темная лошадка»
в мире frontend-фрэймворков
Андрей Михайлов
@lolmaus
goo.gl/SWNzUZ
Андрей
Михайлов
@lolmaus
http://lolma.us
- Шесть лет в вэб-разработке
- Два года специализируюсь на сложных приложениях на Ember
goo.gl/SWNzUZ
Text
Ember — современный frontend-фрэймворк для разработки амбициозных вэб-приложений
- Взаимодействует с API
- Стремится при помощи вэб-технологий составить конкуренцию мобильным приложениям
- Источник вдохновения для Angular 2
- Конвенции избавляют от необходимости конфигурировать вручную
Зачем Ember, если
есть React и Angular?
Виды приложений на Ember
в production
BuiltWithEmber.io
Виды приложений на Ember
в production:
Виды приложений на Ember
в production:
Виды приложений на Ember
в production:
Apple
Известные компании, использующие Ember
Известные компании, использующие Ember
Поехали по достоинствам!
Ember избавляет от рутины,
позволяя вам сосредоточитсья на бизнес-логике
Developer joy!
Код приложений на Ember:
- единый стандарт boilerplate
- единая экосистема аддонов
Пример аддона:
Автоматизирует публикацию вашего приложения, расширяется с помощью вспомогательных аддонов
- запуск сборки
-
в HipChat
Deploy targets:
-
Ember не находится в лапах корпораций
и развивается силами сообщества - Разработка крупных фич нередко спонсируется компаниями, использующими Ember
- Все члены core team -- сотрудники таких компаний
- Открытый процесс проектирования и разработки через RFC
Открытое
Дружелюбное
- Чат в Slack
- Русскоязычный чат в Gitter
- Активный раздел на StackOverflow
- Вам всегда готовы помочь, объяснить
- Очень актвная open source разработка: все шлют друг другу pull-request'ы
- У Ember, Ember CLI, a также всех инфраструктурных аддонов
имеются гайды и доки по API
- API-документация пишется в комментариях кода при помощи JSDoc или YUIDoc
- Для аддонов и публикаций пропагандируется использование бэйджиков с указанием версии
- Определенные методы работы объявляются устаревшими, но продолжают функционировать
- Следующий мажорный релиз перестает поддерживать устаревшие фичи
- Минорные релизы каждые шесть недель
- Каждый четвертый релиз -- LTS, гарантируются багфиксы и устранения уязвимостей в течение
36 недель без риска сломать проект обновлением
Как с точки зрения производительности приложения, так и удобства программиста
Благодаря собственной объектной модели, каждая единица данных напрямую связана со своим DOM-элементом.
Обновления DOM происходят напрямую, без потребности пересчитывать много данных
Computed properties делают ваш код проще и надежней
- Реактивный паттерн
- Кэширование значений
- Пересчитывание значений в нужный момент
Тесты!
- Является аддоном, не обязателен к использованию.
- Store -- централизованное хранилище в памяти.
- Store всегда возвращает один и тот же инстанс записи, изменения записи мгновенно распространяются по всему приложению.
- Подключаемые адаптеры и сериалайзеры для различных бэкендов: всевозможные REST, а также WebSocket, GraphQL и т. п.
- Адаптеры и сериалайзеры настраиваются и кастомизируются чрезвычайно гибко.
Первоклассный роутер
- При первом запросе браузера, Ember рендерит страницу на сервере в Node и отдает ее в HTML.
- Пока грузится комплект JS, пользователь может взаимодействовать со страницей.
- Все ссылки работают по-старинке.
- Когда JS загружен, Ember запускается и перехватывает управление. HTML-сайт превращается в Single Page Application.
- Из Node в браузер можно передать данные через "shoe box", чтобы не требовалось повторно запрашивать их с сервера.
- При помощи Service Worker-плагинов можно будет делать Progressive Web Apps, работающие как мобильные приложения
- Tree shaking — исключение из дистрибутива неиспользуемых модулей
- И много что еще!
Вам шашечки или ехать?
Всё!
goo.gl/HHxfB2
Некоторые недостатки Ember
(после прочтения сжечь)
О недостатках Ember
1. Для доступа к свойствам приходится использовать хелперы get и set
Нельзя написать:
const myService = this.get('myService')
myService.set('myProperty', 'value')
myService.parse()Приходится писать:
this.myService.myProperty = 'value'
this.myService.parse()О недостатках Ember
2. Как следствие, в мире Ember не принято использовать TypeScript,
что справедливо расстраивает
часть передовых JS-разработчиков.
О недостатках Ember
3. Трудности с отладкой из-за того, что Ember имеет собственный run loop.
Stack trace ошибки порой не указывает на ваш код.
О недостатках Ember
4. Традиционный шаблонизатор
с синаксисом Handlebars.
Если нужно сгенерировать динамическую, заранее не определенную DOM-структуру, то:
- либо будет работать медленно,
- либо нужно изобретать велосипед.
О недостатках Ember
5. Традиционная объектная модель:
в Store лежат мутабельные инстансы моделей.
Нынче это не модно.
О недостатках Ember
6. И вообще Ember немодный, он использует проверенные временем инструменты, например, Broccoli.
Это затрудняет участие в жарких спорах вроде «WebPack 2 или Rollup».
О недостатках Ember
7. Как следствие, Ember до сих пор опирается на такие морально устаревшие инструменты как:
- jQuery
- Bower
- Babel 5
О недостатках Ember
8. Ember не опирается на плечи гигантов вроде Facebook и Google,
что объясняет меньшую популярность по сравнению с React и Angular.
О недостатках Ember
9. Нет горячей замены кода.
При разработке каждое сохранение вызывает перезагрузку страницы.
(Но есть горячая замена стилей.)
О недостатках Ember
10. Большой размер дистрибутива.
Размер vendor.js быстро переваливает за мегабайт (350 КиБ в gzip).
Сходу о недостатках Ember
11. Нет аналога React Native.
Мобильные приложения на Ember используют WebView.
Сходу о недостатках Ember
12. В Ember приходится думать! :(
Многие задачи не решить «в лоб»,
быстро накидав страницу кода.
Приходится листать документацию, искать, какой метод следует переопределить.
Теперь точно всё!