Спогади
А чи пам'ятаєте ви ті часи, коли JavaScript призначався просто для того, щоб додати на сторінку трохи життя, перетворити сайт з неживого семантичного скелета на щось складно індексоване, але красиве?
Пам'ятайте, коли в деталях вакансії і потім на співбесіді запитували «що таке AJAX», і кожному з нас це питання здавалося справді загадковим, начебто за ним криються якісь нетрі невивченого матеріалу.
Та й взагалі-то, позиції під назвою JavaScript Developer не існувало. Був Front-end. Що означали ці два слова, не знав ніхто; для когось це була верстка, хтось мав на увазі написання скриптів до шаблонів, які мали повернутися відповіддю.
Ви пам'ятаєте той час, коли для того, щоб перетворити JavaScript з каші на щось більш-менш структуроване, ми змінювали місцями підключені теги script, а потім перезавантажували сторінку, щоб перевірити, чи цей варіант працює?
Був час. Сьогодні ж питання необхідності JavaScript на сторінці навіть не піднімається. Де-факто це стандарт, до якого готові замовники, а компанії закуповують фронтендерів пачками, щоб просто лежали в засіках, тому що вони все одно знадобляться вже за дуже короткий час. AJAX вже не викликає запитань; багато хто так само не знає, що це таке, але тільки тому що це само собою зрозуміла навичка, з якої починається навчання. Що таке тег script багато розробників-початківців і не замислюються — все робиться замість них. Що таке позиція Front-end розробника тепер стало зрозумілим навіть далекій від IT людині. Це спеціаліст, який пише JavaScript (а іноді і верстає) для проекту. Крапка.
А всьому провиною прогрес. З появою фреймворків та бібліотек, що дозволяють перенести маршрутизацію на бік клієнта, у постійному опитуванні серверної частини зникла потреба.
Та й сам фронтендер спокійно може обійтися без сервера із сучасними serverless рішеннями. Отак змінюється світ. Колись гнані глузуваннями, ми перетворилися на самостійну, потужну бойову одиницю. І сьогодні ми розглянемо нашу зброю ближче.
По пунктам
Якщо вам незнайомі ностальгічні спогади, описані вище — не біда. Повірте, світ фронтенду розвивається настільки швидко, що колись ваші сьогоднішні заслуги спливатимуть у голові як щось застаріле і закостеніліше.
А наше завдання на сьогодні — розібрати, з чим розібратися, щоби почати напрацьовувати психологічні травми (звісно ж, пов'язані з розробкою) з користю.
Так як з початком шляху ми визначилися і вибрали, куди саме підемо вчитися для отримання базових знань (привіт, Hillel), нам потрібно зрозуміти, куди рухатися далі, адже в період навчання кожна крупинка міцним фундаментом ретельно підлаштовуватиметься під стіни нашого розвитку.
Я не користуватимуся ресурсами збору статистики популярності фреймворків серед розробників, а складу цей ТОП за своїм досвідом, який ґрунтується на постійному отриманні пропозицій роботи з різних джерел.
React
Більшість пропозицій все ще стосується цієї бібліотеки. Хоча про неї вже не говорять як про самостійну одиницю, а мають на увазі комбінацію з маршрутизатора, менеджера стану та інших корисних фіч, які роблять з неї фреймворк — багато хто все ще поправляє інших, закочуючи очі. Ну, як кажуть… Так і пишеться.
Плюси
Цей інструмент зарекомендував себе не тільки низьким порогом входу, але й гнучкістю використання, що передбачає величезну кількість бібліотек, у тому числі і не пов'язаних безпосередньо з цим інструментом.
При використанні React вам буде доступно два підходи в розробці.
Перший — використовувати класи та подібність до ООП, яка доступна в мові. Другий — функціональний стиль. Порівняно недавно стало можливим керувати станом нашого компонента усередині функціональних компонентів. Такий підхід відразу завоював всю увагу користувачів і на сьогоднішній день став стандартом у будь-якій новій програмі.
Мінуси
Зворотним є й те, що гнучкість цієї бібліотеки є також її негативною стороною. Цей аргумент часто походить від противників React.
Але в розрізі цього питання я погоджуся, що недосвідчений розробник, який спробував побудувати додаток за допомогою цієї бібліотеки, швидше за все створить чудовисько Франкенштейна, яким складно управляти, а розширювати — тим більше.
Рекомендуємо курс по темі
VueJS
Фреймворк, який у цьому топі цілком заслужено.
VueJS склав конкуренцію двом гігантам (трохи терпіння), увірвавшись у світ розробки на повному ходу та посіявши зерно сумніву в дусі «а чи не спробувати мені написати щось на ньому?» в умі кожного розробника. Його шлях був тернистий, оскільки на той час ком'юніті не мало звички довіряти новачкам, а цілком покладалося на стандарти, що вже стали. Проте своє місце він завоював.
Цей фреймворк, як і React, досить простий у базовому освоєнні і дозволяє почати розробку вже тут і зараз, тому що вже включає всі необхідні утиліти для повноцінної розробки.
Плюси
Оскільки VueJS є спадкоємцем топ-1 і топ-3 у цьому списку, він увібрав у себе найкращі їх якості, трохи переробивши перший і спростивши другий. Якщо ви мали досвід роботи з одним з них, вам будете дуже просто почати писати якісний продукт на Vue. А вишнею на торті є чудова документація з наочними прикладами навіть у відео форматі. Як на мене, щодо простоти початку розробки — «Натисні сюди, проведи тут і готово» — фреймворк можна сміливо поставити на перше місце.
Крім того, розробка все ще залишається гнучкою, а програма збирається в неймовірно мініатюрний бандл.
Мінуси
Мабуть, до мінусів можна додати те, що є недоліком і в наступному інструменті, а саме семантику. Оскільки Vue є HTML-орієнтованим, вам потрібно буде витратити час ще й на вивчення директив, а це вже більше, ніж просто JavaScript. Тим же, хто після React звик тримати все під контролем, доведеться сподіватися на теги в блоках. Свобода структури може стати каменем спотикання у новачків.
Поради
Так само приділіть увагу структурі проекту, адже від того, як ви побудуєте додаток, залежатиме не тільки швидкість розробки, але й можливість додавання нових фіч.
Вивчіть інфраструктуру, якою володіє Vue; можливо, те, що вам потрібно, вже є в обоймі цього фреймворку, і немає необхідності завантажувати окрему бібіліотеку. Не поспішайте робити поспішні рішення.
Пам'ятайте, що можна уникнути повторення коду за допомогою вбудованих у фреймворк механізмів, наприклад, міксинів.
Angular
Ну і нарешті ми дісталися велетня Front-end розробки. Прошу любити та шанувати першовідкривача світу SPA.
Цей фреймворк став ковтком свіжого повітря, і його можна вважати батьком поточної Front-end індустрії. Завоювавши ринок свіжою ідеєю і (свого часу) прекрасним виконанням, він завоював серця всіх розробників і залишився в умах як зразок для всього, що з'являється на ниві Front-end розробки. Сучасна версія цього фреймворку зазнала величезної кількості переробок і виправлень, але все ж таки зберегла за собою основну ідею, яка користується популярністю і в інших утилітах (тому ж Vue).
Плюси
Я дуже довго залишався прихильником Angular, насамперед завдяки чудовій структурованості, чудовому виконанню принципів SOLID з боку розробників, а також використанню мови Typescript з коробки, що дозволяє уникнути великої кількості помилок під час написання коду.
Фреймворк має велику кількість утиліт і, будьте впевнені, будь-яке питання, що виникло під час розробки, вже вирішено та описано у власній документації.
Прекрасно опрацьована документація дозволить писати добре структуровані та досить якісні програми з самого початку використання, а досить розвинене ком'юніті вирішити проблему при її виникненні.
Мінуси
До мінусів можна віднести те, що ці проблеми можуть досить швидко виникнути. Складна структура проекту та коду часто лякають новачків.
Поріг входу набагато вищий, ніж у React і VueJS, тому що для початку роботи вам потрібно хоч трохи розбиратися в ООП та Typescript.
Поради
Наберіться терпіння. Шлях становлення Angular розробника дуже тернистий, але якщо ви навчитеся добре писати на цьому фреймворку, будь-який інший здасться вам просто дитячим лепетом.
Добре вивчіть документацію та пройдіть усі туторіали, надані розробниками, а коли почнете розробку, просто знайдіть вже готове рішення, вшите у фреймворк!
І останнє — коли зустрічаєте незнайомий термін, не полінуйтеся вивчити всі пов'язані посилання — це дуже спростить вам життя та прискорить подальше навчання.
Пам'ятаєте — все вже написано до нас!
Svelte
Ви подумаєте, що цей інструмент виявився тут через моду, адже у Front-end ком'юніті прийнято випускати по фреймворку на день, а потім хвалитися, що вже написав на ньому to-do лист.
Насправді, бібліотека Svelte відрізняється запропонованими підходами та рішеннями, ще на крок просуваючись вперед на шляху до ідеального інструменту, і варта уваги, тому що, цілком можливо, обжене всіх перерахованих вище конкурентів.
Плюси
Бібліотека успадкувала такий же низький поріг входу, як і React, з принципами відображення, що є сумішшю останнього з VueJS, так що кожен знайде щось рідне. Крім того, більш конструктивний погляд на реактивність дозволяє писати набагато менше коду, у тому форматі, в якому зручніше, і з більш високою продуктивністю.
Мінуси
Поки це ще досить молоде рішення, ком'юніті якого явно поступається всім переліченим вище, так що, можливо, у вас можуть виникнути деякі проблеми у вирішенні специфічних проблем, пов'язаних з розробкою, а оскільки цей інструмент досить молодий, про деякі з них ми поки що не здогадуємось.
Як на мене, йому потрібен час, щоб настоятися.
Поради
Так як я не використовував Svelte в реальному проекті, порада тут тільки одна: добре вивчіть документацію, ознайомтеся з туторіалом та напишіть якийсь міні-проект для закріплення знань. Думаю, у майбутньому це окупиться.
Рекомендуємо публікацію по темі
5 місце
На цьому місці може бути будь-який з існуючих фреймворків, тому що всі перераховані вище доповнили і поліпшили все, що створило людство останнім часом. Наприклад, ви можете розмістити тут Ember або Backbone.
Незважаючи на те, що CLI утилітами Ember користуються в розробці більш сучасних рішень, хом'як здебільшого відсиджується в норці, висовуючи носа в основному для того, щоб підтримати legacy проекти, які колись були на ньому написані.
Я склав цю підбірку на власний розсуд, відсортувавши інструменти за принципом «легкість плюс популярність», тому що на одному інтересі та ентузіазмі далеко не зможе виїхати ніхто.
Обравши один з них і навчившись ним користуватися певною мірою, ви обов'язково знайдете притулок на якомусь кораблі, де, можливо, веслувати буде і нескладно!
