Pp js conf_2015

•Télécharger en tant que PPTX, PDF•

0 j'aime•318 vues

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

Recommandé

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

Recommandé

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

Contenu connexe

Tendances

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

Tendances (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

En vedette

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

En vedette (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

Similaire à 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

Similaire à 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

Dernier

DBX First Quarter 2024 Investor PresentationDropbox

Apidays New York 2024 - The value of a flexible API Management solution for O...apidays

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

Architecting Cloud Native ApplicationsWSO2

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

A Beginners Guide to Building a RAG App Using Open Source MilvusZilliz

presentation ICT roal in 21st century educationjfdjdjcjdnsjd

Corporate and higher education May webinar.pptxRustici Software

FWD Group - Insurer Innovation Award 2024The Digital Insurer

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays

MINDCTI Revenue Release Quarter One 2024MIND CTI

Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbuapidays

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

Automating Google Workspace (GWS) & more with Apps Scriptwesley chun

Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

MS Copilot expands with MS Graph connectorsNanddeep Nachan

Manulife - Insurer Transformation Award 2024The Digital Insurer

GenAI Risks & Security Meetup 01052024.pdflior mazor

A Year of the Servo Reboot: Where Are We Now?Igalia

Dernier (20)

DBX First Quarter 2024 Investor Presentation

Apidays New York 2024 - The value of a flexible API Management solution for O...

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

Architecting Cloud Native Applications

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

A Beginners Guide to Building a RAG App Using Open Source Milvus

presentation ICT roal in 21st century education

Corporate and higher education May webinar.pptx

FWD Group - Insurer Innovation Award 2024

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

MINDCTI Revenue Release Quarter One 2024

Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Automating Google Workspace (GWS) & more with Apps Script

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Axa Assurance Maroc - Insurer Innovation Award 2024

MS Copilot expands with MS Graph connectors

Manulife - Insurer Transformation Award 2024

GenAI Risks & Security Meetup 01052024.pdf

A Year of the Servo Reboot: Where Are We Now?

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

Notes de l'éditeur

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