Инструменты для разработки изоморфных приложений

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
• Позволяет делать скриншоты и копирует
ссылку в буфер обмена
• Позволяет делать скрин-видео