усы2

Стой под стрелой

Поступки и мысли, о которых могу вспомнить не краснея

Previous Entry Поделиться Next Entry
Крутое пике
усы2
tonsky

Сегодня я расскажу вам, как хорошо и замечательно обстоят дела на бэкенде. Какие там простые технологии, как легко пишется, как стабильно всё работает. Начинается история с того, что два года назад я перешел во фронтенд.

Главный ресурс фронтендера — MDN. Я туда хожу в основном за лулзами. Открываем, например, XMLHttpRequest и читаем:

Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports protocols other than HTTP.

Морская свинка, как известно, не морская и не свинка.

Насколько у ребят всё под контролем, можно понять по тому, как XMLHttpRequest назван. Поговаривают, что есть рабочая группа, готовящая переименование в XMLHttp_request.

Раньше нервный тик у меня был только на язык C. Теперь появился второй: на верстку. Не важно, насколько пуленепробиваемо ты сверстал и сколько тестировал, всегда найдется полудохлый, но актуальный браузер с тремястами пользователями (прости, Опера), в котором всё разъедется. А если нет, то нарисуется чел с телефоном ромбовидной формы и разрешением 200×1000, которому обязательно нужно чтобы всё влезало по диагонали (ромб же!) и было при этом большим и читаемым. А если не найдется и вы себе соломки везде подложили, то через полгода команда Хрома всё равно выпустит новую версию с новой точкой зрения на стандарты. Редкий сайт долетает до шестой мажорной версии Хрома.

Самый страшный браузер? Мобильный Сафари. Он просто ОЧЕНЬ старается показать сайт на мобильнике хорошо. ОЧЕНЬ. Никогда не думал, что про IE буду вспоминать с нежностью. IE хотя бы не притворялся, что пытается помочь. У нас тут своя атмосфера. Честно. Прямо. У 11 версии официальный слоган был «Deal with it».

Основной вопрос веб-разработки: почему не у всех стоит Хром? Если видите улыбающегося веб-девелопера, значит, он пишет под Электрон. С каждым приложением свой Хром. Фиксированной версии. И вперед. Тяжеловато по памяти, правда. Но ничего, скоро они научатся шарить общий рантайм, и получится... получится...

Веб в вебе это еще полбеды. Его же тащат везде. На сервер, в мобилки. У вас есть там классные языки? Java очень быстрая? Питон очень логичный? Хаскель очень безопасный? Да, отлично, ну вот вам JavaScript тогда еще. Ну и что что убогий, мы всё равно на нем будем писать.

Это вообще железная логика. Вот WebAssembly. Был у нас один убогий язык на фронте. Ужасно спроектированный, с никакущей инфраструктурой, без стандартной библиотеки, писать невозможно. Что еще подходит под это описание? О, C++ подходит. Давайте добавим его. Теперь у нас два языка!

Но самый огонь это конечно ES 6. Тут уже сами фронтендеры признали, что JavaScript как язык не очень. Что неплохо бы компилировать из чего-то поприличнее. И что они взяли? Тот же самый, блин, JS!

Знаете, как они вообще решают проблемы? Лет 15 назад была инициатива, семантический веб. Наведем порядок, всё разметим, метатеги, микроформаты, RDF. Чем закончилось? Недавно узнал, что 2GIS написал нейронку, которая ходит по сайтам организаций и пытается понять, что там написано. Оказалось, чем навести порядок, проще сделать искусственный интеллект.

Но самый стресс, конечно, от безнадеги. Если на сервере ты работаешь на технологии и страдаешь, то ты знаешь, что рядом есть компании, который пишут на чем-то хорошем, и когда-нибудь ты там окажешься. А если все пишут на говне, то рано или поздно это говно выкинут и напишут новое. Целые экосистемы возникают и достигают расцвета на наших глазах, на протяжении одной карьеры. Это вообще очень полезно, выкидывать и начинать заново. Живешь надеждой.

А на фронте не так. Логики нет, и надежды никакой нет. Веб уже не простой, не цельный, не компактный, не быстрый. И он никогда не будет простым, никогда не будет логичным, не будет цельным, компактным, быстрым. Дальше только хуже, это медицинский факт. Единственный способ выживать — иллюзии — имеют свойство рассеиваться.

Был такой сериал, «Крутое пике». В нем авиалайнер терпит крушение и стремительно падает на протяжении 327 серий. Конечно, всё летит в ад, но пока летит, они в принципе неплохо проводят время. Ну вот. Веб с нами надолго. Вчера, говорят, Курт Кобейн застрелился. Обнимемся.


  • 1
Да, у меня был еще пассаж про что я в общем-то в веб-разработку зашел сбоку, и видел только голые HTML/CSS и ClojureScript, но всё равно мне хватило. Основная засада это верстка, layout и CSS. И ну и производительность всего этого. ClojureScript и отсутствие всяких webpack-ов и погони за еженедельными фреймворками добавляет sanity, но бреда всё еще дофига даже так

Собственно, отсутствие вебпака/бабеля это уже большой плюс. Ради этого одного можно хоть на хаскеле писать.

господа, господа, а чем вы жмёте ассеты и делаете им md5-fingerprint?

Google Closure Compiler, конечно же. Или вы про картинки и проч?

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

(defn add-hash [path]
  (let [hash     (md5 path)
        [_ folder name ext] (re-matches #"(.*/)([^/_]+)(\.[a-z]+)" path)
        old-name (str name ext)
        new-name (str name "__" (subs hash 0 8) ext)
        new-path (str folder new-name)]
    (println "  renaming " path "->" new-name)
    (swap! *hashes assoc (file-name-pattern old-name) new-name)
    (io/copy (io/file path) (io/file new-path))))

  (doseq [file (find-files "target/package/resources/"
                          #"public/(i/[^/]+|js/[^/]+\.js)")]
    (add-hash (.getPath file)))


Ну и там кусок который в CSS пути правит соответствующим образом

да, такой подход DIY сработает почти везде.

у меня есть очень серьёзное возражение в экосистеме clojure, когда речь заходит о безопасности.
переставил два wrap-а в серверном хендлере, и в системе уже дыра (например, wrap-http-basic-auth и wrap-always-redirect-to-ssl)

я не учил пока педестал и люминус, и untangled не учил, но отсутствие центрального фреймворка вроде rails (фреймворк сообщества всего один, зато можно разобрать на библиотеки за 15 минут обратно), это, с моей точки зрения, безусловно, дыра в безопасности. да и не только.
(какие заголовки надо писать в хтмл шапке? ? другой? почему? что там в CSP хедере? какая компиляция цсс сегодня не только модная, но и не ломает браузеры икс и игрек?.. и всё в таком духе.)

жж сожрал доктайп хтмл тег. я это имел в виду. даже гуглить не полезу, сколько их было, и какой сейчас должен быть, и выключит ли это какой-нибудь "движок рендеринга 2017 и включит обратно 2006 года" в интернет эксплорере, или нет.
ну может это я конечно сильно волнуюсь. я например собирая кастомный ринг враппер, так и не выбрал чёртов нужный из трёх враппер по etag, cache-control и что там ещё. джаваскрипты пока что навсегда застревают в браузере.
ну то есть да, всё это нытьё и трейдоффы, кроме безопасности, которая меня пока волнует меньше. хотя csrf токен я вот пока игрался, временно отключил, а проект уже используется, а обратно ещё не включил.

Что до вёрстки, то сохранять какие-то остатки разума можно лишь при наличии хотя бы флексбокса. Вёрсткой же для лавкрафтианского ужоса, в котором флексбокс отсутствует, должны заниматься специально обученные люди, устойчивые к разлагающему ум влиянию Древних (и, разумеется, они не должны прикасаться к основному «чистому» коду ни на полшишечки, иначе его пожрёт Ктулху; пусть сами как хотят, так и полифиллят, или верстают отдельно. Можно даже таблицами).

Флексбокс, кстати, тоже местами нормально так расползается в разных браузерах. Ты еще не ставил нигде overflow: hidden или width: 0 на flex-item-ы?

(Анонимно)
Есть богический postcss-flexbugs-fixes, без него лучше не выходить из дома.

Хрень же. Речь о таком вот:
https://jsfiddle.net/ebzvf71a/1/

Попробуй починить это - ну, чтобы левая панелька заняла 10px. Кросс-браузерно. Но без помощи гугла, а чисто читая спеку CSS.

Это приятное погружение. Потребует осознания ограничений человеческого мозга, да. Вероятно ты вынесешь много философского понимания из этого.

Ну вот объясни человеку. Может я чего не понимаю, но почему нет нормальных визуальных редакторов layout? Нарисовал на экране панельки, расставил куда они прилипают, типа как на андроиде, и вуаля.

Потому что всем лень написать. Мне тоже лень, хотя на флексбоксе это не сильно сложно.

потому что оно не соотносится с реальностью никак. нарисовал в редакторе панельку, чтоб прилипала, а ее, потом, один чувак открыл на мониторе шириной 1766px, а второй на мониторе шириной 320px. ну и оно там все прилипло, как пришлось...

Помимо того, что уже ответили, добавлю:

Что такое «панельки»? Это на десктопе есть панельки. На декстопе есть еще вагон и маленькая тележка компонентов, которые можно накидать хоть друг на друга, хоть друг на друга, хоть друг под другом. Задать им любые размеры. Накидать constraint-ов. Положить между ними сплиттеры. И так далее и тому подобное.

В вебе этого ничего нет.

Единственные стандартные элементы — это поя на формах: поле ввода, комбобокс, кнопки. Всё.

Всё остальное — это адская мешанина, которая легко ломается практически любым кривым CSS-ом

Что мешает генерировать стандартные элементы HTML + CSS из визуального редактора лэйаута? На дивах и таблицах можно построить сколь угодно сложный интерфейс, CSS тоже генерируется и прибивается гвоздями, чтобы никто туда кривыми руками не лез.
Какие-то странные отговорки, что прилипло не туда... Так это и когда руками верстаешь бывает. В визуальном режиме это можно быстрее проверить и быстрее исправить.

> На дивах и таблицах можно построить сколь угодно сложный интерфейс, CSS тоже генерируется и прибивается гвоздями

Ключевое: прибивается гвоздями.

Например, в CSS нет никакой возможности задать родительскому компоненту размеры в зависимости от размеров/количества дочерних элементов

Нет никакой возможности сказать «элемент X должен быть на расстоянии максимум в Y% от элемента Z вне зависимости от размера экрана»

И многое многое другое.

Хуже того, можно в изоляции нарисовать себе какой угодно красивый изолированный компонент, который тут же поломается при помещении его внутрь другого компонента только потому что у родительского компонента где-то прописан не тот стиль.

Можно посмотреть на пример типа http://examples.sencha.com/extjs/6.2.0/examples/admin-dashboard/#dashboard и посмотреть сколько невменяемых извращений там творится в врестке, чтобы заставить это все выглядеть нормально (не говоря о толпе JS, навороченного сверху для того, чтобы заставить это работать и выравнивать всякий не поправляемый CSS-ом ад).

Что ты делал что ты жалуешься на производительность веба? Она даже на мобилах сейчас сумасшедшая. Что ты делал что у тебя тормозило?

https://github.com/tonsky/datascript

По всем бенчам JS-версия в 2-3 раза медленее версии на JVM. При прочих равных, это один и тот же код. Довольно прямолинейный. Т.е. веб тупо медленнее, и непонятно ради чего, собственно, это терпеть.

Ты написал """Основная засада это верстка, layout и CSS. И ну и производительность всего этого.""". Т.е. имелось ввиду производительность веб-приложения я так понял. Т.е. - что за веб-приложение ты делал что оно тормозило? Т.е. реальное веб-приложение а не искуственный бенчмарк JS vs Java

Edited at 2017-04-09 05:14 (UTC)

datascript — не искусственный бенчмарк, но, как я понимаю, помянутым засадам в нём взяться тупо неоткуда.

Майн готт. Дискуссия в этом блог-посте о вебе и веб приложениях В ЦЕЛОМ. Не про специализированные библиотеки типа дата-скрипт. Что вы делаете такого из типовых веб задач что у вас веб тормозит? Вы не можете отрендерить быстро страницу магазина с витриной? Или админку к нему с формами?

> Дискуссия в этом блог-посте о вебе и веб приложениях В ЦЕЛОМ

Веб приложениях В ЦЕЛОМ пишутся без библиотек? Вот это новость

> Что вы делаете такого из типовых веб задач что у вас веб тормозит

Так о веб-приложениях или о типовых задачах все-таки?

  • 1
?

Log in