Вебинар • 28 января 16:00–18:30
Как получать клиентов с онлайн-карт без вложений в рекламу?

10 крутых фреймворков и библиотек, о которых вы могли не знать

Обсудить
10 крутых фреймворков и библиотек, о которых вы могли не знать

Краткий обзор классных фреймворков и инструментов для веб-разработчиков. 

У сообщества GitHub есть замечательная традиция создавать списки «крутых вещей». Если вы как-то связаны с программированием, то наверняка видели посты с тегом «awesome» в духе «awesome js frameworks». Вот на подобный список мы сейчас и взглянем. Я отобрал для вас несколько интересных технологий, библиотек и утилит для JavaScript и CSS, которые помогут вам быстрее разрабатывать сайты и создавать продукты, для которых раньше не хватало подходящего инструментария. 

Alpine.js

Пожалуй, одна из самых минималистичных библиотек для JavaScript. По словам разработчиков, Alpine.js – это альтернатива JQuery. Она подключается как внешний скрипт через CDN и предоставляет доступ к 15 атрибутам, 6 свойствам и двум методам, которые помогут добавить динамику и логику в ваш HTML-документ.

Главная страница Alpine.js

Идея заключается в 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

Прелесть 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

Все компоненты 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

Принцип работы 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. Мобильная версия пока не поддерживается, но разработчики обещают исправить эту ситуацию в ближайшем будущем. 

Вместо заключения

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

Комментарии

С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте