"Crafting a Third-Party Banking Library with Web Components and React", German Smolyar
0 likes258 views
The document outlines the integration of third-party banking features through web components and React, emphasizing the importance of minimal coding and compatibility. It discusses the advantages of using web components such as encapsulation, fade-safe functionalities, and framework independence, while also addressing real-world applications and communication methods through event buses. Additionally, it explores themes of atomic design, theming, and performance while providing insights and takeaways for developers building client libraries.
"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