tictacs: yahoo! mail add-ons

Download Tictacs: Yahoo! Mail add-ons

Post on 22-May-2015

2.239 views

Category:

Technology

0 download

Embed Size (px)

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-edged Ajax applicationWednesday, November 14, 12 5. Yahoo! Mail Full-edged Ajax application (One of the) largest YUI3 based web applicationWednesday, November 14, 12 6. Yahoo! Mail Full-edged 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-edged 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 OverviewYahoo! MailWednesday, November 14, 12 17. Architecture OverviewYahoo! MailTictac LoaderWednesday, November 14, 12 18. Architecture OverviewYahoo! MailTictac LoaderWednesday, November 14, 12 19. Architecture OverviewYahoo! MailTictac Loader Read cong from CloudWednesday, November 14, 12 20. Architecture OverviewYahoo! MailTictac Loader Read cong from CloudWednesday, November 14, 12 21. Architecture OverviewYahoo! MailTictac Loader Bind add-ons toMail [YUI3] events Read cong from CloudWednesday, November 14, 12 22. Architecture OverviewYahoo! MailTictac Loader Bind add-ons toMail [YUI3] eventsInvoke Y.Tictac[app].loader Read congon Y.after(event) from CloudWednesday, November 14, 12 23. App Cong{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 conguration dictates if its live/notWednesday, November 14, 12 26. Deployment App conguration dictates if its live/not Upon commit the congurations are concatenated and pushed to cloudWednesday, November 14, 12 27. How it works?Wednesday, November 14, 12 28. How it works? Cong reader (PHP) reads application cong from CloudWednesday, November 14, 12 29. How it works? Cong reader (PHP) reads application cong from Cloud Sets up YUI_cong for app baseWednesday, November 14, 12 30. How it works? Cong reader (PHP) reads application cong from Cloud Sets up YUI_cong for app base Passes app conguration 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 CodeY.Object.each(modsByEvent,function (moduleList, event) {Y.once(event, function (ev) {});});Wednesday, November 14, 12 33. Client-side CodeY.Object.each(modsByEvent, function (moduleList, event) { Y.once(event, function (ev) { Y.use(moduleList, function (Y) { }); }); });Wednesday, November 14, 12 34. Client-side CodeY.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 usuallyWidgetsWednesday, November 14, 12 36. Tictacs are usuallyWidgets YUI.add()Wednesday, November 14, 12 37. Tictacs are usuallyWidgets YUI.add() Y.extend(Tictac,Y.Widget, { /* ... */ })Wednesday, November 14, 12 38. Tictacs are usuallyWidgets YUI.add() Y.extend(Tictac,Y.Widget, { /* ... */ })initializer, bindUI, renderUI, syncUIWednesday, November 14, 12 39. Tictacs are usuallyWidgets 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. Thats it! @g13nWednesday, November 14, 12