Фронтенд-фреймворки и библиотеки для десятикратного увеличения производительности

Когда я впервые попал во внешний интерфейс, все, что я знал, это HTML. Затем, чтобы улучшить дизайн моей веб-страницы, я изучил CSS. Наконец, я решил добавить больше интерактивных элементов, и моим решением стал JavaScript. Какое-то время я думал, что это все, что нужно знать. Однажды я почувствовал, что моя кодовая база неуправляема, когда я узнал о фреймворках и библиотеках одностраничных приложений. Технологии развиваются быстро, поэтому забывчивость — огромный недостаток. Конечно, освоить все эти технологии человеку непросто или даже непрактично, но я считаю, что каждый должен знать, что [вставьте имя] существует на рынке.

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

Базовый HTML/CSS/JS 🔑

Основа фронтенд-разработки. Это отправная точка для большинства разработчиков, поэтому здесь особо не о чем говорить.

Шаблонизаторы 🔑

Их можно рассматривать как расширенную версию HTML/JS. Основной задачей механизма шаблонов является смешивание HTML и JS, а затем возврат HTML во время выполнения. В некоторых случаях механизм шаблонов может иметь диалект.

Некоторые известные решения

• [EJS] (https://ejs.co/)

• [Рули] (https://handlebarsjs.com/)

Пре/постпроцессоры CSS 🔑

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

Некоторые известные решения

• [Сасс] (https://sass-lang.com/)

• Меньше

• [Стилус] (https://stylus-lang.com/)

• [ПостCSS] (https://postcss.org/)

Фреймворки и библиотеки одностраничных приложений (SPA) 🔑

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

Некоторые известные решения

• [Реагировать] (https://reactjs.org/)

• [Угловой] (https://angular.io/)

• [Vue] (https://vuejs.org/)

• Далее

• [Svelte] (https://svelte.dev/)

SPA: библиотеки маршрутизации 🔍

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

Некоторые известные решения

• [Реагирующий маршрутизатор] (https://reactrouter.com/)

• [Реагировать навигацию] (https://reactnavigation.org/)

• [Маршрутизатор Svelte SPA] (https://github.com/ItalyPaleAle/svelte-spa-router)

SPA: библиотеки управления состоянием 🔍

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

Некоторые известные решения

• [Редукс] (https://redux.js.org/)

• [Hookstate] (https://hookstate.js.org/)

• [NgRx] (https://ngrx.io/)

SPA: Инструменты сборки/сборщики модулей 🔍

Большинство библиотек и фреймворков поставляются со встроенным решением, потому что они не используют обычный синтаксис HTML/CSS/JS. Существует инструмент сборки для переноса и компиляции текущей кодовой базы в barebone HTML/CSS/JS. Вы, конечно, можете заменить его по умолчанию, если это необходимо.

Некоторые известные решения

• [Бейбл] (https://babeljs.io/)

• [Веб-пакет] (https://webpack.js.org/)

• [Vite] (https://vitejs.dev/)

CSS-фреймворки 🔑

Устали создавать элементы для своего сайта? Фреймворки CSS предоставляют готовые элементы для создания веб-сайта. Есть 2 основных вкуса, о которых я знаю. Примечание, с точки зрения CSS, термины библиотека и фреймворк несколько взаимозаменяемы. Интересно, почему они называются фреймворками без инверсии управления. Впрочем, это не по теме. Я упоминаю об этом только для того, чтобы вы не запутались.

Библиотеки компонентов 🔍

Они предоставляют полнофункциональный готовый компонент. Хочешь карусель? У них это есть. Вам нужна таблица с хорошей производительностью для 1000+ строк и функцией фильтрации? Это для вас.

Многим людям не нравятся определенные библиотеки, потому что они делают все веб-сайты одинаковыми. Это разумно, но не совсем правильно. Библиотеки обычно позволяют вам полностью настроить внешний вид своего компонента, полностью сохраняя его функции (нестилизованные компоненты), так что это не вина библиотеки.

Некоторые известные решения

• [MUI] (https://mui.com/)

• [Самозагрузка] (https://getbootstrap.com/)

• [Интерфейс чакры] (https://chakra-ui.com/)

Utility-first фреймворки 🔍

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

Некоторые известные решения

• Тейлвинд CSS

• [Тахионы CSS] (https://tachyons.io/)

Что-то как услуга (*aaS) 🔑

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

Аутентификация как услуга 🔍

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

Некоторые известные решения

• Auth0

• Аутентификация Firebase

• Google Identity Platform: Firebase Auth построен на этом. Однако Google Identity Platform — это облачная служба Google, поэтому она поддерживает больше требований и правил.

Платежные шлюзы как услуга 🔍

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

Некоторые известные решения

• [Полоса] (https://stripe.com/)

• [PayPal] (https://www.paypal.com/us/webapps/mpp/payflow-payment-gateway)

Коммуникационная платформа как услуга 🔍

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

Некоторые известные решения

• [Твилио] (https://www.twilio.com/)

• [Пливо] (https://www.plivo.com/)

Практически не требующие кода решения 🔑

Я видел много разработчиков (точнее, программистов и программистов), которым не нравится эта сторона внешнего интерфейса. Для меня все они являются инструментами для решения проблемы, поэтому я ничего против них не имею.

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

Системы управления контентом 🔍

Это больше похоже на решение на 50% кода для создания простого веб-сайта, но использование плагинов может сделать их практически без кода.

Некоторые известные решения

• [WordPress] (https://wordpress.org/)

• Shopify

Конструкторы сайтов 🔍

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

Некоторые известные решения

• Викс

• [Квадратное пространство] (https://www.squarespace.com/)

Заканчиваем 🍀

Это ни в коем случае не исчерпывающий список интерфейсных фреймворков и библиотек, но я считаю, что это хорошая отправная точка для демонстрации нескольких решений, существующих на рынке. Один из способов расширить этот список — просто задать себе вопрос: «Была ли задача insert-your-task-here решена раньше?"

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

Эта статья была изначально опубликована на hungvu.tech.