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> в код!