0
Tictacs:Yahoo! Mail                             add-ons                             Gopal Venkatesan @g13n,               ...
Quick Demo ...Wednesday, November 14, 12
Yahoo! MailWednesday, November 14, 12
Yahoo! Mail              • Full-fledged Ajax applicationWednesday, November 14, 12
Yahoo! Mail              • Full-fledged Ajax application              • (One of the) largest YUI3 based web                ...
Yahoo! Mail              • Full-fledged Ajax application              • (One of the) largest YUI3 based web                ...
Yahoo! Mail              • Full-fledged Ajax application              • (One of the) largest YUI3 based web                ...
What is a Tictac?Wednesday, November 14, 12
What is a Tictac?              • Yahoo! Mail add-onWednesday, November 14, 12
What is a Tictac?              • Yahoo! Mail add-on              • Enhances UI, experienceWednesday, November 14, 12
What is a Tictac?              • Yahoo! Mail add-on              • Enhances UI, experience              • Examples:Wednesd...
What is a Tictac?              • Yahoo! Mail add-on              • Enhances UI, experience              • Examples:       ...
What is a Tictac?              • Yahoo! Mail add-on              • Enhances UI, experience              • Examples:       ...
What is a Tictac?              • Yahoo! Mail add-on              • Enhances UI, experience              • Examples:       ...
Architecture OverviewWednesday, November 14, 12
Architecture Overview                    Yahoo!                     MailWednesday, November 14, 12
Architecture Overview                    Yahoo!                     Mail                  Tictac LoaderWednesday, November...
Architecture Overview                    Yahoo!                     Mail                  Tictac LoaderWednesday, November...
Architecture Overview                    Yahoo!                     Mail                  Tictac Loader                   ...
Architecture Overview                    Yahoo!                     Mail                  Tictac Loader                   ...
Architecture Overview                    Yahoo!                     Mail                  Tictac Loader                   ...
Architecture Overview                    Yahoo!                     Mail                  Tictac Loader                   ...
App Config          {                      name: “attachment-app”,                      url: “/path/to/main.js”,           ...
DeploymentWednesday, November 14, 12
Deployment              • App configuration dictates if its live/notWednesday, November 14, 12
Deployment              • App configuration dictates if its live/not              • Upon commit the configurations are      ...
How it works?Wednesday, November 14, 12
How it works?              • Config reader (PHP) reads application                     config from CloudWednesday, November ...
How it works?              • Config reader (PHP) reads application                     config from Cloud              • Sets...
How it works?              • Config reader (PHP) reads application                     config from Cloud              • Sets...
Client-side Code          // modByEvent: { event: [ app1,          app2, ... ], ... }          Y.Object.each(modsByEvent, ...
Client-side Code          Y.Object.each(modsByEvent,                function (moduleList, event) {                      Y....
Client-side Code          Y.Object.each(modsByEvent,               function (moduleList, event) {                     Y.on...
Client-side Code          Y.Object.each(modsByEvent,              function (moduleList, event) {                   Y.once(...
Tictacs are usually          WidgetsWednesday, November 14, 12
Tictacs are usually          Widgets              • YUI.add()Wednesday, November 14, 12
Tictacs are usually          Widgets              • YUI.add()              • Y.extend(Tictac,Y.Widget, { /* ... */ })Wedne...
Tictacs are usually          Widgets              • YUI.add()              • Y.extend(Tictac,Y.Widget, { /* ... */ })     ...
Tictacs are usually          Widgets              • YUI.add()              • Y.extend(Tictac,Y.Widget, { /* ... */ })     ...
ConclusionWednesday, November 14, 12
Conclusion              • Not tied to Yahoo! Mail release cycleWednesday, November 14, 12
Conclusion              • Not tied to Yahoo! Mail release cycle              • Loose coupling between Mail and the add-   ...
Conclusion              • Not tied to Yahoo! Mail release cycle              • Loose coupling between Mail and the add-   ...
Conclusion              • Not tied to Yahoo! Mail release cycle              • Loose coupling between Mail and the add-   ...
That’s it!                 @g13nWednesday, November 14, 12
Upcoming SlideShare
Loading in...5
×

Tictacs: Yahoo! Mail add-ons

2,297

Published on

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

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

No notes for slide

Transcript of "Tictacs: Yahoo! Mail add-ons"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×