Presentation about JAMstack for KharkivJS x10 conference by Alex Stepchenkov

1. JAM STACK
и с чем его едят

2. Алексей
Степченков

3. Любая динамика на странице отображается
через JavaScript без привязки к фреймворкам.
Contentful, Strapi, DatoCMS, Algolia, Auth0, Disqus,
TypeForm, Strype, Twilio, Cloud Functions, custom
backend API etc.
JavaScript
API
Markup
https://www.staticgen.com/
256+ SSG engines: 96 of them uses JavaScript core.
Next.JS, Jekyll, Hugo, Gatsby, Hexo, Nuxt, VuePress
and many others.

4. Traditional

5. Traditional Isomorphic

6. Traditional Isomorphic JAM

7. ● 200,000+ комментариев
● Тысячи статей
● Сотни авторов и категорий
● HTML/CSS/JavaScript тема
Огромный 10 летний
архив контента
Smashing Magazine | клиент-серверный подход

8. ● 200,000+ комментариев
● Тысячи статей
● Сотни авторов и категорий
● HTML/CSS/JavaScript тема
Огромный 10 летний
архив контента
● Печатные/электронные книги
● Билеты на ивенты, воркшопы
● HTML/CSS/JavaScript тема
E-commerce площадка
Smashing Magazine | клиент-серверный подход

9. ● 200,000+ комментариев
● Тысячи статей
● Сотни авторов и категорий
● HTML/CSS/JavaScript тема
Огромный 10 летний
архив контента
● Печатные/электронные книги
● Билеты на ивенты, воркшопы
● HTML/CSS/JavaScript тема
E-commerce площадка
● Текстовая CMS - Kirby
● Модифицированная WP тема
Раздел с вакансиями
Smashing Magazine | клиент-серверный подход

10. Smashing Magazine | клиент-серверные проблемы
Агрессивное кеширование
Масштабирование
Мультиплатформенность
Оптимизация ассетов
для мультиплатформы
3rd party плагины
Производительность
vs
аптайм

11. Smashing Magazine | клиент-серверные проблемы
Уязвимости
WP, Ruby, Shopify
Безопасность доступа
приложения и окружения
Необходимость в
постоянных бэкапах БД
Агрессивное кеширование
Масштабирование
Мультиплатформенность
Оптимизация ассетов
для мультиплатформы
3rd party плагины
Производительность
vs
аптайм

12. Smashing Magazine | клиент-серверные проблемы
Уязвимости
WP, Ruby, Shopify
Безопасность доступа
приложения и окружения
Необходимость в
постоянных бэкапах БД
Агрессивное кеширование
Масштабирование
Мультиплатформенность
Оптимизация ассетов
для мультиплатформы
3rd party плагины
Производительность
vs
аптайм
Развертывание
проекта
Адаптация стилей для всех
платформ.
ERB, Liquid и WP темы

13. CMS
CI/CD
APP
SaaS
Smashing Magazine | JAMstack architecture

14. CMS
CI/CD
APP
SaaS
Smashing Magazine | JAMstack architecture
● TTFB уменьшился в 10 раз!!! с 800ms до 80ms
● Легко масштабировать.
● Моментальная инвалидация кэша.
● Быстрый шаблонизатор.

15. Smashing Magazine | JAMstack architecture
● Статика - это крепость с точки зрения security.
● Единственный способ как-либо повлиять на
приложение - через API.
CMS
CI/CD
APP
SaaS

16. Smashing Magazine | JAMstack architecture
● Весь контент хранится в одном репозитории.
● Единый формат шаблонов.
● Единая система сборки ассетов.
● Иммутабельные и атомарные деплои.
CMS
CI/CD
APP
SaaS

17. Задача
Редизайн сайта + Блог
Специфика:
Статьи будут добавлять не
разработчики

18. Варианты разработки блога
Шаблоны
Деплой / $
Плагины
Оптимизация ассетов
3rd party плагины

19. Варианты разработки блога
SEO
$
Сложно для маркетологов
Шаблоны
Деплой / $
Плагины
Оптимизация ассетов
3rd party плагины

20. Варианты разработки блога
SEO
$
Сложно для маркетологов
Шаблоны
Деплой / $
Плагины
Оптимизация ассетов
3rd party плагины
Время
Разработка
Деплой
Поддержка

21. JAM
Architecture
CMS CI/CD
APP
SaaS

22. <img> <gatsby-image>GatsbyWordpress решение проблем:

23. rehype
replace
<img>
attach
custom
props
output
HAST
instead
HTML
parse
<img> <gatsby-image>GatsbyWordpress решение проблем:
Gatsby SourcePlugin

24. rehype
replace
<img>
attach
custom
props
output
HAST
instead
HTML
parse
React компонент в Gatsby
query
content
rehype
react
<img> <gatsby-image>
SSR
GatsbyWordpress решение проблем:
Gatsby SourcePlugin

25. GatsbyWordpress решение проблем: пишем недостающую схему
graphQL
схема
source
plugin
WP
plugin

26. Полный ребилд
проекта при
каждом
изменении
Недостатки JAM на сегодняшний день

27. А это точно JAMstack?

28. VueJS.org:
https://vuejs.org
Tania Rascia вебсайт и блог:
https://www.taniarascia.com
Переписала блог с WP на Gatsby ради 100 баллов
в lighthouse.
Персональный блог Dan Abramov’a:
https://overreacted.io/
Исходники естественно есть на github:
https://github.com/gaearon/overreacted.io
SmashingMagazine:
https://www.smashingmagazine.com
Переписала огромную платформу полностью на JAM:
https://www.smashingmagazine.com/2017/03/a-little-s
urprise-is-waiting-for-you-here/
Держат документацию в JAM:
https://github.com/vuejs/vue
Истории Успеха

29. JAMstack сайт за 3 минуты со StackBit