tictacs: yahoo! mail add-ons
Post on 22-May-2015
2.261 Views
Preview:
TRANSCRIPT
Tictacs: Yahoo! Mail add-onsGopal Venkatesan @g13n,Yahoo! Mail FrontEnd Engineer
Wednesday, November 14, 12
Quick Demo ...
Wednesday, November 14, 12
Yahoo! Mail
Wednesday, November 14, 12
• Full-fledged Ajax application
Yahoo! Mail
Wednesday, November 14, 12
• Full-fledged Ajax application
• (One of the) largest YUI3 based web application
Yahoo! Mail
Wednesday, November 14, 12
• Full-fledged Ajax application
• (One of the) largest YUI3 based web application
• Built as YUI3 modules with build-time dependency resolution for performance
Yahoo! Mail
Wednesday, November 14, 12
• 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
Yahoo! Mail
Wednesday, November 14, 12
What is a Tictac?
Wednesday, November 14, 12
What is a Tictac?
• Yahoo! Mail add-on
Wednesday, November 14, 12
What is a Tictac?
• Yahoo! Mail add-on
• Enhances UI, experience
Wednesday, November 14, 12
What is a Tictac?
• Yahoo! Mail add-on
• Enhances UI, experience
• Examples:
Wednesday, November 14, 12
What is a Tictac?
• Yahoo! Mail add-on
• Enhances UI, experience
• Examples:
• Attachments
Wednesday, November 14, 12
What is a Tictac?
• Yahoo! Mail add-on
• Enhances UI, experience
• Examples:
• Attachments
• Photos
Wednesday, November 14, 12
What is a Tictac?
• Yahoo! Mail add-on
• Enhances UI, experience
• Examples:
• Attachments
• Photos
• Calendar, RSVP
Wednesday, November 14, 12
Architecture Overview
Wednesday, November 14, 12
Architecture OverviewYahoo!
Wednesday, November 14, 12
Architecture OverviewYahoo!
Tictac Loader
Wednesday, November 14, 12
Architecture OverviewYahoo!
Tictac Loader
Wednesday, November 14, 12
Architecture OverviewYahoo!
Tictac Loader
Read configfrom Cloud
Wednesday, November 14, 12
Architecture OverviewYahoo!
Tictac Loader
Read configfrom Cloud
Wednesday, November 14, 12
Architecture OverviewYahoo!
Tictac Loader
Bind add-ons toMail [YUI3] events
Read configfrom Cloud
Wednesday, November 14, 12
Architecture OverviewYahoo!
Tictac Loader
Bind add-ons toMail [YUI3] events
Invoke Y.Tictac[app].loaderon Y.after(event)Read config
from Cloud
Wednesday, November 14, 12
App Config
{
name: “attachment-app”,
url: “/path/to/main.js”,
event: “ymail:message-rendered”,
live: true
// ...
}
Wednesday, November 14, 12
Deployment
Wednesday, November 14, 12
Deployment
• App configuration dictates if its live/not
Wednesday, November 14, 12
Deployment
• App configuration dictates if its live/not
• Upon commit the configurations are concatenated and pushed to “cloud”
Wednesday, November 14, 12
How it works?
Wednesday, November 14, 12
How it works?
• Config reader (PHP) reads application config from Cloud
Wednesday, November 14, 12
How it works?
• Config reader (PHP) reads application config from Cloud
• Sets up YUI_config for app base
Wednesday, November 14, 12
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
Client-side Code
// modByEvent: { event: [ app1, app2, ... ], ... }
Y.Object.each(modsByEvent,
function (moduleList, event) {
// ...
});
Wednesday, November 14, 12
Client-side Code
Y.Object.each(modsByEvent,
function (moduleList, event) {
Y.once(event, function (ev) {
});
});
Wednesday, November 14, 12
Client-side Code
Y.Object.each(modsByEvent,
function (moduleList, event) {
Y.once(event, function (ev) {
Y.use(moduleList, function (Y) {
});
});
});
Wednesday, November 14, 12
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
Tictacs are usually Widgets
Wednesday, November 14, 12
Tictacs are usually Widgets
• YUI.add()
Wednesday, November 14, 12
Tictacs are usually Widgets
• YUI.add()
• Y.extend(Tictac, Y.Widget, { /* ... */ })
Wednesday, November 14, 12
Tictacs are usually Widgets
• YUI.add()
• Y.extend(Tictac, Y.Widget, { /* ... */ })
• initializer, bindUI, renderUI, syncUI
Wednesday, November 14, 12
Tictacs are usually Widgets
• YUI.add()
• Y.extend(Tictac, Y.Widget, { /* ... */ })
• initializer, bindUI, renderUI, syncUI
• ATTRS onChange and UI updates
Wednesday, November 14, 12
Conclusion
Wednesday, November 14, 12
Conclusion
• Not tied to Yahoo! Mail release cycle
Wednesday, November 14, 12
Conclusion
• Not tied to Yahoo! Mail release cycle
• Loose coupling between Mail and the add-on using events
Wednesday, November 14, 12
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
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
That’s it!
@g13n
Wednesday, November 14, 12
top related