BBVA API Market
El desarrollo y el diseño de proyectos digitales siempre mutan hacia nuevos estándares con el paso del tiempo. Esa es la razón principal por la que los profesionales de este sector siempre deben estar en continuo aprendizaje y formación, el mundo de las plataformas web y aplicaciones en la nueva era móvil avanza rápidamente. El estándar que ya está protagonizando y va a acaparar el presente y el futuro digital son los web components, un nuevo estilo que ya fue definido de forma brillante por el desarrollador Carlos Azaustre en BBVAOpen4U.
Los web components permiten desarrollar aplicaciones web y móviles con pequeñas cápsulas con los elementos habituales: HTML, JavaScript y CSS. Cada uno de esos fragmentos recibe el nombre de componente y es independiente del resto: cumple la misma función que una pieza en un motor. Dentro forma parte de un todo y por separado puede ser utilizado en otro desarrollo. Son reutilizables. Además, son estándar porque tienen su origen en Google y el beneplácito de W3C.
Existen algunas herramientas para iniciarse en el desarrollo con web components.
Polymer es un conjunto de librerías ligero que permite a los programadores sacar todo el rendimiento posible a la construcción de aplicaciones a partir de web components, en gran medida porque facilita el uso de Polyfills. ¿Qué son los Polyfills? Fragmentos de código que exprimen las nuevas funcionalidades HTML5 en todos los navegadores. Es habitual que los usuarios no dispongan de las últimas versiones de los navegadores de cabecera, ya sea Internet Explorer, Mozilla Firefox o Google Chrome. El uso de Polyfills permite que los navegadores antiguos no impidan que los usuarios vean todas las características de una web.
El objetivo final no sólo es hacer pequeñas cápsulas o bloques de código formados por HTML, JavaScript y CSS que sirvan para varios proyectos a la vez (es lo que se conoce como Custom Elements), sino que el uso de Polymer permite una programación en código más limpia y más sencilla de renderizar por parte de cualquier tipo y versión de navegador. Esto, al final, también tiene una incidencia notable en los tiempos de carga finales de los proyectos que se desarrollen.
Además, Polymer incorpora dos funcionalidades muy interesantes para desarrollo:
– Soporte para HTML Imports: esta funcionalidad permite cargar scripts, hojas de estilo y fuentes web en un documento HTML de forma sencilla y agrupada. Este artículo de ‘webcomponents.org’ resume a la perfección este proceso de importación de un documento HTML dentro de otro.
Por ejemplo, un documento HTML llamado component.html puede contener varios elementos personalizados como un script y hoja de estilo (CSS):
<link rel=”stylesheet” href=”css/style.css”>
<script src=”js/script.js”></script>
Ese fragmento de código puede incluirse dentro de otro documento HTML de origen habitual como index.html con esta funcionalidad HTML Imports:
<link rel=”import” href=”component.html”>
– Shadow DOM: Polymer dispone de una funcionalidad llamada Shady DOM con la que desarrollar elementos personalizados que se pueden incluir dentro del Shadow DOM sin que este se mezcle o interfiera con otras partes del código cuando es renderizado por el navegador. El Shadow DOM era una parte del DOM que antes sólo era accesible para los desarrolladores de los navegadores para definir componentes complejos como vídeo o audio. A día de hoy, Polymer ofrece cierto acceso a esa parte encapsulada del DOM dentro del propio DOM. Este es un tutorial explicativo bastante práctico.
X-Tag es una biblioteca de JavaScript de código abierto, creada por Daniel Buchner, entonces en Mozilla y ahora en Microsoft, que permite el desarrollo de componentes web de acuerdo al estándar W3C. Se podría decir que X-Tag es el Polymer apoyado por la empresa dirigida hoy en día por Satya Nadella.
Polymer y X-Tag son muy similares, salvo por una diferencia importante. La biblioteca creada por Google es compatible con las funcionalidades de los navegadores más modernos como Custom Elements, Shadow DOM y HTML Imports, mientras que la librería X-Tag sólo ofrece características relacionadas con elementos personalizados mediante el uso de web APIs. Si se quiere incorporar otras funcionalidades propias de los web components como Shadow DOM, sería necesario que el desarrollador usara otros polyfills combinados con X-Tag. ¿Por qué es así? Porque los creadores de X-Tag consideran que para crear web components realmente sólo es necesario utilizar los elementos personalizados.
Para definir las plantillas de Custom Elements con X-Tag, esta librería cuenta con el método xtag.register(), posiblemente el más destacado, donde el programador puede definir la propiedad content del objeto dentro del DOM. Aquí un tutorial.
xtag.register(‘my-element’, {
content: function () {/*
<p>Hello there</p>
<div>
<p>This is a multi-line template</p>
</div>
*/}
});
X-Tag tiene soporte para todo tipo de navegadores: Internet Explorer, Mozilla Firefox, Google Chrome, Chrome Android, Safari (para OS X e iOS), Opera y Edge.
En BBVAOpen4U ya hemos hablado específicamente de AngularJS, EmberJS y BackboneJS. Todos ellos son marcos de desarrollo o bibliotecas en JavaScript y basados en el paradigma Modelo-Vista-Controlador para el desarrollo de interfaces de usuario o front-end. Y todos incluyen características para la creación de elementos personalizados dentro del DOM como fragmentos de código independientes que se puede reutilizar en el desarrollo de otras aplicaciones.
El uso de las directivas por parte de AngularJS fue un gran punto de partida para el concepto de los web components. La directivas en AngularJS lo que permiten es extender el documento HTML mediante la creación de esos fragmentos de código encapsulados e independientes reutilizables. Al final se incorporan etiquetas con atributos nuevos que son reconocidos posteriormente por el navegador. Esto tiene algunas ventajas como limpiar y simplificar el código jQuery o facilitar el trabajo de diseño y desarrollo de aplicaciones porque al final es como montar un mecano.
En el caso de EmberJS, para la definición de los Custom Elements se utiliza una librería JavaScript llamada Handlebars.js. El proceso es muy sencillo, aquí hay un tutorial bastante completo facilitado por los creadores de EmberJS. Primero se crea un elemento personalizado como una plantilla components/blog-post.
<script type=”text/x-handlebars” id=”components/blog-post”>
<h1>Blog Post</h1>
<p>Lorem ipsum dolor sit amet.</p>
</script>
Y luego se lleva ese componente personalizado a nuestra plantilla HTML original:
<h1>My Blog</h1>
{{#each post in model}}
{{blog-post}}
{{/each}}
BackboneJS también tiene esa capacidad de crear módulos independientes que sirven de estructura para el desarrollo de interfaces en diversos proyectos. Para incorporar esa funcionalidad es habitual el uso de Marionette.js, un marco de desarrollo complementario a BackboneJS que agiliza mucho el uso de web components. Esta es una buena referencia técnica para desarrollar con Marionette.
Llevar a un cliente por todo el proceso de compra hasta que este se formaliza es un viaje arduo y que se enfrenta a la posibilidad constante de abandono. Sin embargo, hay formas de lograr que la decisión de compra se haga realidad si se le dan facilidades como una financiación ágil, segura y adaptada a lo que necesita.
En un mundo conectado, las APIs son el pegamento que une todas las piezas que forman nuestra vida diaria. Y de la misma forma que un pegamento solo es potente si sabemos en qué material utilizarlo y conocemos sus propiedades, las APIs son tan útiles como su documentación permita.
Existen diferentes soluciones para monitorizar el rendimiento de una API, tanto en términos de tráfico como de calidad y rapidez de las respuestas que proporciona. Detectar fallos en el código o cuantificar los ingresos que genera también son algunas de las opciones que ofrecen estas útiles herramientas.
