Reusable React Component in Kumparan

How we build cross platform UI component for reuse with React

Transcript

1. Reusable React Component in Kumparan How we build cross platform UI component for reuse with React Rizal Ibnu Software Engineer @kumparan
2. Reusability ?
3. The use of existing assets in some form within the software product development process that touches every stage of development and every level of an organization
4. UI Component Core Principles @kumparan
5. ➔ Reusable ➔ Shareable ➔ Cross-Platform
6. How We Deal with Them ?
7. Why do we use React ? • Reusable components • Cross-platform with React Native • Sensible data flow • It’s fun to code!
8. Isolated Component src containers components button input something-project Presentational Component Container Component
9. src containers components button input something-project another-project ? Isolated Component
10. src containers components button input something-project Isolated Component src containers components button input another-project COPY + PASTE
11. Isolated Component ???
12. Isolated Component
13. KAIJU ATTACK !!
14. Isolated Component ➔ Reusable limited ➔ Shareable ➔ Cross-Platform maybe
17. UI Kit Set of standards and solutions for the user interface, enabling a modular approach like “LEGO® bricks” and can be applied to universal, that is built on modules. A UI kit generally contains an assortment of UI components (buttons, check boxes, progress bars, etc.) for the purpose of user interface design.
19. > yarn add an-awesome-uikit > npm install an-awesome-uikit import React from “react” import Button from “an-awesome-uikit/Button” class Component extends React.Component { render() { return <Button color=”primary”>Click Me!</Button> } } Note: an-awesome-uikit is unreal package name, for example only
20. INTERNAL PLATFORM A INTERNAL PLATFORM B MOBILE WEB DESKTOP WEB ANDROID APP IOS APP INTERNAL PLATFORM C
21. UI Kit ➔ Reusable ➔ Shareable ➔ Cross-Platform
22. Developing a UI Kit
23. When? • Develop from the beginning is maybe not the best idea • Find a moment when building it will save development time
24. Basic practice Put all low-level components with their styles into a separate folder. It will make it easier to extract it later into its own separate package.
25. Isolated Component src containers components button input something-project Presentational Component Container Component
26. UI Core Libraries @kumparan • React & React Native https://reactjs.org/ • Styled Components https://www.styled-components.com/ • React Native Web https://github.com/necolas/react-native-web • Storybook https://storybook.js.org/ • Flow Type https://flow.org/
27. UI Kit Benefits ?
28. ➔ Saving Development Time ➔ Consistent Style ➔ Better collaboration between designer and developer
29. Saving Development Time development time product time • Time spent on UI Kit • Saved development time
30. Consistent Style MOBILE WEB MOBILE APP
31. Better collaboration between designer and developer
32. But nothing is perfect
33. • Discoverability problem of hundreds of components • Not all components are created equal • Lack of documentation created some confusion
34. DESIGN SYSTEM UIKIT
35. Reusability is not just a technical decision, but also a philosophical one that requires organizational commitment and has far-reaching implications.
37. Are you the next ULTRAMAN ? joindev@kumparan.com https:/ /join.kumparan.com