Webcomponents en PHP (II) – Navegadores

En nuestra última publicación, aprendimos sobre qué es un web component y por qué nos mola tanto usarlos en habitissimo.

Hoy aprenderemos cómo tratar los web components en nuestro navegador.
Pero antes de seguir, asegúrate de tener instalado php7. Si estás con un linux, te recomiendo el siguiente tutorial.

Veamos un ejemplo añadido en el post anterior.

<NavbarItems>
 <NavbarItemLink>Page 1</NavbarItemLink>
 <NavbarItemLink>Page 2</NavbarItemLink>
 <NavbarItemLink>Page 3</NavbarItemLink>
</NavbarItems>
 

¿Crees que el navegador entenderá ese código?
Hagamos la prueba…

Creamos un directorio llamado webcomponents-php y dentro de dicho directorio, creamos un archivo llamado app.php

En una línea:

mkdir webcomponents-php && cd webcomponents-php && touch app.php

Para poder trabajar con archivos php debemos tener corriendo un servidor o utilizar la línea de comando (en ese caso no nos sirve). Por suerte php tiene incorporado un servidor web interno que nos facilitará el trabajo.

php -S localhost:8000 app.php

Si accedemos a http://localhost:8000 nos aparecerá una pantalla completamente blanca, eso significa que todo ha ido bien, de verdad, todo ha ido bien.

Es hora de jugar: abre tu editor preferido, copia y pega el siguiente trozo de código dentro app.php

Si actualizas el navegador deberías ver los textos Page 1 Page 2 Page 3.
¿Realmente el navegador ha comprendido nuestro código?

Navegadores y custom elements

Los navegadores actuales permiten crear custom elements (una nueva forma de crear tag html) por tanto el navegador tiene la capacidad de renderizar dichos elementos. ¿Qué pasaría si lo probamos en Internet Explorer 8-9?
Yo he intentado probarlo pero:

¡Crucemos los dedos para que Windows encuentre alguna solución!

Si intentas navegar entre diferentes páginas, ¡verás que es realmente imposible! Esto es debido a que el navegador ha pintado los elementos, pero desconoce de su funcionalidad.

Nota: hoy en día es posible tener custom elements con javascript y a la vez darles funcionalidad, si eres de esas personas curiosas y quieres saber cómo crearlos, te recomiendo este excelente tutorial de Carlos Azaustre. Además, te reto a que investigues el código fuente de la web de youtube 🙂

Renderizando HTML

En nuestra pequeña aplicación no podemos navegar entre las diferentes páginas y esto es debido a que no sabe cómo se ha de comportar cada `NavbarItemLink`, por tanto debemos generar un resultado entendible para el navegador.

Fijando un objetivo

Nuestro objetivo será servir al navegador elementos (tags) nativos que sin añadir código javascript, sepa cual es el comportamiento real de ese elemento.

Por tanto, pasaremos de que el navegador reciba nuestros elementos custom a recibir elementos HTML nativos (ver imagen)

Tratando nuestros elementos.

Olvida absolutamente todo lo que hemos visto hasta ahora, desde HTML hasta Web components y tómate un tiempo para analizar el ejemplo que hemos copiado del post anterior.

¿A qué te recuerda?
Si no te recuerda a nada, añade la siguiente línea en la parte superior del código.

  
    <?xml version="1.0" ?>

    <NavbarItems>
      ...
    </NavbarItems>
  

¡Así es!. No es más que XML con una estructura en árbol, cuyo elemento raíz es NavbarItems y que está compuesto por n nodos hijos (NavbarItemLink).

Si nunca has tenido la oportunidad de trabajar con XML o desconoces qué es, te recomiendo leer este pequeño resument sobre XML

DOM al rescate

Con la clase DOM (que forman parte de la librería libxml2) podemos acceder y actualizar dinámicamente el contenido, la estructura y el estilo de nuestro XML. Si quieres saber más acerca de DOM, te recomiendo el Tutorial DOM PHP

Probemos un momento para validar que nuestro elementos funcionan con DOM (sea un XML válido)

Vuelve al editor y modifica el archivo `app.php` e introduce el siguiente código.

Si actualizas el navegador, deberás ver el primer resultado que obtuviste al principio. Elementos pintados, pero sin funcionalidad.

De momento vamos por buen camino, pero hagamos una pausa y analicemos lo que hemos aprendido hasta el momento.

• Los navegadores renderizan tags inexistentes (tag custom) y sin comportamiento alguno.
• Podemos crear tags custom y darle funcionalidad con javascript o con algún framework.
• Los tags pueden ser tratados como elementos XML
• La clase DOM nos permite acceder y modificar el contenido de un XML
  
  

Esto ha sido todo por hoy. En el próximo post abordaremos cómo renderizar nuestros elementos a tags html nativos

Si te quedaste con ganas, puedes avanzar e implementar una solución. Nos encantaría ver cómo has solucionado nuestro problema :).

Happy coding!