Tictacs: Yahoo! Mail add-ons

•

2 likes•7,198 views

Gopal Venkatesan

Technology

Quick Demo ...

Wednesday, November 14, 12

Yahoo! Mail
• Full-ﬂedged Ajax application

Wednesday, November 14, 12

Yahoo! Mail
• Full-ﬂedged Ajax application
• (One of the) largest YUI3 based web
application

Wednesday, November 14, 12

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

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 Overview
Yahoo!
Mail

Wednesday, November 14, 12

Architecture Overview
Yahoo!
Mail
Tictac Loader

Wednesday, November 14, 12

Architecture Overview
Yahoo!
Mail
Tictac Loader

Read conﬁg
from Cloud

Wednesday, November 14, 12

Architecture Overview
Yahoo!
Mail
Tictac Loader
Bind add-ons to
Mail [YUI3] events

Read conﬁg
from Cloud

Wednesday, November 14, 12

Architecture Overview
Yahoo!
Mail
Tictac Loader
Bind add-ons to
Mail [YUI3] events

Invoke Y.Tictac[app].loader
Read conﬁg on Y.after(event)
from Cloud

Wednesday, November 14, 12

App Conﬁg
{
name: “attachment-app”,
url: “/path/to/main.js”,
event: “ymail:message-rendered”,
live: true
// ...
}

Wednesday, November 14, 12

Deployment

• App conﬁguration dictates if its live/not

Wednesday, November 14, 12

Deployment

• App conﬁguration dictates if its live/not
• Upon commit the conﬁgurations are
concatenated and pushed to “cloud”

Wednesday, November 14, 12

How it works?

Wednesday, November 14, 12

How it works?

• Conﬁg reader (PHP) reads application
conﬁg from Cloud

Wednesday, November 14, 12

How it works?

• Conﬁg reader (PHP) reads application
conﬁg from Cloud
• Sets up YUI_conﬁg for app base

Wednesday, November 14, 12

How it works?

• Conﬁg reader (PHP) reads application
conﬁg from Cloud
• Sets up YUI_conﬁg for app base
• Passes app conﬁguration 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 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

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
• 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

Recently uploaded

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

Effective data discovery is crucial for maintaining compliance and mitigating risks in today's rapidly evolving privacy landscape. However, traditional manual approaches often struggle to keep pace with the growing volume and complexity of data. Join us for an insightful webinar where industry leaders from TrustArc and Privya will share their expertise on leveraging AI-powered solutions to revolutionize data discovery. You'll learn how to: - Effortlessly maintain a comprehensive, up-to-date data inventory - Harness code scanning insights to gain complete visibility into data flows leveraging the advantages of code scanning over DB scanning - Simplify compliance by leveraging Privya's integration with TrustArc - Implement proven strategies to mitigate third-party risks Our panel of experts will discuss real-world case studies and share practical strategies for overcoming common data discovery challenges. They'll also explore the latest trends and innovations in AI-driven data management, and how these technologies can help organizations stay ahead of the curve in an ever-changing privacy landscape.

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

TrustArc

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

DBX First Quarter 2024 Investor Presentation

Dropbox

Scalable LLM APIs for AI and Generative AI Application Development Ettikan Karuppiah, Director/Technologist - NVIDIA Apidays Singapore 2024: Connecting Customers, Business and Technology (April 17 & 18, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...

apidays

AXA XL - Insurer Innovation Award Americas 2024

The Digital Insurer

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

Corporate and higher education. Two industries that, in the past, have had a clear divide with very little crossover. The difference in goals, learning styles and objectives paved the way for differing learning technologies platforms to evolve. Now, those stark lines are blurring as both sides are discovering they have content that’s relevant to the other. Join Tammy Rutherford as she walks through the pros and cons of corporate and higher ed collaborating. And the challenges of these different technology platforms working together for a brighter future.

Corporate and higher education May webinar.pptx

Rustici Software

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

In the thrilling conclusion to 2023, ransomware groups had a banner year, really outdoing themselves in the "make everyone's life miserable" department. LockBit 3.0 took gold in the hacking olympics, followed by the plucky upstarts Clop and ALPHV/BlackCat. Apparently, 48% of organizations were feeling left out and decided to get in on the cyber attack action. Business services won the "most likely to get digitally mugged" award, with education and retail nipping at their heels. Hackers expanded their repertoire beyond boring old encryption to the much more exciting world of extortion. The US, UK and Canada took top honors in the "countries most likely to pay up" category. Bitcoins were the currency of choice for discerning hackers, because who doesn't love untraceable money?

Ransomware_Q4_2023. The report. [EN].pdf

Overkill Security

Following the popularity of "Cloud Revolution: Exploring the New Wave of Serverless Spatial Data," we're thrilled to announce this much-anticipated encore webinar. In this sequel, we'll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you're building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Scaling API-first – The story of a global engineering organization Ian Reasor, Senior Computer Scientist - Adobe Radu Cotescu, Senior Computer Scientist - Adobe Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

apidays

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

Artificial Intelligence Chap.5 : Uncertainty

Khushali Kathiriya

The value of a flexible API Management solution for Open Banking Steve Melan, Manager for IT Innovation and Architecture - State's and Saving's Bank of Luxembourg Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The value of a flexible API Management solution for O...

apidays

Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows. We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases. This video focuses on the deployment of external web forms using Jotform for Bonterra Impact Management. This solution can be customized to your organization’s needs and deployed to support the common use cases below: - Intake and consent - Assessments - Surveys - Applications - Program registration Interested in deploying web form automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

Jeffrey Haguewood

Recently uploaded (20)

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Axa Assurance Maroc - Insurer Innovation Award 2024

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Boost Fertility New Invention Ups Success Rates.pdf

DBX First Quarter 2024 Investor Presentation

Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...

AXA XL - Insurer Innovation Award Americas 2024

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Corporate and higher education May webinar.pptx

AWS Community Day CPH - Three problems of Terraform

presentation ICT roal in 21st century education

Ransomware_Q4_2023. The report. [EN].pdf

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

Powerful Google developer tools for immediate impact! (2023-24 C)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Artificial Intelligence Chap.5 : Uncertainty

Apidays New York 2024 - The value of a flexible API Management solution for O...

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf

marketingartwork

Skeleton Culture Code

Skeleton Technologies

PEPSICO Presentation to CAGNY Conference Feb 2024

Neil Kimberley

Content Methodology: A Best Practices Report (Webinar)

contently

How to Prepare For a Successful Job Search for 2024

Albert Qian

A report by thenetworkone and Kurio. The contributing experts and agencies are (in an alphabetical order): Sylwia Rytel, Social Media Supervisor, 180heartbeats + JUNG v MATT (PL), Sharlene Jenner, Vice President - Director of Engagement Strategy, Abelson Taylor (USA), Alex Casanovas, Digital Director, Atrevia (ES), Dora Beilin, Senior Social Strategist, Barrett Hoffher (USA), Min Seo, Campaign Director, Brand New Agency (KR), Deshé M. Gully, Associate Strategist, Day One Agency (USA), Francesca Trevisan, Strategist, Different (IT), Trevor Crossman, CX and Digital Transformation Director; Olivia Hussey, Strategic Planner; Simi Srinarula, Social Media Manager, The Hallway (AUS), James Hebbert, Managing Director, Hylink (CN / UK), Mundy Álvarez, Planning Director; Pedro Rojas, Social Media Manager; Pancho González, CCO, Inbrax (CH), Oana Oprea, Head of Digital Planning, Jam Session Agency (RO), Amy Bottrill, Social Account Director, Launch (UK), Gaby Arriaga, Founder, Leonardo1452 (MX), Shantesh S Row, Creative Director, Liwa (UAE), Rajesh Mehta, Chief Strategy Officer; Dhruv Gaur, Digital Planning Lead; Leonie Mergulhao, Account Supervisor - Social Media & PR, Medulla (IN), Aurelija Plioplytė, Head of Digital & Social, Not Perfect (LI), Daiana Khaidargaliyeva, Account Manager, Osaka Labs (UK / USA), Stefanie Söhnchen, Vice President Digital, PIABO Communications (DE), Elisabeth Winiartati, Managing Consultant, Head of Global Integrated Communications; Lydia Aprina, Account Manager, Integrated Marketing and Communications; Nita Prabowo, Account Manager, Integrated Marketing and Communications; Okhi, Web Developer, PNTR Group (ID), Kei Obusan, Insights Director; Daffi Ranandi, Insights Manager, Radarr (SG), Gautam Reghunath, Co-founder & CEO, Talented (IN), Donagh Humphreys, Head of Social and Digital Innovation, THINKHOUSE (IRE), Sarah Yim, Strategy Director, Zulu Alpha Kilo (CA).

Social Media Marketing Trends 2024 // The Global Indie Insights

Kurio // The Social Media Age(ncy)

The search marketing landscape is evolving rapidly with new technologies, and professionals, like you, rely on innovative paid search strategies to meet changing demands. It’s important that you’re ready to implement new strategies in 2024. Check this out and learn the top trends in paid search advertising that are expected to gain traction, so you can drive higher ROI more efficiently in 2024. You’ll learn: - The latest trends in AI and automation, and what this means for an evolving paid search ecosystem. - New developments in privacy and data regulation. - Emerging ad formats that are expected to make an impact next year. Watch Sreekant Lanka from iQuanti and Irina Klein from OneMain Financial as they dive into the future of paid search and explore the trends, strategies, and technologies that will shape the search marketing landscape. If you’re looking to assess your paid search strategy and design an industry-aligned plan for 2024, then this webinar is for you.

Trends In Paid Search: Navigating The Digital Landscape In 2024

Search Engine Journal

From their humble beginnings in 1984, TED has grown into the world’s most powerful amplifier for speakers and thought-leaders to share their ideas. They have over 2,400 filmed talks (not including the 30,000+ TEDx videos) freely available online, and have hosted over 17,500 events around the world. With over one billion views in a year, it’s no wonder that so many speakers are looking to TED for ideas on how to share their message more effectively. The article “5 Public-Speaking Tips TED Gives Its Speakers”, by Carmine Gallo for Forbes, gives speakers five practical ways to connect with their audience, and effectively share their ideas on stage. Whether you are gearing up to get on a TED stage yourself, or just want to master the skills that so many of their speakers possess, these tips and quotes from Chris Anderson, the TED Talks Curator, will encourage you to make the most impactful impression on your audience. See the full article and more summaries like this on SpeakerHub here: https://speakerhub.com/blog/5-presentation-tips-ted-gives-its-speakers See the original article on Forbes here: http://www.forbes.com/forbes/welcome/?toURL=http://www.forbes.com/sites/carminegallo/2016/05/06/5-public-speaking-tips-ted-gives-its-speakers/&refURL=&referrer=#5c07a8221d9b

5 Public speaking tips from TED - Visualized summary

SpeakerHub

Everyone is in agreement that ChatGPT (and other generative AI tools) will shape the future of work. Yet there is little consensus on exactly how, when, and to what extent this technology will change our world. Businesses that extract maximum value from ChatGPT will use it as a collaborative tool for everything from brainstorming to technical maintenance. For individuals, now is the time to pinpoint the skills the future professional will need to thrive in the AI age. Check out this presentation to understand what ChatGPT is, how it will shape the future of work, and how you can prepare to take advantage.

ChatGPT and the Future of Work - Clark Boyd

Clark Boyd

Getting into the tech field. what next

Tessa Mero

Google's Just Not That Into You: Understanding Core Updates & Search Intent

Lily Ray

How to have difficult conversations

Rajiv Jayarajah, MAppComm, ACC

Introduction to Data Science

Christy Abraham Joy

Time Management & Productivity - Best Practices

Vit Horky

The six step guide to practical project management If you think managing projects is too difficult, think again. We’ve stripped back project management processes to the basics – to make it quicker and easier, without sacrificing the vital ingredients for success. “If you’re looking for some real-world guidance, then The Six Step Guide to Practical Project Management will help.” Dr Andrew Makar, Tactical Project Management

The six step guide to practical project management

MindGenius

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

RachelPearson36

During this webinar, Anand Bagmar demonstrates how AI tools such as ChatGPT can be applied to various stages of the software development life cycle (SDLC) using an eCommerce application case study. Find the on-demand recording and more info at https://applitools.info/b59 Key takeaways: • Learn how to use ChatGPT to add AI power to your testing and test automation • Understand the limitations of the technology and where human expertise is crucial • Gain insight into different AI-based tools • Adopt AI-based tools to stay relevant and optimize work for developers and testers * ChatGPT and OpenAI belong to OpenAI, L.L.C.

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

Applitools

12 Ways to Increase Your Influence at Work

GetSmarter

ChatGPT webinar slides

Alireza Esmikhani

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Project for Public Spaces & National Center for Biking and Walking

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf

Skeleton Culture Code

PEPSICO Presentation to CAGNY Conference Feb 2024

Content Methodology: A Best Practices Report (Webinar)

How to Prepare For a Successful Job Search for 2024

Social Media Marketing Trends 2024 // The Global Indie Insights

Trends In Paid Search: Navigating The Digital Landscape In 2024

5 Public speaking tips from TED - Visualized summary

ChatGPT and the Future of Work - Clark Boyd

Getting into the tech field. what next

Google's Just Not That Into You: Understanding Core Updates & Search Intent

How to have difficult conversations

Introduction to Data Science

Time Management & Productivity - Best Practices

The six step guide to practical project management

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

12 Ways to Increase Your Influence at Work

ChatGPT webinar slides

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Tictacs: Yahoo! Mail add-ons

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-ﬂedged Ajax application Wednesday, November 14, 12

5. Yahoo! Mail • Full-ﬂedged Ajax application • (One of the) largest YUI3 based web application Wednesday, 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 performance Wednesday, 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 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 conﬁg from Cloud Wednesday, November 14, 12

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

21. Architecture Overview Yahoo! Mail Tictac Loader Bind add-ons to Mail [YUI3] events Read conﬁg 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 conﬁg on Y.after(event) from Cloud Wednesday, November 14, 12

23. App Conﬁg { 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 conﬁguration dictates if its live/not Wednesday, November 14, 12

26. Deployment • App conﬁguration dictates if its live/not • Upon commit the conﬁgurations are concatenated and pushed to “cloud” Wednesday, November 14, 12

27. How it works? Wednesday, November 14, 12

28. How it works? • Conﬁg reader (PHP) reads application conﬁg 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

Tictacs: Yahoo! Mail add-ons

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Tictacs: Yahoo! Mail add-ons