SlideShare una empresa de Scribd logo
1 de 52
Descargar para leer sin conexión
Distributed JavaScript
                        Widgets w/ jQuery
                                   jQueryConf Boston 2010




Sunday, October 17, 2010
Who invited this guy?


                    • Ben Vinegar
                    • Front-end Engineer at Disqus
                    • Former team lead at FreshBooks
                    • Somewhere in there, Guestlist

Sunday, October 17, 2010
•      dis·cuss • dĭ-skŭs'

                    • Distributed commenting platform
                    • Served on over 300k sites
                    • ~200m unique visitors per month

Sunday, October 17, 2010
What’s a distributed
                            JavaScript widget?



Sunday, October 17, 2010
Sunday, October 17, 2010
Sunday, October 17, 2010
Vague definition

                    • Begins with a JavaScript snippet
                    • Lives on somebody else’s website
                    • Visible, interactive UI elements


Sunday, October 17, 2010
Let’s make one



Sunday, October 17, 2010
The pitch




Sunday, October 17, 2010
index.html




Sunday, October 17, 2010
widget.js




Sunday, October 17, 2010
widget.js cont’d




Sunday, October 17, 2010
Where’s jQuery?



Sunday, October 17, 2010
Some choices

                    • Distribute jQuery include with snippet

                    • Copy/paste into widget.js
                    • Dynamic script include from widget.js

Sunday, October 17, 2010
Dynamic include




Sunday, October 17, 2010
More problems



Sunday, October 17, 2010
jQuery conflicts

                    • What if it already exists? (Likely)
                    • Use $.noConflict
                    • Does more than let you use Dojo,
                           Mootools, Prototype ...




Sunday, October 17, 2010
Our jquery.js




Sunday, October 17, 2010
Back to our widget



Sunday, October 17, 2010
widget.js




Sunday, October 17, 2010
How to get this?




Sunday, October 17, 2010
Server-side




Sunday, October 17, 2010
Reading script QS




Sunday, October 17, 2010
Alternatively




Sunday, October 17, 2010
Another approach




Sunday, October 17, 2010
Getting the data



Sunday, October 17, 2010
Talking to the server




Sunday, October 17, 2010
Making the request




Sunday, October 17, 2010
Same-origin policy




Sunday, October 17, 2010
XDR flavours
                    • JSONP
                    • window.postMessage
                    • Server-side proxy
                    • url fragment (#)
                    • window.name
                    • CORS
Sunday, October 17, 2010
There’s a talk for that

                            “Breaking the Cross Domain Barrier”
                                 by Alex Sexton @ TXJS ’10

Sunday, October 17, 2010
JSONP




Sunday, October 17, 2010
JSONP




Sunday, October 17, 2010
postMessage




Sunday, October 17, 2010
postMessage


                    • Lets you send messages to windows/frames
                    • Oh, and receive them too


Sunday, October 17, 2010
postMessage big picture




Sunday, October 17, 2010
requestTalkData




Sunday, October 17, 2010
easyXDM

                    • Exposes a postMessage-like interface to
                           communicate with windows/frames
                    • But backwards compatible with older
                           browsers using whatever-works
                    • http://easyxdm.net

Sunday, October 17, 2010
Home stretch



Sunday, October 17, 2010
Render our data




Sunday, October 17, 2010
renderWidget




Sunday, October 17, 2010
cleanslate.css


                    • Like reset.css, but works on a container
                    • http://github.com/premasagar/cleanslate


Sunday, October 17, 2010
attachEvents




Sunday, October 17, 2010
Sunday, October 17, 2010
A quick note about
                                security


Sunday, October 17, 2010
What if ...




Sunday, October 17, 2010
Play it safe with iframes

                    • Don’t expose vulnerable actions on the
                           website host
                    • Hide them behind an iframe
                    • Restrict endpoint requests to originate
                           from iframe



Sunday, October 17, 2010
Sunday, October 17, 2010
Parting if-I-have-time
                                 wisdom


Sunday, October 17, 2010
Blocking scripts

                    • You can’t guarantee users will put your
                           snippet at the end of the page
                    • Their mistake, but your app’s reputation
                    • Difficult to change later


Sunday, October 17, 2010
Version like a pro

                    • You will inevitably have multiple versions
                    • Can you serve both at the same time, on
                           the same page?
                    • Getting people to upgrade is hard


Sunday, October 17, 2010
Thanks

                    • Ben Vinegar
                    • @bentlegen | http://benv.ca
                    • Disqus is hiring
                           http://disqus.com/jobs




Sunday, October 17, 2010

Más contenido relacionado

La actualidad más candente

Nuxeo World 2013] HOW TO CONTRIBUTE TO THE COMMUNITY - LAURENT DOGUIN
Nuxeo World 2013] HOW TO CONTRIBUTE TO THE COMMUNITY - LAURENT DOGUINNuxeo World 2013] HOW TO CONTRIBUTE TO THE COMMUNITY - LAURENT DOGUIN
Nuxeo World 2013] HOW TO CONTRIBUTE TO THE COMMUNITY - LAURENT DOGUINNuxeo
 
Introduction to Git
Introduction to GitIntroduction to Git
Introduction to Gitjherdman
 
RubyConf UY 2010
RubyConf UY 2010RubyConf UY 2010
RubyConf UY 2010Brian Ford
 
MySQL Sandbox - A toolkit for laziness
MySQL Sandbox - A toolkit for lazinessMySQL Sandbox - A toolkit for laziness
MySQL Sandbox - A toolkit for lazinessGiuseppe Maxia
 
Scareware Traversing the World via Ireland
Scareware Traversing the World via IrelandScareware Traversing the World via Ireland
Scareware Traversing the World via IrelandMark Hillick
 
Architecting for the Enterprise
Architecting for the EnterpriseArchitecting for the Enterprise
Architecting for the EnterpriseSencha
 

La actualidad más candente (8)

Nuxeo World 2013] HOW TO CONTRIBUTE TO THE COMMUNITY - LAURENT DOGUIN
Nuxeo World 2013] HOW TO CONTRIBUTE TO THE COMMUNITY - LAURENT DOGUINNuxeo World 2013] HOW TO CONTRIBUTE TO THE COMMUNITY - LAURENT DOGUIN
Nuxeo World 2013] HOW TO CONTRIBUTE TO THE COMMUNITY - LAURENT DOGUIN
 
Introduction to Git
Introduction to GitIntroduction to Git
Introduction to Git
 
RubyConf UY 2010
RubyConf UY 2010RubyConf UY 2010
RubyConf UY 2010
 
Ruby off Rails
Ruby off RailsRuby off Rails
Ruby off Rails
 
MySQL Sandbox - A toolkit for laziness
MySQL Sandbox - A toolkit for lazinessMySQL Sandbox - A toolkit for laziness
MySQL Sandbox - A toolkit for laziness
 
Scareware Traversing the World via Ireland
Scareware Traversing the World via IrelandScareware Traversing the World via Ireland
Scareware Traversing the World via Ireland
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Architecting for the Enterprise
Architecting for the EnterpriseArchitecting for the Enterprise
Architecting for the Enterprise
 

Similar a Building Distributed JavaScript Widgets with jQuery

Human APIs - expanding the mobile web or are robots coming to JavaScript?
Human APIs - expanding the mobile web or are robots coming to JavaScript? Human APIs - expanding the mobile web or are robots coming to JavaScript?
Human APIs - expanding the mobile web or are robots coming to JavaScript? Nikolai Onken
 
When is a Website Not Enough? Now.
When is a Website Not Enough? Now.When is a Website Not Enough? Now.
When is a Website Not Enough? Now.bethgsanders
 
Unobtrusive CSS
Unobtrusive CSSUnobtrusive CSS
Unobtrusive CSSJohn Hwang
 
Creative Commons: What Every Educator Needs to Know
Creative Commons: What Every Educator Needs to KnowCreative Commons: What Every Educator Needs to Know
Creative Commons: What Every Educator Needs to KnowRodd Lucier
 
Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Group
Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP GroupDeveloping Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Group
Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Groupminddog
 
WordPress Front End Optimizations
WordPress Front End OptimizationsWordPress Front End Optimizations
WordPress Front End OptimizationsScott Taylor
 
OvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programmingOvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programmingTor Björn Minde
 
HTML5 impact on application programming
HTML5 impact on application programmingHTML5 impact on application programming
HTML5 impact on application programmingEricsson Labs
 
Debugging and Profiling Symfony Apps
Debugging and Profiling Symfony AppsDebugging and Profiling Symfony Apps
Debugging and Profiling Symfony AppsAlvaro Videla
 
QueryPath: It's like PHP jQuery in Drupal!
QueryPath: It's like PHP jQuery in Drupal!QueryPath: It's like PHP jQuery in Drupal!
QueryPath: It's like PHP jQuery in Drupal!Matt Butcher
 
Dojo Mobile
Dojo MobileDojo Mobile
Dojo Mobiledylanks
 
HTML5: Toolkits and Gaps
HTML5: Toolkits and GapsHTML5: Toolkits and Gaps
HTML5: Toolkits and Gapsdylanks
 
Debugging your JavaScript
Debugging your JavaScriptDebugging your JavaScript
Debugging your JavaScriptDiogo Antunes
 
GGUG:Practical DSL Design
GGUG:Practical DSL DesignGGUG:Practical DSL Design
GGUG:Practical DSL DesignSkills Matter
 
Mobile Development with uPortal and Infusion
Mobile Development with uPortal and InfusionMobile Development with uPortal and Infusion
Mobile Development with uPortal and Infusioncolinbdclark
 
Mobile, Media & Touch
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & TouchTim Wright
 

Similar a Building Distributed JavaScript Widgets with jQuery (20)

Human APIs - expanding the mobile web or are robots coming to JavaScript?
Human APIs - expanding the mobile web or are robots coming to JavaScript? Human APIs - expanding the mobile web or are robots coming to JavaScript?
Human APIs - expanding the mobile web or are robots coming to JavaScript?
 
Node.js and Ruby
Node.js and RubyNode.js and Ruby
Node.js and Ruby
 
When is a Website Not Enough? Now.
When is a Website Not Enough? Now.When is a Website Not Enough? Now.
When is a Website Not Enough? Now.
 
Symfony in the Cloud
Symfony in the CloudSymfony in the Cloud
Symfony in the Cloud
 
Unobtrusive CSS
Unobtrusive CSSUnobtrusive CSS
Unobtrusive CSS
 
Creative Commons: What Every Educator Needs to Know
Creative Commons: What Every Educator Needs to KnowCreative Commons: What Every Educator Needs to Know
Creative Commons: What Every Educator Needs to Know
 
Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Group
Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP GroupDeveloping Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Group
Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Group
 
WordPress Front End Optimizations
WordPress Front End OptimizationsWordPress Front End Optimizations
WordPress Front End Optimizations
 
OvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programmingOvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programming
 
HTML5 impact on application programming
HTML5 impact on application programmingHTML5 impact on application programming
HTML5 impact on application programming
 
Debugging and Profiling Symfony Apps
Debugging and Profiling Symfony AppsDebugging and Profiling Symfony Apps
Debugging and Profiling Symfony Apps
 
QueryPath: It's like PHP jQuery in Drupal!
QueryPath: It's like PHP jQuery in Drupal!QueryPath: It's like PHP jQuery in Drupal!
QueryPath: It's like PHP jQuery in Drupal!
 
Reef - ESUG 2010
Reef - ESUG 2010Reef - ESUG 2010
Reef - ESUG 2010
 
Dojo Mobile
Dojo MobileDojo Mobile
Dojo Mobile
 
HTML5: Toolkits and Gaps
HTML5: Toolkits and GapsHTML5: Toolkits and Gaps
HTML5: Toolkits and Gaps
 
Debugging your JavaScript
Debugging your JavaScriptDebugging your JavaScript
Debugging your JavaScript
 
Human APIs
Human APIsHuman APIs
Human APIs
 
GGUG:Practical DSL Design
GGUG:Practical DSL DesignGGUG:Practical DSL Design
GGUG:Practical DSL Design
 
Mobile Development with uPortal and Infusion
Mobile Development with uPortal and InfusionMobile Development with uPortal and Infusion
Mobile Development with uPortal and Infusion
 
Mobile, Media & Touch
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & Touch
 

Último

Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Français Patch Tuesday - Avril
Français Patch Tuesday - AvrilFrançais Patch Tuesday - Avril
Français Patch Tuesday - AvrilIvanti
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 

Último (20)

Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Français Patch Tuesday - Avril
Français Patch Tuesday - AvrilFrançais Patch Tuesday - Avril
Français Patch Tuesday - Avril
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 

Building Distributed JavaScript Widgets with jQuery