symfony + YUI = professional web 2.0

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.

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

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

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

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

Integrate your own PHP libraries

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

AJAX Toolkit Integration

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

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

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

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

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

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

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

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>

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>

Where to go from here?

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

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!

symfony + YUI = professional web 2.0

1 comments

Notes on slide 1

19 Favorites & 4 Groups