SlideShare una empresa de Scribd logo
1 de 61
Descargar para leer sin conexión
Escribiendo Aplicaciones Ajax con
              PHP


                  César D. Rodas
                crodas@member.fsf.org



               http://cesar.la/talks/




       Latinoware 2008, Foz do Iguaçu, 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                        2
Porque utilizar AJAX?
Es la tendencia (web 2.0)
Porque utilizar AJAX?
Es la tendencia (web 2.0)
Desarrollo de quot;Aplicacionesquot; webs.
Porque utilizar AJAX?
Es la tendencia (web 2.0)
Desarrollo de quot;Aplicacionesquot; webs.
Reducción de ancho de banda.
Porque utilizar AJAX?
       Es la tendencia (web 2.0)
       Desarrollo de quot;Aplicacionesquot; webs.
       Reducción de ancho de banda.
       ...




Cesar D. Rodas, http://cesar.la/ - L EX
                                   AT                             3
Porqué AJAX es complicado
Doble programación.
  • Servidor (PHP).
  • Cliente (Javascript).
Porqué AJAX es complicado
Doble programación.
  • Servidor (PHP).
  • Cliente (Javascript).

Las implementaciones de Javascript no son estándares.
Porqué AJAX es complicado
Doble programación.
  • Servidor (PHP).
  • Cliente (Javascript).

Las implementaciones de Javascript no son estándares.
Liberías de PHP complicadas o incompletas.
Porqué AJAX es complicado
Doble programación.
  • Servidor (PHP).
  • Cliente (Javascript).

Las implementaciones de Javascript no son estándares.
Liberías de PHP complicadas o incompletas.
  • Montón de códigos para cosas sencillas.
  • Se necesita escribir javascript.
  • Casi todas las librerías PHP sólo relizan RPC.
Porqué AJAX es complicado
Doble programación.
  • Servidor (PHP).
  • Cliente (Javascript).

Las implementaciones de Javascript no son estándares.
Liberías de PHP complicadas o incompletas.
  • Montón de códigos para cosas sencillas.
  • Se necesita escribir javascript.
  • Casi todas las librerías PHP sólo relizan RPC.

Las librerías Javascript son muy grandes.
Porqué AJAX es complicado
       Doble programación.
             • Servidor (PHP).
             • Cliente (Javascript).

       Las implementaciones de Javascript no son estándares.
       Liberías de PHP complicadas o incompletas.
             • Montón de códigos para cosas sencillas.
             • Se necesita escribir javascript.
             • Casi todas las librerías PHP sólo relizan RPC.

       Las librerías Javascript son muy grandes.




Cesar D. Rodas, http://cesar.la/ - L EX
                                   AT                           4
Algunas soluciones...
Simple librería de Javascript.
Algunas soluciones...
Simple librería de Javascript.
Método de transporte.
  • XML
  • JSON
  • ...
Algunas soluciones...
Simple librería de Javascript.
Método de transporte.
  • XML
  • JSON
  • ...

Buenas librerías y/o frameworks quot;AJAXquot; en PHP.
Algunas soluciones...
       Simple librería de Javascript.
       Método de transporte.
             • XML
             • JSON
             • ...

       Buenas librerías y/o frameworks quot;AJAXquot; en PHP.




Cesar D. Rodas, http://cesar.la/ - L EX
                                   AT                             5
Comparación de
Librerias/Frameworks
        Nada personal.




                         6
XAjax
<?php
/* RPC */
function myFunction($arg) {
    /* Creando una respuesta */
    $objResponse = new xajaxResponse();
    $objResponse->assign(quot;SomeElementIdquot;,quot;innerHTMLquot;, $newContent);
}
$xajax = new xajax();
/* Registrando funcion */
$xajax->registerFunction(quot;myFunctionquot;);
/* Procesando */
$xajax->processRequest();
?>

<!--Codigo Javascript-->
<?php $xajax->printJavascript(); ?>
<!-- el codigo -->
<div id=quot;SomeElementIdquot;></div>
<button onclick=quot;xajax myFunction('It worked!');quot;></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 código.
XAjax - Desventajas
       Utiliza solo XML para el transporte.
       Genera mucho código.
       API débil.
             • 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                                    8
SAjax
<?php
function multiply($x, $y) {
      return $x * $y;
}
sajax init();
sajax export(quot;multiplyquot;);
sajax handle client request();
?>
<script>
<?php sajax show javascript(); ?>
function do multiply cb(z) {
document.getElementById(quot;zquot;).value = z;
}
function do multiply() {
x = document.getElementById(quot;xquot;).value;
y = document.getElementById(quot;yquot;).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 débil.
SAjax - Desventajas
Genera mucho javascript.
Poca documentacion.
API débil.
Se necesita escribir código Javascript.
SAjax - Desventajas
       Genera mucho javascript.
       Poca documentacion.
       API débil.
       Se necesita escribir código Javascript.
       Solo realiza el quot;RPCquot;.




Cesar D. Rodas, http://cesar.la/ - L EX
                                   AT                           10
Cual sería la solución
      perfecta?
    Lo que todo PHPero necesita...




                                     11
La solución
       La parte importante.
       Abstracción de Javascript.
       Abstracción de los Objetos HTML (DOM API).
       Método 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 versión (re-escritura) 3.
PHPAJAX
PHPClasses, Open source (BSD License).
Es la versión (re-escritura) 3.
Extensible.
PHPAJAX
PHPClasses, Open source (BSD License).
Es la versión (re-escritura) 3.
Extensible.
Método de transporte.
PHPAJAX
PHPClasses, Open source (BSD License).
Es la versión (re-escritura) 3.
Extensible.
Método de transporte.
Genera código javascript desde el PHP.
PHPAJAX
PHPClasses, Open source (BSD License).
Es la versión (re-escritura) 3.
Extensible.
Método de transporte.
Genera código javascript desde el PHP.
Subir (upload) archivos al servidor usando quot;ajaxquot;.
PHPAJAX
       PHPClasses, Open source (BSD License).
       Es la versión (re-escritura) 3.
       Extensible.
       Método de transporte.
       Genera código javascript desde el PHP.
       Subir (upload) archivos al servidor usando quot;ajaxquot;.




Cesar D. Rodas, http://cesar.la/ - L EX
                                   AT                       14
PHPAJAX - Un poco de historia
<?php
class chat put extends phpajax {
    var $hotkeys=array(quot;ctrl-mquot;,quot;alt-yquot;);
    var $inputs=array(quot;textquot;,quot;usr idquot;);
    function loading() {
       aprint('loading', 'Sending...');
       ashow('loading');
       ahide('send');
    }
function main() {
       global $mysql;
       $a = $this->text;
       aprint('chat-text',quot;me $aquot;,false);
aprint('text','');ashow('send');
js(quot;getObject('chat-text').scrollTop = getObject('chat-text').scrollHeight;quot;);
}
}
?>


Cesar D. Rodas, http://cesar.la/ - L EX
                                   AT                                        15
PHPAJAX - Desventajas
API muy débil.
PHPAJAX - Desventajas
API muy débil.
JSON.
PHPAJAX - Desventajas
API muy débil.
JSON.
Prototype.
PHPAJAX - Desventajas
API muy débil.
JSON.
Prototype.
Definir una clase por acción.
PHPAJAX - Desventajas
       API muy débil.
       JSON.
       Prototype.
       Definir una clase por acción.




Cesar D. Rodas, http://cesar.la/ - L EX
                                   AT                        16
PHPAJAX 3
Método de transporte.
  • XML, JSON, ... ?
  • Código Javascript.
PHPAJAX 3
Método de transporte.
  • XML, JSON, ... ?
  • Código Javascript.

Posible método alternativo de AJAX sin XMLHttpRequest().
PHPAJAX 3
Método de transporte.
  • XML, JSON, ... ?
  • Código Javascript.

Posible método alternativo de AJAX sin XMLHttpRequest().
Genera código Javascript a partir de PHP.
PHPAJAX 3
Método de transporte.
  • XML, JSON, ... ?
  • Código Javascript.

Posible método alternativo de AJAX sin XMLHttpRequest().
Genera código Javascript a partir de PHP.
Funciones comunes para evitar escritura de Javascript.
  • Filtros.
  • Operaciones Matematicas.
PHPAJAX 3
Método de transporte.
  • XML, JSON, ... ?
  • Código Javascript.

Posible método alternativo de AJAX sin XMLHttpRequest().
Genera código Javascript a partir de PHP.
Funciones comunes para evitar escritura de Javascript.
  • Filtros.
  • Operaciones Matematicas.

Creacion de elementos HTML en el RPC.
PHPAJAX 3
       Método de transporte.
             • XML, JSON, ... ?
             • Código Javascript.

       Posible método alternativo de AJAX sin XMLHttpRequest().
       Genera código Javascript a partir de PHP.
       Funciones comunes para evitar escritura de Javascript.
             • Filtros.
             • Operaciones Matematicas.

       Creacion de elementos HTML en el RPC.
       quot;Hooksquot; 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(quot;algun inputquot;);
      $numero = js::GetObject(quot;algun numeroquot;I );
PHPAJAX 3 - PHP2JS
<?php
class MyButton extends HtmlButtons {
   #
   function onClick() {
       #
       $text = js::GetObject(quot;algun inputquot;);
       $numero = js::GetObject(quot;algun numeroquot;I );
      js::alert(quot;El valor del input es quot;, $text->value);
PHPAJAX 3 - PHP2JS
<?php
class MyButton extends HtmlButtons {
   #
   function onClick() {
       #
       $text = js::GetObject(quot;algun inputquot;);
       $numero = js::GetObject(quot;algun numeroquot;I );
      js::alert(quot;El valor del input es quot;, $text->value);
      /* filtro */
       jfilt::number($numero->value,quot;Tiene que ser un numeroquot;);a
PHPAJAX 3 - PHP2JS
<?php
class MyButton extends HtmlButtons {
   #
   function onClick() {
       #
       $text = js::GetObject(quot;algun inputquot;);
       $numero = js::GetObject(quot;algun numeroquot;I );
      js::alert(quot;El valor del input es quot;, $text->value);
      /* filtro */
       jfilt::number($numero->value,quot;Tiene que ser un numeroquot;);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

Más contenido relacionado

La actualidad más candente

Introducción a PHP
Introducción a PHPIntroducción a PHP
Introducción a PHP
jdaniel_7ez
 
Java script(diapositivas)
Java script(diapositivas) Java script(diapositivas)
Java script(diapositivas)
Roberto Mejia
 

La actualidad más candente (15)

Introducción a programación con PHP
Introducción a programación con PHPIntroducción a programación con PHP
Introducción a programación con PHP
 
Javascript Básico
Javascript BásicoJavascript Básico
Javascript Básico
 
4.Programación con PHP y MySQL
4.Programación con PHP y MySQL4.Programación con PHP y MySQL
4.Programación con PHP y MySQL
 
Introducción a PHP
Introducción a PHPIntroducción a PHP
Introducción a PHP
 
Curso php - capitulo 1 (introducción)
Curso php - capitulo 1 (introducción)Curso php - capitulo 1 (introducción)
Curso php - capitulo 1 (introducción)
 
Conociendo PHP
Conociendo PHPConociendo PHP
Conociendo PHP
 
Introducción a groovy & grails
Introducción a groovy & grailsIntroducción a groovy & grails
Introducción a groovy & grails
 
Guia N2 Proyectos Web Php
Guia N2   Proyectos Web   PhpGuia N2   Proyectos Web   Php
Guia N2 Proyectos Web Php
 
Desarrollo web en Nodejs con Pillars por Chelo Quilón
Desarrollo web en Nodejs con Pillars por Chelo QuilónDesarrollo web en Nodejs con Pillars por Chelo Quilón
Desarrollo web en Nodejs con Pillars por Chelo Quilón
 
Iniciación PHP 5. Introducción
Iniciación PHP 5. IntroducciónIniciación PHP 5. Introducción
Iniciación PHP 5. Introducción
 
Java script(diapositivas)
Java script(diapositivas) Java script(diapositivas)
Java script(diapositivas)
 
Grails
GrailsGrails
Grails
 
Curso php-my sql-clase-2
Curso php-my sql-clase-2Curso php-my sql-clase-2
Curso php-my sql-clase-2
 
Introduccion A Groovy
Introduccion A GroovyIntroduccion A Groovy
Introduccion A Groovy
 
Programacion - Php
Programacion - PhpProgramacion - Php
Programacion - Php
 

Destacado

Modelo entidad relacion de base de datos
Modelo entidad relacion de base de datosModelo entidad relacion de base de datos
Modelo entidad relacion de base de datos
jinethmarcelasanchez
 

Destacado (14)

AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
ajax
ajaxajax
ajax
 
Tendencias y casos de Redes Sociales
Tendencias y casos de Redes SocialesTendencias y casos de Redes Sociales
Tendencias y casos de Redes Sociales
 
El mundo de los sitios web
El mundo de los sitios webEl mundo de los sitios web
El mundo de los sitios web
 
JSON Android
JSON AndroidJSON Android
JSON Android
 
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...
GUIA DE  LABORATORIO  PHONE GAP JQUERY  MOBILE  CARGADO DE_DATOS_DE_REGISTROS...GUIA DE  LABORATORIO  PHONE GAP JQUERY  MOBILE  CARGADO DE_DATOS_DE_REGISTROS...
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...
 
Conexion a servidor desde android
Conexion a servidor desde androidConexion a servidor desde android
Conexion a servidor desde android
 
Json short manual
Json short manualJson short manual
Json short manual
 
Modelo entidad relacion de base de datos
Modelo entidad relacion de base de datosModelo entidad relacion de base de datos
Modelo entidad relacion de base de datos
 
COMPORTAMIENTO DEL CONSUMIDOR
COMPORTAMIENTO DEL CONSUMIDORCOMPORTAMIENTO DEL CONSUMIDOR
COMPORTAMIENTO DEL CONSUMIDOR
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 
How to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanHow to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media Plan
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting Personal
 

Similar a PHPAJAX

Servicios web en Java, PHP, Perl y Google
Servicios web en Java, PHP, Perl y GoogleServicios web en Java, PHP, Perl y Google
Servicios web en Java, PHP, Perl y Google
Armando Nuñez Ramos
 
Php02 fundamentos de php
Php02 fundamentos de phpPhp02 fundamentos de php
Php02 fundamentos de php
Julio Pari
 
Node.js - Eventos para Todos
Node.js - Eventos para TodosNode.js - Eventos para Todos
Node.js - Eventos para Todos
Mariano Iglesias
 
Web20
Web20Web20
Web20
UJAP
 

Similar a PHPAJAX (20)

Ajax
AjaxAjax
Ajax
 
Jc Web20 Open Source Why Floss2007
Jc Web20 Open Source Why Floss2007Jc Web20 Open Source Why Floss2007
Jc Web20 Open Source Why Floss2007
 
Introducción Nivelación PHP
Introducción Nivelación PHPIntroducción Nivelación PHP
Introducción Nivelación PHP
 
Jc Web20 Open Source Why Floss2007
Jc Web20 Open Source Why Floss2007Jc Web20 Open Source Why Floss2007
Jc Web20 Open Source Why Floss2007
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js Introduccion
 
Servicios web Extendido_error perl
Servicios web Extendido_error perlServicios web Extendido_error perl
Servicios web Extendido_error perl
 
Rompiendo paradigmas
Rompiendo paradigmasRompiendo paradigmas
Rompiendo paradigmas
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
 
Servicios web java, php, perl, google
Servicios web java, php, perl, googleServicios web java, php, perl, google
Servicios web java, php, perl, google
 
Codemotion Madrid 2013 - [PHP] desarrollo de extensiones en c c++
Codemotion Madrid 2013 - [PHP] desarrollo de extensiones en c c++Codemotion Madrid 2013 - [PHP] desarrollo de extensiones en c c++
Codemotion Madrid 2013 - [PHP] desarrollo de extensiones en c c++
 
Curso de Desarrollo Web de Platzi
Curso de Desarrollo Web de PlatziCurso de Desarrollo Web de Platzi
Curso de Desarrollo Web de Platzi
 
Web sockets
Web socketsWeb sockets
Web sockets
 
Guiacursophp sql
Guiacursophp sqlGuiacursophp sql
Guiacursophp sql
 
Curso introduccionphp sql
Curso introduccionphp sqlCurso introduccionphp sql
Curso introduccionphp sql
 
Servicios web en Java, PHP, Perl y Google
Servicios web en Java, PHP, Perl y GoogleServicios web en Java, PHP, Perl y Google
Servicios web en Java, PHP, Perl y Google
 
HTML Tour - Construyendo tu ecosistema de desarrollo Web
HTML Tour - Construyendo tu ecosistema de desarrollo WebHTML Tour - Construyendo tu ecosistema de desarrollo Web
HTML Tour - Construyendo tu ecosistema de desarrollo Web
 
WORKSHOP I: Introducción a API REST
WORKSHOP I: Introducción a API RESTWORKSHOP I: Introducción a API REST
WORKSHOP I: Introducción a API REST
 
Php02 fundamentos de php
Php02 fundamentos de phpPhp02 fundamentos de php
Php02 fundamentos de php
 
Node.js - Eventos para Todos
Node.js - Eventos para TodosNode.js - Eventos para Todos
Node.js - Eventos para Todos
 
Web20
Web20Web20
Web20
 

Último

EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Último (11)

Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 

PHPAJAX

  • 1. Escribiendo Aplicaciones Ajax con PHP César D. Rodas crodas@member.fsf.org http://cesar.la/talks/ Latinoware 2008, Foz do Iguaçu, Brasil 1
  • 2. Quien les habla? Participante Google Summer of Code 2008 • Plug-in para WordPress
  • 3. Quien les habla? Participante Google Summer of Code 2008 • Plug-in para WordPress Ganador del PHP Innovation award 2007
  • 4. Quien les habla? Participante Google Summer of Code 2008 • Plug-in para WordPress Ganador del PHP Innovation award 2007 Centro Nacional de Computacion
  • 5. 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
  • 6. 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 2
  • 7. Porque utilizar AJAX? Es la tendencia (web 2.0)
  • 8. Porque utilizar AJAX? Es la tendencia (web 2.0) Desarrollo de quot;Aplicacionesquot; webs.
  • 9. Porque utilizar AJAX? Es la tendencia (web 2.0) Desarrollo de quot;Aplicacionesquot; webs. Reducción de ancho de banda.
  • 10. Porque utilizar AJAX? Es la tendencia (web 2.0) Desarrollo de quot;Aplicacionesquot; webs. Reducción de ancho de banda. ... Cesar D. Rodas, http://cesar.la/ - L EX AT 3
  • 11. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript).
  • 12. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript). Las implementaciones de Javascript no son estándares.
  • 13. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript). Las implementaciones de Javascript no son estándares. Liberías de PHP complicadas o incompletas.
  • 14. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript). Las implementaciones de Javascript no son estándares. Liberías de PHP complicadas o incompletas. • Montón de códigos para cosas sencillas. • Se necesita escribir javascript. • Casi todas las librerías PHP sólo relizan RPC.
  • 15. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript). Las implementaciones de Javascript no son estándares. Liberías de PHP complicadas o incompletas. • Montón de códigos para cosas sencillas. • Se necesita escribir javascript. • Casi todas las librerías PHP sólo relizan RPC. Las librerías Javascript son muy grandes.
  • 16. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript). Las implementaciones de Javascript no son estándares. Liberías de PHP complicadas o incompletas. • Montón de códigos para cosas sencillas. • Se necesita escribir javascript. • Casi todas las librerías PHP sólo relizan RPC. Las librerías Javascript son muy grandes. Cesar D. Rodas, http://cesar.la/ - L EX AT 4
  • 18. Algunas soluciones... Simple librería de Javascript. Método de transporte. • XML • JSON • ...
  • 19. Algunas soluciones... Simple librería de Javascript. Método de transporte. • XML • JSON • ... Buenas librerías y/o frameworks quot;AJAXquot; en PHP.
  • 20. Algunas soluciones... Simple librería de Javascript. Método de transporte. • XML • JSON • ... Buenas librerías y/o frameworks quot;AJAXquot; en PHP. Cesar D. Rodas, http://cesar.la/ - L EX AT 5
  • 22. XAjax <?php /* RPC */ function myFunction($arg) { /* Creando una respuesta */ $objResponse = new xajaxResponse(); $objResponse->assign(quot;SomeElementIdquot;,quot;innerHTMLquot;, $newContent); } $xajax = new xajax(); /* Registrando funcion */ $xajax->registerFunction(quot;myFunctionquot;); /* Procesando */ $xajax->processRequest(); ?> <!--Codigo Javascript--> <?php $xajax->printJavascript(); ?> <!-- el codigo --> <div id=quot;SomeElementIdquot;></div> <button onclick=quot;xajax myFunction('It worked!');quot;></pre> Cesar D. Rodas, http://cesar.la/ - L EX AT 7
  • 23. XAjax - Desventajas Utiliza solo XML para el transporte.
  • 24. XAjax - Desventajas Utiliza solo XML para el transporte. Genera mucho código.
  • 25. XAjax - Desventajas Utiliza solo XML para el transporte. Genera mucho código. API débil. • 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 8
  • 26. SAjax <?php function multiply($x, $y) { return $x * $y; } sajax init(); sajax export(quot;multiplyquot;); sajax handle client request(); ?> <script> <?php sajax show javascript(); ?> function do multiply cb(z) { document.getElementById(quot;zquot;).value = z; } function do multiply() { x = document.getElementById(quot;xquot;).value; y = document.getElementById(quot;yquot;).value; x multiply(x, y, do multiply cb); } </script> Cesar D. Rodas, http://cesar.la/ - L EX AT 9
  • 27. SAjax - Desventajas Genera mucho javascript.
  • 28. SAjax - Desventajas Genera mucho javascript. Poca documentacion.
  • 29. SAjax - Desventajas Genera mucho javascript. Poca documentacion. API débil.
  • 30. SAjax - Desventajas Genera mucho javascript. Poca documentacion. API débil. Se necesita escribir código Javascript.
  • 31. SAjax - Desventajas Genera mucho javascript. Poca documentacion. API débil. Se necesita escribir código Javascript. Solo realiza el quot;RPCquot;. Cesar D. Rodas, http://cesar.la/ - L EX AT 10
  • 32. Cual sería la solución perfecta? Lo que todo PHPero necesita... 11
  • 33. La solución La parte importante. Abstracción de Javascript. Abstracción de los Objetos HTML (DOM API). Método optimizado de transporte. Cesar D. Rodas, http://cesar.la/ - L EX AT 12
  • 34. PHPAJAX 13
  • 36. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3.
  • 37. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3. Extensible.
  • 38. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3. Extensible. Método de transporte.
  • 39. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3. Extensible. Método de transporte. Genera código javascript desde el PHP.
  • 40. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3. Extensible. Método de transporte. Genera código javascript desde el PHP. Subir (upload) archivos al servidor usando quot;ajaxquot;.
  • 41. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3. Extensible. Método de transporte. Genera código javascript desde el PHP. Subir (upload) archivos al servidor usando quot;ajaxquot;. Cesar D. Rodas, http://cesar.la/ - L EX AT 14
  • 42. PHPAJAX - Un poco de historia <?php class chat put extends phpajax { var $hotkeys=array(quot;ctrl-mquot;,quot;alt-yquot;); var $inputs=array(quot;textquot;,quot;usr idquot;); function loading() { aprint('loading', 'Sending...'); ashow('loading'); ahide('send'); } function main() { global $mysql; $a = $this->text; aprint('chat-text',quot;me $aquot;,false); aprint('text','');ashow('send'); js(quot;getObject('chat-text').scrollTop = getObject('chat-text').scrollHeight;quot;); } } ?> Cesar D. Rodas, http://cesar.la/ - L EX AT 15
  • 44. PHPAJAX - Desventajas API muy débil. JSON.
  • 45. PHPAJAX - Desventajas API muy débil. JSON. Prototype.
  • 46. PHPAJAX - Desventajas API muy débil. JSON. Prototype. Definir una clase por acción.
  • 47. PHPAJAX - Desventajas API muy débil. JSON. Prototype. Definir una clase por acción. Cesar D. Rodas, http://cesar.la/ - L EX AT 16
  • 48. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript.
  • 49. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript. Posible método alternativo de AJAX sin XMLHttpRequest().
  • 50. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript. Posible método alternativo de AJAX sin XMLHttpRequest(). Genera código Javascript a partir de PHP.
  • 51. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript. Posible método alternativo de AJAX sin XMLHttpRequest(). Genera código Javascript a partir de PHP. Funciones comunes para evitar escritura de Javascript. • Filtros. • Operaciones Matematicas.
  • 52. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript. Posible método alternativo de AJAX sin XMLHttpRequest(). Genera código Javascript a partir de PHP. Funciones comunes para evitar escritura de Javascript. • Filtros. • Operaciones Matematicas. Creacion de elementos HTML en el RPC.
  • 53. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript. Posible método alternativo de AJAX sin XMLHttpRequest(). Genera código Javascript a partir de PHP. Funciones comunes para evitar escritura de Javascript. • Filtros. • Operaciones Matematicas. Creacion de elementos HTML en el RPC. quot;Hooksquot; a eventos. Cesar D. Rodas, http://cesar.la/ - L EX AT 17
  • 54. PHPAJAX 3 - PHP2JS <?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject(quot;algun inputquot;); $numero = js::GetObject(quot;algun numeroquot;I );
  • 55. PHPAJAX 3 - PHP2JS <?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject(quot;algun inputquot;); $numero = js::GetObject(quot;algun numeroquot;I ); js::alert(quot;El valor del input es quot;, $text->value);
  • 56. PHPAJAX 3 - PHP2JS <?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject(quot;algun inputquot;); $numero = js::GetObject(quot;algun numeroquot;I ); js::alert(quot;El valor del input es quot;, $text->value); /* filtro */ jfilt::number($numero->value,quot;Tiene que ser un numeroquot;);a
  • 57. PHPAJAX 3 - PHP2JS <?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject(quot;algun inputquot;); $numero = js::GetObject(quot;algun numeroquot;I ); js::alert(quot;El valor del input es quot;, $text->value); /* filtro */ jfilt::number($numero->value,quot;Tiene que ser un numeroquot;);a /* matematica, suma */ $numero->value = jnum::add(5,$numero->value); } } ?> Cesar D. Rodas, http://cesar.la/ - L EX AT 18
  • 58. Theory is good, show me in action 19
  • 59. Muchas gracias! Preguntas? Cesar Rodas. crodas@member.fsf.org http://cesarodas.com/ Mi blog. http://cesar.la/ 20
  • 60. Resources PHPAjax • http://www.phpajax.org/ XAjax • http://www.xajaxproject.org 21
  • 61. Powered by... Cesar D. Rodas, http://cesar.la/ - L EX AT 22