Вся боль современной веб разработки

Глава первая - бабкины сказки

Когда-то когда я был маленький и никакой и кодил под IE4, да-да 4, даже не 6, все было просто: один человек мог в одну каску собрать сайт с блэкджеком и шлюхами и к черту сайт! В те времена J Resig в недрах Мозиллы создал одну библиотеку что бы управлять ими всеми и назвал ее jQuery. Было конечно еще много всякого говна о котором уже никто не помнит типа prototype и mootools, но я не об этом. Потом придумали event driven behavior и сразу за ним имплементацию в виде backbone которая прожила еще пару лет пока всем не стало очевидно, что даже не смотря на marionette, больше из него ничего не выжать и тогда к нему прицепили E4X которая витала в воздухе много лет и назвали react. И была ночь и наступило утро сегодняшнего дня.

Глава вторая - так исторически сложилось

Так исторически сложилось, что я не всегда угадывал моду на библиотеки, но всегда знал что мода пройдет, и будет похуй. Так и вышло, я поймал много хайпа программируя на jQuery, но практически не имел дела с backbone и об этом ни разу не жалею. А сейчас пытаюсь программировать на react, и радуюсь что выбрал не angular. Почему пытаюсь, обьяснению этого феномена и посвящена эта заметка.

Итак когда появился react еше не было понятно добро это или зло, конечно за ним как и за другими фрейворками стояла компания зла, но достаточно злая ли это компания что бы навязать свою волю рынку было еще не ясно. После его появления как гавно с неба посыпались всякие библиотеки упрощающие жизнь - redux (читай flux), react-router, intl и прочая ересь что бы скрестить ежа с ужом: react-redux, react-router-redux, react-router-dom, react-intl, react-intl-redux. Тоесть это гавно должно было множиться в геометрической прогрессии и на следующем круге должны были появиться react-router-intl-redux и react-router-redux-intl. НО! Здравый смысл взял верх и придумали HOC, теперь вместо умножения префиксов начали делать множества всевозможных HOC'ов withIntl, withRouter, withRedux.

Казалось бы вложил один во второй и дело в шляпе, но нет блять! Никогда еще разработка не была настолько далека от наслаждения как когда тебе надо вложить withRedux(withIntl(App)) но прежде надо создать initialState, который зависит от user поэтому сначала при помощи redux-saga нажно дернуть юзера с сервера, положить в store, потом посмотреть у пользователя язык и положить нужную локализацию обратно в store. Заколдованый, бять, круг. Поэтому по факту сайт рендерят с дефолтным языком, потом подтягивают пользователя и обновляют локализацию, оно конечно мигает, немного, но шанс того что на практике сайт поддерживает 2 языка весьма невелик поэтому всем похуй.

Глава третья - зло просыпаеться каждих 4 года

Как например количество транзисторов на чипе процессора увеличивается в два раза, так очередная компания выпускает пиздатую технологию которую нельзя дебажить. Ну вот был IE6, его никак нельзя было дебажить, потом придумали firebug для фаерфокс и еше lite версию допили и боли стало меньше. Потом придумали web-view в facebook messager и все повторилось.

С react таже история - придумали react dev tools, но все по привычке хуярят console.log потому что все эти withHOC усложняют дерево настолько, что понять там решително ничего нельзя.

Глава четвертая - север

Со всеми этими плагинами для reeact стало совсем тяжело следить за зависимостями и придумали npm (читайте yarn) чтобы их из сети загружать и webpack что бы все это гавно упаковывать.

[лирическое отступление]Нет абсолютно никакой разницы, если я всемто ващего любимого rollup сказал webpack. и то хуйня и то. просто смиритесь. Только я не видел ни одного примера как собрать сайт c использованием rollup, а вебпак так или иначе везде светится.[/лирическое отступление]

Так вот упакованый SPA сайт не устраивает SEO-шников, надо его еще раз на сервере отрендерить.

Теперь у нас хуева туча слабо связанных частей - клиентский код который мы пишем на es7 и транспайлим babel'ем (хотя нахуй конечно не надо, мы же только import используем), собраный код, less/sass файлы, собраный css, серверный код (частро просто один файл, котрый рендерит первую страницу), API aka graphQL сервер, сборщик и файлы конфигурации (примерно 100500 штук).

Глава пятая, заключительная - любимый стек

Я долгое время любил один набор компонентов - react, redux, int, bootstrap, router и их производные. А чо, быстро накидал все это в кучу и оно завелось. типа как тут TrejGun/goat [github.com] первый воночек был виден с самого начала react-bootstrap всегда был мерзким. Начнем с того что его родители - пидарасы и хуй ложат на сообщество удаляя багрепорты с фразой "так задумано". Потом отвалился react-router-redux - прости и наглухо. В общем тянуть кота за яйца стало бесполезно и я решил собрать сайт на технологиях которые я использовал порознь в разных проектах: react, material UI, redux, intl, apollo и next. Каково было мое недоумение, когда я нашел только один вменяевый пример как это сделать - ApiTreeCZ/alda [github.com]. Какого было мое прозрение, когда я узнал, что этот пример хорош, несмотря на то, что там костыл на костыле. Каково было мое негодование что архитектура приложения до сих пор не задается параметрами к

create-react-app --theme=mui/bootstrap/custom --i18n=ru,en --render=universal/client --tests=unit,e2e,coverage --api=rest/socket/graphql

все остальное должно просто работает из коробки и нужно наслаждаться программирование логики приложения, а не сращиванием конечностей франкинштейна

удивлен что ктото читает

ssr - server side rendering