3 найкращі фреймворки/бібліотеки JavaScript для розробки інтерфейсу

Автор

З роками JavaScript набуває все більшої популярності, спільнота швидко зростає, а розробники щодня постійно розробляють і створюють інструменти для мови.

Через це важко вирішити, який інструмент/фреймворк/бібліотеку використовувати для конкретного завдання, оскільки завжди є кілька варіантів буквально для всього, що ви хочете зробити в JavaScript. Спочатку все ще складно вирішити, яку бібліотеку чи фреймворк вивчати.

Ця стаття зосереджена на демістифікації переваг використання кількох інтерфейсних фреймворків/бібліотек JavaScript і, зрештою, дає більш чітке уявлення про них. Він призначений для полегшення процесу прийняття рішення щодо вибору.

Реагувати

Реагувати це не фреймворк, а бібліотека JavaScript для створення інтерфейсів користувача.

Він має відкритий код і підтримується Facebook і спільнотою окремих розробників. Спочатку React був написаний Джордан Волке як внутрішній інструмент у Facebook. Пізніше він був відкритим джерелом і опублікований для широкої публіки в 2013 році, після чого набув широкої популярності.

Деякі функції включають наступне.

  • Забезпечує реактивні, настроювані та повторно використовувані компоненти
  • Використовує віртуальний DOM
  • Надзвичайно швидко
  • На основі компонентів
  • Одностороння прив’язка даних
  • Багаторазове використання коду
  • За ним стоїть динамічна, процвітаюча екосистема
  • Зручне керування станом

Встановлення/використання

React можна використовувати на інтерфейсі двома різними способами.

Через CDN

Ви можете звернутися до їх офіційний сайт щоб отримати посилання на сценарії, яке можна включити в тег заголовка вашої розмітки 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

  Що означає «IDGI» і як ви його використовуєте?

Я припускаю, що у вас уже встановлено 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

Вищезазначене запустить сервер розробки на порту 3000. Коли ви отримаєте доступ до IP-адреси свого сервера через порт 3000, ви побачите щось на зразок нижче.

React набирає популярності та стає доступним для багатьох великих організацій. Якщо ви зацікавлені в навчанні, то я рекомендую взяти це повний курс.

Vue.js

Vue.js це прогресивна платформа JavaScript для створення інтерактивних інтерфейсів користувача та односторінкових програм. Це структура представлення моделі з основною бібліотекою, зосереджена на рівні перегляду. Vue популярний, оскільки він здатний працювати з односторінковими програмами. На відміну від React, Vue використовує необроблений HTML, а не JSX.

Vue.js є відкритим кодом і спочатку був створений Еван Ю і опублікований у лютому 2014 року. Нижче наведено деякі функції.

  • Він забезпечує компоненти Reactive і Composable View.
  • Використовує віртуальний DOM
  • Зосереджується на основній бібліотеці (тобто на маршрутизації та управлінні станом)
  • Огляд у CSS обробляється без CSS-In-Js
  • Одностороннє прив’язування всередині компонентів.
  • Підтримка основних додатків
  • Багаторазове використання коду
  Як використовувати Xubuntu на Raspberry Pi 4

Встановлення/використання

Ви можете використовувати Vue.js на інтерфейсі через CDN або з Node.js

Щоб використовувати спосіб CDN, ви можете додати наступний сценарій до розділу заголовка сторінки HTML.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Наведений вище сценарій підходить для цілей розробки, оскільки він містить важливе консольне повідомлення. Однак для виробництва ви повинні використовувати наведений нижче.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

А для використання з Nodejs ви можете встановити його за допомогою команди npm.

npm install vue

Я наполегливо раджу вам прочитати офіційний Vue JS документація щоб дізнатися більше або розглянути можливість взяти це шлях.

Кутова

Кутова це структурна структура JavaScript для динамічних сторінок. Це дозволяє використовувати HTML як мову шаблонів і дозволяє використовувати синтаксис HTML для чіткого та лаконічного вираження компонентів програми. Це проект із відкритим кодом, який підтримує Google та інші учасники.

монтаж

Переконайтеся, що у вас встановлено останню версію Nodejs. Перше, що нам потрібно буде встановити, це інструмент Angular CLI.

npm install -g @angular/cli

Після встановлення ми можемо створити новий проект за допомогою наступної команди.

ng new my-first-angular-app

Дотримуйтесь інструкцій на екрані. Це генерує деякі файли та папки та використовує модуль npm для завантаження сторонніх бібліотек, необхідних для належної роботи Angular.

Щоб запустити новостворену програму, виконайте наступну команду з папки програм.

ng server

Це має автоматично запустити сервер на порту 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.

Висновок

  Як автоматично перемикати AirPods на iPhone, iPad і Mac

Отже, те, що ви вирішуєте вивчати, є скоріше особистим уподобанням, ніж питанням «що краще».

Усі фреймворки/бібліотеки, перелічені вище, чудові. Ось короткий підсумок;

  • Вам слід вивчити Angular, якщо ви хочете мати фреймворк, на який ви хочете покладатися, не маючи справу із зовнішніми залежностями.
  • Вам слід навчитися React, якщо ви хочете створювати швидку, PWA, односторінкову програму, і вам зручно працювати з JSX.
  • React має найжвавішу спільноту та більше можливостей для роботи завдяки великій спільноті.
  • Почати роботу з React порівняно легко.
  • React має широкі можливості налаштування та розглядає кожну частину інтерфейсу користувача як компонент.
  • Vue має ті ж переваги, що й React, але без JSX.
  • Ринок праці для Vue постійно зростає.

Ось діаграма в Google Trends із порівнянням рівня популярності трьох із них.

Якщо вас цікавить інтерфейсна розробка, ви можете перевірити це Курс Udemy.