introduce

chocolate-ui

  • githubPages
  • Netlify: Bind domain name automatically to app.netlify.com
If you feel good, click star 🦷

The development of

  • React TypeScript

debugging

Storybook is a tool to aid UI control development. Create separate controls through stories, so that each control development has a separate development debugging environment.

  • Storybook
    • Write stories
    • Add react-doc-gen ==> to generate documentation pages based on comments
    • Add and use some features of Addon ==> document enrichment
    • Static pages can be deployed on the server

test

  • Component test
  • React Testing Library
    • Jest
    • Behavior modeling
    • Basic assertion
    • The mock implementation

The deployment of

  • Code submission: Husky does some validation of the submission specification
  • Travis CI/CD continues inheritance
Component library development process

CI/CD

Traditional component library development

Each code change requires manual uploading of static files. Server deployment takes time and energy

You can use CI/CD

CI: Continuous integration

  • Frequent integration of code into the trunk (master) benefits: bugs can be found quickly, updated to the master every time a bit is done, bugs can be found quickly and fixes can be made
  • Prevents the branch from deviating too far from the trunk, which, if not continuously inherited, is being updated too much, making future code integration difficult.

The purpose is to quickly iterate the product, to ensure the core measures of code quality, to automate testing before inheritance to master, to merge to master

CD: Continuous delivery and deployment

  • Frequently deliver new versions of software to quality teams or users
  • Code is reviewed and automatically deployed to production

Github supports continuous deployment tools travis-ci.com

Design patterns

Publish and subscribe model

For example, you follow A on Weibo, and many other people also follow A, so when A releases A dynamic, weibo will push this dynamic for you. A is the publisher, you are the subscriber, and Weibo is the dispatch center. There is no direct communication between you and A, which is all coordinated through Weibo (your attention, A’s release dynamics).

Publish and subscribe model: Subscriber registers the event they want to Subscribe to the dispatch center. When Publisher publishes the event to the dispatch center, that is, when the event is triggered, The processing code registered with the dispatch center by the Fire Event subscriber.

function eventUtil() { let eventList = {}; this.eventList = eventList; this.on = function (key, fn) { if (! this.eventList[key]) { this.eventList[key] = [] } this.eventList[key].push(fn) } this.emit = function (key, ... args) { fns = this.eventList[key]; if (! fns || fns.length === 0) return false; for (let i = 0; i < fns.length; i++) { const fn = fns[i]; fn.apply(this, args) } } this.remove = function (key, fn) { fns = this.eventList[key]; if (! fns) return false; if (! fn) { fns.length = 0; } else { for (let index = 0; index < fns.length; index++) { if (fn === fns[index]) { fns.splice(index, 1) } } } } } const eventKey = new eventUtil() eventKey.on('custom', f1 = function (name) { console.log(name) }) eventKey.emit('custom', 'hi') eventKey.remove('custom', f1) eventKey.emit('custom', 'hi')Copy the code