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


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

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

реагировать

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

Он с открытым исходным кодом и поддерживается Facebook и сообществом отдельных разработчиков. Реакт был изначально написан Джордан Уолк в качестве внутреннего инструмента в Facebook. Позднее он был открытым исходным кодом и был выпущен для широкой публики в 2013 году, и после этого приобрел широкую популярность.

Некоторые функции включают в себя следующее.

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

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

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

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

За CDN

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

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

И для производства

Использование Node.JS

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

sudo npm я -g создать-реагировать-приложение –save-dev

После завершения установки введите следующую команду

создать-реагировать-приложение мое-первое-реагировать-приложение

Приведенная выше команда установит все необходимые библиотеки, необходимые для правильной работы React, включая сервер разработки, веб-пакет и babel..

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

начало вечера

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

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

Vue.js

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

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

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

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

Вы можете использовать Vue.js на внешнем интерфейсе либо через CDN, либо с Node.js.

Чтобы использовать CDN способ, Вы можете добавить следующий скрипт в раздел заголовка HTML-страницы..

Приведенный выше скрипт подходит для целей разработки, так как содержит важное консольное сообщение. Тем не менее, для производства, вы должны использовать ниже.

И, чтобы использовать с Nodejs, вы можете установить его с помощью команды npm.

npm установить vue

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

угловатый

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

Установка

Убедитесь, что установлены последние версии Nodejs. Первое, что нам нужно установить, это инструмент Angular CLI.

npm install -g @ angular / cli

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

нг новое приложение my-first-angular

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

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

нг сервер

Это должно автоматически запустить сервер на порт 4200.

[[Электронная почта защищена] my-first-angular-app] # ng serve
10% сборок 3/3 модулей 0 активныхℹ 「wds」: Проект запущен по адресу http: // localhost: 4200 / webpack-dev-server /
「「 wds 」: выход веб-пакета подается из /
「「 wds 」: 404 вернется к //index.html

chunk {main} main.js, main.js.map (main) 47,8 кБ [начальный] [визуализированный]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 кБ [начальный] [визуализированный]
chunk {runtime} runtime.js, runtime.js.map (время выполнения) 6,15 кБ [запись] [отображается]
chunk {styles} styles.js, styles.js.map (styles) 10 кБ [начальный] [визуализированный]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3,81 МБ [начальный] [обработанный]
Дата: 2019-12-28T12: 08: 20.138Z – Хэш: 5d4b93c7bf9e61979c4d – Время: 12864 мс
** Angular Live Development Server прослушивает localhost: 4200, откройте ваш браузер на http: // localhost: 4200 / **
「「 wdm 」: успешно скомпилировано.

Вывод

Таким образом, то, что вы выбираете для изучения, – это скорее личное предпочтение, чем «что лучше».

Все фреймворки / библиотеки, перечисленные выше, великолепны. Вот краткое резюме;

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

Вот диаграмма на Google Trends, показывающая сравнение уровня популярности трех из них.

Если вам интересна разработка front-end, вы можете проверить это Курс удэми.

TAGS:

  • Открытый исходный код

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me