#фронтенд

Начали проект по перезапуску большого и важного медиа — миллионы читателей, миллионы страниц материалов.

Бизнес-задачи перед нами ставят стандартные: редизайн, улучшение пользовательского опыта и удобства редакции, без потери трафика.

Технически сейчас это программа на C#, которая в одну сторону торчит админкой для редакции, а в сторону читателей генерирует HTML-страницы сайта. Это популярный сетап из 2000-х. Техническую задачу я формулирую как облегчение процесса разработки без потери производительности сайта.

Дело в том, что в текущем сетапе фронтендер не может нормально верстать страницы без привлечения бэкенда — это мешает быстрому и предсказуемому развитию бизнеса.

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

Но будет ли современное веб-приложение (SPA) так же производительно, как HTML-страницы из 90-х? Речь и о скорости первого открытия — можно ли загрузить JS после полной отрисовки страницы? — и о скорости перехода между страницами — быстрее ли JavaScript-логика, чем отдать готовый HTML с сервера?

Можно ли получить лучшее из обоих миров? На какие компромиссы придётся пойти?

Пока что я не знаю ответов на эти вопросы. Кажется, что для успеха этого проекта придётся разобрать современную фронтенд-разработку по кирпичикам и пересобрать в новой, подходящей именно нам конфигурации.

—

Вдохновляюсь я вот этим видео, где инженер разбирает устройство фронтенда магазина строительных и промышленных инструментов McMaster. На первый взгляд может показаться, что это сайт из 90-х, на самом деле там под капотом почти все ускорения современного веба, которые только можно представить. Редкий случай хорошего видео для разработчиков, очень рекомендую.

P. S. Один из разработчиков McMaster пишет, что под капотом там VB.NET, хранимки и XSL-трансформации поверх XML для генерации веб-страниц. Хочется вот всё то же самое, только без VB, хранимок и XSLT. 🙈

Если говорить про бизнес в целом — то всё слава Богу, только вот регулярно отказываю потенциальным клиентам, потому что не хватает рук и голов :(

Хочется нанять ещё человек 5, но найм — это история не быстрая, а учитывая наши требования к сознательности программистов, их одновременному интересу к продукту, умению хорошо прогать и при этом давать и выдерживать обещания — то совсем жесть.

Мы ищем фронтендеров (у нас Vue 3) и бэкендеров (питон) — как мидлов, которые хотят прокачаться, так и опытных специалистов.

Предлагаем интересные задачи, ответственности и свободы сколько возьмете, классных коллег и среду для роста. Пишите Феде!

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

Наш ведущий фронтендер Миша Бурмистров сделал чеклист по веб-безопасности для фронтенд-разработчиков компании.

Хвастаюсь!

Опубликую ещё первый комментарий Миши к этому посту (не видны публично):

Было бы удобно, если бы ко всем пунктам списка были приложены материалы, но поиск/фильтрация материалов это работа, которую я не готов сейчас делать. Кроме того, у всех разные предпочтения в плане формата контента — кто-то любит статьи на русском, кто-то видео на английском и т. п. Все темы из списка довольно известные — уверен, вам не составит труда найти по ним информацию. Можете делиться понравившимися материалами в комментах.

А чтобы почитать остальные комментарии — придется устроиться к нам на работу :)

Признаюсь, я и сам не знаю некоторых аббревиатур 🙈

Разработчики, которые думают о безопасности — единственный способ делать безопасные приложения. Никакие отделы безопасности не спасут, если разработчикам пофиг. Так же, как и с тестированием — о качестве должны думать все разработчики, а не только «специалисты»!

В общем, горжусь и хвастаюсь!

Как гуманитарий становится программистом?

В новом эпизоде расспрашиваю об этом Юлю Яковлеву — редактора нашего подкаста. 3 месяца назад Юля начала учиться на фронтендера при том, что до этого училась на филолога и считала, что «технологии — это не моё».

Очень личный и при этом очень практичный эпизод. Технари со стажем вспомнят свои первые шаги (я точно вспомнил), а новички, может быть, сделают шаг, на который давно не могли решиться.

Слушайте и подписывайтесь: Apple, Google, Castbox, Spotify, Яндекс, Overcast, веб-версия.

Космическая история: фронтендеры Ютуба убили Internet Explorer 6, без согласования с руководством разместив баннер «мы скоро перестанем поддерживать этот браузер, поставьте что-нибудь посвежее» в июле 2009.

Чтобы вы понимали контекст, в июле 2009 года это был браузер четверти пользователей интернета. IE6 было уже 8 лет, он глючил, тормозил и решительно не подходил для современного интернета 2009го, но ни один крупный сайт не был готов сказать четверти пользователей интернета «сорян, ваш браузер — говно».

Фронтендеры ютуба совершили настоящий заговор, протащили релиз мимо QA, переводчиков, вообще всех и задеплоили его на на один из самых популярных сайтов в интернете.

В 2009, IE6 ненавидили уже все фронтендеры без исключения. Практически сразу после запуска баннера на Youtube, фронтендеры Google Docs использовали пример Ютуб как обоснование для того, чтобы выкатить такой же баннер на Google Docs (все думали, «вряд ли Ютуб провернул такое без соответствующих согласований»). Иронично, но когда о баннере узнали в руководстве ютуба, они решили, что это просто копия баннера с Google Drive («и кто-то наверняка согласовал это ранее»).

Когда правда вскрылась — было уже поздно, баннер был практически на всех сайтах в интернете, а IE6 —обречен. Цель оправдывает средства.

Рассказывает один из участников заговора (там есть, как отреагировали юристы и PR-щики). 💎

Давно я не рассказывал истории из профессиональной жизни.

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

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

Из-за этой кнопки с аватаркой всё и закрутилось. Для начала, пришлось выкинуть старый механизм аутентификации с oauth-редиректом и подключить библиотеку фб, которая делает всю работу сама. Потом я заметил (уже на продакшене), что страница логина крешится. Оказалось, что фейсбук хитро инициализирует свою js-библиотеку и при определенной последовательности загрузки скриптов она ломается. Воспроизводится это у нас не каждый раз и только на продакшене. В сафари ломается чаще, чем в хроме, так что любовь нашего фронтендера Ромы к Linux отладку не упрощала. Чтобы не ломать страницу целиком, мы срочно вставили try-catch, а потом сделали хитрую схему.

Теперь мы сначала показываем все три кнопки соцсети как обычно (oauth-редирект для фб вернулся в код обратно), при этом в фоне грузим библиотеку фб. После успешной загрузки красивой кнопки фб, мы заменяем нашу кнопку логина на родную фб, так что это практически незаметно.

В отношении этой разработки у меня два разных чувства:

- жалость, что зря потеряли время, потому что у большинства пользователей, которым нужен логин через Facebook, уже загружена js-библиотека фейсбука, так что можно было не извращаться + кажется, что тупо недоразобрались с js-ошибками;
- чувство удовлетворения, что сделали качественно «заднюю стенку шкафа», все три кнопки логина покажутся мгновенно, без задержки в любом случае.

В любом случае, получилось классно. Логиньтесь!

В ролях: продакт 🤔 Алексей Горностаев, дизайн 🖌 Андрей Кулагин, фронтенд 🖼 Роман Ахмадуллин.

Cегодня был тяжелый день для меня. В поиске фронтов осталось 4 кандидата, все классные, у каждого свои сильные и слабые стороны.

Много думал, советовался с коллегами, но ВЫБРАЛ СЕРДЦЕМ.

https://www.youtube.com/watch?v=7opVyK6qVb8

Чувак долго вопил, что у BBC очень тормозной сайт и год назад ему дали возможность попробовать переделать главную. Наконец, она уже почти в продакшене. Вот пост-представление и можно посмотреть demo. В минимальной версии сотня запросов на более чем полмегабайта превратились в 3 запроса в 39KB. Внутри стандартные приемы + хардкор вроде preact'а. У Джозефа объяснение такое, что «у всех мобилы + много дешевых телефонов и плохого интернета в Индии».

Для Россиян — я бы не сбрасывал со счетов китайские андроиды и московский 3G 👹, так что для нас это всё тоже актуально.

Мы в Медузе давно бьемся за производительность и скорость рендеринга, но нам есть куда расти (то есть ужиматься), работаем дальше.