Yes, we are late for the front-end component library family, but please take a few minutes to see a new comer introduce himself:

What is Zarm

Zarm is an enterprise-level mobile TERMINAL UI component library developed by Zhongan Technology based on React and React-Native. (website | making | presentation address Recommend browsing on mobile phones)

The name of Zarm is inspired by the philosophy of Zhongan Insurance: to make insurance with temperature. Zarm = ZA + warm, ZA stands for all security, warm means “warm”, centered on the overlapping LETTER A, and take the left and right parts of each. The pursuit of the ultimate user experience, committed to do a temperature component library is also the original intention of zARM project launched.

Development history of Zarm: At the beginning, the predecessor of Zarm was just a personal project, which was gradually promoted and used in Zhongan Health Insurance Business Department after 2018. At the beginning of 2019, Zhongan announced the strategic direction of direct product branding, which means that the output pages of major BU are likely to be put into direct channels. In order to standardize the vision and interaction of basic components of Zhongan products, improve the user experience of zhongan products and ensure the consistency of product experience, the Zarm project was born under the initiative of Zhongan Technical Committee. Through the efforts of excellent designers in each BU team, visual and interactive specifications were finally finalized several months later. The implementation of Zarm front-end code adopted the way of free ownership. The active front-end ER of the whole company pushed forward rapidly, and finally stabilized for production environment. In order to unify the cognition of business students, design and front-end, Zarm formed Axure component library and project template specification to help business students quickly complete high-quality product prototypes; The three complement each other and finally achieve the goal of reducing the labor cost and communication cost on the whole work link.

After more than two years of business precipitation, Zarm has served nearly 100 projects in ten business divisions, which makes us believe that Zarm must also have its application in Zhongan.

The advantage of Zarm

more

  • Component. Zarm is currently open source with 50 components, covering almost all common components, and is still being updated and iterated.

  • Specification:

    Have a complete unified design specifications.

    Style naming uses THE BEM specification and internal implementation uses Css Variables + SCSS Mixins, which makes style maintenance elegant and concise.

    Follow strict code specifications, esLint rules wrapped in Airbnb based Lint and style specifications based on stylelint implementation.

fast

  • The size of the full component is only about 60KB after Gzip compression.
  • Load on demand. Zarm supports tree shaking based on ES Module by default.

good

  • Good scalability, we provide built-in base components, can be easily based on existing components to achieve secondary development.

    For example, our Popup component is the basis of all shell class components. Modal, Toast, Loading, ActionSheet, Picker, Select and so on are all realized based on Popup component. For example, the PickerView component is the basis of the sliding selection class component, and the Picker component is simply a combination of Popup and PickerView. You can also develop richer business components based on these basic components

  • Zarm will also keep a close eye on official updates, and in the official release we have removed life cycles that are no longer routinely used in Act17 and updated them with the latest life cycle.

  • Timely response. Currently, under the condition of internal open source, we have made nearly 3000 commits. While responding to issues in time, we also keep fast iteration. There will be an official discussion group in the future. We will follow up any questions we have and will not let them go unanswered.

  • Zarm uses Jest + Enzyme to do unit tests. Unit test coverage is over 80% and continues to climb.

shuang

  • Friendly typescript support, it’s 2020, and the end of the world is really coming without TS.
  • Style using CSS variables, support one key skin, custom skin.

The future of Zarm

In the near future, we will launch:

  • Desktop component library Zarm-Web.
  • HpaPaaS no code building platform (name temporarily confidential).

.

I’m sorry we’re late

In an era of front-end teams either developing their own or using third-party component libraries, we may have been a little late to the Zarm component library. However, we are also determined to be a latecomer, hoping to open up a piece of Zarm’s territory in the field of component libraries.

In an era of front-end change, you might want to try out a new component library when developing a new project, which might be better than what you currently use

Finally, thank you very much for your reading, and we welcome all interested students to join us to build a better Zarm!

Github open source address

Github.com/ZhongAnTech…

Please give Zarm a star!

Welcome to submit your issue and PR!

Scan code to join the official discussion group