symfonycamp - yui 2008
DESCRIPTION
SymfonyCamp - YUI 2008TRANSCRIPT
- 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!