uiengine

Workbench for UI-driven development

Github星跟踪图

UIengine

Workbench for UI-driven development:
A tool for developers and designers to build and document web sites and apps.

Useful if you want to …

  • Create a living pattern library
  • Document your design system
  • Prototype with your apps components and templates
  • Use code as a single source of truth

? What it enables

  • Establish a UI-driven workflow and structure your web UI into modular components.
  • Give your team and stakeholders a central spot to develop and discuss the UI.
  • Replace deliverables with usable, testable and production ready output/code.
  • Make documentation fun and easy by providing structure and nice looking pages.

? Quickstart

To explore the features yourself you can quickly initialize a project with some demo content:

mkdir uiengine-demo && cd uiengine-demo && npm init -y
npm install @uiengine/core @uiengine/adapter-html --save-dev
npx uiengine init --demo
npx uiengine build --serve --watch

See the getting started guide
for further details.
There are also some introduction videos:

? Examples and Screenshots

To get an idea of what a real-world project looks like, see the React sample project:

? Documentation

See the documentation site, which is also generated with the UIengine.

? Technical TL;DR

npm
Standard - JavaScript Style Guide
Build Status
Known Vulnerabilities
Coverage Status
All Contributors
Maintained with lerna
tippin.me

⚒ How does it work?

At its core, the UIengine is a static site generator.
It can be used in standalone mode or integrated into your build process.

➡️ Input: Your projects components, templates, pages and documentation

⬅️ Output: A static site that can be used as a workbench for development and deployed documentation

It consumes the files and structure of your project and generates the documentation based on this.
In development mode the output is regenerated on file change and synced to the browser.
This provides you with a development environment for creating the components, prototyping and writing the docs.

? Main features

  • Templating agnostic:
    Various templating engines are integrated via adapters.
    This gives you flexibility of choice and the option to integrate custom ones.
    It works with whatever can be rendered via JavaScript, e.g. JSX, Vue, EJS, Pug/Jade, Handlebars.
  • Prototyping environment:
    Build your UI without the need for an existing backend/API.
    Render your templates and components with mock data.
    Build various variants for pages by providing different data to your views.
  • Best practice approach:
    The tool guides you towards best practices like
    the component folder pattern,
    the modlet workflow
    and by proposing a separation of data and template/component.
  • In sync with the end product:
    The docs are generated from the code that is used in your application.
    Hence you get a living pattern library – not a separate thing that needs to be looked after regularly.
  • Flexible integrations:
    Templating engines can be configured so you can fit it to your needs.
    Same goes for the markdown parsing/rendering which is configurable too.
  • Covers green- and brownfield projects:
    Whether you start out with a pattern library or want to transition your process and refactor your existing UI into modular components, the UIengine has you covered.

For the evaluation process you might also want to have a look at the alternatives.

? Prerequisites

UIengine requires at least Node.js 10.13 (tracking the latest active Node.js LTS version).
This guarantees a reasonable level of backwards compatibility.

? Alternatives

OK, the UIengine looks really cool but it's not quite what you are looking for?
Or you want to first compare a few solutions to see which one is the right fit?
Here are some other projects that you might want to evaluate:

… or have a look at the ever growing list of similar tools.

? Development

You like this project and are interested in participating?
See the development docs for an introduction and workflows when hacking on the UIengine.

✨ Contributors

Thanks goes to these wonderful people:

This project follows the all-contributors specification.
Contributions of any kind welcome!

? Tip jar

tippin.me


??‍? Brought to you by the nice people behind UIengineering. ??‍?

主要指标

概览
名称与所有者dennisreimann/uiengine
主编程语言JavaScript
编程语言JavaScript (语言数: 10)
平台
许可证MIT License
所有者活动
创建于2016-11-16 11:31:17
推送于2025-02-21 10:27:35
最后一次提交2025-02-21 11:26:22
发布数182
最新版本名称v3.3.19 (发布于 2024-11-25 08:06:48)
第一版名称v0.1.1 (发布于 2017-02-14 21:08:15)
用户参与
星数369
关注者数14
派生数25
提交数1.2k
已启用问题?
问题数57
打开的问题数3
拉请求数14
打开的拉请求数1
关闭的拉请求数21
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?