1. Tictacs:Yahoo! Mail
add-ons
Gopal Venkatesan @g13n,
Yahoo! Mail FrontEnd Engineer
Wednesday, November 14, 12

2. Quick Demo ...
Wednesday, November 14, 12

3. Yahoo! Mail
Wednesday, November 14, 12

4. Yahoo! Mail
• Full-fledged Ajax application
Wednesday, November 14, 12

5. Yahoo! Mail
• Full-fledged Ajax application
• (One of the) largest YUI3 based web
application
Wednesday, 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 performance
Wednesday, 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 infrastructure
Wednesday, November 14, 12

8. What is a Tictac?
Wednesday, November 14, 12

9. What is a Tictac?
• Yahoo! Mail add-on
Wednesday, November 14, 12

10. What is a Tictac?
• Yahoo! Mail add-on
• Enhances UI, experience
Wednesday, 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:
• Attachments
Wednesday, November 14, 12

13. What is a Tictac?
• Yahoo! Mail add-on
• Enhances UI, experience
• Examples:
• Attachments
• Photos
Wednesday, November 14, 12

14. What is a Tictac?
• Yahoo! Mail add-on
• Enhances UI, experience
• Examples:
• Attachments
• Photos
• Calendar, RSVP
Wednesday, November 14, 12

15. Architecture Overview
Wednesday, November 14, 12

16. Architecture Overview
Yahoo!
Mail
Wednesday, November 14, 12

17. Architecture Overview
Yahoo!
Mail
Tictac Loader
Wednesday, November 14, 12

18. Architecture Overview
Yahoo!
Mail
Tictac Loader
Wednesday, November 14, 12

19. Architecture Overview
Yahoo!
Mail
Tictac Loader
Read config
from Cloud
Wednesday, November 14, 12

20. Architecture Overview
Yahoo!
Mail
Tictac Loader
Read config
from Cloud
Wednesday, November 14, 12

21. Architecture Overview
Yahoo!
Mail
Tictac Loader
Bind add-ons to
Mail [YUI3] events
Read config
from Cloud
Wednesday, 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 Cloud
Wednesday, 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. Deployment
Wednesday, November 14, 12

25. Deployment
• App configuration dictates if its live/not
Wednesday, 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 Cloud
Wednesday, November 14, 12

29. How it works?
• Config reader (PHP) reads application
config from Cloud
• Sets up YUI_config for app base
Wednesday, 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 JavaScript
Wednesday, 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
Widgets
Wednesday, 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,
syncUI
Wednesday, November 14, 12

39. Tictacs are usually
Widgets
• YUI.add()
• Y.extend(Tictac,Y.Widget, { /* ... */ })
• initializer, bindUI, renderUI,
syncUI
• ATTRS onChange and UI updates
Wednesday, November 14, 12

40. Conclusion
Wednesday, November 14, 12

41. Conclusion
• Not tied to Yahoo! Mail release cycle
Wednesday, November 14, 12

42. Conclusion
• Not tied to Yahoo! Mail release cycle
• Loose coupling between Mail and the add-
on using events
Wednesday, 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 Widget
Wednesday, 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!
@g13n
Wednesday, November 14, 12