О том зачем айти конец(ы), кто такие фронтовики и почему кнопочки на сайтах бывают такие разные
Пожалуй я начну своё повествование с максимально удобного для понимания простого смертного части бездонного мира айти направления. А именно с его front-end (в дословном переводе с вражеского - передний конец) части. Почему? Потому что это именно та часть, с которой ты, дорогой мой читатель сталкиваешься каждый день. Вот прямо сейчас, когда читаешь эти строки.
Да, да, именно сейчас, когда ты открыл статью, передний конец предстал перед тобой во всей красе, он уже отреагировал на нажатие тобой ссылки, отослал кучу сигналов (у нас, у нелюдей, это называется запросы или request на старославянском), получил картинки, нарисовал тебе кнопочки, показал текст и не исключено, что каждую секунду этот гад что-то там себе отправляет дядькам и тётькам в Великий и Ужасный Яндекс, что бы те знали, на что именно ты нажал, сколько прочитал, какую рекламу видел. Тебе страшно? Мне нет.
Давай для начала, ну так, чисто на всякий случай, введем пару понятий, как например броузер, в твоём мире это скорее всего Chrome или там какой-нить Firefox или (свят-свят) internet Explorer. Это твоё окно в мир всемирной паутины, что бы смотреть котиков, писать гневные коменты, лайкать тёлочек, в общем для всего самого важного.
Так при чём тут передний конец, или front end? Броузер можно сравнить с телевизором, который показывает тебе веселые картинки, тексты, видео, воспроизводит звук, в общем всё то, чем занимается нормальный православный телевизор. Отличает же его от телевизора интерактивность. Попробуй потыкать в экран телевизора, скопировать текст, лайкнуть Бабкину на худой конец, получится? вряд ли. А вот в броузере можно. Так вот за всю эту красоту и отвечает наш (точней их) передний конец.
Что бы мы обладали всем благолепием функций, как то - нажатие на кнопки, написание статей в дзене, просмотр сериальчиков в иви и лайканье всякого рода, куча умных мальчиков и девочек потратили уйму человекочасов, яростно стуча по клавишам. Это мои побратимы - переднеконцовщики или front end программисты.
За отображение картинки в телеке отвечает телевизионный сигнал, передающийся по кабелю или по воздуху ну или как-то там еще, телек принимает сигнал, в котором зашифрована последовательность картинок и звука. Он (телек) знает как "прочитать" этот сигнал и вместо электрического потенциала нарисовать на экране что-то внятное. Тем же самым по сути занимается и наш броузер, только информацию о том что и где нарисовать, он получает в виде текста, а точней в виде специального языка.
Когда-то, когда я еще под стол пешком ходил, умные дядьки американцы (ну есессно, кто ж еще?) пересылали друг другу документы на компы и встал вопрос о том как же это лучше сделать? Ведь у документов была одна важная деталь - ссылки, что б ты на неё жимк, и она тебе раз и другой документ открыла. Так и родился на свет язык разметки текста или HTML. Грубо говоря, это просто инструкция броузеру что и как и зачем должно идти. Вот тут поместим кнопочку, а на ней надо написать "Привет всем", а потом текст, да так, что бы слово "жопа" было большим и жирным, а остальное всё таким сереньким. И что б при нажатии открывало другой документ с объяснениями, глубокая или не очень.
Время шло, требований к разметке становилось всё больше, хотелось уже, что бы не просто текст с кнопечкой был, а что бы он был разноцветный, что бы нажористо так, что бы буквы где побольше, а где поменьше. Тогда придумали другую, дополнительную технологию, называется она муторно, а именно - каскадные таблицы стилей. По сути это просто набор правил, которые говорят как приукрасить текст, каким цветом раскрасить тот или иной элемент, кнопочку например, каким цветом сделать ссылочку до или после нажатия.
Я возможно кого-то удивлю, но есть броузеры, которые открываются в так называемом терминале, это когда у тебя нет визуальной среды, только текст и всё черно-белое, а в интернет очень хочется, так вот там с раскраской текста напряжёнка, да и с котиками так себе. Я когда-то баловался такими броузерами, но толку от них чуть.
Было всё здорово, но скучно, с разноцветного текста много не выжмешь.
Дальше больше. Захотели люди, что бы при нажатии на ссылочку появлялось окошечко ну или там часть текста скрывалась или появлялась. Ну а почему нет? Весело же. Как сделать? Стали думать и гадать и придумали скрипты заморские. К слову сказать "придумали" тут не самое точное. Скрипты и даже целые языки были и раньше (ну на чём-то же сам броузер был написан, правда?), встал вопрос об их переносе внутрь самого броузера, как будто тот такой себе мини компьютер, а на нём работает такая мини-программа в пределах одной интернет странички. Сказано - сделано! И появился на свет (помимо прочих) Java Script.
И понеслась....
За какие-то тридцать лет язык получил огромное распространение. На месте маленького и скромного языка разметки текста выросла целая индустрия с блек джеком и всем остальным. Когда-то эти мини программки умещались в несколько строк кода, который делал для пользователя тривиальные вещи. Сейчас то, что ты видишь на экране это полновесные приложения в тысячи строк , на разработку которых ушла куча часов и разного рода валюты.
На заре развития технологий фронт-енд считался тупиковой ветвью эволюиции, в то время как бэк-енд (ну то есть задний конец, но о нем позже) - венком творения. Соответственно фронендеры (разработчики фронтенда, фронтовики) находились внизу пищевой цепи, чуть выше тестировщиков и после сисадминов. Зарплатки были так себе, а коллеги по цеху из высшего слоя айти общества относились надменно, если не сказать презрительно.
Но акцент и внимание постепенно смещались на передний край, поближе к пользователю. Если помните, то когда-то после нажатия любой кнопки или ссылки страница обязательно перезагружалась, что бы показать новые данные? Но зачем заставлять пользователя ждать пока перезагрузится страница, что бы, к примеру просто показать серию картинок в карусельке? Гораздо проще подгрузить картинки заранее и подменять их по мере нажатия кнопки. А вот за это уже отвечает пресловутый фронтенд с его технологиями и языками. Пользователи тему заценили и фронтендерам попёрло!
Безусловно надо сказать, что фронтенд не получил бы такого распространения без увеличения мощности компьютеров и пропускной способности интернета. Чем краше и функциональней программа, тем больше она занимает места, а значит время ее загрузки на компьютер увеличивается. Едва ли можно полноценно насладиться последней версией современного сайта на допотопном компьютере, он попросту его не потянет, ну или со скрипом. Умные пацаны из Facebook (а так же девчонки, существа среднего пола, неопределившиеся ну и вся остальная шобла) даже показывают разные версии своего сраного фейсбука в зависимости от пропускной способности. Тем у кого всё пучком - хорошую синюю версию с плюшками, а тем у кого не очень - хреновенькую такую, синюю, без плюшек. Gmail делает то же самое, предлагает перейти на галимую версию, если скорость твоего энтернета оставляет желать лучшего.
Да и вообще оказалось, что то, что видит обычный смертный это просто очуметь как важно для бизнеса (шокирует, правда?). То как ведёт себя сайт напрямую влияет на метрики бизнеса. Чем меньше человеку приходится ждать пока появится картинка тем больше шанс, что он не плюнет, не закроет ссылку и не уйдёт смотреть котиков или читать книгу чего доброго. Поэтому можно сначала загрузить картинку в плохом качестве, что бы заинтриговать, а пока клиент вдупляет чо там намалёвано мы параллельно загружаем уже бодрую, чёткую в хорошем разрешении и как только та загрузилась, бах, и подменяем плохую на хорошую. Ну или просто покажем какую-нить крутилку-вертелку, что мол ща, ща всё будет, ты главное потерпи.
Ну или к примеру лента в этом вашем ВК или инсте, убойная штука между прочим (и вроде как рыжий ее изобрёл в своей лицо-книге первый), заставляет нас часами скролить вниз, пуская слюну. Но ведь километр ленты сразу не загрузишь в телефон, загружалка отвалится. Поэтому скачиваем первый 5 картинок и еще 5 прозапас, а как видим, что пользователь дальше полез начинаем еще 5 качать, ну вы поняли.
Да и вообще есть концепция не подгружать лишнего, а ровно столько сколько пользователь может объять взглядом да и из этого самое важное, что б не спугнуть. Терпение пользователя за прошедшие годы уменьшалось прямопропорционально скорости интернета. Согласно исследованиям, оптимально если страница, а точней основной контент (Largest Contentful Paint или LCP) загружается не более 2 с половиной секунд! (Если больше, то это чё-то фу) Основной контент это, как правило весь цимес ресурса. По этому программисту неплохо знать на каком телефоне или компьютере вы смотрите котиков, что бы загрузить ровно столько сколько вам видно и в первую очередь только то, что нужно. По этому содержание страницы бьётся на блоки, которые подгружаются по мере надобности. К слову текст почти ничего не весит, а вот весёлые картинки и задорное видео очень даже.
Я могу долго и с упоением описывать и другие технологии переднего конца ибо конца им нет, но тут уже такой лонгрид получился, что мама не горюй. Надеюсь, у меня получилось донести всё разнообразие и обилие работы, выпавшее на долю фронтенд разработчика. Именно по этому вакансий фронтовиком гораздо больше, чем каких либо других и получают они эге гей. Ну а пока на этом всё, всем котиков.