Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Symfony + EmberJS

Symfony + EmberJS

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

Aa0518da9d7119444cb02a8f27017d8a?s=128

Michael Bodnarchuk

November 01, 2014
Tweet

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!