Какие общие концепции вам необходимо знать помимо фреймворков JavaScript?

Вначале был ванильный javascript.

Со временем такие методы, как Ajax и библиотеки, такие как Prototype или jQuery, улучшили использование javascript в веб-разработке.

За последние 10 лет в нашем наборе инструментов появилось созвездие фреймворков javascript. Золотая эра фреймворков javascript.

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

Выбор фреймворка JavaScript для нового проекта

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

Но если вы работаете в небольшой компании или стартапе, возможно, решение об использовании фреймворка javascript будет на вашей стороне, и у вас возникнет вопрос:

Разве не имеет значения, какой фреймворк JavaScript я выберу для нового проекта приложения?

Я думаю, что ответ зависит от ваших требований. Но в большинстве случаев вы сможете создать одно и то же приложение, используя любую из основных фреймворков javascript.

Если у вас есть довольно распространенный список требований, для вашего проекта может подойти любой из основных фреймворков javascript.

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

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

Изучение нового фреймворка JavaScript

За последние годы я понял, что хороший способ узнавать новое - это сравнивать с тем, что вы уже знаете. Таким образом, вы можете использовать свои знания в качестве основы для приобретения новых концепций.

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

На мой взгляд, поэтому хорошей отправной точкой для изучения нового решения проблем, которые вы уже знаете, является четкое представление об общих концепциях, лежащих в основе этих проблем.

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

Итак, чтобы прояснить общие концепции, разделяемые некоторыми фреймворками javascript, мы постараемся раскрыть их в этой статье.

Рамки обучения

Как вы знаете, существует множество фреймворков javascript, и мне нужно выбрать наибольшее количество представителей, чтобы написать статью вместо книги, поэтому в настоящее время наиболее часто используются учебные фреймворки:

  • Реагировать
  • Угловой
  • VueJS

Существует больше фреймворков, и вы можете использовать тот, которого нет в списке, и вы очень довольны этим фреймворком, который очень полезен для вас. Это не подлежит сомнению, идея состоит в том, чтобы выявить общие черты между основными фреймворками, а не выбрать лучшую из них. Если вы используете Svelte, Meteor, Ember и т. Д., Возможно, вы сможете рассказать об общих чертах в разделе комментариев.

Фреймворки - это инструменты, идея состоит в том, чтобы выбрать правильный инструмент для каждой проблемы.

Общие концепции

Одностраничное приложение (SPA)

Веб-приложения обычно называются моделями клиент-сервер, что означает, что часть работы выполняется в клиенте (в вашем мобильном или настольном браузере), а часть работы выполняется на одном или нескольких серверах.

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

Техника SPA означает, что вам просто нужно загрузить одну страницу (index.html), и все поведение в сети достигается с помощью javascript, запрашивая у сервера только необходимые данные для рендеринга приложения. Это позволяет нам значительно повысить производительность веб-сайтов и снизить нагрузку на сервер.

К счастью, в настоящее время этот механизм кажется беспроигрышным, поэтому он присутствует в React, Angular и VueJS.

Компоненты

Компоненты - одна из лучших идей, которые пришли в веб-разработку. По сути, HTML имеет множество полезных и многократно используемых компонентов или тегов. Так что, если вы можете создавать свои собственные компоненты HTML и повторно использовать их на своем веб-сайте?

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

Обычно, чтобы определить компонент, вам нужно реализовать что-то вроде:

  • Посмотреть шаблон
  • Логический код
  • Стили
  • Связывание данных между шаблоном представления и кодом логики
  • Связь между компонентами

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

Реагировать

В React для инкапсуляции ваших компонентов вы можете использовать обе функции или компоненты класса. Обычно компонент React инкапсулируется в один файл, содержащий как логический код, так и шаблон представления, который написан на JSX (синтаксис шаблона для создания шаблонов пользовательского интерфейса React).

Стили могут быть встроены или импортированы из отдельных файлов. Хотя я рекомендую вам поместить стили в отдельные файлы для целей обслуживания.

Связывание данных между шаблоном и кодом логики достигается через состояние компонента (мы перейдем к состояниям позже в статье).

Связь между компонентами может быть достигнута с помощью нескольких стратегий, 8 из которых вы можете найти в этой статье. Одна из самых распространенных - использовать государство для обмена информацией. Если нескольким компонентам необходимо совместно использовать некоторые данные, компонент более высокого уровня должен инкапсулировать компоненты, которым необходимо совместно использовать информацию, и для этого компонента будет определено состояние, которое будет доступно для дочерних компонентов.

Угловой

В Angular компоненты обычно организованы в четыре файла:

  • Компонент. Машинописный код с логикой компонента.
  • Шаблон. Разметка HTML и Angular.
  • Стиль. Файл, содержащий стили CSS для конкретного компонента.
  • Тесты. Модульные тесты компонентов.

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

Связывание данных между шаблоном и логикой может быть достигнуто несколькими способами, в зависимости от того, какой тип привязки вам нужен:

  • Из источника для просмотра
  • От от просмотра до источника
  • Двусторонняя последовательность: просмотр-источник-просмотр

Связь между компонентами может быть достигнута за счет:

VueJS

В VueJS шаблон и логика javascript должны находиться в одном файле.

Как и в React, стили могут быть встроены или импортированы из отдельного файла css. Хотя я рекомендую вам поместить стили в отдельные файлы для целей обслуживания.

Компонент имеет набор параметров, таких как prop, данные и вычислено, которые связаны с шаблоном.

Вы можете общаться между компонентами, используя несколько методов:

  • Используя prop s., родительские компоненты могут передавать свойства своим дочерним компонентам. Которые объявлены дочерними компонентами.
  • Использование событий. Компоненты могут отправлять события, которые могут быть перехвачены родительскими компонентами.
  • VueJS не реализует функцию для обмена данными между компонентами, не являющимися родительскими и дочерними, из коробки. Однако вы можете использовать базовую библиотеку для управления состоянием приложения, такую ​​как Vuex.

Маршрутизация

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

Реагировать

React не предоставляет готового механизма для управления маршрутами приложений. Но вы можете использовать response-router, который доступен через npm или yarn:

Угловой

В Angular маршрутизация - встроенная функция. Чтобы добавить возможности маршрутизации в ваше приложение, вам просто нужно добавить RouterModule в модуль вашего приложения.

VueJS

Ядро VueJ не обеспечивает механизма маршрутизации, но предоставляется официально поддерживаемая библиотека маршрутизатора vue-router.

Как видите, Angular пытается быть более самоуверенным и полным решением по сравнению с React и VueJS, которые больше ориентированы на небольшое и расширяемое ядро.

Объем импортированных стилей

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

Реагировать

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

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

Угловой

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

VueJS

Как и в React, вы можете использовать CSS-модули в VueJS, но если вы используете vue-loader, вы можете использовать зарезервированное слово scoped в своем определении стиля, чтобы стили были привязаны к компоненту.

HTTP-запросы

Выполнение HTTP-запросов к API-интерфейсам - распространенный вариант использования интерфейсных приложений, давайте посмотрим, как этим управляют различные фреймворки:

Реагировать

React не предоставляет встроенного механизма для вызова HTTP-запросов. В любом случае, наиболее распространенный способ их реализации - напрямую использовать fetch API или библиотеку Axios. Существуют и другие библиотеки, некоторые из них основаны на загрузке вроде Ky или wretch.

Угловой

Angular предоставляет сервисный класс HTTPClient из коробки. Вам просто нужно импортировать HttpClientModule в свой ngModule. Angular поощряет использование шаблона наблюдателя, а HTTPClient использует наблюдаемые.

VueJS

Так же, как и React, VueJs не предоставляет механизма для выполнения HTTP-запросов, поэтому вам нужно использовать API выборки, Axios (вы можете найти много сравнений между ними) или любую из библиотек и оболочек. которые доступны. Однако наиболее распространенным способом запроса HTTP-ресурсов в настоящее время является использование Axios.

Государственное управление

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

Чтобы управлять состоянием приложения, Facebook определил шаблон потока (используемый в их клиентских приложениях) как вариант шаблона наблюдателя. Существует множество реализаций Flux, таких как Redux, NGRX и так далее. Вы можете внедрить систему государственного управления самостоятельно, если хотите, но давайте постараемся не переделывать колесо.

На мой взгляд, чем больше приложение, тем больше преимуществ от использования системы государственного управления. Количество взаимодействий между компонентами также является важным параметром, чтобы решить, будет ли система управления состоянием помочь вам с точки зрения отладки или создания функций истории.

Давайте посмотрим, как можно использовать управление состоянием в изученных фреймворках.

Реагировать

Поскольку React - это фреймворк, созданный Facebook, у вас будут встроенные функции для управления состоянием приложения. Но если вы хотите строго реализовать шаблон Flux, вам необходимо добавить в свой проект библиотеку Flux:

Угловой

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

VueJS

В ядре VueJS это не встроенная функция для управления состоянием приложения. Но есть одна официально поддерживаемая библиотека - Vuex.

Модульность

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

Реагировать

В React вы можете разделить свой код с помощью функции React.lazy для ленивого импорта компонентов.

Угловой

Angular более модульно ориентирован, чем React, как сказано в документации Angular-приложения являются модульными. Это означает, что вы можете разбить большое приложение на несколько модулей, описываемых механизмом NgModule, и загружать их лениво.

VueJS

В VueJS вы можете использовать webpack для создания пакетов, которые вы можете лениво загружать.

Подобно React, вы также можете лениво загружать свои компоненты.

Если вы используете библиотеку vue-router, вы можете разделить свой код по маршруту, используя ленивую загрузку маршрутов.

Строить

Для трех фреймворков существует аналогичный процесс сборки, в основном это команда сборки, которая компилирует приложение в некоторые файлы внутри папки сборки. Содержимое этой папки можно развернуть на любом веб-сервере, чтобы предоставлять пользователям приложение.

Технология, лежащая в основе процесса сборки, - это webpack.

Реагировать

  • "Документация"
  • Команда сборки: npm run build или yarn build
  • Папка вывода: build

Угловой

  • "Документация"
  • Команда сборки: ng build
  • Папка вывода: dist

VueJS

  • "Документация"
  • Команда сборки: npm run build или yarn build
  • Папка вывода: build

Библиотеки и зависимости

Для трех фреймворков javascript вы можете использовать как npm, так и yarn для управления зависимостями вашего проекта. Возможно, вам пора решить, какой менеджер зависимостей можно использовать.

Заключение

Цель этой статьи - помочь вам определить общие концепции, лежащие в основе большинства фреймворков javascript. Это может быть вам полезно как минимум в двух случаях:

  • Необходимость изучить новый фреймворк с предыдущими знаниями о других фреймворках
  • Выбор одного фреймворка для разработки нового проекта.

Я думаю, что основная идея статьи такова: Разные фреймворки пытаются решить одни и те же проблемы. И я надеюсь, что с этой идеей вы не будете бояться изучать новый фреймворк, это старое вино в новых бутылках.