- 1 -

Yahoo!UserInterfaceLibraries

YUIisbuiltbypeopleinYahoo!forpeopleinYahoo!

Ourproductshavetoworkfor*alot*ofusers.

Fixingthesameissuesoverandoveragainmakesforboredandfrustrateddevelopers.

Frustratedandboreddevelopersdon’tworkefficiently.

Wedon’tlikepeopletobefrustratedandbored.

ThisiswhywebuilttheYahooUserInterfacelibraries.

AndweextendYUIbasedondeveloperfeedback.

AlookattheopensourceYahoo!‣  Yahoo!isbuiltfromopensourcetoolsandcommunities

‣  FreeBSD,Linux,Apache,PHP,MySQL

‣  Wecontributebackandeveryonewins

‣  Weshareourtools,experience,anddatathroughopenAPIsandwebservices

‣  Yahoo!UserInterfaceLibraries(BSD)+EdgeCaching‣  UserInterfaceDesignPatterns‣  Yslow+ExceptionalPerformanceRules

‣  R3Template+TranslationManagement

AlookatYahoo!UserInterfaceLibraries‣  JavaScriptFramework

‣  Utilities‐YAHOO,Dom,Event,Animation,BrowserHistoryManager,ConnectionManager,Cookie,DataSource,DragandDrop,Element,Get,ImageLoader,JSON,Resize,Selector,Loader

‣  Controls/Widgets‐AutoComplete,Button,Calendar,Charts,ColorPicker,DataTable,ImageCropper,RichTextEditor,Slider,Uploader

‣  Container(Module,Overlay,Panel,Tooltip,Dialog),LayoutManager,Menu,TabView,TreeView

‣  Debug–Logger,Profiler,Test

YUICore

‣  YAHOOGlobalObject‣  BaserequirementforallYUIcomponents

‣  DOMCollection

‣  ConveniencemethodsforDOMinteractions

‣  EventUtility‣  Eventnormalizationandcustomevents

MakingJavaScriptdevelopmentlessrandomacrossbrowsersandeasiertoconcentrateonthearchitectureofyourscripts.

YUIUtilities

AnimationUtility

BrowserHistoryManager

ConnectionManager(Ajax)

CookieUtility

DataSourceUtility

DragandDropUtility

ElementUtility

GetUtility(script/cssloading)

ImageLoaderUtility

JSONUtility

ResizeUtility

SelectorUtility

LoaderUtility

YUIWidgetsAutoComplete

Button

Calendar

Charts

ColorPicker

Container

Module

Overlay

Panel

Tooltip

Dialog

DataTable

ImageCropper

LayoutManager

Menu

RichTextEditor

Slider

TabView

TreeView

Uploader

CreatingHTML/CSS/JSbasedRIAswithtestedandfullyskinnablecomponents.

YUIDeveloperTools

‣  LoggerControl‣  Profiler‣  Client‐side,cross‐browserprofiling

‣  ProfilerViewerControl‣  YUITestUtility

AlookatYahoo!UserInterfaceLibraries‣  CSSFoundation‣  Reset‣  Base‣  Fonts‣  Grids

‣  GradeBrowserSupport/ProgressiveEnhancement

MakingCSSlayoutspredictableandworkacrossmostbrowsersandoperatingsystems.

YUICSS‣  CSSReset‣  NeutralizesbrowserCSSstyles

‣  CSSBase‣  Appliesconsistentstylefoundationforcommonelements

‣  CSSFonts‣  Foundationfortypographyandfont‐sizing

‣  CSSGrids‣  Morethan1,000CSS‐drivenwireframesina4KBfile

Yahoo!UIDesignPatterns‣  UserInterfaceDesignPatternsLibrary‣  Provensolutionstocommoninterfaceproblems

‣  RatingsandReviews‣  Carousel‣  Pagination

‣  http://developer.yahoo.com/ypatterns/

‣  Ascommonproblemsaretossedaroundacommunityandareresolved,commonsolutionsoftenspontaneouslyemerge.Eventually,thebestoftheseriseabovethedinandself‐identifyandbecomerefineduntiltheyreachthestatusofaDesignPattern

YUIforProduction‣  YUICompressor

‣  SafeminificationforJSandCSS

‣  YUIContentDistributionNetwork‣  MultipleDatacenters

‣  OptimizeCompression/Caching

‣  http://yui.yahooapis.com/

‣  ComboHandler

‣  http://yui.yahooapis.com/combo

YUIComboHandler‣  Multiplehttpconnections<scriptsrc=”http://yui.yahooapis.com/2.5.2/build/yahoo‐dom‐event/yahoo‐dom‐event.js”></script>

<scriptsrc=”http://yui.yahooapis.com/2.5.2/build/container/container_core‐min.js”></script>

<scriptsrc=”http://yui.yahooapis.com/2.5.2/build/menu/menu‐min.js”></script>

<scriptsrc=”http://yui.yahooapis.com/2.5.2/build/button/button‐min.js”></script>

‣  Singlehttpconnection

<scriptsrc=”http://yui.yahooapis.com/combo?2.5.2/build/yahoo‐dom‐event/yahoo‐dom‐event.js&2.5.2/build/container/container_core‐min.js&2.5.2/build/menu/menu‐min.js&2.5.2/build/button/button‐min.js”></script>

Yahoo!YslowforFirebug‣  FirebugPlugin‣  http://getfirebug.com

‣  Yslow‣  Firefoxpluginforanalyzingperformancewithfirebug

‣  Basedonexceptionalperformancerules

‣  http://developer.yahoo.com/yslow/

Yahoo!ExceptionalPerformanceRules1.  MakeFewerHTTPRequests

2.  UseaContentDeliveryNetwork

3.  AddanExpiresoraCache‐ControlHeader

4.  GzipComponents

5.  PutStylesheetsattheTop

6.  PutScriptsattheBottom

7.  AvoidCSSExpressions

8.  MakeJavaScriptandCSSExternal

9.  ReduceDNSLookups

10.  MinifyJavaScriptandCSS

11.  AvoidRedirects12.  RemoveDuplicateScripts

13.  ConfigureETags

14.  MakeAjaxCacheable

15.  FlushtheBufferEarly16.  UseGETforAJAXRequests17.  Post‐loadComponents

18.  PreloadComponents

19.  ReducetheNumberofDOMElements

20.  SplitComponentsAcrossDomains

21.  MinimizetheNumberofiframes

22.  No404s23.  ReduceCookieSize24.  UseCookie‐freeDomainsforComponents

25.  MinimizeDOMAccess

26.  DevelopSmartEventHandlers

ysfYUIPlugin‣  LoaderforefficientlyloadingcomponentsinPHP(optimal

CSS/JSinclusion)

‣  Eventmanagement(on*=>becomeevents)+Caching

‣  JavascriptHelpersforAjax,Panels,Dialogs,Modal,andTooltips

‣  RichFormWidgets(RichTextEditor,Slider,ColorPicker,Auto‐Complete,In‐PlaceEditing)

‣  UIControls(TabView,TreeView,etc)‣  EnhancedsymfonywebdebugtoolbarwithY!Loggerand

Profilerintegration

ysfYUIPlugin‐Helpersyui_link_to_function

yui_link_to_remote

yui_periodically_call_function

yui_periodically_call_remote

yui_update_element

yui_update_element_function

yui_button

yui_button_to_function

yui_button_to_remote

yui_form_remote_tag

yui_submit_tag

yui_submit_to_remote

yui_submit_image_to_remote

yui_reset_tag

ysfYUIPlugin–Helpers(comingsoon)yui_grid

yui_layout

yui_toolbar

yui_container

yui_menu

yui_dialog

yui_tooltip

yui_tabview

yui_treeview

yui_datatable

yui_accordion

yui_lightbox

yui_collapse

yui_carousel

yui_resizable

ysfYUIPlugin–FormWidgets‣  ysfYUITextWidget

‣  Autocomplete/InlineEdit

‣  ysfYUICheckboxWidget

‣  ysfYUIRadioWidget

‣  ysfYUISelectWidget

‣  ysfYUIMultiSelectWidget

‣  ysfYUIFileUploadWidget

‣  ysfYUIEditorWidget

‣  ysfYUICalendarWidget

‣  ysfYUIColorPickerWidget

‣  ysfYUISliderWidget

ysfYUIPlugin–FormWidgets‣  ysfYUITextWidget

‣  Autocomplete/InlineEdit

‣  ysfYUICheckboxWidget

‣  ysfYUIRadioWidget

‣  ysfYUISelectWidget

‣  ysfYUIMultiSelectWidget

‣  ysfYUIFileUploadWidget

‣  ysfYUIEditorWidget

‣  ysfYUICalendarWidget

‣  ysfYUIColorPickerWidget

‣  ysfYUISliderWidget

Acompletefrontendplatform‣  Acommunitymaintainedapproachtobuildingweb

applicationsfromframeworks

‣  PHPFramework

‣  JavaScriptFramework

‣  CSSFramework

‣  UIDesignPatterns+BestPractices‣  DevelopmentTools(logger,profiler,debugger,docs)

‣  Unit+FunctionalTestingFrameworks(LIME/YUITest)

‣  DeploymentTools(rsyncdeploymentsystem)

YUIExamples+Documentation+Support‣  Morethan275functionalexamples

‣  http://developer.yahoo.com/yui/docs

‣  http://developer.yahoo.com/yui/examples/

‣  Yslow+PerformanceRules

‣  http://developer.yahoo.com/performance

‣  YUIBlog‣  http://yuiblog.com/

‣  MailingList@Yahoo!Groups

‣  http://tech.groups.yahoo.com/group/ydn‐javascript/

YUI2evolvingtoYUI3‣  Lighter(lessweightonthewire)‣  Faster(fewerhttprequests,lesscodetowriteandcompile,

moreefficientcode)

‣  Moreconsistent(commonnaming,eventsignatures,andwidgetAPIsthroughoutthelibrary)

‣  Morepowerful(domorewithlessimplementationcode)

‣  Moresecurable(saferandeasiertoexposetomultipledevelopersworkinginthesameenvironment;easiertorunundersystemslikeCajaorADsafe)

ThanksforlisteningandenjoytherestoftheWeb2.0Expo!