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.phpPara 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.phpSi 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!