Escribiendo Aplicaciones Ajax con PHP

Csar D. Rodas
crodas@member.fsf.org

http://cesar.la/talks/

Latinoware 2008, Foz do Iguau, Brasil

1

Quien les habla?

Participante Google Summer of Code 2008
Plug-in para WordPress

Quien les habla?

Participante Google Summer of Code 2008
Plug-in para WordPress

Ganador del PHP Innovation award 2007

Quien les habla?

Participante Google Summer of Code 2008
Plug-in para WordPress

Ganador del PHP Innovation award 2007 Centro Nacional de Computacion

Quien les habla?

Participante Google Summer of Code 2008
Plug-in para WordPress

Ganador del PHP Innovation award 2007 Centro Nacional de Computacion www.CesaRodas.com

Quien les habla?

Participante Google Summer of Code 2008
Plug-in para WordPress

Ganador del PHP Innovation award 2007 Centro Nacional de Computacion www.CesaRodas.com

Cesar D. Rodas, http://cesar.la/ - L EX AT

Porque utilizar AJAX?

Es la tendencia (web 2.0)

Porque utilizar AJAX?

Es la tendencia (web 2.0) Desarrollo de "Aplicaciones" webs.

Porque utilizar AJAX?

Es la tendencia (web 2.0) Desarrollo de "Aplicaciones" webs. Reduccin de ancho de banda.

Porque utilizar AJAX?

Es la tendencia (web 2.0) Desarrollo de "Aplicaciones" webs. Reduccin de ancho de banda. ...

Cesar D. Rodas, http://cesar.la/ - L EX AT

Porqu AJAX es complicado

Doble programacin.
Servidor (PHP). Cliente (Javascript).

Porqu AJAX es complicado

Doble programacin.
Servidor (PHP). Cliente (Javascript).

Las implementaciones de Javascript no son estndares.

Porqu AJAX es complicado

Doble programacin.
Servidor (PHP). Cliente (Javascript).

Las implementaciones de Javascript no son estndares. Liberas de PHP complicadas o incompletas.

Porqu AJAX es complicado

Doble programacin.
Servidor (PHP). Cliente (Javascript).

Las implementaciones de Javascript no son estndares. Liberas de PHP complicadas o incompletas.

Montn de cdigos para cosas sencillas. Se necesita escribir javascript. Casi todas las libreras PHP slo relizan RPC.

Porqu AJAX es complicado

Doble programacin.
Servidor (PHP). Cliente (Javascript).

Las implementaciones de Javascript no son estndares. Liberas de PHP complicadas o incompletas.

Montn de cdigos para cosas sencillas. Se necesita escribir javascript. Casi todas las libreras PHP slo relizan RPC.

Las libreras Javascript son muy grandes.

Porqu AJAX es complicado

Doble programacin.
Servidor (PHP). Cliente (Javascript).

Las implementaciones de Javascript no son estndares. Liberas de PHP complicadas o incompletas.

Montn de cdigos para cosas sencillas. Se necesita escribir javascript. Casi todas las libreras PHP slo relizan RPC.

Las libreras Javascript son muy grandes.

Cesar D. Rodas, http://cesar.la/ - L EX AT

Algunas soluciones...
Simple librera de Javascript.

Algunas soluciones...
Simple librera de Javascript. Mtodo de transporte.
XML JSON ...

Algunas soluciones...
Simple librera de Javascript. Mtodo de transporte.
XML JSON ...

Buenas libreras y/o frameworks "AJAX" en PHP.

Algunas soluciones...
Simple librera de Javascript. Mtodo de transporte.
XML JSON ...

Buenas libreras y/o frameworks "AJAX" en PHP.

Cesar D. Rodas, http://cesar.la/ - L EX AT

Comparacin de Librerias/Frameworks Nada personal.

XAjax
<?php /* RPC */ function myFunction($arg) { /* Creando una respuesta */ $objResponse = new xajaxResponse(); $objResponse->assign("SomeElementId","innerHTML", $newContent); } $xajax = new xajax(); /* Registrando funcion */ $xajax->registerFunction("myFunction"); /* Procesando */ $xajax->processRequest(); ?> <!--Codigo Javascript--> <?php $xajax->printJavascript(); ?> <!-- el codigo --> <div id="SomeElementId"></div> <button onclick="xajax myFunction('It worked!');"></pre>
Cesar D. Rodas, http://cesar.la/ - L EX AT 7

XAjax - Desventajas
Utiliza solo XML para el transporte.

XAjax - Desventajas
Utiliza solo XML para el transporte. Genera mucho cdigo.

XAjax - Desventajas
Utiliza solo XML para el transporte. Genera mucho cdigo. API dbil.
No hay forma de crear elementos en la repuesta. Cosas complicadas requieren de escritura de javascript.

Cesar D. Rodas, http://cesar.la/ - L EX AT

SAjax
<?php function multiply($x, $y) { return $x * $y; } sajax init(); sajax export("multiply"); sajax handle client request(); ?> <script> <?php sajax show javascript(); ?> function do multiply cb(z) { document.getElementById("z").value = z; } function do multiply() { x = document.getElementById("x").value; y = document.getElementById("y").value; x multiply(x, y, do multiply cb); } </script>
Cesar D. Rodas, http://cesar.la/ - L EX AT 9

SAjax - Desventajas
Genera mucho javascript.

SAjax - Desventajas
Genera mucho javascript. Poca documentacion.

SAjax - Desventajas
Genera mucho javascript. Poca documentacion. API dbil.

SAjax - Desventajas
Genera mucho javascript. Poca documentacion. API dbil. Se necesita escribir cdigo Javascript.

SAjax - Desventajas
Genera mucho javascript. Poca documentacion. API dbil. Se necesita escribir cdigo Javascript. Solo realiza el "RPC".

Cesar D. Rodas, http://cesar.la/ - L EX AT

10

Cual sera la solucin perfecta?

Lo que todo PHPero necesita...

11

La solucin
La parte importante. Abstraccin de Javascript. Abstraccin de los Objetos HTML (DOM API). Mtodo optimizado de transporte.

Cesar D. Rodas, http://cesar.la/ - L EX AT

12

PHPAJAX

13

PHPAJAX
PHPClasses, Open source (BSD License).

PHPAJAX
PHPClasses, Open source (BSD License). Es la versin (re-escritura) 3.

PHPAJAX
PHPClasses, Open source (BSD License). Es la versin (re-escritura) 3. Extensible.

PHPAJAX
PHPClasses, Open source (BSD License). Es la versin (re-escritura) 3. Extensible. Mtodo de transporte.

PHPAJAX
PHPClasses, Open source (BSD License). Es la versin (re-escritura) 3. Extensible. Mtodo de transporte. Genera cdigo javascript desde el PHP.

PHPAJAX
PHPClasses, Open source (BSD License). Es la versin (re-escritura) 3. Extensible. Mtodo de transporte. Genera cdigo javascript desde el PHP. Subir (upload) archivos al servidor usando "ajax".

PHPAJAX
PHPClasses, Open source (BSD License). Es la versin (re-escritura) 3. Extensible. Mtodo de transporte. Genera cdigo javascript desde el PHP. Subir (upload) archivos al servidor usando "ajax".

Cesar D. Rodas, http://cesar.la/ - L EX AT

14

PHPAJAX - Un poco de historia

<?php class chat put extends phpajax { var $hotkeys=array("ctrl-m","alt-y"); var $inputs=array("text","usr id"); function loading() { aprint('loading', 'Sending...'); ashow('loading'); ahide('send'); } function main() { global $mysql; $a = $this->text; aprint('chat-text',"me $a",false); aprint('text','');ashow('send'); js("getObject('chat-text').scrollTop = getObject('chat-text').scrollHeight;"); } } ?>

Cesar D. Rodas, http://cesar.la/ - L EX AT

15

PHPAJAX - Desventajas
API muy dbil.

PHPAJAX - Desventajas
API muy dbil. JSON.

PHPAJAX - Desventajas
API muy dbil. JSON. Prototype.

PHPAJAX - Desventajas
API muy dbil. JSON. Prototype. Definir una clase por accin.

PHPAJAX - Desventajas
API muy dbil. JSON. Prototype. Definir una clase por accin.

Cesar D. Rodas, http://cesar.la/ - L EX AT

16

PHPAJAX 3
Mtodo de transporte.
XML, JSON, ... ? Cdigo Javascript.

PHPAJAX 3
Mtodo de transporte.
XML, JSON, ... ? Cdigo Javascript.

Posible mtodo alternativo de AJAX sin XMLHttpRequest().

PHPAJAX 3
Mtodo de transporte.
XML, JSON, ... ? Cdigo Javascript.

Posible mtodo alternativo de AJAX sin XMLHttpRequest(). Genera cdigo Javascript a partir de PHP.

PHPAJAX 3
Mtodo de transporte.
XML, JSON, ... ? Cdigo Javascript.

Posible mtodo alternativo de AJAX sin XMLHttpRequest(). Genera cdigo Javascript a partir de PHP. Funciones comunes para evitar escritura de Javascript.
Filtros. Operaciones Matematicas.

PHPAJAX 3
Mtodo de transporte.
XML, JSON, ... ? Cdigo Javascript.

Posible mtodo alternativo de AJAX sin XMLHttpRequest(). Genera cdigo Javascript a partir de PHP. Funciones comunes para evitar escritura de Javascript.
Filtros. Operaciones Matematicas.

Creacion de elementos HTML en el RPC.

PHPAJAX 3
Mtodo de transporte.
XML, JSON, ... ? Cdigo Javascript.

Posible mtodo alternativo de AJAX sin XMLHttpRequest(). Genera cdigo Javascript a partir de PHP. Funciones comunes para evitar escritura de Javascript.
Filtros. Operaciones Matematicas.

Creacion de elementos HTML en el RPC. "Hooks" a eventos.

Cesar D. Rodas, http://cesar.la/ - L EX AT

17

PHPAJAX 3 - PHP2JS
<?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject("algun input"); $numero = js::GetObject("algun numero"I );

PHPAJAX 3 - PHP2JS
<?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject("algun input"); $numero = js::GetObject("algun numero"I ); js::alert("El valor del input es ", $text->value);

PHPAJAX 3 - PHP2JS
<?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject("algun input"); $numero = js::GetObject("algun numero"I ); js::alert("El valor del input es ", $text->value); /* filtro */ jfilt::number($numero->value,"Tiene que ser un numero");a

PHPAJAX 3 - PHP2JS
<?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject("algun input"); $numero = js::GetObject("algun numero"I ); js::alert("El valor del input es ", $text->value); /* filtro */ jfilt::number($numero->value,"Tiene que ser un numero");a /* matematica, suma */ $numero->value = jnum::add(5,$numero->value); } } ?>

Cesar D. Rodas, http://cesar.la/ - L EX AT

18

Theory is good, show me in action

19

Muchas gracias! Preguntas?

Cesar Rodas.
crodas@member.fsf.org http://cesarodas.com/

Mi blog.
http://cesar.la/

20

Resources
PHPAjax
http://www.phpajax.org/

XAjax
http://www.xajaxproject.org

21

Powered by...

Cesar D. Rodas, http://cesar.la/ - L EX AT

22