Symfony + EmberJS

Дружим два офигенных фрйемворка. Доклад с SymfonyCampUA 2014

Transcript

1. Symfony + EmberJS Michael Bodnarchuk @davert
2. Обо мне • Михаил Боднарчук @davert • Веб разработчик­ фрилансер. Пишу на Symfony, Rails, EmberJS • Автор фреймворка для тестирования Codeception, таск раннера Robo и пр. • Работаю с EmberJS полтора года.
3. Что такое новый веб? • Одностраничные приложения • Мобильные приложения • Веб­приложения ничем не отличаются от нативных. • Данные на клиенте
4. EmberJS: A framework for creating ambitious web applications. • Авторы: Yehuda Katz (jQuery, Rails) и Tom Dale • Изначально был SproutCore 2.0 • Разработка начата в 2011 году • В 2013 добавился ORM слой EmberData
5. EmberJS? • vs AngularJS • vs BackboneJS
6. Почему EmberJS • Помогает строить приложения десктопного уровня • Формирует архитектуру приложения • Следит за распределением памяти • Позволяет писать код синхронно • Основан на JQuery, Handlebars
7. Используют Ember • Travis CI • Discourse
8. True MVC
9. Архитектура • Route – отвечает за страницу вцелом (URL) • Model – данные на странице • Template – шаблон страницы • Controller – управление данными • View – управление представлением • Component – встраивыемые Template+View
10. Пишем на • JavaScript • CoffeeScript • EmberScript!
11. Routes
12. Route Данные Шаблон
13. Controller Действия с данными Свойства данных на странице
14. Template
15. View
16. ООП • Имеет ООП модель похожую на Ruby • Есть классы, есть примеси (миксины) • Классы можно переоткрывать • Есть геттеры­сеттеры • Свойства обьектов могут быть вычисляемыми • Можно подписываться на изменение свойств
17. Computed Properties
18. Dependency Injection • Есть Dependency Injection Container • Routes, Controllers, Views создаются автоматически по правилам, указанным в Resolver: => Report, ReportsView, ReportsRoute, ReportsController • Обычно доступ к контейнеру напрямую не нужен.
19. Синхронизируй это! • Везде используются Promises • RunLooop – обрабатывает события один за другим по заранее заданной цепочке.
20. Паттерн List­Detail Post Posts
21. ORM • ActiveRecord + EntityManager • EntityManager == Store
22. EmberData
23. Модель
24. Что требуется от бекенда? • Бекенд должен работать как СУБД по REST протоколу (FOSRestBundle). • Предоставить максимум данных при минимуме запросов. • Бекенд должен реализовывать бизнес­логику. • Проводить валидацию запросов.
25. Отправка данных • Получить пост со всеми комментариями, со всеми тегами и со всеми пользователями, прокомментриовавшими этот пост. • За один запрос к серверу! • /api/v1/posts/1.json
26. Сериализация данных • Формат: JSON­API http://jsonapi.org • JMSSerializer https:// github.com/schmittjoh/serializer • Fractal http://fractal.thephpleague.com
27. Тестирование Наше приложение Обычная веб­страница Тесты Ошибки
28. Функциональный тест
29. Юнит­тест
30. Варианты использования • Интеграция с Symfony проектом (Assetic, Composer, Bundle) • https:// github.com/ucsf­ckm/symfony­emberjs­edition • Клиентское приложение незаисимое от серверного (NodeJS, EmberCLI). • http://www.ember­cli.com
31. Новая эра веб­ приложений • Сервер предоставляет данные. • Клиент предосталяет интерфейс. • MVC (server) + MVC (client) • Частично дублируется код сервера и клиента
32. Server • Model • Services (validation, business logic) • Controller • ­View • +Serializer
33. Client • +Model • +Route • +Controller • +Template • +View
34. Выводы • EmberJS не ускорит разработку веб­ приложения • EmberJS улучшит UX – веб приложение будет работать почти как мобильное или десктопное. Но с URL! • EmberJS улучшит производительность – данные всегда находятся в памяти, не нужно лезть на сервер без необходимости • EmberJS позволяет легко внедрить RealTime Updates – через веб­сокет мы постоянно получаем обновленные данные и тут же рендерим их.
35. Спасибо. А теперь вопросы! • http://emberjs.com • https:// github.com/ucsf­ckm/symfony­emberjs­edition • http://www.ember­cli.com ...а также фоловьте меня в твиттере @davert и тестируйте свои проекты с Codeception!