Slide 1
Slide 1 text
Reusable React Component in Kumparan
How we build cross platform UI component for reuse with React
Rizal Ibnu
Software Engineer @kumparan
Slide 2
Slide 2 text
Reusability ?
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
UI Component Core Principles
@kumparan
Slide 5
Slide 5 text
➔ Reusable
➔ Shareable
➔ Cross-Platform
Slide 6
Slide 6 text
How We Deal with Them ?
Slide 7
Slide 7 text
Why do we use React ?
● Reusable components
● Cross-platform with React Native
● Sensible data flow
● It’s fun to code!
Slide 8
Slide 8 text
Isolated Component
src
containers
components
button
input
something-project
Presentational Component
Container Component
Slide 9
Slide 9 text
src
containers
components
button
input
something-project
another-project
?
Isolated Component
Slide 10
Slide 10 text
src
containers
components
button
input
something-project
Isolated Component
src
containers
components
button
input
another-project
COPY + PASTE
Slide 11
Slide 11 text
Isolated Component
???
Slide 12
Slide 12 text
Isolated Component
Slide 13
Slide 13 text
KAIJU
ATTACK
!!
Slide 14
Slide 14 text
Isolated Component
➔ Reusable limited
➔ Shareable
➔ Cross-Platform maybe
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
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.
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
> 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 Click Me!
}
}
Note: an-awesome-uikit is unreal package name, for example only
Slide 20
Slide 20 text
INTERNAL
PLATFORM A
INTERNAL
PLATFORM B
MOBILE WEB DESKTOP WEB
ANDROID APP IOS APP
INTERNAL
PLATFORM C
Slide 21
Slide 21 text
UI Kit
➔ Reusable
➔ Shareable
➔ Cross-Platform
Slide 22
Slide 22 text
Developing a UI Kit
Slide 23
Slide 23 text
When?
● Develop from the beginning is maybe not the best idea
● Find a moment when building it will save development time
Slide 24
Slide 24 text
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.
Slide 25
Slide 25 text
Isolated Component
src
containers
components
button
input
something-project
Presentational Component
Container Component
Slide 26
Slide 26 text
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/
Slide 27
Slide 27 text
UI Kit Benefits ?
Slide 28
Slide 28 text
➔ Saving Development Time
➔ Consistent Style
➔ Better collaboration between designer and
developer
Slide 29
Slide 29 text
Saving Development Time
development time
product time
● Time spent on UI Kit
● Saved development time
Slide 30
Slide 30 text
Consistent Style
MOBILE WEB MOBILE APP
Slide 31
Slide 31 text
Better collaboration between designer and
developer
Slide 32
Slide 32 text
But nothing is perfect
Slide 33
Slide 33 text
● Discoverability problem of hundreds of components
● Not all components are created equal
● Lack of documentation created some confusion
Slide 34
Slide 34 text
DESIGN SYSTEM
UIKIT
Slide 35
Slide 35 text
Reusability is not just a technical decision, but also a
philosophical one that requires organizational
commitment and has far-reaching implications.
Slide 36
Slide 36 text
No content