Your SlideShare is downloading. ×
0
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Tictacs: Yahoo! Mail add-ons
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tictacs: Yahoo! Mail add-ons

2,277

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,277
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Tictacs:Yahoo! Mail add-ons Gopal Venkatesan @g13n, Yahoo! Mail FrontEnd EngineerWednesday, November 14, 12
  2. Quick Demo ...Wednesday, November 14, 12
  3. Yahoo! MailWednesday, November 14, 12
  4. Yahoo! Mail • Full-fledged Ajax applicationWednesday, November 14, 12
  5. Yahoo! Mail • Full-fledged Ajax application • (One of the) largest YUI3 based web applicationWednesday, November 14, 12
  6. Yahoo! Mail • Full-fledged Ajax application • (One of the) largest YUI3 based web application • Built as YUI3 modules with build-time dependency resolution for performanceWednesday, November 14, 12
  7. Yahoo! Mail • Full-fledged Ajax application • (One of the) largest YUI3 based web application • Built as YUI3 modules with build-time dependency resolution for performance • Extensively relies on YUI3 event, base and widget infrastructureWednesday, November 14, 12
  8. What is a Tictac?Wednesday, November 14, 12
  9. What is a Tictac? • Yahoo! Mail add-onWednesday, November 14, 12
  10. What is a Tictac? • Yahoo! Mail add-on • Enhances UI, experienceWednesday, November 14, 12
  11. What is a Tictac? • Yahoo! Mail add-on • Enhances UI, experience • Examples:Wednesday, November 14, 12
  12. What is a Tictac? • Yahoo! Mail add-on • Enhances UI, experience • Examples: • AttachmentsWednesday, November 14, 12
  13. What is a Tictac? • Yahoo! Mail add-on • Enhances UI, experience • Examples: • Attachments • PhotosWednesday, November 14, 12
  14. What is a Tictac? • Yahoo! Mail add-on • Enhances UI, experience • Examples: • Attachments • Photos • Calendar, RSVPWednesday, November 14, 12
  15. Architecture OverviewWednesday, November 14, 12
  16. Architecture Overview Yahoo! MailWednesday, November 14, 12
  17. Architecture Overview Yahoo! Mail Tictac LoaderWednesday, November 14, 12
  18. Architecture Overview Yahoo! Mail Tictac LoaderWednesday, November 14, 12
  19. Architecture Overview Yahoo! Mail Tictac Loader Read config from CloudWednesday, November 14, 12
  20. Architecture Overview Yahoo! Mail Tictac Loader Read config from CloudWednesday, November 14, 12
  21. Architecture Overview Yahoo! Mail Tictac Loader Bind add-ons to Mail [YUI3] events Read config from CloudWednesday, November 14, 12
  22. Architecture Overview Yahoo! Mail Tictac Loader Bind add-ons to Mail [YUI3] events Invoke Y.Tictac[app].loader Read config on Y.after(event) from CloudWednesday, November 14, 12
  23. App Config { name: “attachment-app”, url: “/path/to/main.js”, event: “ymail:message-rendered”, live: true // ... }Wednesday, November 14, 12
  24. DeploymentWednesday, November 14, 12
  25. Deployment • App configuration dictates if its live/notWednesday, November 14, 12
  26. Deployment • App configuration dictates if its live/not • Upon commit the configurations are concatenated and pushed to “cloud”Wednesday, November 14, 12
  27. How it works?Wednesday, November 14, 12
  28. How it works? • Config reader (PHP) reads application config from CloudWednesday, November 14, 12
  29. How it works? • Config reader (PHP) reads application config from Cloud • Sets up YUI_config for app baseWednesday, November 14, 12
  30. How it works? • Config reader (PHP) reads application config from Cloud • Sets up YUI_config for app base • Passes app configuration to JavaScriptWednesday, November 14, 12
  31. Client-side Code // modByEvent: { event: [ app1, app2, ... ], ... } Y.Object.each(modsByEvent, function (moduleList, event) { // ... });Wednesday, November 14, 12
  32. Client-side Code Y.Object.each(modsByEvent, function (moduleList, event) { Y.once(event, function (ev) { }); });Wednesday, November 14, 12
  33. Client-side Code Y.Object.each(modsByEvent, function (moduleList, event) { Y.once(event, function (ev) { Y.use(moduleList, function (Y) { }); }); });Wednesday, November 14, 12
  34. Client-side Code Y.Object.each(modsByEvent, function (moduleList, event) { Y.once(event, function (ev) { Y.use(moduleList, function (Y) { Y.Array.each(moduleList, function (md) { Y.after(event, Y.Tictac[md].loader); }); }); }); });Wednesday, November 14, 12
  35. Tictacs are usually WidgetsWednesday, November 14, 12
  36. Tictacs are usually Widgets • YUI.add()Wednesday, November 14, 12
  37. Tictacs are usually Widgets • YUI.add() • Y.extend(Tictac,Y.Widget, { /* ... */ })Wednesday, November 14, 12
  38. Tictacs are usually Widgets • YUI.add() • Y.extend(Tictac,Y.Widget, { /* ... */ }) • initializer, bindUI, renderUI, syncUIWednesday, November 14, 12
  39. Tictacs are usually Widgets • YUI.add() • Y.extend(Tictac,Y.Widget, { /* ... */ }) • initializer, bindUI, renderUI, syncUI • ATTRS onChange and UI updatesWednesday, November 14, 12
  40. ConclusionWednesday, November 14, 12
  41. Conclusion • Not tied to Yahoo! Mail release cycleWednesday, November 14, 12
  42. Conclusion • Not tied to Yahoo! Mail release cycle • Loose coupling between Mail and the add- on using eventsWednesday, November 14, 12
  43. Conclusion • Not tied to Yahoo! Mail release cycle • Loose coupling between Mail and the add- on using events • Clean API - Base and WidgetWednesday, November 14, 12
  44. Conclusion • Not tied to Yahoo! Mail release cycle • Loose coupling between Mail and the add- on using events • Clean API - Base and Widget • Faster development - syntactic sugar and stuff ...Wednesday, November 14, 12
  45. That’s it! @g13nWednesday, November 14, 12

×