Русский
Русский
English
Статистика
Реклама

Lowcode

Хватить это верстать дважды или 2-х сторонняя связь между дизайном и кодом

30.07.2020 14:08:36 | Автор: admin

Как "подружить" дизайнера и инженера? Как дать им работать с одними и теме же данным, без ущерба продуктивности? Как хранить дизайн в системе контроля версий. Если вас интересуют эти вопросы, в такой же степени как и меня, то добро пожаловать под кат!


Данная статья это прямое продолжение "Хватит это верстать, ударим автоматизацией по макетам" и является результатом моих исследований интересующей меня проблемы.


В первой части я, вкратце, описал проблематику как самой вёрстки, так и её автоматизации. Так же поделился своими результатами исследования этой темы. Остановился же я на вопросе контролируемости автоматизируемой вёрстки.


В данной статья я раскрою более подробно это понятие и поделюсь результатами своих исследований.
Хочеться с чем-то поиграться? Вот проверка концепции.


Контролируемость


А о какой контролируемости вообще идёт речь?
Я выделил два основных положения:


  1. Возможность влиять на процесс генерации HTML кода.
  2. Прямое редактированию результата, которое будет учтено при последующей генерации.

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


Но более подробный разбор этой темы останется за рамками данной статьи, сейчас же я сосредоточусь на втором положении.


Проблематика


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


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



Решение


Главная идея если макеты делаются для создания HTML документа, то весь макет можно описать в HTML и CSS.


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



Но если макет описан в HTML документе, то что мешает разработчику открыть код и дописать логику, оживить макет там, где это невозможно сделать с использование визуального редактора? Ответ ничего, да с оговорками, но это возможно.
Таким образом у нас появляется 2х сторонняя связь между инструментом дизайна и исходным кодом.


Возможно, кто-то скажет, что это звучит как утопия, Unity 3D, скажу я в ответ.


Unity, как и любой другой игровой движок уже давно реализовали подобную концепцию в своих инструментах.


Моё мнение, единственное препятствие внедрения подобного подхода в веб индустрии и производных высокие требования к HTML разметке, этот вопрос я более подробно рассмотрел в предыдущей статье.


Единственное, что дополню, продолжая сравнение с игровыми движками, что помимо дерева иерархии объектов, с которыми работает специалист, сам движёк строит множество других деревьев, о которых никому знать не интересно. В отличии от веба.



Хорошо, я хочу иметь что-то типо Unreal Engine, но для WEB. С чего вообще начать?
У меня есть на руках:


  1. Простой Drag&Drop визуальный редактор;
  2. Концепт модуля генерации разметки;
  3. Какой-то HTML код, что я хочу редактировать.

Первым вопросом стало, как это всё объединить вместе.


Движёк


Любой движёк состоит из модулей, значит с этого и стоит начать.


Ух, тут прям в голову начинают лезть мысли о модуле мокирования api, тестирования, управлением хранилищем, создания анимации, оптимизации, работы с зависимостями, документирования



Но стоит поумерить пыл и вернуться к текущей проблематике.


Модуль отображения


Возможно вопрос и очевидный, но вообще, что мы и где рисуем?


У нас есть HTML код, который мы должны чем-то прочитать и отобразить. Логичным выбором тут будет самый популярный рендер WebKit Blink, его мы используем как модуль отображения(рендеринга).


Модуль чтения-записи


А вот с модулем чтения всё не так очевидно. Пока речь идёт о единой точки входа (весь код лежит в index.html), никаких проблем нет. Но реальное приложение может иметь сколь угодно сложную архитектуру и храниться в любом формате.
Пока видится 3 варианта как с этим справиться:


  1. Работа с финальным кодом, с промежуточным рендерингом;
  2. Максимальное покрытие всех стеков популярных технологий;
  3. Строгое стандартизирование.

Чистого варианта тут нет, каждый имеет свои минусы.


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


Первый же вариант кажется очень перспективным, но с рядом сложных моментов, решение которых может оказаться дольше, чем 2.


Из очевидных проблем:


  1. Сопоставлени промежуточного с оригинальным;
  2. Приведение промежуточного кода, к формату оригинального.

Проблемы интересные и требуют исследований.


Модуль создания разметки


По всей видимости, самая простая часть.


Модуль визуального взаимодействия


А с чем мы вообще можем взаимодействовать?


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



Глядя на него, вспоминается Adobe Illustrator в котором, чтобы добраться до нужного элемента, нужно кликнуть на одно и то же место 2 * N раз. Если там это оправдано, то в редакторе интерфейса это совсем неуместно.


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


Этот факт хорошо иллюстрирует следующую концепцию не весь HTML код значим одинаково.


Из этого сформулируем правило. HTML код делится на:


  1. Значимый и;
  2. Незначимый.

Пользователь взаимодействует со значимыми элементами.


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


Сам же редактор должен соответствовать всем ожиданиям дизайнера.


Связь


А что мы вообще имеем и что с чем связываем?
У нас есть:


  1. Код, как источник правды;
  2. DOM дерево;
  3. Визуальное отображение.

При изменении кода, меняется DOM, что приводит к перерисовки отображения.



При изменении визуального отображения мы можем:


  1. Изменить DOM, сохранить производный результат в код.
  2. Изменить код, что приведёт к изменению DOM.


Каждый из вариантов приведет к перерисовки отображения.


Состояние


Но каков жизненный цикл DOM? Помимо редактора, его может менять и логика.


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



Дополнительно усложняет задачу то, что новое состояние может полностью изменить интерфейс, а в купе с практически бесконечной комбинаторикой вариантов изменения состояний, эта задача выглядит и вовсе решаемой только на уровне семантического аппарата, сравнимого с человеческим (да и человеческий не всегда справляется).


Всё вышеописанное звучит так, что в пору дождаться сильного ИИ, а пока оставить данное занятие Или вводить ограничения.
Снова обратимся к сравнению с игровыми движками. Там всегда есть как минимум 2 режима:


  1. Редактор;
  2. Предпросмотр.

В режиме редактирования возможно взаимодействие только с блоками, назовём их компонентами, с состояние по умолчания.


Что же касается остальных, то я бы разделил их на 2 типа состояний:


  1. Ручные, те что может понять редактор и дать над ними контроль;
  2. Автоматические, непонятные редакторому, управляемые программно.

Отличным примером ручных будет Pagedraw с его редактором состояний и переходом между ними.


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


Резюме


Из вышеописанного складывается следующий концеп:


Мы можем взаимодействовать в режиме редактирования с блоками, которые представляют реальную значимость. Эти блоки могу формировать компоненты, которые в свою очередь могут иметь простые или сложные состояния.


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


Проверка концепции


Для проверки концепции необходимо реализовать режим редактирования, в котором изменения в визуальном редакторе сразу влияют на код, а изменения в коде также сразу видны и в визуальном редакторе.


Код же выступает источником правды и хранит данные репрезентации, мета информацию, и структуру (контейнер-потомок).


Последующие же открытие кода восстанавливает состояние визуального редактора.


Вооружившись данным знанием, реализуем это в коде.


Ограничения


  1. Значимыми элементами считаются те, у кого есть класс или идентификатор;
  2. К элементам не применяются сторонние эффекты;
  3. Идентификатор является уникальным, повторное использование приведёт к неожиданным последствиям;
  4. Большинство крайних случаем не рассмотрены;
  5. Ошибки ожидаемы;
  6. Компоненты и состояни не реализованы;
  7. Код в HTML формате.
  8. Передвижение контейнера с потомками возможно при "захвате" пустого места


Вывод


Несмотря на то, что 2-х сторонняя связь является сложной задачей и требует обширных исследований, она возможно. Но так же она подразумевая и ряд ограничений.


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


Что дальше?


У меня есть ещё месяц свободного времени, так что достаточно игры в "кубики", пришло время реализовать чистовую модель редактора. Для начала, в качестве целевого стека, буду использовать React, а точнее JSX + styled-components, как наиболее используемый и изученный.


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


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


Разумеется, буду очень рад видеть конструктивную критику и дискуссию.


Всем мир!

Подробнее..
Категории: Html , Javascript , Css , Html5 , Nocode , Html-верстка , Lowcode , Pix2html , Editor

Применяем NOCODE и LOWCODE для вычислений

09.03.2021 08:15:06 | Автор: admin

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

Скептики как будто правы: этот no-code не заменяет код не реализует алгоритм, то есть, ветвления циклы и прочее, а только позволяет накидать на чистый лист квадратики, которые как-то там взаимодействуют друг с другом. Элементы платежных систем, фрагменты веб-документов, формы и чаты, таблицы с фильтрами. Всё это связывается в пёструю мешанину MVP и гордо именуется no-code решением.

Давайте попробуем что-то иное, чем аппликацию готовых блоков с нуля сделаем, например, проводку документа поступления товаров и услуг. Пересчитаем остатки на складах и средневзвешенную себестоимость, обновим сальдо договора и, наконец, пометим документ проведенным. Без написания алгоритма на языке программирования.

Разрушитель модели Лего из 2000+ деталейРазрушитель модели Лего из 2000+ деталей

Эксперимент проведен в простом no-code конструкторе, где можно задать схему данных, вбить сами данные согласно этой схеме, сделать отчеты в построителе запросов и накликать простые формы.

Кто не любит читать, по запросу в комментариях я дамссылку на видео-версию с более полным описанием процесса.

Важная оговорка: рассмотренная здесь задача выбрана только для демонстрации примера расчетов no-code, а терминология может раздражать, например, специалиста 1С. Терминология и организация не важны, мы обсуждаем механизм расчетов без кода.

Коротко о предметной области. Есть понятие движение в рамках какого-то договора с контрагентом. У договора есть сальдо сумма нашего долга контрагенту. Движение показывает, какое количество товара (номенклатуры) поступает и расходуется со склада. Для каждой номенклатуры мы храним остатки на складах, вычисляем себестоимость.

Схема данных рисуется в визуальном редакторе и пока не требует кода. Вот она: связанные и подчиненные объекты располагаются правее своего родителя.

Проводка означает отражение сумм документов на сальдо договора и остатках на складах. В результате проводки мы снимем пометку Черновик с документа и изменим сальдо по договору на сумму движения. Если на эту дату записи Сальдо нет, то мы создадим её. Также мы пересчитаем остатки товаров на складе. Если записи по остаткам на этот день нет, то мы её создадим.

Данные, введенные в систему согласно этой структуре, выглядят примерно таким образом:

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

Строки в эти таблицы добавляются кнопкой + слева вверху или могут быть загружены из текстового файла. Записи редактируются в универсальной форме редактирования, на которой выводятся те поля, что были заданы в редакторе схемы данных:

Итак, мы задали структуру и вбили или импортировали данные по документам, номенклатурам, складам и прочему. Пока обошлись без программирования на каком-либо языке.

Чтобы провести документ, нам надо выбрать все данные для расчета, произвести вычисления и записать результаты в эту базу данных. Мы используем механизм запросов. Запросом мы выбираем нужные значения, пишем расчетные формулы и указываем, куда записать результат.

Вот так выглядит и работает конструктор запросов, в котором мы выбираем нужные нам данные:

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

В конструкторе запросов есть инструменты для форматирования и изменения выбранных данных. Можно рассчитать произвольные значения на основании имеющихся. Можно достать внутренний идентификатор выбранного объекта и использовать его в качестве фильтра при поиске нужного движения:

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

Если добавить в запрос атрибуты связанных сущностей, то конструктор запросов сам свяжет нужные таблицы и выведет результат.

В следующем случае запрос объединит таблицы шапки документа, справочника договоров, регистров сальдо с фильтром на дату документа:

Будь мы программистами SQL, мы бы написали операторы JOIN ON и WHERE, написав соответствующие условия на объединение таблиц и отбор только тех Сальдо, которые относятся к дате документа. Здесь же мы задали имя формулы в нашей колонке Движение, а затем использовали это имя в фильтре по дате, взяв в квадратные скобки. Конструктор сам извлёк и объединил нужные нам данные, мы только наложили дополнительное условие по дате сальдо.

Мы не учим SQL, чтобы сконфигурировать всё это, но нам пришлось изучить некоторые правила работы с функциями и использование квадратных скобок, чтобы конструктор однозначно понял, чего мы хотим.

Вот тот же запрос, но не в конструкторе, а в навигаторе данных с большими запросами так работать легче:

Мы выбрали значения, нужные для проведения нашего документа, но нам нужно сделать изменения в базе данных.

Вычисленные значения можно присвоить вместо имеющихся в базе данных, записав их в поле SET Присвоить:

Мы задаем нужное нам выражение в поле SET колонки Сальдо, а конструктор запишет его результат вместо существующего значения сальдо.

Если требуется, мы можем посмотреть, какие изменения будут внесены в базу, прежде чем подтвердим их. Содержание будущих изменений выделено красным:

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

В конструкторе запросов мы можем использовать вложенные запросы вставить имя существующего запроса в поле Формула или Присвоить, заключив их в квадратные скобки. Мы выберем прошлую запись о сальдо для этого договора сделаем запрос с фильтром по идентификатору договора из нашего документа, по которому выберем все его сальдо, отсортированные по убыванию дат:

Получившийся запрос Сальдо вставим в выражение в поле SET, чтобы получить корректное значение сальдо, даже если записи о предыдущем сальдо нет:

Вот так мы получили первую версию запроса на обновление сальдо договора при проводке документа. Далее мы будем дописывать запрос, чтобы он также снимал пометку Черновик и пересчитывал остатки на складе. Попутно мы будем отлаживать его ставить проверки, округления, форматирование, скроем ненужные колонки.

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

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

Просто созерцая эту простыню, можно догадаться, что там происходит. Функции примерно те же, что мы привыкли видеть в экселе:

  • ROUND(x, 2) округление x до двух знаков после запятой (аналог в экселе ОКРУГЛ())

  • IF(A, B, C) если условие A верно, то вернуть B, иначе C (аналог ЕСЛИ())

  • x IS NULL Истина, если x пустое или неизвестно (аналог ЕПУСТО())

  • SUM(x) просуммировать все x с группировкой по остальным полям (аналог СУММА())

  • abn_ID возвращает внутренний ID объекта, нужна для однозначного его определения

Этот запрос делает всё то, что мы собирались сделать в начале этой заметки инвертирует пометку Черновик у документа, пересчитывает сальдо договора, остатки товаров на складе и их средневзвешенную себестоимость. То есть, он проводит документы, но также умеет откатить проводку и вернуть все остатки, себестоимости и сальдо, как было!

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

Запрос на выборку последнего известного сальдо до даты проводки включительноЗапрос на выборку последнего известного сальдо до даты проводки включительноПоследняя посчитанная себестоимость этого товараПоследняя посчитанная себестоимость этого товараПоследний известный остаток номенклатуры этой позиции документаПоследний известный остаток номенклатуры этой позиции документа

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

На базу данных, механизмы проводки документов, отчеты и сводные формы вам понадобится всего пара дней в no-code платформе общего назначения (всё-в-одном). Чаще всего, придется доделать ещё какие-то элементы визуализации, например, вызов того же запроса проводки, с ожиданием результата и перенаправлением в следующее рабочее место. Эти элементы, вероятно, займут больше времени, чем накликать то, что я вам здесь показал.

Подводя итог, вам часто придется программировать даже в no-code и low-code системах, однако большую часть функционала вы сможете сделать, не владея программированием, и в достаточно короткий срок.

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


Применимость low-code: случаи, когда уникальная интеграция и визуализация занимают 90% усилий проекта и длятся, условно, 4 дня на проекте в 1 неделю. Часто базу данных и бэкенд можно накликать за 1 день, вместо 1-2 недель в традиционной разработке.


Пример, рассмотренный в статье, был сделан по ТЗ для простого приложения в 1С. В конструкторе с чистого листа были реализованы бизнес-сущности и формы ввода документов, которые уже есть в 1С. Для сравнения приведу некоторые факты (сравнение весьма субъективное, ибо 1С крут в своём сегменте, а тут нам нужно быстро собрать MVP):

Метрика

Low-code

1C

Время разработки

24 часа

30 часов

Кол-во строк кода

250
(javascript формы ввода документов, валидация, хуки на формах)

1300
(проводка, валидации, автозаполнение, конфигурация)

Кол-во запросов и отчетов

51

4 + ?

Открытие документа 100к строк

10 секунд

90 секунд

Проводка документа 100к строк

15 секунд

60 секунд

Время ввода документа, 15 позиций, новый товар

4минуты

6минут

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

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

Другое дело, что следует продумать архитектуру системы, а в случае необходимости трансформировать её, для чего нужен опыт разработки. Да, сильные разработчики будут востребованы даже во времена no-code, если таковые всё-таки наступят.

Ещё, говоря о серьезном продукте, следует вспомнить про релизы, версионность, масштабируемость, авто-тесты, CI/CD и прочие сопутствующие вещи. Здесь всё достаточно просто конструктор, так же как и любая система, может быть покрыт стандартными процедурами. Можно выгрузить его состояние в гит, сравнить версии, оформить релиз и процедуру отката, но это тема отдельной статьи.

Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru