Вверх

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

Пользовательский интерфейс OutSystems – Улучшение рабочего процесса для Front-End разработчиков 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] Однако большинство проектов требует настройки в соответствии с брендом клиента, и дизайнеры и разработчики Front-End работают вместе, чтобы создать собственные темы. Разрабатывая темы, расширяющие структуру пользовательского интерфейса OutSystems, разработчики могут быстро настраивать весь веб-сайт или приложение без необходимости разрабатывать каждый компонент индивидуально. [19459004] [19459014] [19459014] [19459015] [19459015] [19459007] [19459001] [19459003] Таблица стилей пользовательского интерфейса OutSystems представляет собой отдельный файл CSS, включенный в прикладной модуль пользовательского интерфейса OutSystems, и все стили компонентов находятся в этом файле. Этот модуль заблокирован, что означает, что разработчики не могут изменить исходный файл темы, а способ настройки темы – создание CSS в другой теме приложения, которая переопределит исходные стили. [19459004] [19459007] [19459001] [19459003] Хотя за последние месяцы опыт действительно улучшился, при работе над этим файлом темы с командой из нескольких Front-End разработчиков это может легко стать проблемой, так как вам сложно разрешить все конфликты слияния, возникающие на каждую публикацию. [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] OutSystems UI [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] [19459022] [19459003] OutSystems UI Web [ 19459004] [19459005] [19459003], создав то, что мы назвали [19459004] [19459023] OutSystems UI Theme Generators [19459024] [19459003]. После использования в течение некоторого времени мы решили опубликовать эти проекты SCSS как с открытым исходным кодом, чтобы любой разработчик мог использовать его, и, возможно, это поможет другим разработчикам Front-End тоже быстро получить свои темы и, возможно, начать создавать Front с открытым исходным кодом. -Конец сообщества. [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] Если вам нужна помощь в разработке Front-End для любого типа проектов OutSystems, не стесняйтесь обращаться к нам. [19459004] [19459007]

[19459028]

[19459029]

Author avatar
admin

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

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