🌐 Лучшие фреймворки/библиотеки JavaScript для фронтенд-разработки |

🌐 Лучшие фреймворки/библиотеки JavaScript для фронтенд-разработки

Обзоры
JavaScript с годами становится все более популярным языком, а его сообщество быстро растет, и разработчики постоянно разрабатывают и ежедневно создают инструменты для этого языка.
Это затрудняет принятие решения в тех случаях, когда надо выбрать какой инструмент/фреймворк/библиотеку использовать для конкретной задачи, потому что всегда есть несколько вариантов буквально для всего, что вы хотите сделать в JavaScript.

Поначалу сложно решить, какую библиотеку или фреймворк стоит начать изучать, чтобы ваша фронтенд разработка стремительно развивалась.

Эта статья посвящена показу преимуществ использования нескольких интерфейсных фреймворков/библиотек JavaScript и, в конечном итоге, дает более четкое представление о них.

React

React – это не совсем фреймворк, а скорее библиотека JavaScript для создания пользовательских интерфейсов.

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

Изначально React был написан Джорданом Уолком как внутренний инструмент Facebook.

Позднее он стал опенсорсным и выпущен для широкой публики в 2013 году, и с тех пор приобрел широкую популярность.

Некоторые из его функций включают следующее:

  • Предоставляет реактивные, настраиваемые и повторно используемые компоненты
  • Использует виртуальный DOM
  • Очень быстрый
  • На основе компонентов
  • Односторонняя привязка данных
  • Возможность повторного использования кода
  • За ним стоит яркая и процветающая экосистема.
  • Удобное управление состоянием

Установка и использование

React можно использовать двумя разными способами:

  • Через CDN
  • Использование Node.JS

Через CDN

Вы можете обратиться к их официальному сайту, чтобы получить ссылку на скрипт, которую вы можете включить в тег заголовка в своей разметке HTML.

Выбирайте ссылки в зависимости от вашей цели.

Например, при использовании в среде разработки:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

И для продакшена:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/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, включая сервер разработки, веб-пакет и babel.

Перейдите в папку приложения my-first-response-application и выполните следующую команду

npm start

Вышеупомянутая команда запустит сервер разработки на порту 3000.
И, когда вы получите доступ по IP-адресу вашего сервера с портом 3000, вы должны страницу приветсвия

Vue.js

Vue.js – это прогрессивная среда JavaScript для создания интерактивных пользовательских интерфейсов и одностраничных приложений.

Этот фреймворк с базовой библиотекой, ориентированный на уровень представления.

Vue популярен, потому что он поддерживает одностраничные приложения.

В отличие от React, Vue использует необработанный HTML, а не JSX.

Vue.js является опенсорсным и изначально был создан Эван Ю и публично выпущен в феврале 2014 года.

Ниже приведены некоторые из функций.

  • Он предоставляет реактивные и составные компоненты представления.
  • Использует виртуальный DOM
  • Сосредоточен на основной библиотеке (например, на маршрутизации и управлении состоянием)
  • Область видимости в CSS обрабатывается без CSS-In-J
  • Односторонняя привязка внутри компонентов.
  • Поддержка основных дополнений
  • Возможность повторного использования кода

Установка и использование

Вы можете использовать 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

Angular

Angular – это фреймворк JavaScript для динамических страниц.
Он позволяет использовать HTML в качестве языка шаблонов и позволяет использовать синтаксис HTML для четкого и лаконичного выражения компонентов приложения.
Это проект с открытым исходным кодом, поддерживаемый Google и другими участниками сообщества.

Установка

Убедитесь, что у вас установлена последняя версия Nodejs.

Первое, что нам нужно установить, – это инструмент Angular CLI.

npm install -g @angular/cli

После установки мы можем создать новый проект с помощью следующей команды.

ng new my-first-angular-app
Следуйте инструкциям на экране.

Система сгенерирует некоторые файлы и папки и использует модуль npm для загрузки сторонних библиотек, необходимых для правильной работы Angular.

Чтобы запустить только что созданное приложение, выполните следующую команду из папки приложений.

ng server
Система должна автоматически запустить сервер на порту 4200.
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.

 

Пожалуйста, не спамьте и никого не оскорбляйте. Это поле для комментариев, а не спамбокс. Рекламные ссылки не индексируются!
Добавить комментарий