SlideShare a Scribd company logo

"Crafting a Third-Party Banking Library with Web Components and React", German Smolyar

Fwdays
Fwdays

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.

1 of 39
Download to read offline
"Crafting a Third-Party Banking Library with Web Components and React", German Smolyar
You are never alone 🤲
If you need banking features, don’t build a Bank - integrate with it…
Custom Coding Low-Code No-Code
Crafting a Third-Party
Banking Library with Web
Components and React
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
● 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 󰠻

Recommended

Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedsparkfabrik
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiJared Faris
 
Javascript spaghetti stirtrek_5_17
Javascript  spaghetti stirtrek_5_17Javascript  spaghetti stirtrek_5_17
Javascript spaghetti stirtrek_5_17Jared Faris
 
React native - under the bridge - react week NYC
React native - under the bridge - react week NYCReact native - under the bridge - react week NYC
React native - under the bridge - react week NYCChen Feldman
 
Atomic Design with Next.js
Atomic Design with Next.jsAtomic Design with Next.js
Atomic Design with Next.jsPatrick Smith
 

More Related Content

Similar to "Crafting a Third-Party Banking Library with Web Components and React", German Smolyar

Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Marco Breveglieri
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React NativeEric Deng
 
The complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrThe complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrAfreenK
 
An Introduction to Web Components
An Introduction to Web ComponentsAn Introduction to Web Components
An Introduction to Web ComponentsRed Pill Now
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshareSaleemMalik52
 
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdfWessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdfWessel Loth
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JSFestUA
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxwrite31
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendVlad Fedosov
 
Android jetpack compose | Declarative UI
Android jetpack compose | Declarative UI Android jetpack compose | Declarative UI
Android jetpack compose | Declarative UI Ajinkya Saswade
 
React - The JavaScript Library for User Interfaces
React - The JavaScript Library for User InterfacesReact - The JavaScript Library for User Interfaces
React - The JavaScript Library for User InterfacesJumping Bean
 
Bulletproof design systems using storybook
Bulletproof design systems using storybookBulletproof design systems using storybook
Bulletproof design systems using storybookChen Feldman
 
Hacking the Codename One Source Code - Part I - Transcript.pdf
Hacking the Codename One Source Code - Part I - Transcript.pdfHacking the Codename One Source Code - Part I - Transcript.pdf
Hacking the Codename One Source Code - Part I - Transcript.pdfShaiAlmog1
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptReact Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptKobkrit Viriyayudhakorn
 
l1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdfl1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdfHương Trà Pé Xjnk
 
Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...
Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...
Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...DicodingEvent
 
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Fwdays
 

Similar to "Crafting a Third-Party Banking Library with Web Components and React", German Smolyar (20)

Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
 
Krishnagopal Thogiti_Java
Krishnagopal Thogiti_JavaKrishnagopal Thogiti_Java
Krishnagopal Thogiti_Java
 
The complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrThe complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrr
 
An Introduction to Web Components
An Introduction to Web ComponentsAn Introduction to Web Components
An Introduction to Web Components
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshare
 
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdfWessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
Wessel Loth - Fire your Frontend Framework with Lit - TEQnation 2022.pdf
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docx
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontend
 
Android jetpack compose | Declarative UI
Android jetpack compose | Declarative UI Android jetpack compose | Declarative UI
Android jetpack compose | Declarative UI
 
React - The JavaScript Library for User Interfaces
React - The JavaScript Library for User InterfacesReact - The JavaScript Library for User Interfaces
React - The JavaScript Library for User Interfaces
 
Bulletproof design systems using storybook
Bulletproof design systems using storybookBulletproof design systems using storybook
Bulletproof design systems using storybook
 
Hacking the Codename One Source Code - Part I - Transcript.pdf
Hacking the Codename One Source Code - Part I - Transcript.pdfHacking the Codename One Source Code - Part I - Transcript.pdf
Hacking the Codename One Source Code - Part I - Transcript.pdf
 
React native
React nativeReact native
React native
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptReact Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
 
l1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdfl1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdf
 
Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...
Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...
Baparekraf Digital Talent Day: Monitoring dan Coaching Penerima Fasilitasi BD...
 
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
 

More from Fwdays

"Incremental rollouts and rollbacks with business metrics control at every st...
"Incremental rollouts and rollbacks with business metrics control at every st..."Incremental rollouts and rollbacks with business metrics control at every st...
"Incremental rollouts and rollbacks with business metrics control at every st...Fwdays
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys VasylievFwdays
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura RochniakFwdays
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 
"Crisis to Calm: Incident Management’s Role in Business Stability", Oleksii O...
"Crisis to Calm: Incident Management’s Role in Business Stability", Oleksii O..."Crisis to Calm: Incident Management’s Role in Business Stability", Oleksii O...
"Crisis to Calm: Incident Management’s Role in Business Stability", Oleksii O...Fwdays
 
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro KozhevinFwdays
 
"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor FesenkoFwdays
 
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...Fwdays
 
"Drizzle: What Is It All About?", Alex Blokh, Dan Kochetov
"Drizzle: What Is It All About?", Alex Blokh, Dan Kochetov"Drizzle: What Is It All About?", Alex Blokh, Dan Kochetov
"Drizzle: What Is It All About?", Alex Blokh, Dan KochetovFwdays
 
"Package management in monorepos", Zoltan Kochan
"Package management in monorepos", Zoltan Kochan"Package management in monorepos", Zoltan Kochan
"Package management in monorepos", Zoltan KochanFwdays
 
"Node.js vs workers — A comparison of two JavaScript runtimes", James M Snell
"Node.js vs workers — A comparison of two JavaScript runtimes", James M Snell"Node.js vs workers — A comparison of two JavaScript runtimes", James M Snell
"Node.js vs workers — A comparison of two JavaScript runtimes", James M SnellFwdays
 
"AI and how to integrate ChatGPT as a customer support agent", Sergey Dyachok
"AI and how to integrate ChatGPT as a customer support agent",  Sergey Dyachok"AI and how to integrate ChatGPT as a customer support agent",  Sergey Dyachok
"AI and how to integrate ChatGPT as a customer support agent", Sergey DyachokFwdays
 
"Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin Fwdays
 
"Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk Fwdays
 
"Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada Fwdays
 
"The role of CTO in a classical early-stage startup", Eugene Gusarov
"The role of CTO in a classical early-stage startup", Eugene Gusarov"The role of CTO in a classical early-stage startup", Eugene Gusarov
"The role of CTO in a classical early-stage startup", Eugene GusarovFwdays
 
"Cross-functional teams: what to do when a new hire doesn’t solve the busines...
"Cross-functional teams: what to do when a new hire doesn’t solve the busines..."Cross-functional teams: what to do when a new hire doesn’t solve the busines...
"Cross-functional teams: what to do when a new hire doesn’t solve the busines...Fwdays
 
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad...
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad..."Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad...
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad...Fwdays
 
"Thriving Culture in a Product Company — Practical Story", Volodymyr Tsukur
"Thriving Culture in a Product Company — Practical Story", Volodymyr Tsukur"Thriving Culture in a Product Company — Practical Story", Volodymyr Tsukur
"Thriving Culture in a Product Company — Practical Story", Volodymyr TsukurFwdays
 
"Fast Start to Building on AWS", Igor Ivaniuk
"Fast Start to Building on AWS", Igor Ivaniuk"Fast Start to Building on AWS", Igor Ivaniuk
"Fast Start to Building on AWS", Igor IvaniukFwdays
 

More from Fwdays (20)

"Incremental rollouts and rollbacks with business metrics control at every st...
"Incremental rollouts and rollbacks with business metrics control at every st..."Incremental rollouts and rollbacks with business metrics control at every st...
"Incremental rollouts and rollbacks with business metrics control at every st...
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 
"Crisis to Calm: Incident Management’s Role in Business Stability", Oleksii O...
"Crisis to Calm: Incident Management’s Role in Business Stability", Oleksii O..."Crisis to Calm: Incident Management’s Role in Business Stability", Oleksii O...
"Crisis to Calm: Incident Management’s Role in Business Stability", Oleksii O...
 
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
 
"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko
 
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
 
"Drizzle: What Is It All About?", Alex Blokh, Dan Kochetov
"Drizzle: What Is It All About?", Alex Blokh, Dan Kochetov"Drizzle: What Is It All About?", Alex Blokh, Dan Kochetov
"Drizzle: What Is It All About?", Alex Blokh, Dan Kochetov
 
"Package management in monorepos", Zoltan Kochan
"Package management in monorepos", Zoltan Kochan"Package management in monorepos", Zoltan Kochan
"Package management in monorepos", Zoltan Kochan
 
"Node.js vs workers — A comparison of two JavaScript runtimes", James M Snell
"Node.js vs workers — A comparison of two JavaScript runtimes", James M Snell"Node.js vs workers — A comparison of two JavaScript runtimes", James M Snell
"Node.js vs workers — A comparison of two JavaScript runtimes", James M Snell
 
"AI and how to integrate ChatGPT as a customer support agent", Sergey Dyachok
"AI and how to integrate ChatGPT as a customer support agent",  Sergey Dyachok"AI and how to integrate ChatGPT as a customer support agent",  Sergey Dyachok
"AI and how to integrate ChatGPT as a customer support agent", Sergey Dyachok
 
"Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin
 
"Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk
 
"Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada
 
"The role of CTO in a classical early-stage startup", Eugene Gusarov
"The role of CTO in a classical early-stage startup", Eugene Gusarov"The role of CTO in a classical early-stage startup", Eugene Gusarov
"The role of CTO in a classical early-stage startup", Eugene Gusarov
 
"Cross-functional teams: what to do when a new hire doesn’t solve the busines...
"Cross-functional teams: what to do when a new hire doesn’t solve the busines..."Cross-functional teams: what to do when a new hire doesn’t solve the busines...
"Cross-functional teams: what to do when a new hire doesn’t solve the busines...
 
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad...
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad..."Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad...
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad...
 
"Thriving Culture in a Product Company — Practical Story", Volodymyr Tsukur
"Thriving Culture in a Product Company — Practical Story", Volodymyr Tsukur"Thriving Culture in a Product Company — Practical Story", Volodymyr Tsukur
"Thriving Culture in a Product Company — Practical Story", Volodymyr Tsukur
 
"Fast Start to Building on AWS", Igor Ivaniuk
"Fast Start to Building on AWS", Igor Ivaniuk"Fast Start to Building on AWS", Igor Ivaniuk
"Fast Start to Building on AWS", Igor Ivaniuk
 

Recently uploaded

Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfkatalinjordans1
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Product School
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stackSummit
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?MENGSAYLOEM1
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotelPhilippines
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Product School
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...htrindia
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementMimmo Squillace
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewAshraf Fouad
 
Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build PolandGDSC PJATK
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxNeo4j
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Product School
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaISPMAIndia
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanDatabarracks
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringMassimo Talia
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...ISPMAIndia
 

Recently uploaded (20)

Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdf
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stack
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company Profile
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvement
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book Review
 
Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build Poland
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response Plan
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineering
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
 

"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…
  • 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
  • 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