Embed Size (px)
DESCRIPTION
Citation preview
1
Dustin WhittleSocial Search Group
symfony + yui = web 2.0 framework
2
Introduction
This session will cover rapid application development using the
symfony + yui platform.
Learn why YUI is the perfect compliment to symfony, and how it will make building web applications
faster, simpler, and more compatible.
3
What is the symfony project?
• Full stack web application framework built for rapid application development
• Written in PHP5
• A growing community since 2005
• Open source and free
• Licensed under the MIT license
symfony is a web application framework, which automates most of the tedious tasks
of an AJAX developer
4
Why a framework?
• Another software layer (symfony, php, apache, linux/bsd)
• Factors out common patterns– Code Structure / Layout
– Configuration
– URL Routing
– Authentication / Security
– Form Validation / Repopulation
– Internationalization / Localization
• Frameworks provide a standard api– Encourages good design, leads to developer consistency
– Long term maintainability
5
Why symfony?
• Agile Development– Built on best practices using proven design patterns
– Built to factor out common patterns and allow developers to focus on application logic
• Performance / Stability– Proven to scale on very active web sites - Y!
– Tested code base (4000+ unit and functional tests)
• Maintainability– Enforces consistency among developers
• Support– Great documentation and very active community
6
Easy rich interactions in PHP
• Template Helpers inspired from Rails– Based on prototype/script.aculo.us
• Easy implementations in one line of php– AJAX Interactions -> link_to_remote
– Visual Effects -> visual_effect
– Auto Complete -> input_autocomplete_tag
– Inline Editing -> input_inline_editor_tag
– Drag and Drop -> draggable_element
– Rich Text Editing -> textarea_tag w/ rich=tinymce|fck
– Rich Calendar -> input_date_tag
7
Integrate your own PHP libraries
• Autoloading hooks for easy integration of
– Zend Framework
– EZ Components
– PEAR
– Custom
8
Integrated Javascript Libraries
• Symfony makes it easy to build rich internet applications– Prototype
• Javascript framework
– script.aculo.us• AJAX interactions
• Visual Effects
– TinyMCE• Rich Text Editor (WYSIWYG)
– DynArch.com Rich Calendar
9
AJAX Toolkit Integration
• Prototype/scriptaculous built-in
• Plugins available:
– sfUJSPlugin -> helpers for UJS via jQuery
– sfYUIPlugin -> helpers for YUI
• Build your own helpers
10
Why symfony + YUI?
• PHP Framework
• Javascript Framework
• CSS Framework
• Integrated Development Environment– Helpers
• Controls
• Widgets
• Validation
– Debugging• Integrated Logging Console
– IDE Support: Aptana
11
Why Yahoo User Interface?
• Industrial-grade JavaScript for DHTML and Ajax. The same libraries that power Yahoo! today.
• Yahoo! Design Patterns Library– Our thinking and solutions on common interface
design issues.
• Graded Browser Support– An inclusive definition of support and a framework for
taming the ever-expanding world of browsers and frontend technologies.
• Documentation– In depth examples and api documentation
12
Why YUI javascript framework?
• Debugging Environment (Logger + Console)
• Event System (for easy unobtrusive design)
• Connection / XHR / AJAX
• Animation & Effects
• Autocomplete + Drag & Drop
• Menus / Dialogs / Overlays / Tooltips / Windows
• Browser History Manager
• Controls: Button, Slider, Calendar, Rich Text Editor, Color Picker
13
Why YUI css framework?
• Neutralizes browser CSS styles to be consistent between browsers
• Foundation for typography and font-sizing
• Grids for quick / proven layouts
– Over 1000 wireframes with online builder
• Base applies consistent style foundation for common elements
– Supports skinning, default sam skin
14
symfony YUI Integration
• Debug Integration
– symfony / yui web debug toolbars• Firebug console log integration
– Key shortcuts• Symfony, yui, js shell, css reboot
– YAHOO.symfony.debug.logger
– YAHOO.symfony.debug.toolbar
15
symfony YUI Integration
• Event System (YAHOO.symfony.event)– Subscriptions: available | ready
• YAHOO.symfony.event.ready.subscribe(YAHOO.symfony.initialize);
– Delegation when appropriate (parent -> child)
– sfYUI::addEvent php behaviors
– onclick|onsubmit| become events
• Form Validation (YAHOO.symfony.form)– Common Validations (required, regex, callbacks)
– Configurable via class names or configuration
16
symfony YUI Integration
• Layouts by default
– Reset-Fonts-Grids
– Base
– Skin (sam)
• YUI / symfony base js/css
• Appending events via sfYUIFilter
– ID generation for events
17
Symfony YUI Integration
• Helpers
– UJS (event driven)• On* are now automatically events
– link_to_function, button_to_function
– Ajax• link_to_remote, button_to_remote,
form_to_remote, remote_function
• sfYUI::connection()
18
symfony YUI Integration
• Helpers– Controls
• input_date_tag -> YUI Calendar
• textarea_tag -> YUI Rich Text Editor
• slider_control -> YUI Slider
• input_autocomplete_tag -> YUI Autocomplete
– UI • link_to_dialog -> modal dialog
• Tooltip -> tool tips
– Effects• visual_effect | sfYUI::animation()
19
Easy AJAX
<?php use_helper(’Javascript') ?>
<?php echo link_to_remote(’about (ajax)', array('update' => ’content', 'url' => ’content/render?permalink=about')); ?>
<div id=“content”></div>
20
A better AJAX (unobtrusive)
• Unobtrusively add events/behaviors to a page
<?php use_helper(’YUIJavascript') ?>
<?php echo link_to_remote(’about (ajax)', array('update' => ’content', 'url' => ’content/render?permalink=about')); ?>
<div id=“content”></div>
21
Where to go from here?
• Read Documentation
– Yahoo Developer Network• http://developer.yahoo.com/
– symfony Project• http://symfony-project.com/book
22
Documentation
• The Definitive Guide to symfony– http://symfony-project.com/book/trunk
– Released open source 1/29/2007
– Licensed under GFDL
• API Documentation– Good coverage
• Wiki– Many useful guides and how to knowledge
– Many user contributed tips
23
Questions?
24
YAHOO IS HIRING
Are you good with AJAX, PHP, DHTML/XHTML, Javascript, CSS,
Actionscript / Flash?
Then we have a job for you!
25
Enjoy the rest of the conference!
