Pp js conf_2015

•Als PPTX, PDF herunterladen•

0 gefällt mir•318 views

Abhishek Agashe

JS widgets

Technologie

Confidential and Proprietary1
BUILDING STANDALONE COMPONENTS
AS JAVASCRIPT WIDGETS
Abhishek Agashe

Confidential and Proprietary2
• Building small reusable isolated components
• Multiple technology stacks JAVA/C++/NODESJS ..
• Shared components between multiple projects/teams.
WHERE WE STARTED ….

Confidential and Proprietary3
• Isolating logic in library/helper files
• Ctrl C Ctrl V
• npm modules and bower components
PAST SOLUTIONS

Confidential and Proprietary4
• Different technology stacks [JAVA/C++]
• Required teams to go through entire push cycle to get
updates.
• Out of sync components.
NPM AND BOWER DIDN’T WORK FOR US

Confidential and Proprietary5
• Iframes (Don't hate me for this)
• javascript widgets.
CURRENT SOLUTIONS ??

Confidential and Proprietary6
• Component as standalone application.
• Integration steps:
HOW DO WIDGETS WORK ?
<script src= ‘/components/awesomewidgets.js’/>
<script>
if(component) {
component.init( <customization params>);
}
</script>
OR
<body data-<param> = “some data” />

Confidential and Proprietary7
• Activation flow
• Merchant header and footer
CASE STUDY

Confidential and Proprietary8
Widget
App
build
.build/templates/US/en/header.js
.build/templates/DE/de/header.js
Generate widget task
.build/js/US/en/headerfooter.js
.build/js/DE/de/headerfooter.js
Get compiled template
Dustjs , jQuery …
Library javascript files with behavioral logic

Confidential and Proprietary9
Header
Footer
App
Merchant
App
Request header-footer.js
Response header-footer.js
Compiled dust templates
CDN
Request header-footer.css
Response header-footer.css
Render the template
Fires ajax calls in background to get
dynamic data
Response {JSON}
Renders
partials/components
based on response

Confidential and Proprietary10
• Technology stack agnostic
• Push updates rather than pull
• Same look and feel across teams and applications
• Release cycles drastically reduced.
• Template caching.
• Easy integration.
• Isolated testing
• No coordination required between teams.
BENEFITS

Confidential and Proprietary11
• Significant efforts to integrate with legacy code bases
• Not easy to test locally during integration, need to use npm
proxy or CORS.
• Single point of failure.
• Might have performance implications based on size of
javascript.
• Component CSS can get overwritten
CAUTION

Confidential and Proprietary12
https://github.paypal.com/Customers-
R/bizcomponentsnodeweb
https://github.paypal.com/Customers-
R/bizcomponentsnodeweb/blob/master/tasks/generate-
header.js
https://www.paypal.com/businessdocs/inappdocs/pps#
REFERENCES

Confidential and Proprietary13
Thank You
Q/A

Empfohlen

How to build a JavaScript toolkitMichael Nelson

Cypress for TestingPoojaSingh1123

Cypress first impressionsHans Emmel

Springboot and camelDeepak Kumar

A walkthrough of JavaScript ES6 featuresMichal Juhas

Introduction to Integration Testing With CypressErez Cohen

PHP Frameworks, or how I learnt to stop worrying and love the codeMichal Juhas

Алексей Волков "Введение в React Native"Fwdays

Empfohlen

How to build a JavaScript toolkitMichael Nelson

Cypress for TestingPoojaSingh1123

Cypress first impressionsHans Emmel

Springboot and camelDeepak Kumar

A walkthrough of JavaScript ES6 featuresMichal Juhas

Introduction to Integration Testing With CypressErez Cohen

PHP Frameworks, or how I learnt to stop worrying and love the codeMichal Juhas

Алексей Волков "Введение в React Native"Fwdays

Javascript Frameworks ComparisonDeepu S Nath

Azure WebsitesSenthamil Selvan

JSFoo-2017 TakeawaysMir Ali

React native-meetup-talkkiranabburi

Modern Web Framework : Play frameworkSuman Adak

ASP.NET Core: The best of the new bitsKen Cenerelli

Unit Testing in JavaScriptRob Scaduto

ASP.NET Core MVC + Web API with Overview (Post RC2)Shahed Chowdhuri

Web development - Developing Web as A TeamMuhammad Akbar Yasin

Ektron Synergy 2014 - A Case Study in Using MVC with EktronEktron

Swagger - Making REST APIs friendlierMiroslav Resetar

Cypress reportAdarsh

Bridging the gap between UX and development - A Storybook by Marko Letic at F...DevClub_lv

React NativeHuqiu Liao

Introduction to Vue.js DevStaff Meetup 13.02Paul Bele

SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...Sébastien Levert

SharePoint Fest DC - SharePoint Framework, Angular and Azure FunctionsSébastien Levert

EVOLVE'16 | Deploy | Abhishek Dwevedi | Understanding a Typical AEM DeploymentEvolve The Adobe Digital Marketing Community

React UI Development: Introduction to "UI Component as API"Itaru Kitagawa

Single Page Applications - Desert Code Camp 2012Adam Mokan

CCF TLC Farm sheet proof 2Carrie Bourdages

Pdk saida siregarsaidahsiregar

Weitere ähnliche Inhalte

Was ist angesagt?

Javascript Frameworks ComparisonDeepu S Nath

Azure WebsitesSenthamil Selvan

JSFoo-2017 TakeawaysMir Ali

React native-meetup-talkkiranabburi

Modern Web Framework : Play frameworkSuman Adak

ASP.NET Core: The best of the new bitsKen Cenerelli

Unit Testing in JavaScriptRob Scaduto

ASP.NET Core MVC + Web API with Overview (Post RC2)Shahed Chowdhuri

Web development - Developing Web as A TeamMuhammad Akbar Yasin

Ektron Synergy 2014 - A Case Study in Using MVC with EktronEktron

Swagger - Making REST APIs friendlierMiroslav Resetar

Cypress reportAdarsh

Bridging the gap between UX and development - A Storybook by Marko Letic at F...DevClub_lv

React NativeHuqiu Liao

Introduction to Vue.js DevStaff Meetup 13.02Paul Bele

SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...Sébastien Levert

SharePoint Fest DC - SharePoint Framework, Angular and Azure FunctionsSébastien Levert

EVOLVE'16 | Deploy | Abhishek Dwevedi | Understanding a Typical AEM DeploymentEvolve The Adobe Digital Marketing Community

React UI Development: Introduction to "UI Component as API"Itaru Kitagawa

Single Page Applications - Desert Code Camp 2012Adam Mokan

Was ist angesagt? (20)

Javascript Frameworks Comparison

Azure Websites

JSFoo-2017 Takeaways

React native-meetup-talk

Modern Web Framework : Play framework

ASP.NET Core: The best of the new bits

Unit Testing in JavaScript

ASP.NET Core MVC + Web API with Overview (Post RC2)

Web development - Developing Web as A Team

Ektron Synergy 2014 - A Case Study in Using MVC with Ektron

Swagger - Making REST APIs friendlier

Cypress report

Bridging the gap between UX and development - A Storybook by Marko Letic at F...

React Native

Introduction to Vue.js DevStaff Meetup 13.02

SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...

SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions

EVOLVE'16 | Deploy | Abhishek Dwevedi | Understanding a Typical AEM Deployment

React UI Development: Introduction to "UI Component as API"

Single Page Applications - Desert Code Camp 2012

Andere mochten auch

CCF TLC Farm sheet proof 2Carrie Bourdages

Pdk saida siregarsaidahsiregar

It reortseyiadeeye

Spectakel met pompoenen_t1Gerard Houdinet

Trop gnon-vous-devriez-aimerGerard Houdinet

Pdk saida siregarsaidahsiregar

Tatouages1Gerard Houdinet

HumourGerard Houdinet

FindusGerard Houdinet

Photos superbesGerard Houdinet

Front Cover Progressionadaaamday

Double Page Spread Progressionadaaamday

21 route us_66Gerard Houdinet

Photo 1er prixGerard Houdinet

PrservatifsGerard Houdinet

Bd birds 05Gerard Houdinet

Andere mochten auch (16)

CCF TLC Farm sheet proof 2

Pdk saida siregar

It reort

Spectakel met pompoenen_t1

Trop gnon-vous-devriez-aimer

Pdk saida siregar

Tatouages1

Humour

Findus

Photos superbes

Front Cover Progression

Double Page Spread Progression

21 route us_66

Photo 1er prix

Prservatifs

Bd birds 05

Ähnlich wie Pp js conf_2015

Effective .NET Core Unit Testing with SQLite and DapperMike Melusky

From Pilot to Product - Morning@LohikaIvan Verhun

Effective .NET Core Unit Testing with SQLite and DapperMike Melusky

Learn from my Mistakes - Building Better Solutions in SPFxThomas Daly

A Journey through the JDKs (Java 9 to Java 11)Markus Günther

Modern Web-site Development PipelineGlobalLogic Ukraine

APEX Application Lifecycle and Deployment 20220714.pdfRichard Martens

Profiling and Tuning a Web Application - The Dirty DetailsAchievers Tech

Building Rich Internet Applications with Ext JSMats Bryntse

Build software like a bag of marbles, not a castle of LEGO®Hannes Lowette

AngularJSYogesh L

Spring data jpa are used to develop spring applicationsmichaelaaron25322

Cypress Testing.pptxJasmeenShrestha

Beyond Domino DesignerPaul Withers

DevOps: Automate all the thingsMat Mannion

Frontend architecture design for large(r) team finalChadchapol Vittavutkarnvej

Professionalizing the Front-endJordi Anguela

Webcomponents are your frameworks best friendFilip Bruun Bech-Larsen

Automate it with Azure FunctionsJaap Brasser

Add-On Development: EE Expects that Every Developer will do his Dutyreedmaniac

Ähnlich wie Pp js conf_2015 (20)

Effective .NET Core Unit Testing with SQLite and Dapper

From Pilot to Product - Morning@Lohika

Effective .NET Core Unit Testing with SQLite and Dapper

Learn from my Mistakes - Building Better Solutions in SPFx

A Journey through the JDKs (Java 9 to Java 11)

Modern Web-site Development Pipeline

APEX Application Lifecycle and Deployment 20220714.pdf

Profiling and Tuning a Web Application - The Dirty Details

Building Rich Internet Applications with Ext JS

Build software like a bag of marbles, not a castle of LEGO®

AngularJS

Spring data jpa are used to develop spring applications

Cypress Testing.pptx

Beyond Domino Designer

DevOps: Automate all the things

Frontend architecture design for large(r) team final

Professionalizing the Front-end

Webcomponents are your frameworks best friend

Automate it with Azure Functions

Add-On Development: EE Expects that Every Developer will do his Duty

Kürzlich hochgeladen

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited

08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

Understanding the Laravel MVC ArchitecturePixlogix Infotech

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55

Google AI Hackathon: LLM based Evaluator for RAGSujit Pal

Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

Boost PC performance: How more available memory can improve productivityPrincipled Technologies

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh

IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

A Call to Action for Generative AI in 2024Results

Histor y of HAM Radio presentation slidevu2urc

Kürzlich hochgeladen (20)

How to Troubleshoot Apps for the Modern Connected Worker

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf

CNv6 Instructor Chapter 6 Quality of Service

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

Understanding the Laravel MVC Architecture

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...

Google AI Hackathon: LLM based Evaluator for RAG

Unblocking The Main Thread Solving ANRs and Frozen Frames

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service

Boost PC performance: How more available memory can improve productivity

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi

IAC 2024 - IA Fast Track to Search Focused AI Solutions

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

Handwritten Text Recognition for manuscripts and early printed texts

A Call to Action for Generative AI in 2024

Histor y of HAM Radio presentation slide

Pp js conf_2015

1. Confidential and Proprietary1 BUILDING STANDALONE COMPONENTS AS JAVASCRIPT WIDGETS Abhishek Agashe

2. Confidential and Proprietary2 • Building small reusable isolated components • Multiple technology stacks JAVA/C++/NODESJS .. • Shared components between multiple projects/teams. WHERE WE STARTED ….

3. Confidential and Proprietary3 • Isolating logic in library/helper files • Ctrl C Ctrl V • npm modules and bower components PAST SOLUTIONS

4. Confidential and Proprietary4 • Different technology stacks [JAVA/C++] • Required teams to go through entire push cycle to get updates. • Out of sync components. NPM AND BOWER DIDN’T WORK FOR US

5. Confidential and Proprietary5 • Iframes (Don't hate me for this) • javascript widgets. CURRENT SOLUTIONS ??

6. Confidential and Proprietary6 • Component as standalone application. • Integration steps: HOW DO WIDGETS WORK ? <script src= ‘/components/awesomewidgets.js’/> <script> if(component) { component.init( <customization params>); } </script> OR <body data-<param> = “some data” />

7. Confidential and Proprietary7 • Activation flow • Merchant header and footer CASE STUDY

8. Confidential and Proprietary8 Widget App build .build/templates/US/en/header.js .build/templates/DE/de/header.js Generate widget task .build/js/US/en/headerfooter.js .build/js/DE/de/headerfooter.js Get compiled template Dustjs , jQuery … Library javascript files with behavioral logic

9. Confidential and Proprietary9 Header Footer App Merchant App Request header-footer.js Response header-footer.js Compiled dust templates CDN Request header-footer.css Response header-footer.css Render the template Fires ajax calls in background to get dynamic data Response {JSON} Renders partials/components based on response

10. Confidential and Proprietary10 • Technology stack agnostic • Push updates rather than pull • Same look and feel across teams and applications • Release cycles drastically reduced. • Template caching. • Easy integration. • Isolated testing • No coordination required between teams. BENEFITS

11. Confidential and Proprietary11 • Significant efforts to integrate with legacy code bases • Not easy to test locally during integration, need to use npm proxy or CORS. • Single point of failure. • Might have performance implications based on size of javascript. • Component CSS can get overwritten CAUTION

12. Confidential and Proprietary12 https://github.paypal.com/Customers- R/bizcomponentsnodeweb https://github.paypal.com/Customers- R/bizcomponentsnodeweb/blob/master/tasks/generate- header.js https://www.paypal.com/businessdocs/inappdocs/pps# REFERENCES

13. Confidential and Proprietary13 Thank You Q/A

Hinweis der Redaktion

https://www.paypal.com/bizcomponents/js/US/en/header-footer/header-footer.js
https://www.paypal.com/businessdocs/inappdocs/pps paypal_hawk_us1@yahoo.com
Iframe solves some of these concerns