То що треба вчити?
Як і обіцяв, у цій статті я коротко, але інформативно розповім про стек найпопулярніших технологій, які необхідно знати для того, щоб влаштуватися фронтенд-розробником у 2022 році. Весь список я склав самостійно, у правильній послідовності, виходячи з мого досвіду навчання, безлічі статей, відео-уроків та порад друзів. Також, для того щоб позначити складність тієї чи іншої технології щодо один одного, я оцінив їх за 10-ти бальною шкалою.
Стек (англ. stack - стопка) технологій - це набір інструментів, що застосовується при роботі в проектах і включає мови програмування, фреймворки, системи управління базами даних, компілятори і т.д.
1. HTML
Рівень складності: 1/10
Необхідність вивчення: Обовʼязково
HTML - мова гіпертекстової розмітки, яка являє собою код для побудови та структурування веб-сторінок. Для того, щоб ви почали розуміти, як правильно писати розмітку сторінки, вам знадобиться 1-2 дні. Я говорю про базові речі, такі як ієрархія елементів і стандартні теги. Далі потрібно буде розібратися з формами, таблицями, атрибутами та багатьма іншими моментами. Однозначно, відразу ви все не запам'ятаєте, але ви не зациклюватиметеся тільки на HTML без застосування CSS.
2. CSS
Рівень складності: 5/10
Необхідність вивчення: Обовʼязково
CSS - це код, який використовується для стилізації веб-сторінки та позиціонування елементів щодо один одного. Новачки, які вже почали вивчати css і які читають цю статтю, можуть здивуватися, що я поставив css оцінку складності аж 5 балів. Це означає тільки те, що ви ще не дійшли до адаптивної верстки, flexbox, grid та css-анімації. Повірте, там є над чим зависнути. В інтенсивному режимі навчання цілком непогано можна навчитися користуватися HTML і CSS за 1,5 місяці. Але, оскільки в наступні пару місяців ви можете нічого не верстати взагалі, то бажано періодично повертатися до верстки, щоб не втрачати навички.
3. JavaScript
Рівень складності: 10/10
Необхідність вивчення: Обовʼязково
JavaScript - це повноцінна динамічна мова програмування, яка може використовуватися в абсолютно різних напрямках, але в нашому випадку вона застосовується до HTML документу, забезпечує динамічну інтерактивність на веб-сайтах, керування даними та взаємодію з сервером. Саме їй я поставив найвищу оцінку складності, щоб можна було розуміти складність інших технологій щодо js. Основні речі, при дуже інтенсивному режиму навчання та постійної практики, можна зрозуміти за 4 місяці. Але ніколи на жодному етапі вашого навчання або роботи, ви не знатимете все на 100%. В принципі, це стосується і CSS і багатьох інших технологій.
4. jQuery
Рівень складності: 4/10
Необхідність вивчення: Необовʼязково
JQuery - це javascript бібліотека, яка являє собою набір функцій для спрощеної, зручної та швидкої взаємодії між javascript та html. У сучасному світі ця технологія відійшла на задній план і практично ніколи не використовується в нових проектах. У ході роботи вам можуть траплятися старі проекти, в яких використовується jQuery, а в деяких вакансіях досі пишуть потреби вміння роботи з цією бібліотекою. Тому, коли я пишу, що необхідність навчання необов'язкова, то це не означає, що ви повинні взагалі пройти повз цю технологію. Бажано витратити хоча б 2-3 дні, подивитися відео, "помацати" її, щоб розуміти, що це таке і як воно працює.
5. Node.js
Рівень складності: ?/10
Необхідність вивчення: Не треба
Node.js - це середовище для роботи та виконання коду javascript, яке може перетворити його з вузькоспеціалізованої мови на мову загального призначення. В основному використовується для написання коду для серверної частини. Я в нього особливо не заглиблювався, і якщо ви не збираєтеся або поки не збираєтеся ставати fullstack розробником, то не варто витрачати час на цю технологію. Ви просто повинні знати, що це таке і навіщо використовується. Про це вас можуть запитати на співбесіді. Винятком написаного є менеджер пакетів Node.js про який написав нижче.
6. Node Package Manager
Рівень складності: 3/10
Необхідність вивчення: Обовʼязково
NPM - це менеджер пакетів, який автоматично встановлюється разом з Node.js, і який дозволяє встановлювати в проект якісь бібліотеки або інструменти для зручнішої та продуктивнішої роботи. Я не можу сказати, що я сильно заглиблювався у його роботу, але я ним користуюся буквально щодня. Я вважаю, що на першому етапі досить просто знати, як встановлювати пакети, використовуючи базові команди в терміналі, і поверхневий принцип роботи, включаючи розуміння, що таке залежність одного пакета від інших. Чим більше ви витратите часу на вивчення npm, тим краще. Але я б не рекомендував на початку витрачати на це більше 3 днів.
7. Gulp
Рівень складності: 5/10
Необхідність вивчення: Необовʼязково
Gulp - найпоширеніший менеджер для виконання часто використовуваних завдань, які необхідні в розробці. Наприклад, мініфікація, об'єднання файлів, транспіляція sсss в css і т.д. У сучасному світі найчастіше його використовують у невеликих проектах, які згодом можуть використовуватися спільно з CMS (система керування контентом сайту) і в яких використовувати Webpack (про який написав нижче) просто не потрібно. Я б рекомендував хоча б ознайомитися з цією технологією, погратися з нею кілька днів. На співбесіді можуть спитати.
8. Babel
Рівень складності: 3/10
Необхідність вивчення: Бажано
Babel - це програма, яка переписує сучасний JavaScript на старий стандарт, а також транспілює JSX (розкажу нижче) та інші розширення синтаксису в чистий JavaScript. Найпоширеніший випадок, коли розробник торкається Babel своїми руками – це коли виникає необхідність, щоб код підтримувався старими браузерами, деякі з яких більше ніколи не оновлюватимуться. Насправді його можливості ширші, і в React він виконує роботу "під капотом", а ми цього навіть не бачимо. Не можу сказати, якщо мене попросять скористатися Babel прямо зараз, то я з легкістю це зроблю. Я більше розумію його призначення, ніж маю досвід роботи з ним. Також навіть не маю уявлення, наскільки часто він зустрічається в роботі розробника, час покаже.
9. Webpack
Рівень складності: 6/10
Необхідність вивчення: Обовʼязково
Webpack - збирач модулів, що дозволяє скомпілювати JavaScript-модулі в єдиний JS-файл. Простими словами, при великої кількості файлів програми, він створює один об'ємний файл для її запуску. Це саме стосується html/css. Також у нього вбудовані всі функції, які є у Gulp. На початковому рівні, я вважаю, неможливо зрозуміти і запам'ятати весь його функціонал, але потрібно обов'язково приділити достатньо часу, щоб вміти робити базове налаштування для вашої програми. Практикуватися потрібно доти, доки це не відбуватиметься на автоматі.
10. Git
Рівень складності: 4/10
Необхідність вивчення: Обовʼязково
Git – це система контролю версій, яка дає можливість розробникам спільно працювати над одним проектом, керувати та відстежувати зміни у файлах проекту.
GitHub – це сервіс, який працює з цією системою, що розширює її можливості. Водночас є одним із найбільших сервісів для хостингу IT-проектів та своєрідною соціальною мережею. GitHub - найпоширеніший і найзручніший сервіс для роботи з Git, тому розбиратися потрібно саме в ньому. Немає потреби дивитися навчальні відео просто про Git, відразу починайте з GitHub і вам все стане з часом зрозуміло. Взагалі, цю технологію бажано вже знати як тільки ви розібралися з html/css, в першу чергу, для вашої зручності, щоб ви могли попросити допомоги у знайомого/друга/ментора/викладача, заливши свій код на GitHub і передавши йому посилання.
Зазначу, що не зовсім відразу приходить розуміння, що і як відбувається. Я досі знаю лише базові функції, які мені знадобилися під час навчання у IT-школі. Що потрібно знати для роботи на реальних проектах, я поки не знаю, але обов'язково про це напишу, коли влаштуюся на роботу. Крім того, настійно рекомендую з самого першого дня працювати з ним використовуючи термінал (командний рядок), а не браузер або десктопні програми.
11. React
Рівень складності: 9/10
Необхідність вивчення: Обовʼязково
React – це найпопулярніша бібліотека, яка дозволяє зручно розробляти інтерфейси сайтів та додатків, розділяючи код на невеликі компоненти (шматочки коду, які відповідають за конкретний елемент). На даний момент я тільки вивчаю React, і це мені дається складно. Але вже чудово розумію його переваги. Серед них: JSX - синтаксис javascript, який на 99% схожий на html і який пишеться в загальному файлі js; повторне використання компонентів у будь-якій ділянці коду; і в цілому, зручне створення односторінкових додатків (не плутати з односторінковим сайтом). Не впевнений, але зараз мені здається, що на вивчення Реакту необхідно витратити хоча б два місяці. Більш детально про бібліотеки, які завжди використовуються разом з React я розповім як тільки буду більш компетентний у цьому питанні.
В цілому стаття вийшла не надто короткою, проте зачепили всі важливі технології, без яких просто не обійтися сучасному фронтенд-розробнику. Перед написанням кожного з розділів статті, я намагався перевіряти свої знання за допомогою гугла, тому якихось грубих порушень у термінах чи принципах роботи якоїсь технології бути не повинно. Принаймні я постарався описати все максимально простою мовою.
Зараз продовжую писати свій односторінковий додаток на чистому js, який я обов'язково продемонструю з докладним описом, а також продовжую вивчати Реакт.