Oscar's Journal

Hace un par de semanas atras hablaba con un amigo desarrollador y fundador de Kakao Media (Hola Erick!) sobre el estado de la web y los futuros proyectos; curiosamente tocamos el tema de Web Components y antes de comenzar a hablar algunas cosas que debatiamos y exteriorizar mis reflexiones...

¿Que es Web Components?

Web Components es un nuevo estandar de la web que permitira dividir nuestros proyectos en elementos mas pequeños, reusables y encapsulados. Este estandar es una reciente incorporacion al HTML5 y que, si siguen evolucionando al ritmo al que lo están haciendo, pueden suponer el mayor cambio en el mundo web en años y solucionar de golpe varios problemas históricos de HTML.

La idea de Web Components se introdujo en 2011 por Alex Russell, y desde entonces la comunidad web ha discutido el concepto mucho (127.000.000 resultados en Google Búsqueda de "Web Components")

Web Components consistes en estas cuatro tecnologias:

Ya hay algunas librerias basadas en este estandar disponibles, algunas listas y otras aun no para produccion:

Cabe señalar que estas librerias estan basadas en las tecnologias antes mencionadas. Actualmente puedes hacer uso de 'Web Components' sin depender de estas. Ahora te pregunto: ¿Has visto alguna vez en acción un Web Component? Lo más seguro es que sí, aunque quizá no fueras consciente de ello…

Visita cualquier página con un reproductor de vídeo HTML5 (como esta) e inspecciona la etiqueta:

<video width="320" height="240" controls>
  <source src="pollito.mp4" type="video/mp4">
</video>

Con las Herramientas para Desarrolladores de Chrome. Activa “Show user agent shadow DOM” y, ¡sorpresa!, verás cómo aparecen multitud de nuevos elementos que estaban ocultos inicialmente (en el Shadow DOM). A continuacion un ejemplo de 'Web Components'

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map_canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map_canvas');
        var mapOptions = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

Gracias a 'Web Components' podemos evitarnos todo eso y hacerlo de una forma mas simple y limpia.

<google-map latitude="37.77493" longitude="-122.41942"></google-map>

Con la llegada de "Web Components" la comunidad puede crear sus propios elementos, de forma rápida y colaborativa, la velocidad sin precedentes a la que podemos desarrollar, probar y mejorar las características será un gran beneficio para la experiencia del usuario. Podremos tener una web mas estandarizada y por supuesto semanticamente. Imaginemos elementos que son capaces de compartir entre diferentes CMS (Wordpress, Drupal, Ghost). Construye una sola vez, ejecutalo donde quieras.

Por ahora 'Web Components' me parece una de las mejores apuestas para la web, respaldado por todos los frameworks basados en el estandar. Hasta ahora esto solo es un punto de partida hacia el futuro de la web. Antes de de terminar les comparto un importante video llamado 'Are Web Components Ready Yet?' y pueden pasar por aca para ver el progreso de 'Web Components' hacia su estandarizacion.