Слайды доклада Максима "Как дешево переделать традиционное веб-приложение в single-page"

1. Как дешево переделать
традиционное
веб-приложение в SPA
Максим Пшеничников MoscowJS Meetup, 26.02.2015

2. Я расскажу про PJAX
‣ PJAX = pushState + AJAX
‣ существует с 2011 года
‣ Есть Turbolinks для Rails и аналоги для
Express, Django, Laravel и других
‣ Активно используется GitHub и Basecamp
‣ Незаслуженно забыта
2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. PJAX крут
‣ Экономия: нет загрузки и парсинга CSS/JS
‣ Визуально быстрее
‣ Ссылки не ломаются!
• Подменяем URL через HTML5 History API,
• Для старых браузеров – обычный переход по ссылке
‣ Progressive enhancement в чистом виде
9

10. Традиционные веб-приложения
‣ "честный" GET / POST с перезагрузкой страницы
‣ шаблонизацию и логику отображения делает сервер
‣ JavaScript только для улучшения интерфейсов
‣ таких приложений большинство
10

11. Только SPA
‣ быстрый отзывчивый интерфейс
‣ работа со сложными моделями на клиенте
‣ offline
11

12. Только SPA
‣ онлайн-редакторы: Google Docs, редакторы UI
‣ мессенджеры: Gmail, Slack, FB messenger
‣ offline: Gmail, Google Calendar, Pocket, Google Keep
12

13. SPA для техдира
‣ 2 приложения вместо 1
‣ +1 язык разработки
‣ +1 фреймворк: для приложения
‣ +N библиотек: роутинг, тестирование, деплой, etc
‣ backend нужно переписывать
‣ выделить команду
13

14. SPA для техдира
В итоге:
‣ работы прибавится
‣ риски возрастут
‣ ресурсы прежние
!
Прагматичное решение – разрабатывать по-старинке
14

15. DEMO
15

16. 16

17. 17

18. 18

19. 19

20. 20

21. 21

22. Просто выключи layout
22

23. PROFIT!
23
‣ backend почти не меняется
‣ для техдира: 1 приложение, прежняя среда разработки
‣ более отзывчивый интерфейс
‣ минимум усилий

24. Когда
‣ есть уже сработанный отдел разработки
‣ акцент только на отзывчивости интерфейса
‣ ресурсов не хватает
24
PJAX – это отличное решение!

25. Спасибо!
!
pjax-email.maxbublik.com
!
!
Максим Пшеничников
m.pshenichnikov@gmail.com