Предыдущие несколько месяцев я посвятил работе над совершенно новым способом разработки нативных приложений для iOS и Android и назвал его Jasonette.
С Jasonette можно описать всю логику приложения всего в одном файле JSON-разметки. А если всё ваше приложение состоит из JSON, его можно загружать так же, как любые другие данные.
Нет нужды хранить логику приложения на устройстве, поэтому вы можете дорабатывать её и обновлять так часто, как требуется, простым обновлением JSON на сервере. Ваше приложение будет обновлено при следующем открытии.
В видео ниже кратко описан весь процесс (на англ.):
Jasonette состоит из многих компонентов. Там есть функции, шаблоны, стили и многое другое, и всё это в JSON разметке. Вы можете писать супер-изощрённые нативные приложения в стиле [simple_tooltip content=’Model-View-Controller (Модель-Представление-Контроллер) — схема разделения данных приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: модель, представление и контроллер — таким образом, что модификация каждого компонента может осуществляться независимо.’]MVC[/simple_tooltip].
Сегодня мы разберём только «Представления»:
- Как Jasonette выражает различные кросс-платформенные шаблоны UI в JSON.
- Как реализованы внутренние преобразования JSON-в-Native.
Базовая структура
Издалека можно подумать, что Jasonette работает подобно браузеру. Но вместо того, чтобы работать с HTML и отрисовывать web-view, Jasonette загружает JSON и «на лету» собирает нативное представление.
Разметка JSON здесь самая обычная, но при этом она строится на нескольких стандартах. Во-первых, структура начинается с ключа $jason, который имеет двух потомков: head и body. Выглядит она так:
{
"$jason": {
"head": {
.. метаданные документа ...
},
"body": {
.. содержимое, выводимое на экран ..
}
}
}Философия проектирования
Если посмотреть на то, как построены большинство мобильных приложений, то можно увидеть, что они используют всего несколько видов представлений:
- Список с вертикальной прокруткой
- Список с горизонтальной прокруткой
- Абсолютное позиционирование
- Сетка
Взглянем на первые три, ибо они самые распространённые.
1. Секции — описание списка с прокруткой
Списки с прокруткой это самый популярный способ построения интерфейса приложений. В Jasonette мы называем их sections.
Они бывают двух видов: вертикальные и горизонтальные.
Реализация — Вертикальные секции
Под iOS Jasonette реализует их с помощью UITableView. Под Android — с RecyclerView.
{
"body": {
"sections": [{
"items": [
{"type": "label", "text": "Item 1"},
{"type": "label", "text": "Item 2"},
{"type": "label", "text": "Item 3"}
]
}]
}
}Под iOS эта JSON разметка создаст UITableView с тремя UITableViewCells, каждая из которых содержит UILabel, с соответствующими атрибутами.
Под Android будет создано RecyclerView с тремя элементами, каждый из которых это TextView, выводящий соответствующий элемент.
Всё это будет сконструировано программно, без какого-либо использования Storyboards (в iOS) или файлов макета XML (в Android).
Реализация — Горизонтальные секции
Синтаксически нет разницы с вертикальными секциями. Единственное, что мы изменили, это type в “horizontal”.
{
"body": {
"sections": [{
"type": "horizontal",
"items": [
{"type": "label", "text": "Item 1"},
{"type": "label", "text": "Item 2"},
{"type": "label", "text": "Item 3"}
]
}]
}
}2. Элементы — Описываем макет каждого элементы прокрутки
Теперь мы понимаем, как работают представления верхнего уровня, перейдём к items. Каждая секция может состоять из множества прокручиваемых элементов, items. Помните, что каждый элемент имеет фиксированный размер, и внутри самого элемента нет других прокручиваемых элементов.
Элемент может быть:
- Единичным компонентом типа label (метка), image (картинка), button (кнопка), textarea (текстовое поле) и т.д.
- Комбинацией любых этих элементов
К счастью, iOS и Android имеют похожие системы построения представлений, UIStackView и LinearLayout, соответственно. И эти системы в свою очередь похожи на CSS Flexbox, что облегчает нам работу. И вдобавок к этому, нативные системы представлений бесконечно компонуемы — как показано ниже, вы можете создать вертикальный макет, горизонтальный макет, а также скомпоновать и горизонтальный и вертикальный в одном, и так до бесконечности.
Для создания вертикального макета, выставим type как vertical, затем настроим остальные компоненты:
{
"items": [{
"type": "vertical",
"components": [
{
"type": "label",
"text": "First"
},
{
"type": "label",
"text": "Second"
},
{
"type": "label",
"text": "Third"
}
]
}]
}Здесь то же самое. Просто установим type в horizontal:
{
"items": [{
"type": "horizontal",
"components": [
{
"type": "image",
"url": "http://i.giphy.com/LXONhtCmN32YU.gif"
},
{
"type": "label",
"text": "Rick"
}
]
}]
}Встроить один макет в другой так же просто:
{
"items": [{
"type": "horizontal",
"components": [
{
"type": "image",
"url": "http://i.giphy.com/LXONhtCmN32YU.gif"
},
{
"type": "vertical",
"components": [{
"type": "label",
"text": "User"
}, {
"type": "label",
"text": "Rick"
}]
}
]
}]
}Чтобы не усложнять понимание, я пока не упоминал про стилизование элементов приложения, но это делается очень просто. Всё, что вам нужно для этого, это добавить объект style с описанием атрибутов font (шрифт), size (размер), width (ширина), height (высота), color (цвет), background (фон), corner_radius (угловой радиус), opacity (прозрачность) и т.п.
3. Слои — абсолютное позиционирование
Иногда вам может понадобиться разместить элементы в определённой части экрана без прокрутки и перемещений. Jasonette поддерживает такое размещение в layers.
На текущий момент в слое можно разместить только два типа дочерних объектов: image и label. Вы можете разместить их в любой части экрана. Ниже пример этого:
В этом примере у нас созданы две метки (для температуры и состояния погоды) и картинка (иконка камеры). Они размещены в своих координатах и не двигаются:
{
"$jason": {
"body": {
"style": {
"background": "camera"
},
"layers": [
{
"type": "label",
"text": "22°C",
"style": {
"font": "HelveticaNeue-Light",
"size": "20",
"top": "50",
"left": "50{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}-100",
"width": "200",
"align": "center"
}
},
{
"type": "label",
"text": "few clouds",
"style": {
"font": "HelveticaNeue",
"size": "15"
}
},
{
"type": "image",
"url": "https://s3.amazonaws.com/.../camera{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}402x.png",
"style": {
"bottom": "100",
"width": "30",
"color": "#ffffff",
"right": "30"
}
}
]
}
}
}И этого достаточно для того, чтобы сделать практически любое приложение, какое вы только можете представить.
Вот ещё примеры того, что построено в Jasonette:
За пределами представлений
Прочитав всё это, вы можете подумать:
- «Ух ты, круто! Я должен это попробовать!» или
- «Да, я конечно могу сделать приложение на поиграться, но реальное — никогда!»
Ещё раз повторюсь, здесь мы говорили про самую лёгкую часть работы с Jasonette — представления. Но вы действительно можете построить приложение практически любой сложности в JSON.
Вы можете соединить действия с элементами UI и они сработают, как только пользователь кликнет на них. Также вы можете вызывать действия одно за другим, основываясь на возвращаемых ими успехах/ошибках. А можно даже автоматически вызывать действия на основе происходящих событий с устройством или приложением.
Что ещё возможно?
Вам обязательно нужен сервер, хранящий JSON, а в остальном Jasonette совершенно автономна. И этот JSON может прилетать отовсюду: с локального устройства, с удаленных серверов, да хоть с raspberry pi!
- У вас есть веб-приложение? Тогда вы с лёгкостью построите мобильное приложение, вызывая серверный API
- Вам можно вообще не думать о сервере. Храните JSON файл на Pastebin или Github!
- Сконвертируйте любой веб-сайт в приложение. В Jasonette есть мощный парсер HTML-в-JSON на базе библиотеки cheerio, которая позволяет преобразовать любой HTML в объект JSON. Ну и, конечно, вы можете сами сформировать нужный JSON.
Ещё немного примеров:
Фото-приложение, делающее снимок камерой устройства и выкладывающая его в S3, затем она создаёт запись в ленте новостей на своём сервере:
Приложение Eliza Chatbot для iOS и Android на базе Node.js:
Приложение для микро-блоггинга:
Приложение, конвертирующее сайт HTML в JSON структуру, а затем в мобильное приложение:
Заключение
Jasonette это пока молодой проект. Версия для iOS вышла в конце 2016 г, а для Android ещё немного позже.
Но уже сейчас у неё есть огромное сообщество разработчиков и она активно развивается.
Звучит круто? Тогда Jasonette будет очень рад вам!
Источник
Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.
Пишите: @ighar. Buy me a coffee, please :).