Successfully reported this slideshow.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Front End Abstractions at Facebook

  1. Front-end Abstractions Tom Occhino June
  2. Agenda Intro Resources Interaction Rendering Conclusion
  3. Intro and some info
  4. Intro Vocabulary ▪ amped excited, psyched ▪ clowny comical, silly ▪ j0nx stuff, things ▪ lolzy crazy, laugh inducing
  5. Intro Overview ▪ Front-end systems ▪ Server side (PHP) + Client side (JS) integration ▪ High level overview ▪ What is it? ▪ How does it work? ▪ Why did we build it?
  6. Resource management
  7. Resources Haste Bootloader Primer
  8. Resources Haste ▪ What is it? ▪ package and dependency management for CSS & JS
  9. Resources Haste ▪ How does it work? ▪ declarative file annotation ▪ @provides single unique identifier ▪ @requires multiple resources ▪ other features ▪ integration ▪ require_static function ▪ analyze_resources script
  10. Resources Haste ▪ Why did we build it? ▪ agility ▪ simplicity ▪ performance ▪ intelligently constructed packages ▪ crazy ass algorithms ▪ no, seriously
  11. Resources Bootloader ▪ What is it? ▪ on demand loading and unloading of static resources ▪ includes all required resources
  12. Resources Bootloader ▪ How does it work? ▪ loads resources through dynamic script injection ▪ executes callback after all resources are loaded ▪ built to work with Haste ▪ @suggest ▪ bootloadEnable
  13. Resources Bootloader ▪ Why did we build it? ▪ performance ▪ reduce waste
  14. Resources Primer ▪ What is it? ▪ That’s the whole file >
  15. Resources Primer ▪ What is it? ▪ most interactions are simple ▪ GET (click link) ▪ POST (submit form) ▪ aims to be the / solution ▪ delete tons of boilerplate JavaScript ▪ at one point about MB of JS on the homepage
  16. Resources Primer we had about MB of JS on the homepage
  17. Resources Primer wtf!?
  18. Resources Primer ▪ How does it work? ▪ small JS file in the <head> ▪ global event listener ▪ looks for attributes like ajaxify ▪ bootload necessary components ▪ perform action when ready
  19. Resources Primer ▪ Why did we build it? ▪ move JS to bottom of the page (roadrunner) ▪ sick of doing the same crap over and over ▪ we had like, a meg of JS blocking rendering
  20. Interaction systems
  21. Interaction LinkController PageTransitions Quickling PageCache
  22. Interaction LinkController ▪ What is it? ▪ similar to Primer listens for click events ▪ How does it work? ▪ global mousedown / keydown event ▪ filter out certain clicks ▪ invoke ‘handlers’ for relevant clicks
  23. Interaction PageTransitions ▪ What is it? ▪ prevent a full page load if we can do something better ▪ How does it work? ▪ register handlers for your component ▪ uri is passed into the handler ▪ look for patterns and handle when possible ▪ kill the default event if handled
  24. Interaction Quickling ▪ What is it? ▪ a special ‘default’ PageTransition
  25. Interaction Quickling ▪ How does it work? ▪ fallback PageTransition handler ▪ simulate browser events Arbiter ▪ store history HistoryManager ▪ appear busy BusyUIManager (!?) ▪ iframe transport ▪ wait cursors
  26. Interaction Quickling ▪ Drawbacks ▪ css rules over time ▪ memory consumption ▪ complexity ▪ Current Status ▪ IE, FF, Chrome (> ) ▪ ~ of page loads are through Quickling ▪ up to ~ reduction in render time
  27. Interaction PageCache ▪ What is it? ▪ local cache for visited pages
  28. Interaction PageCache ▪ How does it work? ▪ black magic ▪ built on top of Quickling ▪ cache server responses ▪ pull from cache when there’s a match ▪ replay all new actions
  29. Interaction PageCache ▪ Drawbacks ▪ complexity ▪ Current Status ▪ enabled for homepage ▪ ~ savings on page hits to home ▪ up to - x speedup over Quickling alone
  30. Interaction All Systems ▪ Why did we build them? ▪ performance ▪ full page loads are more expensive than partial ▪ better user experience ▪ especially for things like chat
  31. Interaction Normal Quicklng PageCache Worldwide TTI , , , , , , , , , , , , , p p p p Footnote: Facebook Internal Data, June
  32. Rendering abstractions
  33. Rendering Pagelets Early Flush BigPipe
  34. Rendering Pagelets ▪ What are they? ▪ technique for structuring pages ▪ How do they work? ▪ parallel generation ▪ can be refreshed independently ▪ Why did we build it? ▪ flexibility ▪ good design
  35. Rendering Early Flush ▪ What is it? ▪ flush the html response in two parts ▪ How does it work? ▪ send the <head> to the browser asap ▪ browser starts downloading resources ▪ server is still generating the page ▪ Why did we build it? ▪ overlap gen+render time
  36. Rendering BigPipe
  37. Rendering BigPipe ▪ What is it? ▪ progressive rendering of pages ▪ How does it work? ▪ send down page skeleton ▪ page content in scripts as completed ▪ Why did we build it ▪ LittlePipe was too slow ▪ performance ( . -> . )
  38. Summary and thoughts
  39. http://www.facebook.com/Engineering http://www.facebook.com/careers

×