Каковы проблемы изучения новых фреймворков JavaScript? | JavaScript
22 октября 2022 г.Во время разработки разработчики сталкиваются со многими проблемами, но иногда самая важная проблема возникает до того, как мы начнем разработку. Некоторые проекты требуют от нас изучения нового фреймворка или даже выбора нового фреймворка для изучения.
Чтобы обеспечить успех наших проектов, мы должны оценивать новые платформы по их размеру, производительности, масштабируемости и множеству других факторов.
Но проблемы не заканчиваются после того, как вы оценили различные фреймворки и выбрали лучший для своих проектов. Неизбежно будет кривая обучения, связанная с изучением нового фреймворка.
Препятствия могут быть такими же простыми, как адаптация к выполнению знакомой задачи с использованием незнакомой системы. Или может возникнуть более сложная задача, например использование платформы, которая не совсем подходит для вашей команды.
Давайте рассмотрим некоторые из наиболее распространенных проблем, с которыми сталкиваются разработчики при изучении новой платформы.
Определение релевантности
Первая проблема, с которой мы, вероятно, столкнемся, возникает, когда мы определяем наиболее подходящую платформу для работы. Заманчиво взглянуть на наиболее распространенные тенденции и выбрать одну из популярных платформ на рынке, например React, Vue или Angular.
Однако есть и другие фреймворки, которые мы должны рассмотреть, например Backbone js, Meteor, Nest и многие другие. Поиск подходящего решения сводится к согласованию наших нужд и требований со спецификациями каждого фреймворка.
Это гарантирует, что мы выбираем фреймворк, который действительно нам подходит, а не просто следуем модным тенденциям.
Еще одна проблема, с которой мы сталкиваемся, — это оценка размера, масштабируемости и универсальности рассматриваемых нами новых фреймворков. В мире технологий требования и цели постоянно меняются. Нам нужно убедиться, что мы учитываем как текущий, так и предполагаемый размер нашего проекта при выборе фреймворка.
Это гарантирует, что мы сможем легко создавать, развертывать и перемещать наш код.
Например, сборка Angular является самой тяжелой по сравнению с другими популярными фреймворками, такими как React или Vue. Если мы не пытаемся создать высокоинтерактивное приложение и нам нужно попробовать только несколько интерактивных компонентов, то AlpineJS может быть хорошим выбором для изучения.
Он имеет удобную для разработчиков документацию и короткий путь обучения, занимая очень небольшой размер (почти 4 КБ).
Время, необходимое для выхода на рынок, является еще одним фактором, который следует учитывать, если мы хотим победить наших конкурентов. Например, React имеет короткое время до рыночной стоимости. Это часть того, что делает его таким широко принятым фреймворком во многих ведущих организациях.
Другие фреймворки, такие как Vue и LitElement, также предлагают быстрый выход на рынок. У них медленно растущее сообщество, но короткая кривая обучения.
Это делает их наиболее подходящими для небольшой группы разработчиков, пытающихся создать веб-приложение. Они хорошо работают и для индивидуальных разработчиков. Тем не менее, даже при поддержке сообщества мы должны предвидеть некоторые трудности роста, пока команды учатся ориентироваться в новых платформах.
Когда мы изучаем новый фреймворк, самым большим препятствием является время, чтобы понять незнакомый способ выполнения знакомой задачи.
Например, мы можем обнаружить, что нам нужно создать компонент, используя совершенно другой метод. Точно так же нам может потребоваться заново научиться отлаживать, подключаться к дереву исходного кода, открывать файл и т. д. Тривиальная задача может занять нетривиальное количество времени.
Наша способность легко освоить эту новую платформу и повысить нашу эффективность во многом зависит от того, насколько хорошо документирована новая платформа.
Нам также необходимо учитывать размер команды и набор навыков, когда мы пытаемся перевести всю нашу команду на новый фреймворк. Если мы управляем растущей командой со многими новыми разработчиками, мы можем обнаружить, что изучение концепций нового фреймворка может занять немного больше времени.
Это замедляет работу команд разработчиков и задерживает их выполнение своих задач. Например, если мы хотим повысить квалификацию нашей команды для работы с React, концепция JSX может показаться чуждой новым разработчикам.
Как лучше всего приступить к работе?
Многие платформы включают инструменты командной строки для быстрого создания новых проектов. Но иногда они навязывают самоуверенную структуру проекта, которая не работает для каждой команды разработчиков.
Выбор фреймворка, который предлагает правильную архитектуру для вашей конкретной команды и вашего конкретного проекта, — еще одна проблема. Если мы хотим, чтобы все было просто, то архитектура MVC была бы идеальным выбором.
С другой стороны, если мы хотим настроить клиент-серверную архитектуру, нам нужно изучить отдельные платформы для клиентской и серверной части.
Например, такие фреймворки, как React, предлагают простую единую команду под названием create-react-app. Это настраивает проект с необходимыми файлами для запуска. Мы также можем настроить его с нуля без использования команды, в зависимости от наших потребностей.
Точно так же Vue JS предлагает еще более быстрое время установки. Он позволяет нам добавлять компоненты Vue, связывая его CDN с нашим HTML-скриптом, если мы хотим использовать только часть функциональности Vue. Для более крупных проектов мы можем установить его с помощью npm.
Мы делаем это с помощью команды npm install vue. Преимуществом Vue также является легкая сборка и короткая кривая обучения.
Хотя лучшие фреймворки имеют команды CLI, которые позволяют нам настроить проект за считанные минуты, у них есть недостатки, которые заставляют нас следовать процессу установки. Это может вызвать дополнительные проблемы, когда наш проект разрастется, поскольку мы не можем легко изменить структуру. Это было бы обременительно.
Например, когда мы используем приложение React create-react-app, оно внутри инкапсулирует все модули npm. Это упрощает работу разработчика.
Тем не менее, когда мы хотим установить более сложные модули, которые взаимодействуют с основными модулями, мы должны запустить npm run eject для управления файлами конфигурации и зависимостями. Есть еще одна загвоздка: мы не можем вернуться к предыдущей конфигурации после того, как выбросили наш проект React.
Хотя инструменты генерации CLI самоуверенны, поддержка конфигурации и зависимостей в будущем будет непосильной задачей. Это особенно важно, когда члены нашей команды разработчиков постоянно меняются.
Другой вариант, который у нас есть, — создать собственный скрипт, который дает нам доступ к нужным файлам конфигурации, но не извлекает конфигурацию CLI.
Упомянутые выше фреймворки предназначены только для функциональности внешнего интерфейса. Если нам нужна серверная часть, нам нужно настроить отдельную структуру и работать между ними, чтобы наше веб-приложение работало должным образом.
Но что, если есть способ имитировать архитектуру MVC с желаемой структурой по нашему выбору? Мы можем сделать это с помощью одного из множества доступных инструментов интеграции.
Самый известный из них — Метеор. Используя его, мы можем создавать полноценные приложения JavaScript прямо в облаке. Meteor — это фреймворк с открытым исходным кодом, который позволяет нам создавать веб-приложения, мобильные и настольные приложения на JavaScript. Он также предлагает такие функции, как хостинг и мониторинг.
Обучение созданию приложений с помощью Meteor или аналогичных инструментов, пользующихся широкой поддержкой сообщества, помогает командам эффективно разрабатывать и масштабировать свои приложения.
Выходим за рамки «Hello World»
Первой программой, которую мы создаем при установке новой платформы, обычно является «hello world». Мы проводим базовый тестовый пример, чтобы проверить, правильно ли установлен фреймворк.
Когда мы создаем проект в Angular или React, используя Angular CLI или приложение create-react-app, они отображают простую веб-страницу со своим логотипом. Это стандартные коды. Мы очистим эти коды и удалим ненужные ресурсы, прежде чем приступить к разработке.
При сборке с помощью IDE мы добавим пакеты linting, такие как ESLint и Prettier, чтобы позволить JavaScript следовать соглашениям фреймворка.
Лучший способ запустить фреймворк — изучить основы программирования лежащего в его основе фреймворка. Фреймворки широко используют эти концепции в расширенной манере.
Если, например, мы пытаемся изучить React, базовым языком программирования является JavaScript. Некоторые концепции JavaScript, такие как объявление переменных и констант, определение функций и поток управления, являются строительными блоками для изучения новой среды.
Эти концепции универсальны для всех языков программирования.
С точки зрения внешнего интерфейса почти каждый фреймворк требует, чтобы мы писали что-то на HTML и CSS. Angular и Vue используют прямые файлы HTML, а React и Svelte используют файлы JSX и svelte.
Несмотря на то, что имя файла отличается, теги и стиль кода остаются прежними. Точно так же CSS остается важным компонентом стиля. Крайне важно понимать различные способы написания стилей CSS и многотипных селекторов.
Даже при использовании фреймворка дизайна, такого как Bootstrap или Material, важно знать основы CSS. Это связано с тем, что сценарии могут переопределять существующие модули проектирования.
Некоторые расширенные концепции, такие как SASS, позволяют CSS в более удобной для чтения форме объявлять переменные, выполнять вычислительные функции и многое другое.
Включение серверных фреймворков сильно связано с вычислениями и обработкой данных. Поэтому необходимо глубокое понимание операторов управления и методов манипулирования данными.
Кроме того, вы должны иметь базовое представление о структурах данных, таких как массивы, списки, деревья и т. д. Бизнес-логика включает в себя различные методы алгоритмов для эффективного решения различных вариантов использования.
При работе с серверной структурой нам также необходимо знать о базах данных и их возможностях подключения. Все фреймворки смогут подключаться практически к любой базе данных, как реляционной, так и нереляционной.
Вы должны знать основные операции CRUD в базе данных через внутреннюю структуру. Это связано с тем, что мы будем хранить все полученные данные в базе данных и извлекать их при необходимости.
Это переходит к тому, как мы будем отправлять эти данные через API. Наиболее распространенный подход — предоставить REST API. Мы можем упростить их, используя некоторые инструменты, описанные в следующем разделе.
Как выглядит поддерживающая экосистема?
Как правило, одной платформы недостаточно для реализации всех функций, которые мы планируем реализовать. Это особенно верно, когда мы работаем с крупномасштабным веб-приложением. Одним из инструментов, который имеет свое мнение об использовании, является инструмент управления состоянием.
Организации часто сочетают React с инструментами управления состоянием, такими как Redux или Mobx. Поскольку состояние (данные) компонента относится к самому себе и к проблеме «сверления реквизита» в React, одно глобальное хранилище может решить эту проблему.
Хотя Mobx не так популярен, как React, его кривая обучения заметно проще и короче. Одно из преимуществ Mobx заключается в том, что он позволяет использовать несколько магазинов. Кроме того, вы можете использовать Context API.
React 16 представил Context API в качестве конкурента Redux и Mobx, избавившись от длинного шаблонного кода.
В отличие от React, который представляет собой библиотеку, Angular — это полноценный фреймворк с готовыми инструментами для управления состоянием. Он решает большинство случаев использования, когда React терпит неудачу. В Angular есть Ngrx для управления состоянием крупномасштабных приложений, где сервисов недостаточно.
Та же концепция применима к серверным приложениям. Используя NodeJS в качестве примера, Express является одной из популярных веб-платформ, широко используемых в серверных приложениях с узлами. Express предлагает меньше шаблонов кодирования. Он также масштабируется для больших приложений.
Он предлагает простоту и гибкость для простых механизмов маршрутизации. Без Express часто становится утомительно определять все API и маршрутизировать сервис с помощью ванильного узла.
Объектно-реляционная модель (ORM) является одним из стандартных инструментов, используемых на серверной части. Этот инструмент используется для сопоставления таблиц или документов базы данных с моделями внутреннего кода.
Когда мы хотим написать запрос для получения данных из базы данных, вместо того, чтобы писать необработанные запросы, ORM предлагает гибкие вызовы функций для извлечения данных и сопоставления их с моделями в серверной части.
Это обеспечивает простую структуру кода, возможность повторного использования и обслуживание кода. Хотя начальная кривая обучения может быть больше, она делает код намного проще для добавления и манипулирования после освоения.
Sequelize — это стандарт ORM для баз данных SQL, а Mongoose — стандарт для кодовых баз стека MERN или MEAN.
На рынке много фреймворков, и они постоянно обновляются до новых версий. Для разработчика очень важно оставаться в темпе. Лучшее место для начала работы с новым фреймворком — изучить официальную документацию и понять основы.
Всякий раз, когда что-то не работает должным образом, пройдите через консоль и терминалы, чтобы проверить, какая ошибка произошла, и попытаться изменить код соответствующим образом. Если даже после этого это не сработает, поищите это сообщение об ошибке в Интернете, там должен быть какой-нибудь форум или ветка, которые могли бы вам помочь.
Бывают моменты, когда некоторые концепции могут показаться ошеломляющими или сложными для понимания. Но лучший способ научиться — реализовать эти концепции в тестовом проекте в реальном времени и выяснить это путем реализации.
Начните с чего-то простого для своего тестового проекта — чего-то, что вы можете реализовать в течение часа. Таким образом, вы можете получить представление о структуре, не заморачиваясь.
Изучая новый интерфейсный фреймворк, попробуйте протестировать его с помощью Wijmo. В Wijmo есть мощные компоненты пользовательского интерфейса, не зависящие от фреймворка и поддерживающие Angular.
Готовы начать работу с Wijmo? Загрузите бесплатную пробную версию сегодня!
Оригинал