fcbk
Conéctate con TwitterConéctate con Facebook
0

8 razones para usar Web Components con Polymer

1909Puntos

hace 2 años

Web Components es el nombre que le dio el World Wide Web Consortium (WC3) a un futuro estándar de tecnologías que permitirán crear nuestros propios elementos web. Dicho de otro modo, con está tecnología podremos encapsular los componentes de nuestra aplicación en etiquetas HTML5. Este futuro estará compuesto por tres tecnologías: Shadow Dom, Custom Elements y HTML Imports. Y, cuando estén terminadas y los principales navegadores las incluyan, podremos lograr cosas increíbles. En este artículo te contaré sobre las 10 principales razones por las que debes usar Polymer para desarrollar Web Components.

1 . Polymer te permite usar Web Components hoy

Polymer es un conjunto de librerías especiales, mejor conocidas como Polyfills. Estos tiene el poder de habilitar funcionalidades adicionales a los navegadores. Los Polyfills de Polymer nos permiten usar estas tecnologías del futuro en los principales navegadores de hoy.

2. Puedes crear tus propios Custom Elements

Esto te permite guardar las partes de tu aplicación en etiquetas HTML5. Y así puedes desarrollar tu aplicación en bloques que puedes rehusar una y otra vez. Un Custom Element funciona de manera independiente del resto de tu aplicación y contiene todo lo relacionado a un elemento de la interfaz, un ejemplo es la etiqueta < video/> en HTML5.

3 . Te permite usar el Shadow DOM (Shady DOM)

Hasta ahora, el uso del Shadow DOM estaba reservado para los creadores de los browsers. Esta es la tecnología que permite encapsular  el  contenido de un Custom Element del resto. Y así evita que sus estilos y código interactúen de forma no deseada con el resto del sitio. Polymer 1.0 incluye una tecnología llamada Shady DOM que te permite desarrollar Custom Elements seguros y eficientes encapsulados en el Shadow Dom.

4 . Habilita HTML Imports en tu aplicación

HTML Imports te permite desarrollar aplicaciones web modulares de forma sencilla y eficiente al permitirte colocar todo lo relacionado con una parte de tu aplicación (por ejemplo un Custom Element) en un documento HTML. Por ejemplo, puedes colocar todas las librerías que usa tu aplicación en un archivo llamado librerías.html y las hojas de estilo en uno llamado estilos.html. Después,en tu aplicación sólo debes importar estos archivos de este modo:
<link href="librerias.html" rel="import">
<link href="estilos.html"   rel="import">
Así podemos crear código mucho más fácil de leer. Además, el tener todo por separado facilita el realizar ajustes más adelante.

5 . Polymer 1.0 viene listo para producción

Está nueva versión está optimizada e incluye todo lo necesario para usarlo de forma exitosa en una aplicación real. No sólo garantiza estabilidad y rendimiento; sino que también incluye un conjunto de herramientas y tareas necesarias para usarlo profesionalmente en el Polymer Starter Kit.

6 . Te permite desarrollar aplicaciones confiables con Unit Testing

Polymer incluye todo lo necesario para realizar Unit Testing en tus Web Components con una herramienta llamada Web-Component-Tester. Esta se encarga de comprobar desde la consola el funcionamiento correcto de tus componentes en los principales navegadores. Una vez que tu componente pasa las pruebas, puedes usarlo con total seguridad.

7 . Incluye entorno de desarrollo, producción y un servidor de archivos

Polymer Starter Kit viene configurado para trabajar cómodamente en un entorno de desarrollo con todos sus componentes separados. De esta manera, lograrás trabajar de forma eficiente. Además, compilará todo esto en archivos listos para producción, que colocará  en una carpeta especial. Y, además, incluye un servidor de datos. Cuando se usa como servidor local, este actualiza el navegador de forma automática cuando realizas un cambio en el código. Y cuando se encuentra en modo servidor remoto, ocupa una versión optimizada de tu aplicación y un caché con los archivos principales.

8. Tus aplicaciones se optimizan fácilmente para uso en producción

Polymer Starter Kit usa el poder de Gulp para ejecutar las siguientes tareas para uso en producción:
  • Agregar los Vendor Prefixes necesarios a los archivos CSS
  • Verifica tu código con JavaScript Lint
  • Optimiza tus imágenes
  • Coloca todos tus archivos de JS en uno solo
  • Une todos los HTML imports en archivos únicos. A esto se le conoce como vulcanización
  • Minifica todos los archivos HTML, JS y CSS
  • Configura la caché del servidor de archivos
Polymer es la herramienta que te permite desarrollar usando hoy las herramientas del futuro. De la mano de una selección de herramientas y todo lo necesario para poder usarlo en aplicaciones profesionales. Si deseas aprender cómo usar los secretos de Polymer, te invito a unirte al Curso de desarrollo con Polymer de Platzi y no te pierdas los próximos artículos sobre este y otros temas en Platzi/blog.
Cesar
Cesar
@reicek

1909Puntos

hace 2 años

Todas sus entradas