Краткий обзор классных фреймворков и инструментов для веб-разработчиков.
У сообщества GitHub есть замечательная традиция создавать списки «крутых вещей». Если вы как-то связаны с программированием, то наверняка видели посты с тегом «awesome» в духе «awesome js frameworks». Вот на подобный список мы сейчас и взглянем. Я отобрал для вас несколько интересных технологий, библиотек и утилит для JavaScript и CSS, которые помогут вам быстрее разрабатывать сайты и создавать продукты, для которых раньше не хватало подходящего инструментария.
Alpine.js
Пожалуй, одна из самых минималистичных библиотек для JavaScript. По словам разработчиков, Alpine.js – это альтернатива JQuery. Она подключается как внешний скрипт через CDN и предоставляет доступ к 15 атрибутам, 6 свойствам и двум методам, которые помогут добавить динамику и логику в ваш HTML-документ.
Идея заключается в inline-встраивании JavaScript-кода прямо в HTML-элементы без необходимости прописывать все в отдельный <script>-блок или внешние файлы.
Например, если вам нужно сохранить какие-то данные, которые могут понадобиться внутри элемента, то можно вписать их в список атрибутов:
<div x-data="{ variable: true }">Контент</div>
Это объявление переменных, но добавление функций выполняется аналогичном способом:
<button x-on:click="variable = false">Кнопка</button>
Если кнопка находится внутри объявленного <div>, то в ее контекст попадет переменная variable, и ее можно будет поменять через прописанную ниже функцию.
В итоге мы получаем инструмент, позволяющий хранить логику прямо в HTML.
Alpine.js любят сочетать с TailwindCSS. Такой тандем позволяет весь код, включая визуальную разметку и логику, прописывать в HTML рядом с соответствующими блоками данных. Этот подход немного ухудшает читаемость, но зато дает возможность не прыгать между файлами и не тратить время на поиск нужных компонентов сайта.
Adonis.js
Adonis – это набор инструментов для Node.js, превращающий JavaScript-приложение в полноценную платформу для создания сайтов и программ.
По умолчанию, чтобы создать полноценный JS-продукт, нужно загрузить множество пакетов для настройки роутинга, утилиты для управления загрузкой файлов, валидатор кода и множество других мелких плагинов.
Adonis включает в себя все эти мелкие плагины и позволяет не тратить время на проработку рабочей среды, а сразу перейти к созданию приложения.
Здесь уже встроено все необходимое для создания продвинутой системы роутинга. Функционально реализация роутинга в Adonis на уровне React Rounter, но без React.
Также во фреймворк встроена утилита Lucid для создания запросов к базе данных, а также отдельный движок для формирования шаблонов кода (как в mustache и handlebars).
В Adonis есть отдельный пакет для реализации авторизации в приложении. Он обеспечивает безопасную вход по логину и паролю с использованием API-токенов. А встроенный валидатор поможет проверить любой input в приложении.
И при желании все это можно интегрировать в уже существующую сборку Webpack.
Skeleton
Skeleton – это очень компактный набор шаблонов для CSS. Считать его полноценным UI-фреймворком нельзя, потому что он включает в себя лишь 400 строк CSS-кода для кастомизации стиля вашего сайта или приложения.
Прелесть Skeleton в его легковесности. Этот набор шаблонов не нужно даже устанавливать, он легко подключается через CDN и сразу же готов к работе.
Идея разработчиков Skeleton заключается в создании мини-фреймворка для быстрой стилизации сайта под различные разрешения экрана. Здесь не нужно думать о реализации отдельных компонентов. Достаточно написать, чего хочешь, а Skeleton все сделает за вас.
Например, чтобы отрисовать блок с колонками, нужно написать:
<div class="container"> <div class="row"> <div class="one column">One</div> <div class="eleven columns">Eleven</div> </div> </div>
У Skeleton есть своя эстетика, поэтому здесь не нужно задавать стили даже шрифтам. Вы просто применяете подзаголовок или формат текста, а Skeleton сам придаст ему аккуратный облик.
То же касается кнопок и других интерактивных элементов. Нужно лишь применить класс button к элементу, и он сразу же обретет стиль в духе Skeleton.
<p class="button">Кнопка</p>
Все классы созданы таким образом, чтобы идеально смотреться на экране с любым разрешением.
Quasar
Quasar – это мощная надстройка над Vue 3. Идея этого фреймворка заключается в максимальном упрощении создания интерфейсов. Для этого создатели Quasar подготовили огромную библиотеку готовых компонентов.
С Quasar не нужно начинать разработку с нуля. У вас уже есть набор инструментов, подходящих для любого приложения или сайта. С помощью них можно быстро собрать каркас проекта, а потом дополнить его уникальным кодом с синтаксисом Vue.
Все компоненты Quasar четко следуют правилам оформления, предложенным компанией Google. Веб-приложения, созданные при помощи Quasar, поддерживаются во всех существующих браузерах, включая мобильную версию Safari. Фреймворк берет на себя заботы по созданию экрана загрузки, отображению иконок в приложении, а также сборке программы любым удобным способом – от SPA до создания полноценного мобильного приложения.
Шаблон для отображения аватарки в Quasar выглядит так:
<template> <div class="q-pa-md q-gutter-sm"> <q-avatar v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']" :key="size" :size="size" color="primary" text-color="white" icon="directions" /> </div> </template>
И самое приятное в Quasar – корректная минимизация и очистка кода. Если вы задействуете только часть компонентов и функций Quasar в своем проекте, то остатки кода для других типов сборки и приложений будут удалены из вашей код-базы. Беспокоиться о наличии мусора в своем коде не приходится.
Tauri
Tauri – это относительно свежий проект, призванный стать более надежной, быстрой и эффективной альтернативой для Electron.
Это программная платформа для превращения веб-приложений в нативные. То есть вы пишите программу, используя JavaScript, HTML, CSS, но запускаете ее не в браузере, а в отдельном окне, которое при этом поддерживает системные уведомления, запросы к геолокации и т.п.
Пока что Tauri работает только на десктопных операционных системах (Windows, macOS и Linux), но разработчики планируют добавить поддержку iOS и Android в ближайшем будущем.
Для разработки под Tauri можно использовать любой существующий фреймворк, включая React, Vue и Svelte. Итоговое приложение собирается в очень компактные пакеты, минимальный размер может составлять 600 килобайт.
Также разработчики фреймворка обещают обеспечивать безопасность создаваемых приложений.
Сейчас в качестве бэкенда для Tauri используется Rust, но разработчики хотят дать возможность менять его на Go, Python, Nim и другие языки.
Handlebars
Если вы пользовались какими-нибудь JavaScript-фреймворками, то наверняка видели выражения в духе {{ template }} (особенно во Vue). Это динамические переменные, которые могут меняться в зависимости от контента в JavaScript-объектах и рендерить в DOM-дерево этот самый контент.
Похожего эффекта можно достичь и без фреймворков, если установить Handlebars. Это небольшая утилита для JavaScript, позволяющая создавать шаблоны для генерации контента внутри HTML-файлов.
Допустим, у вас есть блок с текстом:
<p>this {{typeOfAnimal}} is {{breed}}</p>
Если в input вставить подобный объект:
{ typeOfAnimal: "cat", breed: "siberian short-haired", }
На выходе в HTML появится следующий контент:
<p>this cat is siberian short-haired</p>
Естественно, это лишь базовая функциональность handlebars, и при необходимости можно дополнять язык другими функциями, не являющимися частью языка.
Meteor
Meteor – это fullstack-платформа для разработки проектов на языке JavaScript. С помощью нее можно создавать как мобильные приложения, так и десктопные.
Meteor включает в себя все необходимые компоненты для сборки программы, обмена контентом внутри приложения и т.п. Все пакеты, входящие в Meteor, – это разработки сообщества из открытых источников.
Все элементы программы в Meteor можно писать на JavaScript, причем независимо от выбранной платформы. При использовании Meteor ваш сервис отправляет не элементы HTML, а конкретные данные, которые потом рендерятся фронтенд-частью программы.
Хотя создатели Meteor задействуют в своем проекте пакеты, созданные сторонними разработчиками, они их внимательно исследуют и курируют.
Dust.js
Аналог Handlebars с несколькими значительными отличиями в логике и принципах технической реализации.
Dust.js позволяет создавать шаблоны и рендерить HTML-элементы, используя готовые JavaScript-компоненты, причем с цикличной обработкой входных данных.
Например, вот шаблон:
<p>Here are my {#animals}{type}{@sep}, {/sep}{/animals}!</p>
А вот входные данные:
{ animals: [ {type: "cat"}, {type: "dog"}, {type: "wombat"}, {type: "tiger"} ] }
На выходе мы получим следующее:
<p>Here are my cat, dog, wombat, tiger!</p>
Dust.js выгодно отличается от других шаблонизаторов высокой скоростью работы и функцией асинхронной загрузки. То есть не нужно подключать все шаблоны из внешнего файла и загружать их заранее. Можно подгружать их по мере необходимости.
Dust.js разрабатывается и поддерживается компанией LinkedIn.
Headless UI
Еще один набор инструментов для ленивых программистов. Headless UI – это библиотека элементов на базе Tailwind, созданная при помощи фреймворков React и Vue.
Принцип работы Headless UI элементарен. Заходите на сайт библиотеки, находите там нужный элемент интерфейса, скачиваете файл в формате .js или .vue и загружаете этот компонент в свой проект.
Из доступных элементов интерфейса тут есть все необходимое:
-
выпадающие меню,
-
списки элементов,
-
кнопки-переключатели,
-
модальные диалоги,
-
всплывающие окна,
-
радио-кнопки.
Помимо готовых блоков, здесь есть и обертки-анимации. То есть внешние компоненты, в которые вы можете загрузить любой из уже существующих элементов интерфейса, чтобы его анимировать.
Каждый компонент идет в комплекте с подробной документацией, поясняющей, куда нужно вставить ссылки и элементы интерфейса. Дополнительные настройки при этом не требуются.
Вот пример кода для панели с вкладками на Vue:
<template> <TabGroup> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> <Tab>Tab 3</Tab> </TabList> <TabPanels> <TabPanel>Content 1</TabPanel> <TabPanel>Content 2</TabPanel> <TabPanel>Content 3</TabPanel> </TabPanels> </TabGroup> </template>
Вся библиотека Headless UI по умолчанию соответствует стандартам современного веб-дизайна, но внешний вид элементов можно легко поменять, если вы знаете, как работает TailwindCSS.
Revery
Revery – это кроссплатформенный фреймворк на базе React, созданный при помощи языка Reason. Reason – это ретранслятор OCaml-кода в JavaScript и нативные компоненты. С помощью него разработчики создают эффективные и быстрые приложения, близкие по своим характеристикам к настоящему нативном коду.
Благодаря Revery можно создавать такие же быстрые и эффективные приложения, потому что они конвертируются в нативный код. Весь код можно написать без дополнительного обучения, если вы уже знаете, как работать с React.
При желании Revery-программы можно запускать в браузере с использованием WebGL. Мобильная версия пока не поддерживается, но разработчики обещают исправить эту ситуацию в ближайшем будущем.
Вместо заключения
Разработчики постоянно создают новые инструменты для создания все более продвинутых приложений, при этом упрощая процесс разработки. И время от времени нужно анализировать списки новейших технологий. Возможно, среди них найдется бриллиант, который заставит вас переосмыслить процесс создания сайтов и программ.
Источник:
