Дорожная карта веб-программиста
Поскольку в программировании веб-приложений достигнутая в конце нулевых ясность ныне потонула в пестром многообразии новомодных технологий/методологий, под катом выкладываю интересную дорожную карту по текущему положению дел.
Ежели чо, то это мнение о современном webdev’е от специалиста из Microsoft. Его главный вывод — фреймворки больше не нужны, выкидываем их все на свалку.
Идеальное веб-приложение
Центральная цитата ниже взята отсюда:
Недавно у нас [в Майрософт] вышел TypeScript 1.6, со встроенной поддержкой ReactJS.
Теперь, наконец, у нас есть в наличии все компоненты для того, чтобы делать большие фронтенд-приложения по-человечески.
- webpack + typescript нужны для компиляции, сборки, загрузки, и статических проверок типов.
- github.com/rackt/react-router — для того, чтобы структурировать приложение на верхнем уровне. В сочетании с webpack, практически бесплатно делается динамическая загрузка кода.
- ReactJS для слоя UI.
- Какое-нибудь решение для слоя данных. Я лично беру nestedtypes и React-компоненты с databinding, которые сейчас делаю. Чтобы это считалось «flux», достаточно завести синглтон, играющий роль глобальной
message bus, и вместо прямой модификации моделей делать на немdispatcher.trigger( ’eventname’, arg1 ). После чего, модели подписываются на эти события.Забавный паттерн, в общем. Позволяет делать слой данных в стиле SOA, если знать, что это такое. Тока flux-чуваки про это не знают.
И выкидываем все фреймворки. Не нужны.
Памятка о ReactJs
Поскольку не все знают, что такое ReactJS (а этот подход сильно ReactJS-ориентированный), ниже присовокупляю к посту буквально буквально две тематические ссылки.
Om, React и все-все-все:
React.js — это библиотека, недавно перевернувшая JavaScript-мир с ног на голову одной простой идеей: давайте оперировать не настоящими DOM-елементами, а JavaScript-классами, их изображающими. Синхронизацию этого симулякра с настоящим браузером отдадим библиотеке.
Оказалось, что если не трогать DOM, работать с объектами настолько дешево, что можно их даже не хранить, а всегда дергать функцию state → pseudo-dom, генерирующую каждый раз новый псевдо-дом. Это первое достижение React-а, сделать двухстороннюю синхронизацию данные-интерфейс односторонней. Мы всегда пишем, как из данных получить UI, и никогда не пишем, как один UI перевести в другой UI.
На всякий случай еще раз: подход «а вот по этой кнопке скроем панельку» был хорош до определенного предела, пока сайт был в основном статический, с немного меняющимися частями. Сейчас же то, что рисуется в браузере при загрузке, и то, что там будет через 2 минуты, может не иметь ничего общего вообще. Поэтому подход «дайвайте опишем, как эволюционирует наш DOM» работает не очень из-за комбинаторного взрыва — слишком много способов, как он может эволюционировать.
Второе достижение React-а в том, что они реализовали концепцию «всё свое ношу с собой», придав компонентам адекватную стандартизованную структуру. Грубо говоря, в момент создания компонент сам себе нужные ресурсы выделяет и сохраняет в собственный стейт (таймеры, сокеты, листенеры), а в момент удаления — прибирает.Звучит банально, но здесь важен факт, что это есть. Ситуация аналогична проблеме неймспейсов — яйца выеденного не стоит, но в JS их забыли и каждый разработчик вынужден пускаться в собственную езду на лыжах по кирпичам. DOM-листенеры тоже, кстати, крепятся к компоненту, но уже самим react-ом. Это опять же важно для highly dynamic интерфейсов — руками за всеми ресурсами следить и замаешься, и не уследишь.
Получаем, что react-овские компоненты это такие маленькие самостоятельные кирпичики, которые действительно можно складывать в стену и они сами будут работать, не захламляя приложение в неожиданных местах типа регистрации в top-level listener или создаваемых, но никем не удаляемых setInterval.
Как большой поклонник Дао, для баланса также накину и щепотку противоположной точки зрения:
ReactJS для глупых людей:
React — это ТОЛЬКО УРОВЕНЬ ПРЕДСТАВЛЕНИЯ.
React часто упоминают в одном ряду с другими javascript фреймворками, но споры «React vs Angular» не имеют смысла, потому что это не сопоставимые вещи. Angular — это полноценный фреймворк (включающий и уровень представления). React — нет. Вот почему React вызывает столько непонимания в развивающемся мире полноценных фреймворков — это только представление.
React дает вам язык шаблонов и некоторые callback-функции для отрисовки HTML. Весь результат работы React — это HTML. Ваши связки HTML/JavaScript, называемые компонентами, занимаются тем, что хранят свое внутреннее состояние в памяти (например: какая закладка выбрана), но в итоге вам просто выплевывается HTML.
