Вверх

Адрес
Пирогова 131, офисс 11 Винница, Украина 21037,
info@4go.space
Тел: +380738466121

Пользовательский интерфейс OutSystems – улучшение рабочего процесса для внешних разработчиков OutSystems

[19459000]

[19459001] [19459002] [19459003] UI OutSystems [19459004] [19459005] [19459003] представляет собой единую инфраструктуру пользовательского интерфейса для создания бесшовных интерфейсов для веб-приложений и мобильных приложений. Имея более 70 различных шаблонов пользовательского интерфейса, эта структура позволяет разработчикам создавать сплоченные экраны и стилизовать их без значительного времени на разработку. Он также полностью адаптивен и прост в использовании, поскольку шаблоны и шаблоны экрана легко доступны путем перетаскивания из OutSystems Service Studio. [19459006] [19459004] [19459007] [19459008] [19459001] [19459009] «[19459010] [19459009] Пользовательский интерфейс OutSystems позволяет создавать приложения с отличным пользовательским интерфейсом [19459010] [19459009] и красивым дизайном с непревзойденной скоростью.» [19459010] [19459007] [19459011] [19459001] [19459012] Веб-сайт OutSystems UI [19459013] [19459007] [19459001] [19459003] Однако большинство проектов требуют настройки в соответствии с брендом клиента, и дизайнеры и внешние разработчики работают вместе, чтобы создавать собственные темы. Разрабатывая темы, расширяющие структуру пользовательского интерфейса OutSystems, разработчики могут быстро настраивать весь веб-сайт или приложение без необходимости индивидуальной разработки каждого компонента. [19459004] [19459014] [19459014] [19459015] [19459015] [19459007] [19459001] [19459003] Таблица стилей пользовательского интерфейса OutSystems представляет собой отдельный файл CSS, включенный в прикладной модуль пользовательского интерфейса OutSystems, и все стили компонентов находятся в этом файле. Этот модуль заблокирован, что означает, что разработчики не могут изменить этот исходный файл темы, а способ настроить тему – создать CSS в другой теме приложения, которая переопределит исходные стили. [19459004] [19459007] [19459001] [19459003] Хотя в последние месяцы опыт действительно улучшился, при работе над этим файлом темы с группой из нескольких разработчиков переднего плана это может легко стать проблемой, поскольку вы пытаетесь разрешить все конфликты слияния, возникающие на каждая публикация. [19459004] [19459007] [19459001] [19459003] Да, так что это была одна из самых ранних проблем, которую нам нужно было решить, так как мы являемся компанией, специализирующейся на фронтальной разработке для OutSystems, у нас часто были люди, работающие над крупными проектами, что означает много люди, пытающиеся быть первыми, чтобы опубликовать (так что другие будут иметь дело с конфликтами слияния). [19459004] [19459007] [19459001] [19459003] Хорошо, это ничего не решает. Нам нужно было найти способ плавного объединения версий. [19459004] [19459007] [19459001] [19459003] [19459016] [19459004] [19459007] [19459017] [19459003] Первый подход [19459004] [19459018] [19459001] [19459003] Поскольку мы являемся компанией, имеющей опыт работы с другими языками программирования, и мы привыкли работать с репозиториями Git, мы начали с полной темы CSS на нашем личном сервере Git, что позволило нам иметь два или более разработчики работают над тем же кодом, затем генерируют CSS и загружают его на платформу OutSystems. [19459004] [19459007] [19459001] [19459003] Работая с Git, мы смогли обрабатывать запросы на слияние проще, без риска потери кода. [19459004] [19459007] [19459001] [19459003] [19459009] [19459003] Итак, почему не SASS / SCSS? [19459004] [19459010] [19459014] [19459014] [19459015] [19459015] [19459004] [19459007] [19459001] [19459003] С момента перехода нашего рабочего процесса на Git мы уже работали над проектом локально, а затем загружали его в OutSystems. Это позволило нам переосмыслить наш процесс и улучшить нашу методологию, используя SCSS, [19459004] [19459009] [19459003] CSS-препроцессор, [19459004] [19459010] [19459003] для генерации окончательного CSS. [19459004] [19459007] [19459001] [19459003] Если вы никогда не слышали о препроцессоре CSS, это инструмент, который позволяет разработчикам использовать функции и переменные в CSS. Используя SASS / SCSS, мы можем создавать функции для генерации повторяющихся классов с небольшими изменениями, например, с помощью цикла. [19459004] [19459007] [19459001] [19459003] В следующем примере слева вы видите SCSS, необходимый для создания цикла для размеров, а справа вы можете увидеть скомпилированный вывод CSS: [19459004] [19459007] [19459001] [19459003] [19459019] [19459004] [19459007] [19459001] [19459003] [19459003] Пример из [19459004] [19459020] [19459003] Документация SASS [19459004] [19459005] [19459003] [19459004] [19459004] [19459007] [19459001] [19459003] Как видите, если мы добавим больше значений в массив [19459004] [19459009] [19459003] $ sizes [19459004] [19459010] [19459003], будет создано больше классов значков. Это очень простой пример, но препроцессоры CSS допускают гораздо более сложные функции. [19459004] [19459007] [19459001] [19459009] [19459003] «Sass позволяет вам использовать функции, которые еще не существуют в CSS, такие как переменные, вложения, миксины, наследование и другие изящные вкусности, которые делают написание CSS снова увлекательным». [19459004] [19459010] [19459007] [19459001] [19459003] Сайт SASS [19459004] [19459007] [19459001] [19459003] Благодаря использованию SCSS наше написание кода стало намного более эффективным, и только некоторые части кода нуждались в обновлении, поэтому каждый из нас мог работать над отдельными компонентами, а затем генерировать окончательный файл CSS и вставлять его на платформу. после завершения функций, которые мы разрабатывали. [19459004] [19459007] [19459017] [19459003] UI OutSystems [19459004] [19459018] [19459001] [19459003] Это было одной из причин, по которой мы также решили преобразовать весь CSS-интерфейс OutSystems UI в проект SCSS, чтобы в более крупных проектах мы могли использовать стили непосредственно в наших проектах, без необходимости зависеть от оригинала. тема. [19459004] [19459007] [19459001] [19459003] Хотя это не рекомендуется, поскольку мы потеряем обновления CSS из пользовательского интерфейса OutSystems, в этих крупных проектах с большим количеством настроек проще работать, и мы по-прежнему можем проверять и поддерживать все наши проекты на каждом новая версия OutSystems UI. [19459004] [19459007] [19459001] [19459003] В итоге мы сделали это для [19459004] [19459021] [19459003] OutSystems UI (Reactive) [19459004] [19459005] [19459003] и [19459004] [19459004] [19459003] [19459003] OutSystem UI 19459004] [19459005] [19459003], создание так называемых [19459004] [19459023] генераторов тем OutSystems UI [19459024] [19459003]. После некоторого использования мы решили опубликовать эти проекты SCSS как открытые, так что любой разработчик может использовать их, и, возможно, это поможет другим фронт-эндам также быстро получить свои темы и, возможно, начать создавать фронт с открытым исходным кодом конец сообщества. [19459004] [19459014] [19459014] [19459015] [19459015] [19459007] [19459001] [19459003] В связи с этим мы хотели бы предложить другим командам OutSystems использовать этот проект в своем рабочем процессе, а также внести свой вклад и улучшить его в качестве инструмента для совместной работы. И если вы уже используете его, пожалуйста, сообщите нам об этом и отправьте свой отзыв! Мы не можем дождаться, чтобы услышать это! [19459004] [19459007] [19459017] [19459003] Итак, как вы можете его использовать? [19459004] [19459014] [19459014] [19459015] [19459015] [19459018] [19459001] [19459003] Вы можете просто клонировать проект на GitHub (или, если вы хотите его быстрее, просто использовать [19459004] [19459025] [19459003] npm [19459004] [19459005] [19459003] установить outsystems-ui-scss [ 19459004] [19459003]), а затем вам просто нужно запустить команду [19459004] [19459003] gulp [19459004] [19459003] в каталоге проекта, чтобы скомпилировать SCSS в CSS. [19459004] [19459007] [19459001] [19459003] После этого внесите изменения в необходимые файлы и снова запустите [19459004] [19459003] gulp [19459004] [19459003], основной файл CSS будет обновлен, а затем вы сможете вставить сгенерированный код в OutSystems. Платформа. [19459004] [19459014] [19459014] [19459015] [19459015] [19459007] [19459001] [19459003] Если вы хотите, вы даже можете добавить другие расширения браузера для дополнения вашего рабочего процесса, такие как CSS Inject, LiveReload или Requestly, так что вам не нужно публиковаться в OutSystems столько раз для изменения стиля. [19459004] [19459007] [19459001] [19459003] [19459026] [19459004] [19459007] [19459001] [19459003] Хорошо, вы правы, это что-то для другой темы. В то же время не стесняйтесь проверить эти [19459004] [19459025] [19459003] Генераторы тем [19459004] [19459005] [19459003] или некоторые другие наши [19459004] [19459027] [19459003] бесплатные инструменты [19459004] [19459005 ] [19459003] и комплектующие. [19459004] [19459007] [19459001] [19459003] Если вам нужна помощь в разработке внешнего интерфейса для любого типа проектов OutSystems, не стесняйтесь обращаться к нам. [19459004] [19459007]

[19459028]

[19459029]

Author avatar
admin

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *