Transcript
Page 1: Tictacs: Yahoo! Mail add-ons

Tictacs: Yahoo! Mail add-onsGopal Venkatesan @g13n,Yahoo! Mail FrontEnd Engineer

Wednesday, November 14, 12

Page 2: Tictacs: Yahoo! Mail add-ons

Quick Demo ...

Wednesday, November 14, 12

Page 3: Tictacs: Yahoo! Mail add-ons

Yahoo! Mail

Wednesday, November 14, 12

Page 4: Tictacs: Yahoo! Mail add-ons

• Full-fledged Ajax application

Yahoo! Mail

Wednesday, November 14, 12

Page 5: Tictacs: Yahoo! Mail add-ons

• Full-fledged Ajax application

• (One of the) largest YUI3 based web application

Yahoo! Mail

Wednesday, November 14, 12

Page 6: Tictacs: Yahoo! Mail add-ons

• 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

Page 7: Tictacs: Yahoo! Mail add-ons

• 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

Page 8: Tictacs: Yahoo! Mail add-ons

What is a Tictac?

Wednesday, November 14, 12

Page 9: Tictacs: Yahoo! Mail add-ons

What is a Tictac?

• Yahoo! Mail add-on

Wednesday, November 14, 12

Page 10: Tictacs: Yahoo! Mail add-ons

What is a Tictac?

• Yahoo! Mail add-on

• Enhances UI, experience

Wednesday, November 14, 12

Page 11: Tictacs: Yahoo! Mail add-ons

What is a Tictac?

• Yahoo! Mail add-on

• Enhances UI, experience

• Examples:

Wednesday, November 14, 12

Page 12: Tictacs: Yahoo! Mail add-ons

What is a Tictac?

• Yahoo! Mail add-on

• Enhances UI, experience

• Examples:

• Attachments

Wednesday, November 14, 12

Page 13: Tictacs: Yahoo! Mail add-ons

What is a Tictac?

• Yahoo! Mail add-on

• Enhances UI, experience

• Examples:

• Attachments

• Photos

Wednesday, November 14, 12

Page 14: Tictacs: Yahoo! Mail add-ons

What is a Tictac?

• Yahoo! Mail add-on

• Enhances UI, experience

• Examples:

• Attachments

• Photos

• Calendar, RSVP

Wednesday, November 14, 12

Page 15: Tictacs: Yahoo! Mail add-ons

Architecture Overview

Wednesday, November 14, 12

Page 16: Tictacs: Yahoo! Mail add-ons

Architecture OverviewYahoo!

Mail

Wednesday, November 14, 12

Page 17: Tictacs: Yahoo! Mail add-ons

Architecture OverviewYahoo!

Mail

Tictac Loader

Wednesday, November 14, 12

Page 18: Tictacs: Yahoo! Mail add-ons

Architecture OverviewYahoo!

Mail

Tictac Loader

Wednesday, November 14, 12

Page 19: Tictacs: Yahoo! Mail add-ons

Architecture OverviewYahoo!

Mail

Tictac Loader

Read configfrom Cloud

Wednesday, November 14, 12

Page 20: Tictacs: Yahoo! Mail add-ons

Architecture OverviewYahoo!

Mail

Tictac Loader

Read configfrom Cloud

Wednesday, November 14, 12

Page 21: Tictacs: Yahoo! Mail add-ons

Architecture OverviewYahoo!

Mail

Tictac Loader

Bind add-ons toMail [YUI3] events

Read configfrom Cloud

Wednesday, November 14, 12

Page 22: Tictacs: Yahoo! Mail add-ons

Architecture OverviewYahoo!

Mail

Tictac Loader

Bind add-ons toMail [YUI3] events

Invoke Y.Tictac[app].loaderon Y.after(event)Read config

from Cloud

Wednesday, November 14, 12

Page 23: Tictacs: Yahoo! Mail add-ons

App Config

{

name: “attachment-app”,

url: “/path/to/main.js”,

event: “ymail:message-rendered”,

live: true

// ...

}

Wednesday, November 14, 12

Page 24: Tictacs: Yahoo! Mail add-ons

Deployment

Wednesday, November 14, 12

Page 25: Tictacs: Yahoo! Mail add-ons

Deployment

• App configuration dictates if its live/not

Wednesday, November 14, 12

Page 26: Tictacs: Yahoo! Mail add-ons

Deployment

• App configuration dictates if its live/not

• Upon commit the configurations are concatenated and pushed to “cloud”

Wednesday, November 14, 12

Page 27: Tictacs: Yahoo! Mail add-ons

How it works?

Wednesday, November 14, 12

Page 28: Tictacs: Yahoo! Mail add-ons

How it works?

• Config reader (PHP) reads application config from Cloud

Wednesday, November 14, 12

Page 29: Tictacs: Yahoo! Mail add-ons

How it works?

• Config reader (PHP) reads application config from Cloud

• Sets up YUI_config for app base

Wednesday, November 14, 12

Page 30: Tictacs: Yahoo! Mail add-ons

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

Page 31: Tictacs: Yahoo! Mail add-ons

Client-side Code

// modByEvent: { event: [ app1, app2, ... ], ... }

Y.Object.each(modsByEvent,

function (moduleList, event) {

// ...

});

Wednesday, November 14, 12

Page 32: Tictacs: Yahoo! Mail add-ons

Client-side Code

Y.Object.each(modsByEvent,

function (moduleList, event) {

Y.once(event, function (ev) {

});

});

Wednesday, November 14, 12

Page 33: Tictacs: Yahoo! Mail add-ons

Client-side Code

Y.Object.each(modsByEvent,

function (moduleList, event) {

Y.once(event, function (ev) {

Y.use(moduleList, function (Y) {

});

});

});

Wednesday, November 14, 12

Page 34: Tictacs: Yahoo! Mail add-ons

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

Page 35: Tictacs: Yahoo! Mail add-ons

Tictacs are usually Widgets

Wednesday, November 14, 12

Page 36: Tictacs: Yahoo! Mail add-ons

Tictacs are usually Widgets

• YUI.add()

Wednesday, November 14, 12

Page 37: Tictacs: Yahoo! Mail add-ons

Tictacs are usually Widgets

• YUI.add()

• Y.extend(Tictac, Y.Widget, { /* ... */ })

Wednesday, November 14, 12

Page 38: Tictacs: Yahoo! Mail add-ons

Tictacs are usually Widgets

• YUI.add()

• Y.extend(Tictac, Y.Widget, { /* ... */ })

• initializer, bindUI, renderUI, syncUI

Wednesday, November 14, 12

Page 39: Tictacs: Yahoo! Mail add-ons

Tictacs are usually Widgets

• YUI.add()

• Y.extend(Tictac, Y.Widget, { /* ... */ })

• initializer, bindUI, renderUI, syncUI

• ATTRS onChange and UI updates

Wednesday, November 14, 12

Page 40: Tictacs: Yahoo! Mail add-ons

Conclusion

Wednesday, November 14, 12

Page 41: Tictacs: Yahoo! Mail add-ons

Conclusion

• Not tied to Yahoo! Mail release cycle

Wednesday, November 14, 12

Page 42: Tictacs: Yahoo! Mail add-ons

Conclusion

• Not tied to Yahoo! Mail release cycle

• Loose coupling between Mail and the add-on using events

Wednesday, November 14, 12

Page 43: Tictacs: Yahoo! Mail add-ons

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

Page 44: Tictacs: Yahoo! Mail add-ons

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

Page 45: Tictacs: Yahoo! Mail add-ons

That’s it!

@g13n

Wednesday, November 14, 12


Top Related