This talk will be about how Unit built White-Label UI Components in React while making them completely native. We will discuss rendering React in Web Components, communication with them via native JS events, and the modularity of each Component.

2. You are never alone 🤲
If you need banking features, don’t build a Bank - integrate with it…

3. Custom Coding Low-Code No-Code

4. Crafting a Third-Party
Banking Library with Web
Components and React

5. Nice to meet you 🤝
● Software Engineer at Unit
● Was born in Zhytomyr 󰑒
● Studied Cyber Security 🔐
● Former Radio and Wedding host 🎤
● Moved to Israel 󰏛 in 2017
● Writing in TS and Scala

6. ● Don’t want to write a lot of code
● No impact on my app
● Minimal documentation reading
● Designer must be satisfied
● Compatible with my framework
● Should be fast
Using 󰞦
● Don’t want to write a lot of code
● No bugs, please
● No client specific features
● Write with favorite framework
● Should work everywhere
● Business needs to serve throw CDN for
regulatory issues
Building 󰠻

7. 🧐 Which options do we have?
💡 We can build React, Angular, Vue, Ember... whichever library? 😔
💡 We could use <Iframe>? 😔
💡 Maybe classical way of exposing functions? 😔

8. 󰠻👍 One more thing
Web Components

9. Key features 🔑
Shadow DOM
Encapsulation
󰞲
Custom Elements
Way to create new
HTML elements
👻
Slots
Placeholders
🚮

10. 󰞲 Custom elements <component> </component>

11. 🪴 Shadow DOM helps with DOM pollution

12. 🪴 Shadow DOM helps with DOM pollution

13. 🚮 <slot> </slot>

14. 󰠻 Why?
● Widely supported across all browsers
● Framework-independent
● Declarative
● Encapsulation
● Fail safe (calling an HTML element which doesn’t exist does not cause
an error)

15. 😨 What about framework?
Lit
Stencil
React

16. “React and Web Components are built to solve different problems.
Web Components provide strong encapsulation for reusable
components, while React provides a declarative library that keeps
the DOM in sync with your data. The two goals are complementary.
As a developer, you are free to use React in your Web Components,
or to use Web Components in React, or both.”
🤨 Is it ok to use React?

18. But in a real world…
We ended up with this
📡 Communication
Web Component
React Application
const ui = function(state)
Web
Component
Web
Component
Main App Elements
Main App Elements

19. You can request to refresh component
⚙ Custom Events

20. ⚙ Custom Events
You can listen to onload

21. Reflect on async changes
⚙ Custom Events

22. 󰞦
Enough of me, how can you use it?
Demo

27. So each view is component

28. 󰠻 Event Bus (sub / pub pattern)
To ensure a React component receives events meant
specifically for it, we utilize a dedicated event bus for each
web component. The event bus has two key functions:
eventbus.publish() Receives data and publishes an even
encapsulating that data. Internally it creates a new
CustomEvent.
eventbus.subscribe() Tells the event bus to add an event
listener This is the way to get event that WE KNOW was
addressed to us.

29. 📱 Can we do something for Native (iOS, Android)?
Web View Native Experiences

30. 😬 How can we achieve it?
Card
App own UI
Component
App own UI
Component
Web view
Menu

31. 🤔 What if we change it a bit?
Card
App own UI
Component
App own UI
Component
Web view
Card
App own UI
Component
App own UI
Component
Web view
Bottom Sheet
Web view
{ Event }

32. 󰞦
What's going on here? Can you prove it?

34. 💪 How are we working?
Atomic Design Methodology
Atoms Molecules Organisms Templates Pages

35. 🧪 How are we theming?
Global Settings
Theming
Default Settings
Component Setting
The @layer CSS at-rule is used to declare a cascade
layer and can also be used to define the order of
precedence in case of multiple cascade layers.

36. 🚀 How are we performing?

37. 📦 General
● We use Storybook for development
● We follow Semantic Versioning. Each version
is a new file.
● We keep the right to deploy regulatory
changes to existing versions using cherry pick
● We use Cypress for UI tests
● We have security check in CI process
● We deploy preview for each PR

38. 🎁 Takeaways
● While building client libraries, put yourself in junior pants 👖 Always
choose best possible interfaces
● Be native and clear in your interfaces
● React is not framework for SPA, it’s just a library
as jQuery 💔💀 was
● Everything is possible, don’t work too much

39. Q&A