Frontend библиотеки в web-приложении на Python и Starlette

Web-приложение на Python и Starlette, разработку которого мы исследуем в этом цикле статей, наряду с исполняемым на сервере кодом будет иметь код, исполняемый на клиенте. Такой код обычно называют frontend, и он предусматривает достаточно обширный набор типовых задач, однообразных для каждого web-приложения. Для решения этих типовых задач уже разработаны готовые тематические библиотеки. Разрабатываемое в этом цикле статей приложение будет использовать некоторые из них, и в этом обзоре я покажу один из вариантов подключения frontend библиотек в проект.

Способы подключения сторонних библиотек

Сторонние библиотеки для клиентского кода можно подключить в проект различными способами. Кто-то использует CDN сервера, в этом случае достаточно разместить в HTML-заметке соответствующие теги и атрибуты в них, не копируя сторонний код на собственный сервер. Кто-то предпочитает в своих проектах полную автономию и независимость от публичных хранилищ кода, в этом случае копии сторонних библиотек должны храниться на сервере в статических файлах.

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

Загрузка библиотек из сети

Сторонние frontend библиотеки, как правило, представляют собой наборы файлов .css и .js. Их можно скачать либо с официальных сайтов разработчиков, либо с публичных CDN серверов. При этом конечно же придётся посетить сайты разработчиков и найти на них ссылки для загрузки. Но есть другой путь...

Последнее время довольно мощно развивается серверный интерпретатор JavaScript — Node.js. В рамках этого проекта предусмотрена обширная инфраструктура, и в том числе менеджер пакетов npm.

NPM является своеобразным аналогом питонячего PIP, но для языка программирования JavaScript, и позволяет устанавливать в проекты на Node.js любые сторонние библиотеки, как для frontend, так и для backend. С помощью этого менеджера пакетов можно, и даже удобно, установить все сторонние библиотеки, которые я планирую использовать в своём проекте.

Поскольку разработку проекта я осуществляю на базе операционной системы Debian trixie/sid, установить npm не составит труда, одной простой командой.

$ sudo apt install npm

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

Создаём каталог окружения

Для опытов с npm я обычно создаю в домашнем каталоге отдельный каталог с именем vendor.

$ mkdir ~/vendor

Вхожу в него.

$ cd vendor/

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

Библиотека для работы в браузере с датами и временем

В процессе проектирования web-приложения мне потребуется эффективное средство для работы в браузере с датами и временем — Luxon.js. Устанавливаю эту библиотеку с помощью npm вот такой командой.

$ npm install luxon

В результате исполнения этой команды менеджер пакетов создаст в текущем рабочем каталоге (~/vendor) вложенный каталог с именем node_modules. Вот как выглядит дерево этого каталога на моём компьютере:

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

$ cp node_modules/luxon/build/global/luxon.js* .

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

Интерпретатор шаблонов для браузера

В предыдущих выпусках этого цикла статей мы уже имели дело с серверным интерпретатором шаблонов на языке программирования Python — Jinja2. В некоторой степени аналогичный инструмент мне потребуется для обработки HTML-шаблонов в браузере. В этом проекте я буду использовать Mustache.js. Устанавливаю эту библиотеку с помощью npm.

$ npm install mustache

В результате исполнения этой команды в дереве каталога node_modules появится каталог с именем mustache. Вот как выглядит его содержимое на моём десктопе.

В этом каталоге меня интересует один единственный файл, на снимке экрана выше я выделил его красным фломастером. Копирую этот файл в текущий рабочий каталог.

$ cp node_modules/mustache/mustache.js .

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

JavaScript фреймворк общего назначения

Клиентский JavaScript достаточно сложный язык программирования, и его стандартной библиотеки в принципе достаточно, чтобы эффективно манипулировать объектами в дереве DOM (Document Object Model). Тем не менее, мне хочется манипулировать этими объектами не просто эффективно, но ещё и удобно, и легко. С этой целью я буду использовать в проекте библиотеку Jquery.js, её инструменты помогут мне очень многие сложные вещи выражать элементарными процедурами. Устанавливаю эту библиотеку вот такой простой командой.

$ npm install jquery

Опять лезу в дерево каталогов node_modules, в этом дереве меня интересуют два файла.

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

$ cp node_modules/jquery/dist/jquery.js .
$ cp node_modules/jquery/dist/jquery.min.map .

Точки в конце команды обязательны.

CSS фреймворк

Стилизация HTML-страниц является достаточно специфичной специализацией frontend разработки и требует отличного знания CSS. Без развитого художественного вкуса будет достаточно сложно работать с цветовой палитрой и некоторыми специфическими элементами оформления. Поскольку в этом цикле статей и в этом блоге вообще мы говорим о web-разработке как о хобби, увлечении, будет уместно некоторым образом облегчить труд fullstack разработчика. И для этого я установлю в проект CSS-фреймворк — Bootstrap.

Предупреждение: в рамках этого цикла статей я буду использовать довольно устаревшую версию Bootstrap — v.3.4.1, в некоторых её компонентах обнаружены уязвимости, использовать для актуального, развёрнутого в сети проекта следует с особой осторожностью.

Установить Bootstrap тоже можно с помощью npm.

$ npm install bootstrap@3

В результате исполнения этой команды в дереве каталогов node_modules появится новый каталог bootstrap.

Как видно на снимке экрана выше, меня интересует только каталог с именем dist, его я выделил на снимке красным фломастером. Переношу этот каталог в корень каталога vendor и одновременно переименовываю вот такой командой.

$ mv -v node_modules/bootstrap/dist/ ./bootstrap

Все интересующие меня компоненты для frontend разработки лежат в одном месте, можно двигать дальше.

Удаляем ненужные файлы

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

Удалить их можно вот такой простой командой.

$ rm -rf node_modules/ *.json

Кроме этого, в каталоге bootstrap на данный момент хранятся кроме актуальных файлов ещё и их минимизированные версии, их тоже можно удалить, они не потребуются. После удаления этих файлов дерево каталога vendor в моей файловой системе выглядит следующим образом.

Каталог vendor готов к использованию.

Размещаем сторонний код в проекте

После того, как я подготовил каталог vendor, его нужно разместить в структуре каталогов проекта на каком-то определённом месте. Для этого в окне рабочего терминала перемещаюсь в корневой каталог своего web-приложения, вот как выглядит команда.

$ cd ~/sites/website/

Переношу только что созданный каталог vendor со всем его содержимым в каталог static в базовом каталоге web-приложения. Выполняю следующую команду.

$ mv -v ~/vendor/ ~/sites/website/webapp/static/

В результате исполнения этой команды дерево корневого каталога web-приложения изменило свой вид. В каталоге static появились файлы сторонних библиотек, которые я планирую использовать для frontend разработки.

Для справки: вот как выглядит окно моего терминала после всех предпринятых в нём действий, следует обратить внимание на предупреждение об обнаруженной уязвимости при установке Bootstrap.

Если внимательно посмотреть на содержимое каталога bootstrap, вложенного в каталог vendor, можно увидеть в нём три вложенных каталога с именами css, fonts и js. Поскольку в развёрнутом на сервер проекте будут использоваться минимизированные статические файлы из каталога generic, следует создать внутри него символическую ссылку на каталог fonts. Исполняю в терминале ещё одну команду.

$ ln -s -T ~/sites/website/webapp/static/vendor/bootstrap/fonts/ ~/sites/website/webapp/static/generic/fonts

Вот как в итоге стал выглядеть каталог generic в дереве корневого каталога web-приложения.

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

Подводим промежуточный итог

Процесс разработки web-приложения достаточно сложен, растянут по времени и требует внимания и усидчивости. На текущем этапе проектирования я подготовил всё необходимое для frontend разработки и разместил файлы сторонних библиотек в структуре каталогов приложения. А в следующем выпуске этого цикла статей мы поговорим о системе контроля версий и её месте в проекте на примере создания Git-хранилища этого web-приложения.

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