title: Викинь ти той React
class: hero

<!--body
<style>
.remark-slide1 {
  width: 50%;
  left: 50%;
}
.hero {
  background-color: #63b132;
}
.hero h1 {
  color: white;
  font-size: 3em;
  text-align: left;
  bottom: 0;
  position: absolute;
}
</style>
-->

# Викинь<br> ти той React

---

# Про що мова

- Чому React захопив світ
- Чому ми від нього відмовляємось
- Як це відбувається
- Демо, як воно в реальності працює на Касті
- Питання

---

# Нащо React (відносно jQuery)

- Когезія вища
- Зв'язність нижча
- Краща локалізація коду
- **`view = f(state)`**

---

# Ситуація в Касті

- React + ClojureScript
- Працюючий і швидкий server-side rendering
- Глобальне сховище з підписками на дані в компонентах
- Підгрузка даних на маунті компонентів
- Developer Experience 5+

---

# Oops

- Google PageSpeed в каталозі - 7/100
- `main.min.js` - 2.5MB
- Якщо ділити на модулі, то головний ~1.3-1.5MB
- Швидкість активації сайту після завантаження...
- Customer Experience 2-

---

# Embrace HTML

- Браузери його малюють дуже швидко!
- Але він дуже обмежений
  - HTTP запит тільки по кліку на посилання або відправкою форми
  - HTML замінюється тільки повною сторінкою

---

# Enhance HTML

- Хочеться замінювати частинами
- На різних івентах
- В різних елементах
- **Без селекторів**

---

# TwinSpark

- Що робити, вказано в атрибутах елементів
- Рендерінг тільки на сервері
- Непогана когезія
- Перейти з нашої моделі рендерінгу **просто** 

---

# Результати

- `bundle.min.js` 92KB **увесь**
- HTML **зменшився** в 2.5 рази
- 900 строк Твінспарку і 1300 кастомного коду
- 78/100 балів від PageSpeed
- На мобільному вебі і клієнтів більше, і конверсія кращє

---

# Проблеми

- Вигляд - це більше не функція від стану
- Підхід до написання екшенів ще формується
- Дебаг інший

---

class: hero

# Час глянути<br> в код!