Альтернативы привычному

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

Другой путь с Blazor

Можно ли создать web-приложение, используя .NET и не написав ни одной строчки JS-кода? 5 лет назад Microsoft сделала ставку на подобное утверждение, выпустив fullstack-фреймворк Blazor. Давайте посмотрим, чего удалось добиться за это время.

На 2022 год по данным портала statista.com Blazor занимает долю 4.46%. Это больше, чем у Nuxt, о котором мы писали в предыдущем дайджесте, но меньше чем у того же Svelte.

Косвенным показателем роста популярности Blazor можно считать интерес к нему других софтверных компаний.  Например, статический анализатор кода PVS-Studio недавно научился анализировать Blazor-компоненты. Об этом они даже написали отдельную статью на Хабре.

Сильная черта Blazor — возможность создания SPA-приложений, задействуя только .NET и ничего больше. В качестве языка используется C#, а для разметки — синтаксис Razor.

У фреймворка есть два режима хостинга: Blazor WebAssembly и Blazor Server. В первом случае код запускается напрямую в браузере через песочницу WebAssembly. Размер загружаемого кода при этом сильно больше, чем при использовании того же Angular, что в некоторых случаях критично. А вот второй вариант с Blazor Server более легковесный. Он отдаёт на клиент лишь крошечный скрипт в 76 килобайт, который открывает WebSocket-соединение и обновляет интерфейс.

Вариант с WASM хорош тем, что как для клиента, так и для сервера может быть использован C#. Штатных возможностей фреймворка хватает для решения большинства задач, а для расширения есть NuGet Gallery. Разумеется, с поправкой на то, что исполняться всё это будет в браузерной песочнице.

Строгая типизация C# помогает выявить большинство проблем непосредственно в процессе компиляции, а IDE дают больше подсказок при разработке.

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

Тем не менее, Microsoft вкладывает большие средства в разработку Blazor, что в будущем усилит конкуренцию с Angular и React. Пожелаем проекту успеха, пусть он не повторит судьбу Silverlight.

Гладим котика urlcat

Сложночитаемый код — прямая дорога к ошибкам. К сложности могут привести даже такие простые операции, как добавление динамических параметров в URL. Возьмём простой кусок кода:

const API_URL = 'https://api.example.com/';

function getUserPosts(id, blogId, limit, offset) {
  const requestUrl = `${API_URL}/users/${id}/blogs/${blogId}/posts?limit=${limit}&offset=${offset}`;
  // send HTTP request
}

В этом примере есть два момента. Первый — разработчик вполне может забыть, что переменная API_URL уже имеет слэш на конце. Чтобы предотвратить дублирование слэшей, можно воспользоваться встроенным классом URL. Ну а для экранирования встроенных значений призвать на помощь функцию encodeURIComponent(). Казалось бы круто — обе проблемы не стоят выеденного яйца. Пишем код:

const API_URL = 'https://api.example.com/';

function getUserPosts(id, blogId, limit, offset) {
  const escapedId = encodeURIComponent(id);
  const escapedBlogId = encodeURIComponent(blogId);
  const path = `/users/${escapedId}/blogs/${escapedBlogId}`;
  const url = new URL(path, API_URL);
  url.search = new URLSearchParams({ limit, offset });
  const requestUrl = url.href;
  // send HTTP request
}

Вроде всё правильно, но хочется проще и быстрее. Именно для этого создана небольшая библиотека urlcat. Она решает всего две задачи — корректная конкатенация всех частей URL и экранирование параметров. Предлагаем взглянуть на то, как можно упростить при этом код:

const API_URL = 'https://api.example.com/';

function getUserPosts(id, limit, offset) {
  const requestUrl = urlcat(API_URL, '/users/:id/posts', { id, limit, offset });
  // send HTTP request
}

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

Альтернатива Electron

Фреймворк Electron частенько критикуют, применяя термин software bloat, то есть раздувание программного обеспечения. С одной стороны, это справедливое замечание, но с другой, при помощи Electron создано множество удачных проектов, в том числе VSCode.

Он настолько хорош, что с его помощью можно буквально реализовать целую операционную систему. Яркий пример — кроссплатформенный Windows 95, написанный на Electron одним из разработчиков Slack. Так что если вы знаете только стандартный стек HTML/CSS/JS, а нужно создать десктопное приложение, то Electron — первое, что вам посоветуют.

А есть ли альтернативы? Как минимум одна — Neutralinojs. Этот фреймворк исповедует иной подход.

Electron фактически берёт с собой движок Chrome, Node.js и соответствующее middleware, то есть доставляет клиенту браузер и среду исполнения. Это одна из причин, почему нельзя эффективно уменьшить размер конечного приложения и снизить потребление памяти.

Neutralinojs пытается максимально задействовать уже имеющийся у клиента софт. Chrome может быть заменён на пользовательский браузер (или его компоненты), а среда исполнения на облегчённый web-сервер, предоставляющий API операционной системе. Упор сделан на простоту разработки, небольшой размер и переносимость.

Приложения могут запускаться в трёх возможных режимах: window, browser и cloud. Режим window создаёт для приложения отдельное окно, используя пользовательские настройки ОС. В режиме browser приложение задействует установленный браузер. Это хорошо подходит для реализации собственных механизмов безопасности при обращении к ОС. Последний режим cloud нужен для создания серверных приложений, запускаемых в фоновом режиме.

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

О безопасности тоже подумали — Neutralinojs использует стратегию одноразовых токенов (ОТТ), генерируемых в процессе инициализации. Даже если механизм OTT был взломан, существует ещё и внутренняя система разрешений, основанная на чёрных и белых списках. Таким образом, разработчики имеют два инструмента обеспечения безопасности, которые существенно усложняют потенциальный взлом.

Несомненным преимуществом является возможность создавать красивые приложения, используя привычные инструменты, например Angular, React и Svelte. А вот из недостатков — легковесность фреймворка приводит к уменьшению доступных функций по сравнению с тем же Electron и есть шанс столкнуться с разными проблемами. Но разработка проекта ведётся активно, с каждым релизом Neutralinojs становится всё удобнее для использования.

Митапы

Вакансии