З плином часу, популярність JavaScript неухильно зростає. Розробницька спільнота постійно розширюється, і щодня створюються нові інструменти для цієї мови програмування.
З огляду на таку велику кількість доступних варіантів, вибір конкретного інструменту, фреймворку чи бібліотеки для вирішення певного завдання може стати викликом. Часто існує кілька альтернатив для будь-якої функції, яку ви хочете реалізувати в JavaScript. Особливо складно буває на початку визначитися з тим, яку саме бібліотеку чи фреймворк варто вивчати.
Метою цієї статті є роз’яснення переваг використання різних фреймворків і бібліотек JavaScript для фронтенду, що має допомогти читачам сформувати більш чітке розуміння їхньої специфіки. Сподіваємось, це спростить процес вибору відповідного інструменту.
React
React – це не фреймворк, а бібліотека JavaScript, що використовується для створення користувацьких інтерфейсів.
Вона має відкритий вихідний код і підтримується Facebook, а також спільнотою розробників-одинаків. Ініціатором створення React став Джордан Волке, який розробив її як внутрішній інструмент Facebook. Згодом React став відкритим проєктом і був представлений широкому загалу у 2013 році, після чого стрімко набрав популярності.
Основні характеристики React:
- Забезпечує можливість створення реактивних, гнучких і багаторазових компонентів
- Використовує віртуальний DOM
- Відрізняється високою швидкістю роботи
- Має компонентну структуру
- Підтримує одностороннє зв’язування даних
- Забезпечує можливість багаторазового використання коду
- Має активну та розвинену екосистему
- Пропонує зручні інструменти для керування станом
Встановлення та використання
React можна використовувати у фронтенді двома способами:
Через CDN
На офіційному сайті React ви можете знайти посилання на скрипти, які можна вставити у тег <head> вашої HTML-розмітки. Обирайте посилання відповідно до мети використання.
Наприклад, для середовища розробки використовуйте:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
А для виробничого середовища:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
З використанням Node.JS
Припустимо, що NodeJS у вас вже встановлено. Для встановлення React введіть наступну команду:
sudo npm i -g create-react-app –save-dev
Після завершення встановлення, введіть:
create-react-app my-first-react-application
Ця команда встановить всі необхідні бібліотеки для належної роботи React, включаючи сервер розробки, webpack і babel.
Перейдіть до папки my-first-react-application і виконайте команду:
npm start
Це запустить сервер розробки на порту 3000. Перейшовши за IP-адресою вашого сервера через порт 3000, ви побачите щось подібне:
React набуває все більшої популярності і використовується багатьма великими організаціями. Якщо ви зацікавлені у вивченні React, рекомендую вам пройти цей повний курс.
Vue.js
Vue.js – це прогресивний JavaScript фреймворк для створення інтерактивних інтерфейсів користувача та односторінкових додатків. Він є фреймворком представлення моделі (Model-View), де основна бібліотека зосереджена на рівні представлення. Vue є популярним завдяки своїй здатності працювати з односторінковими додатками. На відміну від React, Vue використовує звичайний HTML, а не JSX.
Vue.js є проєктом з відкритим кодом, який спочатку був створений Еваном Ю і опублікований у лютому 2014 року. Нижче наведено деякі його характеристики:
- Забезпечує створення реактивних і композиційних компонентів View
- Використовує віртуальний DOM
- Фокусується на основній бібліотеці (маршрутизація та керування станом)
- Обробка CSS здійснюється без CSS-in-JS
- Підтримує одностороннє прив’язування всередині компонентів
- Забезпечує підтримку основних додатків
- Підтримує багаторазове використання коду
Встановлення та використання
Ви можете використовувати Vue.js у фронтенді через CDN або з Node.js.
Для використання CDN, додайте наступний скрипт до розділу <head> вашої HTML сторінки:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Наведений вище скрипт підходить для розробки, оскільки містить важливі повідомлення в консолі. Однак для продакшну слід використовувати:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Для використання з Node.js встановіть його за допомогою команди npm:
npm install vue
Я наполегливо раджу вам ознайомитися з офіційною документацією Vue.js, щоб дізнатися більше або пройти цей навчальний шлях.
Angular
Angular – це структурний JavaScript фреймворк для створення динамічних веб-сторінок. Він дозволяє використовувати HTML як мову шаблонів та синтаксис HTML для чіткого та лаконічного вираження компонентів програми. Це проєкт із відкритим вихідним кодом, який підтримується Google та іншими учасниками.
Встановлення
Переконайтеся, що у вас встановлена остання версія Node.js. Першим кроком є встановлення інструменту Angular CLI.
npm install -g @angular/cli
Після встановлення, створіть новий проєкт за допомогою наступної команди:
ng new my-first-angular-app
Дотримуйтесь інструкцій на екрані. Ця команда згенерує файли та папки, використовуючи модуль npm для завантаження бібліотек, необхідних для належної роботи Angular.
Щоб запустити щойно створений застосунок, виконайте таку команду з папки застосунку:
ng serve
Це має автоматично запустити сервер на порту 4200.
[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
Висновок
Отже, ваш вибір інструменту для вивчення – це скоріше питання особистих уподобань, ніж визначення “що краще”.
Всі перелічені вище фреймворки/бібліотеки є чудовими. Ось короткий підсумок:
- Вам варто вивчити Angular, якщо ви хочете мати фреймворк, на який можна покластися, не турбуючись про зовнішні залежності.
- Вам варто вивчити React, якщо ви хочете створювати швидкі PWA (Progressive Web Apps), односторінкові застосунки, та вам комфортно працювати з JSX.
- React має дуже активну спільноту та багато можливостей для роботи завдяки великій кількості користувачів.
- Почати роботу з React відносно просто.
- React має широкі можливості налаштування та розглядає кожну частину інтерфейсу користувача як компонент.
- Vue має ті ж переваги, що й React, але без JSX.
- Ринок праці для Vue постійно зростає.
Ось діаграма Google Trends, що порівнює рівень популярності трьох розглянутих інструментів:
Якщо вас цікавить розробка фронтенду, ви можете розглянути цей курс на Udemy.