SlideShare a Scribd company logo
1 of 30
 
Building   Fast  3rd-Party  Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June 2010 [email_address] [email_address] Lessons learned from the Meebo Bar Martin Hunt and Marcus Westin
The Meebo Bar A customizable site bar with real-time social interaction
Meebo Bar, a 3rd Party Webapp ,[object Object],Loads on every page Interacts with the page JavaScript, CSS, Images & HTML How do we make it respectful? 
3rd Party Webapps The Challenge ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],How?
3rd Party Webapps: How? ,[object Object],[object Object],[object Object],[object Object],[object Object],Tools Techniques
Meebo Bar embed code ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Initializing 3rd Party Webapps Script Tag append a script tag using JavaScript to the head of the document Commonly accepted, but... Inline JS <script src=&quot;&quot;> easy for publishers to add blocks the page in all browsers XMLHttpRequests Asynchronous, non-blocking same-domain in most browsers Iframe <iframe src=&quot;&quot;> load an HTML file in an iframe Requires HTML file on the hosting site
Accepted script loading code ,[object Object],[object Object],[object Object],[object Object],[object Object]
Don't block the page! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],are there alternative nonblocking methods?
Iframed JS ,[object Object],[object Object],[object Object]
Iframed JS -  the solution      var  iframe  =   document . createElement ( 'iframe' ),          doc  =  iframe.contentWindow. document;      doc. open (). write ( '<body onload=&quot;appendScriptTag()&quot;>' )            doc. close ()
More About Iframes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Defer Execution
Defer Execution ,[object Object],[object Object],[object Object]
Defer Execution Example In-page sharing ,[object Object]
Defer Execution Example In-page sharing ,[object Object]
Defer Execution Example In-page sharing ,[object Object]
Defer Execution Example In-page sharing
Naive implementation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],O(N) O(M) O(N*M)
Deferred implementation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],O(1) Page finishes loading
Modularize & Lazy Load ,[object Object],1-1 Messaging connect to all the IM networks Broadcasting publishers send new content to users Social Networking receive updates about your friends' activities Sharing share site content to Facebook, Twitter, Buzz, and other sites Site Widgets site-specific widgets: videos, menus, navigation tools, etc.
Modularize & Lazy Load ,[object Object],[object Object],[object Object],[object Object]
Loading Images Spriting and preloading is  hard Still creates additional HTTP requests Difficult to automate Embed images into CSS instead DataURIs and MHTML files Details on the Meebo devblog (http://mee.bo/cssimages)
Use Vector Graphics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],Without images With images
Tools -  use them! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Perceived Performance ,[object Object],[object Object],[object Object],[object Object],[object Object]
Questions? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
  ,[object Object]

More Related Content

What's hot

Use Powershell to make your life easy.
Use Powershell to make your life easy.Use Powershell to make your life easy.
Use Powershell to make your life easy.Aman Dhally
 
BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesedm00se
 
Technical SEO for WordPress - 2019 edition
Technical SEO for WordPress - 2019 editionTechnical SEO for WordPress - 2019 edition
Technical SEO for WordPress - 2019 editionOtto Kekäläinen
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...Otto Kekäläinen
 
Web Components: Web back to future.
Web Components: Web back to future.Web Components: Web back to future.
Web Components: Web back to future.GlobalLogic Ukraine
 
Introduction to Wordpress (Research Based)
Introduction to Wordpress (Research Based)Introduction to Wordpress (Research Based)
Introduction to Wordpress (Research Based)Anjum Hashir
 
Kickstarter Your Node.JS Application
Kickstarter Your Node.JS ApplicationKickstarter Your Node.JS Application
Kickstarter Your Node.JS ApplicationHengki Sihombing
 
Introducing asp.net web pages 2
Introducing asp.net web pages 2Introducing asp.net web pages 2
Introducing asp.net web pages 2Uh-meet Thapa
 
Build the mobile web you want
Build the mobile web you wantBuild the mobile web you want
Build the mobile web you wantk88hudson
 
WP-CLI For The Win
WP-CLI For The WinWP-CLI For The Win
WP-CLI For The WinMicah Wood
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedVijay Rayapati
 
Effective TDD - Less is more
Effective TDD - Less is moreEffective TDD - Less is more
Effective TDD - Less is moreBen Lau
 
Wordpress Profitability for Agencies, Firms, and Freelancers
Wordpress Profitability for Agencies, Firms, and FreelancersWordpress Profitability for Agencies, Firms, and Freelancers
Wordpress Profitability for Agencies, Firms, and FreelancersCotton Rohrscheib
 
Harness the power of wordpress
Harness the power of wordpressHarness the power of wordpress
Harness the power of wordpressJustin Ferrell
 
WordPress Security : What We Learnt When We Were Hacked : WordCamp Mumbai 2017
WordPress Security : What We Learnt When We Were Hacked : WordCamp Mumbai 2017WordPress Security : What We Learnt When We Were Hacked : WordCamp Mumbai 2017
WordPress Security : What We Learnt When We Were Hacked : WordCamp Mumbai 2017Bhushan Jawle
 
Untangling spring week8
Untangling spring week8Untangling spring week8
Untangling spring week8Derek Jacoby
 

What's hot (20)

Use Powershell to make your life easy.
Use Powershell to make your life easy.Use Powershell to make your life easy.
Use Powershell to make your life easy.
 
BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages
 
Technical SEO for WordPress - 2019 edition
Technical SEO for WordPress - 2019 editionTechnical SEO for WordPress - 2019 edition
Technical SEO for WordPress - 2019 edition
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
 
Web Components: Web back to future.
Web Components: Web back to future.Web Components: Web back to future.
Web Components: Web back to future.
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
 
Introduction to Wordpress (Research Based)
Introduction to Wordpress (Research Based)Introduction to Wordpress (Research Based)
Introduction to Wordpress (Research Based)
 
Kickstarter Your Node.JS Application
Kickstarter Your Node.JS ApplicationKickstarter Your Node.JS Application
Kickstarter Your Node.JS Application
 
12-2015-Meetup
12-2015-Meetup12-2015-Meetup
12-2015-Meetup
 
Introducing asp.net web pages 2
Introducing asp.net web pages 2Introducing asp.net web pages 2
Introducing asp.net web pages 2
 
Jquery
JqueryJquery
Jquery
 
Build the mobile web you want
Build the mobile web you wantBuild the mobile web you want
Build the mobile web you want
 
WP-CLI For The Win
WP-CLI For The WinWP-CLI For The Win
WP-CLI For The Win
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For Speed
 
Effective TDD - Less is more
Effective TDD - Less is moreEffective TDD - Less is more
Effective TDD - Less is more
 
Wordpress Profitability for Agencies, Firms, and Freelancers
Wordpress Profitability for Agencies, Firms, and FreelancersWordpress Profitability for Agencies, Firms, and Freelancers
Wordpress Profitability for Agencies, Firms, and Freelancers
 
Harness the power of wordpress
Harness the power of wordpressHarness the power of wordpress
Harness the power of wordpress
 
Web dev syllabus
Web dev syllabusWeb dev syllabus
Web dev syllabus
 
WordPress Security : What We Learnt When We Were Hacked : WordCamp Mumbai 2017
WordPress Security : What We Learnt When We Were Hacked : WordCamp Mumbai 2017WordPress Security : What We Learnt When We Were Hacked : WordCamp Mumbai 2017
WordPress Security : What We Learnt When We Were Hacked : WordCamp Mumbai 2017
 
Untangling spring week8
Untangling spring week8Untangling spring week8
Untangling spring week8
 

Viewers also liked

Real World Haskell: Lecture 5
Real World Haskell: Lecture 5Real World Haskell: Lecture 5
Real World Haskell: Lecture 5Bryan O'Sullivan
 
From Javascript To Haskell
From Javascript To HaskellFrom Javascript To Haskell
From Javascript To Haskellujihisa
 
Keynote ujihisa.vim#2
Keynote ujihisa.vim#2Keynote ujihisa.vim#2
Keynote ujihisa.vim#2ujihisa
 
Real World Haskell: Lecture 6
Real World Haskell: Lecture 6Real World Haskell: Lecture 6
Real World Haskell: Lecture 6Bryan O'Sullivan
 
Real World Haskell: Lecture 3
Real World Haskell: Lecture 3Real World Haskell: Lecture 3
Real World Haskell: Lecture 3Bryan O'Sullivan
 
From Ruby to Haskell (Kansai Yami RubyKaigi)
From Ruby to Haskell (Kansai Yami RubyKaigi)From Ruby to Haskell (Kansai Yami RubyKaigi)
From Ruby to Haskell (Kansai Yami RubyKaigi)ujihisa
 

Viewers also liked (6)

Real World Haskell: Lecture 5
Real World Haskell: Lecture 5Real World Haskell: Lecture 5
Real World Haskell: Lecture 5
 
From Javascript To Haskell
From Javascript To HaskellFrom Javascript To Haskell
From Javascript To Haskell
 
Keynote ujihisa.vim#2
Keynote ujihisa.vim#2Keynote ujihisa.vim#2
Keynote ujihisa.vim#2
 
Real World Haskell: Lecture 6
Real World Haskell: Lecture 6Real World Haskell: Lecture 6
Real World Haskell: Lecture 6
 
Real World Haskell: Lecture 3
Real World Haskell: Lecture 3Real World Haskell: Lecture 3
Real World Haskell: Lecture 3
 
From Ruby to Haskell (Kansai Yami RubyKaigi)
From Ruby to Haskell (Kansai Yami RubyKaigi)From Ruby to Haskell (Kansai Yami RubyKaigi)
From Ruby to Haskell (Kansai Yami RubyKaigi)
 

Similar to Building fast webapps, fast - Velocity 2010

Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentRandy Connolly
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesStoyan Stefanov
 
Understanding Web Applications and Web Testing Tools - QAConf
Understanding Web Applications and Web Testing Tools - QAConfUnderstanding Web Applications and Web Testing Tools - QAConf
Understanding Web Applications and Web Testing Tools - QAConfnarayanraman
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moondavejohnson
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesSteve Souders
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 
Having Fun Building Web Applications (Day 1 Slides)
Having Fun Building Web Applications (Day 1 Slides)Having Fun Building Web Applications (Day 1 Slides)
Having Fun Building Web Applications (Day 1 Slides)Clarence Ngoh
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application developmentzonathen
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan
 
DevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp NetDevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp NetAdil Mughal
 
Using HttpWatch Plug-in with Selenium Automation in Java
Using HttpWatch Plug-in with Selenium Automation in JavaUsing HttpWatch Plug-in with Selenium Automation in Java
Using HttpWatch Plug-in with Selenium Automation in JavaSandeep Tol
 

Similar to Building fast webapps, fast - Velocity 2010 (20)

Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practices
 
Understanding Web Applications and Web Testing Tools - QAConf
Understanding Web Applications and Web Testing Tools - QAConfUnderstanding Web Applications and Web Testing Tools - QAConf
Understanding Web Applications and Web Testing Tools - QAConf
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web Sites
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
Unusual Web Bugs
Unusual Web BugsUnusual Web Bugs
Unusual Web Bugs
 
Web Bugs
Web BugsWeb Bugs
Web Bugs
 
Having Fun Building Web Applications (Day 1 Slides)
Having Fun Building Web Applications (Day 1 Slides)Having Fun Building Web Applications (Day 1 Slides)
Having Fun Building Web Applications (Day 1 Slides)
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
HTML5
HTML5HTML5
HTML5
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
 
Html5
Html5Html5
Html5
 
Web design
Web designWeb design
Web design
 
DevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp NetDevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp Net
 
Using HttpWatch Plug-in with Selenium Automation in Java
Using HttpWatch Plug-in with Selenium Automation in JavaUsing HttpWatch Plug-in with Selenium Automation in Java
Using HttpWatch Plug-in with Selenium Automation in Java
 

Recently uploaded

Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 

Recently uploaded (20)

Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 

Building fast webapps, fast - Velocity 2010

  • 1.  
  • 2. Building Fast  3rd-Party  Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June 2010 [email_address] [email_address] Lessons learned from the Meebo Bar Martin Hunt and Marcus Westin
  • 3. The Meebo Bar A customizable site bar with real-time social interaction
  • 4.
  • 5.
  • 6.
  • 7.
  • 8. Initializing 3rd Party Webapps Script Tag append a script tag using JavaScript to the head of the document Commonly accepted, but... Inline JS <script src=&quot;&quot;> easy for publishers to add blocks the page in all browsers XMLHttpRequests Asynchronous, non-blocking same-domain in most browsers Iframe <iframe src=&quot;&quot;> load an HTML file in an iframe Requires HTML file on the hosting site
  • 9.
  • 10.
  • 11.
  • 12. Iframed JS - the solution      var iframe = document . createElement ( 'iframe' ),          doc = iframe.contentWindow. document;      doc. open (). write ( '<body onload=&quot;appendScriptTag()&quot;>' )            doc. close ()
  • 13.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. Defer Execution Example In-page sharing
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. Loading Images Spriting and preloading is hard Still creates additional HTTP requests Difficult to automate Embed images into CSS instead DataURIs and MHTML files Details on the Meebo devblog (http://mee.bo/cssimages)
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.

Editor's Notes

  1. MARCUS Martin &amp; Marcus We&apos;re here from Meebo commonly known as meebo.com today: Meebo is better known for the Meebo Bar
  2. MARCUS What is the Meebo Bar? Well, if you have a site, then you can add the Meebo Bar to your site and gain a number of features, such as social IM, sharing, ad revenue and more. The Meebo Bar launched almost 2 years ago. Since then we&apos;ve gone through 9 major iterations, and will soon be releasing Version 10. It will be the most technically advanced and best performing version of the bar as of yet. Since it&apos;s launch, the Meebo Bar has grown to more than 6000 websites and reaches more than 130 Million people every month The Meebo Bar lives inside of the hosting site. Because of its vast reach, it is crucial that the Meebo Bar does not slow down the site that it is on. If it does, than we slow down a significant portion of the web.
  3. MARCUS The Meebo Bar is a 3PWA. With 3PWA we mean javascript, css, images and HTML loaded onto a stie from a third party provider. 3PWAs commonly interact with the page, and often load on every page The question is then how do we make it run fast?  How do we make it respectful of its hosting environment?
  4. MARCUS More specifically, the challenge is to  Load lots of features Load those features fast Without Blocking rendering or onload and Without affecting the user experience in a negative way. How can we do that? Martin knows alot about how we can do that
  5. MARTIN You&apos;re already familiar with some tools - CDN - GZIP - PNG Crush We&apos;ll cover some tools &amp; techniques you&apos;re probably not familiar with Traditional 3rd Party Web App loading blocks - this is bad Defer code execution to not affect load time Optimize graphics and reduce image network requests Finally, we&apos;ll talk about deferring
  6. MARTIN Meebo Embed Code
  7. MARTIN Concerns Blocking page rendering Blocking network traffic Execute quickly and return control of the browser Only one piece of JS can run at a time! Should not depend on your servers
  8. MARTIN http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
  9. MARTIN Concerns Blocking page rendering Blocking network traffic
  10. why might you not want to use an iframe? there are several problems that you might notice
  11. Out sample code for Loading asynchronous and nonblocking javascript same-domain iframe      with access to parent page      without blocking parent onload
  12. MARTIN iframe creation times are insignificant iframes guarantee sandboxing of your javascript
  13. MARCUS Lots of things happen in browser during load Parse, DOM, Layout, Render Then, realtively little happens As 3PWA developers we should take advantage of this! Let&apos;s look at an example
  14. MARCUS Any page with the Meebo Bar can have its videos, images and links made sharable by drag and drop. This means that when the page loads...
  15. MARCUS This means that when the page loads, the Meebo Bar scans the page for images, videos and links, and make them sharable When the user hovers...
  16. MARCUS When the user hovers over a sharable image, we display a drop shadow to indicate that this image is sharable by drag and drop On mouse down...
  17. MARCUS On mouse down, we display the Meebo Share UI, which allows the user to share the image to a number of social networks and any buddy in the buddy list. For each sharable item, Meebo infers the title, thumbnail and URL from the page. We allow for the site to specify these attributes on any parent node of a sharable element. Let&apos;s look at a naive implementation of this functionality
  18. MARCUS In this implementation, we loop over all elements that should be made sharable, look up the metadata for that element, and attach a mousedown event handler to that element lookupMetadata in turn climbs the DOM of the sharable element and inspects all parent nodes for metadata. Now, we want elements on the page to be made sharable right away, so we run this during page load.  A complex page can easily have tens of images and hundreds of links. Processing them all during loading of the page becomes noticable on all web browsers. Formally, the runtime of this approach is O(N * M), where N is the number of sharable elements and M is the number of ancestors of the sharable elements. Using the concept of deferred execution, we can do better.
  19. MARCUS The key to the concept of deferring is do as little as possible up front, and delay as much of the execution until as late as possible. In this example, we attach a single mousedown event handler to the entire document. Now, whenever the user does a mousedown, we check to see if the element the user moused down on is a sharable element. If it is, then go ahead and infer the metadata, and attach the remaining event handlers required for the drag and drop share UI This way we can go ahead and set up sharing right away during load without interfearing with the loading of the page. Formally, the runtime of this algorithm is constant on load, and linear when the user mouses down on a sharable elements. Both are unnoticable in all browsers.
  20. MARCUS That&apos;s a lot of code! And CSS and images! Break them down by features and load the code when the user needs it
  21. MARTIN
  22. MARTIN
  23. MARTIN SVG &amp; MHTML Meebo Bar   - Chrome   - Gradients   - Drop shadow   - No Images!
  24. MARTIN (overview slide)
  25. MARTIN We need better tools for measuring webapp performance!
  26. MARTIN