"Crafting a Third-Party Banking Library with Web Components and React", German Smolyar
0 likes250 views
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.
![Full Stack React Workshop [CSSC x GDSC]](https://cdn.slidesharecdn.com/ss_thumbnails/fullstackreactworkshopcsscxgdsc-230221003415-b512c1cf-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
Similar to "Crafting a Third-Party Banking Library with Web Components and React", German Smolyar (20)
More from Fwdays (20)
![[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...](https://cdn.slidesharecdn.com/ss_thumbnails/softskillsfwdays25-250317080651-1a2cccb1-thumbnail.jpg?width=560&fit=bounds)
![[QUICK TALK] "How to study to acquire a skill, not a certificate?", Uliana Du...](https://cdn.slidesharecdn.com/ss_thumbnails/ulianadutchakhowtostudytoacquireaskillnotacertificate-250317080232-421f309c-thumbnail.jpg?width=560&fit=bounds)
![[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...](https://cdn.slidesharecdn.com/ss_thumbnails/softskillsfwdays25ilonalesko-250317075721-cb56ed6c-thumbnail.jpg?width=560&fit=bounds)
Ad
Recently uploaded (20)
Ad
"Crafting a Third-Party Banking Library with Web Components and React", German Smolyar
- 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