Common UI Approach

Owned by Matthew Evert
Last updated: Mar 18, 2021 by Sam Li (Deactivated)
3 min read

Overview

This document describe how teams(Design team, UI team, backend team) works together, and basic infrastructures support Common UI Libary Project.

Workflow

This section will show old workflow(what we are doing right now), and new workflow(what we are going to follow). And also compare the two workflows.

Old workflow

 

Above image illustrate the existing work flow around design team and dev team:

  1. Design team using figma/zeroheight to finish their design work. And provide the prototype to Dev team.

  2. Dev team will refer the prototype. And UI and Dev will work together to finish the implementation work. And produce JSP/HTML or React componet.

New workflow

 

Above image illustrate the new work flow that teams will following:

  1. Design team using figma/zeroheight to finish their design work. And provide the prototype to UI team.

  2. UI team will refer the prototype and use Storybook to build UI component. And provide the example, documation, source code for each UI component.

  3. Design team review and confirm the new added UI components.

  4. Dev will refer the UI component from Storybook And produce the JSP/HTML or React component.



Not good for old workflow:

  1. No reusable documentation,example,source code for Dev to reference.

  2. No review process before Dev team start working, UI issues will be found only after Dev finish their work.

Improvement for new workflow:

  1. isolate UI team work with backend dev work.

  2. provide review process to make design team, UI team and backend Dev team on the same page.

Infrastructures

This section list the infrastructure that will be use for Common UI Libary project.

Environment

Story book Source code

The source code for story book is persist in new git repository(https://bitbucket.org/ferguson-wolseley/ui-storybook-web/src/master/ ).

The source code for story book will only contains the components for UI only.

FG store Source code

The source code for FG store front js is still persist in ferguson_css repository(https://bitbucket.org/ferguson-wolseley/ferguson_css/src/master/ ).

The source code for FG store front js will reference the components defined in story book source code and implement the business logic.

StoryBook Servers

Use Chromatic as StoryBook cloud environment, which will help us easy to review and share StoryBook output.

Preview server

Use a Chromatic linked project as our Preview environment. Design team and UI will use it two add/reply comment, review and approve the UI changes.

npx chromatic --project-token=dk422obsbo

Live server

Use a Chromatic unlink project as our live envionment. UI and Dev will use it as reference document for UI components.

TODO: Need create a unlink Chromatic project as our live server. 

NPM Repository

Will use AAXIS NPM which is a private NPM repository to store first. And after Ferguson gitbub npm repository is ready, will use it and republic all the exist version to that repository.

AAXIS NPM repository URL: https://solution.aaxisgroup.net/nexus/repository/npm-local

New release process

Since Design team, Front dev Team will work together with new repository, our release process will have some changes. Following picture illustrate the new release process.

Notes:

  1. Right now we have jenkins jobs to handle each process (deploy Preview env, release, deploy Live env), but need to trigger manually. In future(after migrate to github), we can make it automatically with github CI/CD feature

  2. "Choose the correct version to install npm package": This is covered by our plan. e.g. We can plan story book release with vesrion v1.1.0(which contains order summary, order option) first and also plan e4.c.1 release to have integration work for these two section. So when we doing ticket in e4.c.1, we need instaill npm package with v1.1.0. We can link Jira tickets so we know the dependence