Tweet
Tweet

Slide 1

Slide 1 text

Symfony + EmberJS Michael Bodnarchuk @davert

Slide 2

Slide 2 text

Обо мне • Михаил Боднарчук @davert • Веб разработчик­ фрилансер. Пишу на Symfony, Rails, EmberJS • Автор фреймворка для тестирования Codeception, таск раннера Robo и пр. • Работаю с EmberJS полтора года.

Slide 3

Slide 3 text

Что такое новый веб? • Одностраничные приложения • Мобильные приложения • Веб­приложения ничем не отличаются от нативных. • Данные на клиенте

Slide 4

Slide 4 text

EmberJS: A framework for creating ambitious web applications. • Авторы: Yehuda Katz (jQuery, Rails) и Tom Dale • Изначально был SproutCore 2.0 • Разработка начата в 2011 году • В 2013 добавился ORM слой EmberData

Slide 5

Slide 5 text

EmberJS? • vs AngularJS • vs BackboneJS

Slide 6

Slide 6 text

Почему EmberJS • Помогает строить приложения десктопного уровня • Формирует архитектуру приложения • Следит за распределением памяти • Позволяет писать код синхронно • Основан на JQuery, Handlebars

Slide 7

Slide 7 text

Используют Ember • Travis CI • Discourse

Slide 8

Slide 8 text

True MVC

Slide 9

Slide 9 text

Архитектура • Route – отвечает за страницу вцелом (URL) • Model – данные на странице • Template – шаблон страницы • Controller – управление данными • View – управление представлением • Component – встраивыемые Template+View

Slide 10

Slide 10 text

Пишем на • JavaScript • CoffeeScript • EmberScript!

Slide 11

Slide 11 text

Routes

Slide 12

Slide 12 text

Route Данные Шаблон

Slide 13

Slide 13 text

Controller Действия с данными Свойства данных на странице

Slide 14

Slide 14 text

Template

Slide 15

Slide 15 text

View

Slide 16

Slide 16 text

ООП • Имеет ООП модель похожую на Ruby • Есть классы, есть примеси (миксины) • Классы можно переоткрывать • Есть геттеры­сеттеры • Свойства обьектов могут быть вычисляемыми • Можно подписываться на изменение свойств

Slide 17

Slide 17 text

Computed Properties

Slide 18

Slide 18 text

Dependency Injection • Есть Dependency Injection Container • Routes, Controllers, Views создаются автоматически по правилам, указанным в Resolver: => Report, ReportsView, ReportsRoute, ReportsController • Обычно доступ к контейнеру напрямую не нужен.

Slide 19

Slide 19 text

Синхронизируй это! • Везде используются Promises • RunLooop – обрабатывает события один за другим по заранее заданной цепочке.

Slide 20

Slide 20 text

Паттерн List­Detail Post Posts

Slide 21

Slide 21 text

ORM • ActiveRecord + EntityManager • EntityManager == Store

Slide 22

Slide 22 text

EmberData

Slide 23

Slide 23 text

Модель

Slide 24

Slide 24 text

Что требуется от бекенда? • Бекенд должен работать как СУБД по REST протоколу (FOSRestBundle). • Предоставить максимум данных при минимуме запросов. • Бекенд должен реализовывать бизнес­логику. • Проводить валидацию запросов.

Slide 25

Slide 25 text

Отправка данных • Получить пост со всеми комментариями, со всеми тегами и со всеми пользователями, прокомментриовавшими этот пост. • За один запрос к серверу! • /api/v1/posts/1.json

Slide 26

Slide 26 text

Сериализация данных • Формат: JSON­API http://jsonapi.org • JMSSerializer https:// github.com/schmittjoh/serializer • Fractal http://fractal.thephpleague.com

Slide 27

Slide 27 text

Тестирование Наше приложение Обычная веб­страница Тесты Ошибки

Slide 28

Slide 28 text

Функциональный тест

Slide 29

Slide 29 text

Юнит­тест

Slide 30

Slide 30 text

Варианты использования • Интеграция с Symfony проектом (Assetic, Composer, Bundle) • https:// github.com/ucsf­ckm/symfony­emberjs­edition • Клиентское приложение незаисимое от серверного (NodeJS, EmberCLI). • http://www.ember­cli.com

Slide 31

Slide 31 text

Новая эра веб­ приложений • Сервер предоставляет данные. • Клиент предосталяет интерфейс. • MVC (server) + MVC (client) • Частично дублируется код сервера и клиента

Slide 32

Slide 32 text

Server • Model • Services (validation, business logic) • Controller • ­View • +Serializer

Slide 33

Slide 33 text

Client • +Model • +Route • +Controller • +Template • +View

Slide 34

Slide 34 text

Выводы • EmberJS не ускорит разработку веб­ приложения • EmberJS улучшит UX – веб приложение будет работать почти как мобильное или десктопное. Но с URL! • EmberJS улучшит производительность – данные всегда находятся в памяти, не нужно лезть на сервер без необходимости • EmberJS позволяет легко внедрить RealTime Updates – через веб­сокет мы постоянно получаем обновленные данные и тут же рендерим их.

Slide 35

Slide 35 text

Спасибо. А теперь вопросы! • http://emberjs.com • https:// github.com/ucsf­ckm/symfony­emberjs­edition • http://www.ember­cli.com ...а также фоловьте меня в твиттере @davert и тестируйте свои проекты с Codeception!