symfony + yui = web 2.0 framework Dustin Whittle Social Search Group

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.

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.

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

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

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

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

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

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

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

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

Integrate your own PHP libraries Autoloading hooks for easy integration of Zend Framework EZ Components PEAR Custom

Autoloading hooks for easy integration of

Zend Framework

EZ Components

PEAR

Custom

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

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

AJAX Toolkit Integration Prototype/scriptaculous built-in Plugins available: sfUJSPlugin -> helpers for UJS via jQuery sfYUIPlugin -> helpers for YUI Build your own helpers

Prototype/scriptaculous built-in

Plugins available:

sfUJSPlugin -> helpers for UJS via jQuery

sfYUIPlugin -> helpers for YUI

Build your own helpers

Why symfony + YUI? PHP Framework Javascript Framework CSS Framework Integrated Development Environment Helpers Controls Widgets Validation Debugging Integrated Logging Console IDE Support: Aptana

PHP Framework

Javascript Framework

CSS Framework

Integrated Development Environment

Helpers

Controls

Widgets

Validation

Debugging

Integrated Logging Console

IDE Support: Aptana

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

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

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

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

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

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

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

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

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

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

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

Layouts by default

Reset-Fonts-Grids

Base

Skin (sam)

YUI / symfony base js/css

Appending events via sfYUIFilter

ID generation for events

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()

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()

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()

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()

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>

<?php use_helper(’Javascript') ?>

<?php echo link_to_remote(’about (ajax)', array('update' => ’content', 'url' => ’content/render?permalink=about')); ?>

<div id=“content”></div>

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>

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>

Where to go from here? Read Documentation Yahoo Developer Network http://developer.yahoo.com/ symfony Project http://symfony-project.com/book

Read Documentation

Yahoo Developer Network

http://developer.yahoo.com/

symfony Project

http://symfony-project.com/book

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

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

Questions?

YAHOO IS HIRING Are you good with AJAX, PHP, DHTML/XHTML, Javascript, CSS, Actionscript / Flash? Then we have a job for you!

Enjoy the rest of the conference!