Redux и изоморфные приложения
- 1. Инструменты для разработки изоморфных приложений JavaScript
- 2. Преимущества изоморфных приложений • Один язык для сервера и клиента • Первоначальный render любого маршрута на сервере • Быстрый переход между страницами • Хорошо индексируется поисковыми системами, даже при отключенном JavaScript • Скорость разработки
- 3. Структура изоморфного приложения Сервер Клиент Первый запуск, страница рендерится на сервере Присылаются все данные и скрипты После отрисовки, клиент просчитывает состояние приложения и сравнивает контрольную сумму, если все ок, то отображение готово Дальше, обмен данными между приложением и сервером осуществляется при помощи API
- 4. React JS - приемущества • Его задача View • Весь DOM рендерится в памяти • При любом изменении состояния приложения, все потомки элементов которые изменились, пересчитываются в памяти и рендерятся только изменения • При использовании immutable массивов и объектов, происходит мгновенное сравнение, изменились ли они, даже если изменения очень глубоко внутри • Html элементы пишутся в одном jsx файле, стили к компоненту в less или scss импортируются тут же. Куски html можно хранить в переменных. • Все данные приходят из одного единственного хранилища Flux
- 5. Flux – что такое
- 6. Преемущества Flux • Одно хранилище = один источник правды • Все изменения состояния происходят только через Action, которые проходят через один единственный dispatcher • Асинхронные операции тоже проводятся через Action • Все данные получают «Умные компоненты React» которые подключены к хранилищу, они транслируют всем своим потомкам «глупым компонентам» через props • Если хранилище не менялось, то перерисовка не происходит • Использование Immutable значительно ускоряет работу приложения
- 7. Redux – реализация flux • github.com/reackt/redux • Легко создавать хранилища, actions, привязка «умных компонентов» к хранилищам и actions. • Удобные инструменты для разработки, позволяющие «путешествовать во времени». • Широкое использование ES6, Immutable
- 8. Webpack - преимущества • Система развертывания приложения, конкатенирует, сжимает, делает sourcemap • Применяет изменения на лету, не меняя состояния приложения. • Стили less можно импортировать командой require.
- 9. PS • Инструменты которые я использую…
- 10. Pomello Позволяет чередовать работу и отдых и учитывать время затраченное на карточки trello Использую систему больших Pomodorro: 52 минуты работы, 17 минут отдыха
- 11. SmartGit • Позволяет видеть изменения в файлах Git посимвольно
- 12. F.lux • Если на улице темно, то убирает синий оттенок с экрана, что уменьшает уничтожение мелатонина и позволяет быстро уснуть после вечерних, ночных посиделок
- 13. Vim • Уменьшает кол-во нажатий функциональных клавиш • Исключает использование стрелок и перенос пальцев с основной позиции • Настраивается абсолютно все, автодополнение, раскраска, любые горячие клавиши • Самый быстрый редактор, есть на любом сервере • Уменьшает использование мыши до 0
- 14. Droplr • Позволяет делать скриншоты и копирует ссылку в буфер обмена • Позволяет делать скрин-видео