Angular Elements: Write once, run anywhere

#angular #vlcsofting18
Angular Elements: Write once, run
anywhere
#angular #vlcsofting18
Francisco Javier Barrena Castillo - @DogDeveloper
Director Área Técnica I+D – Instituto Tecnológico de Informática
12 de junio de 2018 www.vlcsofting.es

#angular #vlcsofting18#angular #vlcsofting18
Lo primero es lo primero…

#angular #vlcsofting18#angular #vlcsofting1812 de junio de 2018 www.vlcsofting.es
La carrera de twitts

Who’s that guy

i+d en el iti

Anteriormente, en vlcsofting 2015

Convierten esto…
http://codepen.io/MattiaAstorino/pen/zxRayG

<div class="card">
<div class="card-face face-2">
<button data-card-back="data-card-back" class="card-face__back-button"><img
src="http://imgh.us/arrow_1.svg" width="19" height="19" draggable="false"/></button><img
src="http://imgh.us/Likes.png" width="100" height="100" draggable="false" class="card-
face__stats"/><img src="http://imgh.us/Followers.png" width="100" height="100" draggable="false"
class="card-face__stats"/><img src="http://imgh.us/Views.png" width="100" height="100"
draggable="false" class="card-face__stats"/><img src="http://imgh.us/cog.svg"
width="17" height="17" draggable="false" class="card-face__settings-button"/>
</div>
<div class="card-face face-1">
<button data-card-menu="data-card-menu" class="card-face__menu-button"><img
src="http://imgh.us/dots_1.svg" width="5" height="23" draggable="false"/></button>
<div class="card-face__avatar"><span class="card-face__bullet">2</span><img src="http://i.imgur.com/gGdWosb.png" width="110" height="110"
draggable="false"/></div>
<h2 class="card-face__name">Mattia Astorino</h2><span class="card-face__title">Graphic
& Web Designer</span>
<div class="card-face-footer"><a href="https://dribbble.com/astorino_mattia" target="_blank"
class="card-face__social"><img src="http://imgh.us/dribbble.svg" width="36" height="36"
draggable="false"/></a><a href="https://www.behance.net/mattia_astorino" target="_blank" class="card-
face__social"><img src="http://imgh.us/beh.svg" width="36" height="36" draggable="false"/></a><a
href="https://plus.google.com/u/0/+MattiaAstorino/posts" target="_blank" class="card-
face__social"><img src="http://imgh.us/plus_5.svg" width="36" height="36"
draggable="false"/></a></div>
</div>
</div>

Y esto…
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);body{height:100vh;background-
color:#f44336;-webkit-transition:background-color 300ms;transition:background-color 300ms;font-
family:Roboto,sans-serif}@media screen and (min-width:30em){body{display:-webkit-box;display:-webkit-
flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-
items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-
content:center}}body.show-menu{background-color:#00ACC1}.card{background-
color:#FFF;position:relative;overflow:hidden;width:100%;height:100%;min-height:405px;-webkit-transition:all
300ms;transition:all 300ms;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-
select:none;box-shadow:0 5px 43px rgba(0,0,0,.18);-webkit-animation-timing-function:cubic-
bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1)}@media screen and (min-
width:30em){.card{width:290px;height:405px;border-radius:3px}.card:hover{cursor:pointer}}.card-
face{width:100%;height:100%;position:absolute;border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-
ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-
items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-
webkit-transition:all 400ms cubic-bezier(.215,.61,.355,1);transition:all 400ms cubic-bezier(.215,.61,.355,1);-webkit-
box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-
direction:column}.card-face__bullet{background-color:#f44336;color:#FFF;display:block;padding:4px 0;border-
radius:50%;width:23px;height:23px;box-sizing:border-box;line-height:1.2;text-align:center;font-
size:12px;position:absolute;top:10px;right:0;box-shadow:0 1px 5px rgba(0,0,0,.27);-webkit-animation:bullet
500ms;animation:bullet 500ms;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-
delay:1.5s;animation-delay:1.5s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-
function:cubic-bezier(.23,1,.32,1);font-weight:700}.card-face.face-1{-webkit-transform:translateX(0);-ms-
transform:translateX(0);transform:translateX(0)}.show-menu .card-face.face-1{-webkit-transform:translateX(-
100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.card-face.face-2{-webkit-box-pack:center;-
webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-transform:translateX(100%);-ms-
transform:translateX(100%);transform:translateX(100%)}.show-menu .card-face.face-2{-webkit-
transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.card-face__menu-
button{position:absolute;top:10px;right:5px;background:0 0;border:none;outline:0;padding:5px 15px;-webkit-
transform:translateX(150%);-ms-transform:translateX(150%);transform:translateX(150%);
(+500 líneas, que me colgaban el PowerPoint!!)

Y esto otro…
(function() {
var menu_trigger = $("[data-card-menu]");
var back_trigger = $("[data-card-back]");
menu_trigger.click(function() {
$(".card, body").toggleClass("show-menu");
});
back_trigger.click(function() {
$(".card, body").toggleClass("show-menu");
});
})();

En esto

En resumen
http://avenuecode.com/web-components-101/

Pero la industria fue por otro camino…
• En lugar de abrazar el estándar, cada provider tiró por su
camino

Componente en angular

Componente en react

Componente en vue

camino
• Todos nos vendieron que nuestro código de front-end sería
reutilizable
• Dejaríamos de copiar y pegar código
• Solo implementaríamos las cosas una vez

camino
• Todos nos vendieron que nuestro código de frontend sería
reutilizable
• Dejaríamos de copiar y pegar código
• Solo implementaríamos las cosas una vez
• Invirtieron esfuerzo y recursos en que todos los
desarrolladores de mundo abrazáramos el cambio
• Pero los que más esfuerzo y recursos invertimos en el cambio, en
realidad, fuimos nosotros

El ser humano es el único animal…

la rebelión!
• La industria es poderosa
• Pero no es el origen del poder
• El origen del poder es de los developers
• La industria tiene el dinero
• Nosotros tenemos todo lo demás
• Angular, React, Vue o quien venga no son nadie sin nuestro
consentimiento

Si los developers estornudamos…
• Si los desarrolladores estornudamos, la industria se resfría
• Y los desarrolladores teníamos un problema…
• Los frameworks de front-end evolucionan muy rápidamente
• Muchos de ellos terminan por morir… y si nos pilla dentro tenemos un
problema
• Así que empezamos a buscar alternativas basadas en estándares
• La solución es siempre tender a los estándares
• Y la comunidad empezó a desarrollar librerías basadas en Web
Components, con bastante éxito
• Tanto, que ha obligado a los grandes players a ofrecernos sus propias
soluciones

Angular elements
• Angular Elements son componentes de Angular normales, pero
empaquetados como Custom Elements (Web Components)
• Esta aproximación nos permite desarrollar componentes reusables de
verdad con CERO esfuerzo
• No tengo que hacer nada más que seguir desarrollando como hasta ahora
• Y puedo insertar ese componente donde me de la gana
• ¿Que he apostado por Vue y dentro de 1 año muere? No problemo, ¡mis
componentes los puedo utilizar en cualquier sitio!

Angular elements
• Angular Elements se ha liberado con la versión 6 de Angular
• Para poder utilizarlo solo tengo que instalarlo como un paquete así
• Si quiero que mi componente funcione en todas partes, tengo que
instalar también el polyfill adecuado, ya que los Custom Elements no
son soportados por todos los navegadores

Custom elements v1 browser support
https://caniuse.com/#feat=custom-elementsv1

Angular elements

Angular elements – step by step
• Primero creamos una aplicación Angular corriente y moliente, con el
CLI de toda la vida
• Después de entrar en el directorio recién creado, instalamos vía npm la
dependencia de @angular/elements y de webcomponents
• Programamos nuestro componente como siempre pero ya que
estamos resolveremos algunas dudas…
• ¿Puedo usar servicios? ¿Y atacar a REST? ¿Configuración externa?

• Generamos un componente nuevo, que será aquel que usaremos con
Angular Elements
• Picamos código…

• Recordad que los componentes que van a
ser ”exportados” con Angular Elements
deben ir en el apartado de
entryComponents del módulo, e
implementar la función ngDoBootstrap()
• Un entryCom

• Ya no estamos desarrollando una aplicación, por tanto el Bootstraping
debe cambiar

• Creamos un fichero index.ts con este código
• Es casi idéntico al clásico main.ts, simplemente le hemos añadido el
polyfills de custom-elements para soportar navegadores como
Internet Explorer, Edge o Firefox

• Ya solo nos queda lo peor resuelto… el empaquetado
• Angular CLI todavía no empaqueta los componentes basados en
Angular Elements, así que tenemos que hacerlo nosotros…
• Podéis usar Gulp, Grunt o lo que vosotros prefiráis. Nosotros
usaremos webpack
• Para ello, lo primero es instalar webpack
• Y crear nuestro propio fichero de configuración del empaquetado de
webpack
• webpack.config.js

• Para empaquetar nuestro componente, simplemente escribimos en
línea de comandos el comando webpack
• Si se produce algún error, aparecerá un mensaje como este:
• Si todo va bien, no mostrará nada de nada... Pero generará un fichero
main.js en la carpeta /dist del proyecto

Feel like a mage…

conclusiones
• Angular Elements nos permite generar componentes reutilizables en
cualquier plataforma, no solo en la propia Angular
• Podemos utilizar cualquier servicio, módulo o característica que nos
ofrece Angular
• Podemos incluso conseguir que un WebComponent haga una llamada
a una API REST
• Lamentablemente, el empaquetado tenemos que “currárnoslo”
nosotros
• De ese empaquetado dependen algunas cosas, como por ejemplo que
podamos utilizar ficheros separados HTML en lugar de una inline-template
como hemos visto en el ejemplo

conclusiones
• También es responsabilidad nuestra minificar y uglificar los
empaquetados para que ocupen menos espacio
• La reducción es muy significativa, hasta de un 70%
• Angular Elements es una mirada hacia el futuro, pero hoy, ahora; en
este momento… aún está de manera incipiente
• Es usable
• Razonablemente estable
• Pero creo que todavía no está production-ready
• Parece que el camino de Angular Elements es firme. Después de todo,
no es la única que lo hace…

conclusiones

Angular elements en la versión 7

Y esto da pie…

Al próximo hype… los micro-frontends

referencias
• https://nitayneeman.com/posts/a-practical-guide-to-angular-elements/
• https://nitayneeman.com/posts/building-a-custom-element-using-angular-elements/
• https://www.softwarearchitekt.at/post/2018/05/04/microservice-clients-with-web-
components-using-angular-elements-dreams-of-the-near-future.aspx
• https://pascalprecht.github.io/slides/angular-elements/#/
• https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/
• https://webpack.js.org/guides/installation/
• https://medium.com/codingthesmartway-com-blog/angular-elements-a-practical-
introduction-to-web-components-with-angular-6-52c0b3076c2c
• https://medium.com/@tomsu/wanna-create-an-angular-element-heres-how-
73e2ea85bd28
• https://angular.io/
• https://medium.com/vincent-ogloblinsky/export-angular-components-as-custom-
elements-with-angular-elements-a2a0bfcd7f8a
• https://itnext.io/building-micro-frontend-applications-with-angular-elements-
34483da08bcb

Post-vlcsofting18
Al final ganamos la guerra de Twitts! Muchas gracias a todos!

Angular Elements: Write once, run anywhere

Recomendados

Recomendados

Más contenido relacionado

Similar a Angular Elements: Write once, run anywhere

Similar a Angular Elements: Write once, run anywhere (20)

Más de Francisco Javier Barrena

Más de Francisco Javier Barrena (14)

Último

Último (16)

Angular Elements: Write once, run anywhere