Рубрика развивается при поддержке
Разработка
Martin Son
118

Путь самурая(?) или как я открываю современную фронтенд разработку

Если вы пришли поесть говна, то берите самую большую ложку, которая у вас есть.

В закладки

Так вот, читатель, если ты познаёшь мир веб-разработки (или уже немного познал), то готовься, так как это трешак.

Маленькая предыстория: разработкой я интересуюсь весьма давно, с 14-ти лет (а это 2015-й год) и первый “Hello, World!” был на Python’e, но могу ошибаться, так как в 12 лет я создавал говно-странички в Яндекс.Народе, та ещё дичь. Конкретно в веб я зашёл в июле 2018 года. Отдыхая в городе Сочи, тамошний климат ударил в голову настолько, что сильно загорелся желанием написать что-нибудь браузерное, для общения, чтобы можно было на три буквы собеседника посылать. Ии.. естественно, это был чат. Он и являлся моей отправной точкой в мир веб-дева. Про чат особо писать не стану, я его до сих пор не доделал, и подход к его созданию был, как мне кажется, в корень неверный. Также, он мне перестал, практически, быть интересным.

Своё самостоятельное более-менее работоспособное веб-приложение я уселся писать в начале декабря 2018 года, это было приложение погоды, именно тогда я познавал более-менее HTML разметку, JS, и осваивать азы вёрстки. В промежутке от августа до конца ноября я ничего не делал как дефолтный школьник.

Написав приложение, я понял, что необходимо двигаться вперёд и принял решение залезть в разные тематические Telegram чаты (по HTML, JS, CSS). И я залез. Ощущение, на самом деле, было неприятным. Неприятным настолько, будто тебе заезжает немалого диаметра половой орган в пятую точку, что ты его чувствуешь в районе желудка, а на твою голову льётся ведро желчи, перемешенной с поносом. Токсичность таких чатов иногда зашкаливает, соответствующих кадров там множество. Но ничего не сделать, таков менталитет, кмк.

Г

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

Где-то уже в феврале я познал для себя чуть лучше веб-разработку: немного изучал Vue.js, узнал о существовании препроцессоров (Sass самый популярный, кмк) и сборщиков (Webpack, laravel-mix), ближе к середине года (да, у меня очень долго идёт прогресс) компиляторов фронтенда (Babel), таск-менеджеров (Gulp) и т. д. Я понял, что это.. трешак. Полный трешак, который диктует бизнес. Enterprise-разработка, если быть проще. Да, многие разработчики будут писать и доказывать, что ты вафля деревянная, которая ничего не понимает, а все эти инструменты очень удобны и необходимы. И я не спорю (спустя время-то), но только в масштабах крупной разработки. Бесспорно, можно долго холиварить про Highload и прочее, но статья-то о начале пути.

P. S.: Enterprise, вкратце, — это разработка внутри компаний бизнес-задач (как крупных, так и не очень). У меня слегка расплывчатое понимание, я воспринимаю такую разработку как огромную кастрюлю с детской неожиданностью, в которой кипят разработчики/программисты (между ними есть различия) и менеджеры, дабы успеть в сроки сдать крупномасштабный, как правило, проект заказчику.

Зайдя на эту ступень разработки (ты же в чатах не половой орган теребил, а про 55 разновидностей компиляторов фронтенда спрашивал, я надеюсь?), тут весь трешак и начинается. На протяжении освоения инструментов, которые я написал выше, скорее всего у тебя будет постоянно крутиться вопрос “Зачем оно мне нужно в рамках моего приложения?”. Если он действительно крутится, то перечитай абзацем выше про трешак, который диктует кто? Правильно, бизнес. И тебе никуда не деться. Хочешь зарабатывать, будучи фронтендером? Добро пожаловать. Иди учись собирать страничку до посинения, разруливай проблемы Node.js и пытайся объяснить задротам в чатиках, что зачем оно всё нужно и какой профит ты можешь извлечь в рамках своего маленького и лёгкого веб-приложения (если такое имеется, как у меня, например). Однако, бизнес и тебя прогнёт, как и меня, как прогнул и их, тех самых задротов из чатиков. И тебе придётся идти и изучать сборщики с компиляторами, а далее библиотеки/фреймворки и соединять их вместе. Задроты не могут сменить пластинку о необходимости препроцессоров, библиотек и тех же долбанных сборщиков с модулями, насколько бы лёгкое твоё приложение (если оно есть, повторюсь) не было, потому что они привыкли делать так, поэтому даже маленькое и простое приложение они будут делать по канонам ынтырпрайза. Ты это поймёшь в скором времени, когда столкнёшься в диалоге с ними. Во всяком случае, не спорь с ними. Начинающему реальный плюс только в том, что ты на шаг ближе к работе в компании и разработке очередной калообразной смеси, которую запросил заказчик. А если же перед тобой новичок, который просит совета, то так и объясни, что вся эта кипа инструментов нужна для того, чтобы быть ближе на шаг к работе с реальными проектами, ибо задроты будут толковать об удобности использования 100500 инструментов, которые ему, пока что, не нужны, кмк. Я считаю, что нужно объективно оценивать сложность приложения и если оно простое, то делать его надо просто, без всяких компиляторов. (Мы же о начале пути, правильно?)

Webpack, к слову, это сборщик фронтенда (знаю, надоело), дабы из кипы файлов у тебя вылез один .js, который ты подключаешь в .html страницу у тебя всё пляшет и сверкает. В конфигах ты прописываешь, как правило, модуль Babel, чтобы твоё и без того простое, лёгкое и быстрое приложение работало даже на старой лисе бабки, у которой ведро с WinXP. Скажем, замена полифилам. Я сильно не вдавался в возможности вебпака, так как не приходилось (я безработный), поэтому написал поверхностно. Теряет ли, на первый взгляд, лёгкая страница в производительности после напичкивания её инструментами? Думаю, вполне, когда ты одностраничник будешь на последнем Mac'е компилировать 5-10 минут, но там же Highload, что поделать..

P. S.: Если ты имел дело с Node.js (допустим приложение на Express), то не удивлюсь, что ты очень был зол, когда установливал Webpack. Мало того, что Node.js - кал (выглядит как оправдание моих кривых рук, но там даже задроты сломались однажды), который периодически выпадает в цикличную ошибку установки пакета, так ещё и с Webpack’ом шизануться можно настолько, что захочется выкинуть свой модный Mac в окно и послать на 3 буквы этот веб. Если ты сталкивался, то я тебя прекрасно понимаю. На момент написания статьи напишу сразу: Webpack устаналивается в 3 шага, и никак иначе. Сначала глобальная установка webpack и webpack-cli, потом локальная установка webpack непосредственно в папке с проектом. Потом уже конфиг, package.json и всё такое.

Изначально я забугуртил на счёт nvm, менеджера версий для node.js, но успокоившись и спросив у одного адекватного знакомого решил написать, что если тебе, читатель, будут советовать ставить nvm, то поставь. Как оказалось, он работает немного по другому принципу (следует прочитать про $PATH и прочее в юниксах) и является более безопасной версией node/npm (например не надо ставить от рута глобальные пакеты, а это важно).

Касательно проблем Node.js, то это продукт, о нестабильности которого периодически писалось/пишется в разных статьях в интернете (поищи сам, уверен что-нибудь да найдёшь): пакет может просто не установиться, даже глобально, сплошные ошибки, которые не гуглятся (ожидаю комментарии о том, что я просто не умею гуглить), иногда вопрос на SO не помогает, — никто не может понять в чём проблема. Также нода может не записать пути и при вызове пакета и будет писать, что команда не найдена, хотя пакет установлен. У меня бывали случаи, что при установке пакета локально/глобально он не устанавливается в принципе, хотя пишет, что всё установлено. И в пакетах он тоже не отображается. И это просто звездец.

В разработке я кручусь чуть больше года, и узнал не особо много, но даже с таким сроком я хапнул этой самой массы, изучая, как казалось, любимое дело. Нет, веб-разработку бросать я сейчас не собираюсь, и она не стала моим НЕ любимым делом, нужна была лишь “минутка” выговориться (переписал многое, успокоившись). По крайней мере, мне интересно, насколько далеко меня это приведёт и какой я для себя сделаю итог, находясь в этой сфере хотя бы 3–5 лет (в будущем планирую уйти в мобильную/десктопную разработку на Swift, если осилю, но сфера очень интересна).

Холивар получился не сильно конструктивный — это моя первая статья, я старался передать читателю то, что возможно его будет ожидать, с чем столкнулся я и как я на это смотрю в данный момент. Тут скорее играли эмоции (которые я уже частично стёр), чем более объективная картина текущей обстановки в этой сфере. Я безработный, я не могу говорить за все нюансы этой сферы сразу, не всё ещё познал. Может быть, улучшая навыки, я также начну даже маленький и простой одностраничник делать с помощью сборщиков и компиляторов.

Возможно, кому-нибудь эта статья пригодится, дабы сразу понять, что это и оценить для себя: прислушиваться к моей субъективщине или нет. Когда-нибудь, я в дальнейшем перепишу статью, чтобы она была менее субъективной, аля “всё херня, потому что у МЕНЯ так”.

Всего хорошего.

14:55: А, да, чуть не забыл: к приложению погоды я решил вернуться, сравнить как писал тогда и как стараюсь писать сейчас. Делаю две версии: простая (чисто html, css, js) и усложнённая (webpack, babel, sass, возможно не поленюсь и переведу на фреймворк). Основная цель понять для себя, насколько имеет смысл раздувать простое приложение до кипы файлов из конфигов и множества директорий.

P. S. Поменял хаб на разработку

P. S. S.: Также ищу ментора и работу :)

P. S. S.: Буду рад любой критике.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Martin Son", "author_type": "self", "tags": [], "comments": 0, "likes": -5, "favorites": 2, "is_advertisement": false, "subsite_label": "dev", "id": 93117, "is_wide": true, "is_ugc": true, "date": "Mon, 18 Nov 2019 13:33:47 +0300", "is_special": false }
Облачная платформа
Основа для цифровизации бизнеса
0
{ "id": 93117, "author_id": 396902, "diff_limit": 1000, "urls": {"diff":"\/comments\/93117\/get","add":"\/comments\/93117\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/93117"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 235819, "last_count_and_date": null }
Комментариев нет
Популярные
По порядку
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }