En Javascript se utiliza mucho los Patrones Glob, estos permiten seleccionar un número de archivos con una sintaxis parecida a las expresiones regulares pero con menos caracteres comodín y menor complejidad. Un carácter comodín es él * o el signo de ?.
Una gran diferencia entre expresiones regulares es que los patrones glob se ocupan para buscar y filtrar archivos, y las expresiones regulares funcionan con cadenas de texto.
Expresiones regulares trabaja con Texto
Glob trabaja con archivos/directorios
¿Origen?
Tienen su origen en las primeras versiones de Unix, durante la versión 6 para ser exacto, 1969-1975, era el programa /etc/glob, se usaba para seleccionar un conjunto de archivos en la shell, se llamaba glob por ser la abreviación de global.
¿Cómo se usan?
También la funcionalidad es un poco diferente, por ejemplo el * en una expresión regular coincide con la ausencia o cualquier número de repeticiones del carácterque le precede.
Por ejemplo a*, indica cero o más repeticiones de la letra a.
Otro ejemplo con carácter especial es .* el cual indica cero o más repeticiones de cualquier carácter, excepto carácter de nueva de línea.
Por otro lado el carácter * en un patrón glob representa la ausencia o cualquier número de repeticiones de cualquier carácter.
El ejemplo más utilizado es cuando queremos listar archivos con una determinada extensión, por ejemplo:
/$ ls *.js
Muy similar con lo que hacemos en el MS-DOS de windows:
C:\> dir *.js
No es necesario un carácter antes del *, como sucede con las expresiones regulares.
Aquí abajo un ejemplo donde tenemos un archivo de configuración de jasmine, Jasmine es un framework para realizar pruebas a tu código Javascript, este archivo de configuración permite seleccionar que archivos se usarán para ejecutar las pruebas:
Algo que destacar es el uso de doble asterisco **, esto indica cero o más coincidencias de cualquier subdirectorio y archivo, es decir, cero o más niveles de subdirectorios.
También podemos notar el uso de [sS], esta notación de glob indica que acepta sola una vez ya sea la sminúscula o la Smayúscula.
En el arreglo spec_files, su primer elemento es un patrón glob, el cual busca en cualquier subdirectorio relativo al directorio definido en spec_diry que tenga cualquier conjunto de letras al principio pero que terminen con spec.jso Spec.js. Esta definición podría obtener las siguientes rutas de archivos:
/spec/nombre-archivo.spec.js
/spec/nombre-archivo.Spec.js
/spec/helpers/nombre-archivo.spec.js
/spec/helpers/nombre-archivo.Spec.js
/spec/esto/es/otra/ruta/nombre-archivo.spec.js
/spec/esto/es/otra/ruta/nombre-archivo.Spec.js
¿Dónde se utilizan?
En Javascript se utiliza:
Para automatizar tareas que necesitan de la lectura y escritura de archivos
Se utiliza mucho en node.js con herramientas como gulp y webpack
Automatizado de pruebas
Minificado y concatenado para el código en producción.
Para crear una página web necesitas comprender tres sencillas tecnologías muy fáciles de aprender; HTML, CSS y Javascript.
Juntas permiten crear aplicaciones sofisticadas, ejemplo de ellas son instagram, twitter y facebook, a continuación veamos que son estas tecnologías.
HTML
HTML permite crear el contenido de nuestra página o aplicación de manera organizada y estructurada, sin HTML no podrías ver tus fotos en facebook o reproducir videos en youtube.
CSS
CSS se encarga de la apariencia visual del contenido generado por HTML, con CSS podemos establecer el diseño, colores, tamaño de letra, dimensiones de cada elemento, posiciones y alineados, bordes, sombras y demás características de diseño. Sin CSS sería muy difícil de entender tu muro de facebook, todo estaría muy revuelto.
Javascript
Javascript te permite interactuar dinámicamente con la aplicación, claro ejemplo del uso de Javascript son las notificaciones de facebook, el chat de este mismo, cuando damos me gusta, creamos una publicación o escribimos un comentario.
Desde mi punto de vista lo ideal es aprender primero HTML, luego CSS y JavaScript.
Página web solo usando HTML
El siguiente ejemplo muestra como crear tu primera página web, si lo quieres probar en tu computadora, crea un archivo llamado index.html, después copia y pega el código de este ejemplo. Luego para ver tu página recién generada solo realiza un doble clic sobre index.html desde tu explorador de archivos.
A continuación vamos a explicar cada una de las partes de nuestro código.
DOCTYPE
Lo primero que existe en nuestro código es <!DOCTYPE html>, esto indica al navegador las sintaxis y reglas que formaran a nuestra página web. Antiguamente, se utilizaba una definición de doctype mucho más extensa, algo como lo siguiente.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Pero actualmente la versión corta es más que suficiente, solo no olvides agregarla, porque de otro modo tu contenido será renderizado como una versión antigua de HTML.
Etiqueta HTML
Luego tenemos la etiqueta <html>, indica el inicio de nuestra página web, todas las demás etiquetas deben estar dentro de esta, el final de la etiqueta se marcacon casi el mismo código, pero con una diagonal después del signo <, así </html>. Además, la etiqueta <html> tiene solo dos etiquetas hijas, <head> y <body>, las cuales explicaremos un poco más abajo.
<html>
<head></head>
<body></body>
</html>
Etiquetas
Pero ¿Qué es una etiqueta?, una etiqueta es la unidad principal con la que se crea el contenido de una página o aplicación web.
Partes de una etiqueta HTML
Casi todas las etiquetas tiene su etiqueta de cierre </nombre-etiqueta>, digo casi todas porque la etiqueta DOCTYPE no tiene cierre. No te preocupes, son pocas las que no se cierran. Además, los nombres de etiquetas no son sensibles a mayúsculas y minúsculas, puedes escribir la etiqueta html así <HtmL></HtmL>
Atributo lang en la etiqueta html
Algo que destacar en la etiqueta es que tiene este atributo lang<html lang="es">, el cual quiere decir language y su valor significa spanish.
El atributo lang ayuda al navegador web a seleccionar texto, revisar la ortografía, traducir tu página y convertir el texto en audio para personas con problemas visuales.
Etiqueta head
La etiqueta <head> puede contener lo que se le llama metadatos y demás información que no es visible para el usuario. Es el lugar donde se definen o importan estilos (archivos CSS), código Javascript, y demás datos para que el navegador web pinte la página web.
También sirve para describir la página web a motores de búsqueda, por ejemplo usando metadatos sobre quien es el autor, el título y una descripción corta sobre la página web. El título que mencionamos es el de la página web, el que aparece en la pestaña de tu navegador web.
Adicional, la etiqueta head sirve para agregar metas de terceros como el open graph data creado por facebook y twitter cards creado por twitter.
En nuestro ejemplo, dentro de la etiqueta <head> podemos ver dos etiquetas <meta> descritos a continuación ( meta viene de meta information).
<head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Mi primera página web</title></head>
Codificación de caracteres utf-8
En el meta<meta charset="utf-8"> usa un atributo charset con valor utf-8, esto indica la codificación de caracteres de la página y nos permite tener caracteres raros de otros idiomas que de otra manera no se visualizarían correctamente. Ejemplos concretos serian la ñ y vocales con acentos para el idioma español, caracteres en chinos o koreano.
Actualmente, los navegadores web como firefox, chrome y brave corrigen este problema automáticamente cuando se carga la página web. Pero se recomienda usar este meta en caso de que se cargue la página web en un navegador antiguo o alguno navegador web que no corrija esta codificación de caracteres automáticamente
El meta <meta name="viewport" content="width=device-width,initial-scale=1"> es muy útil cuando nuestra página es visualizada en dispositivos móviles, width=device-width permite tomar todo el ancho de nuestra pantalla móvil como el ancho de la página, initial-scale=1 evita que ciertos dispositivos le apliquen algún tipo de escaldo inicial a nuestra página. Con este meta obtenemos un diseño congruente en los dispositivos móviles. De otra forma veríamos una página con un escaldo muy pequeño debido a que el navegador trata de encajar el contenido como si lo estuviéramos viendo en una pantalla más grande de computadora.
Una nota importante es que las etiquetas <meta> y <!DOCTYPE html> no tienen su correspondiente cierre o final de etiqueta, esto es así porque estas etiquetas realmente no tienen contenido visible del elemento como pasa con la etiqueta <html></html>, <body></body> o el encabezado <h1></h1>.
Etiqueta body y etiquetas dentro de body
La etiqueta <body> contiene toda la información visible que deseas mostrar al usuario. Todo el contenido que puedas ver en una página web o aplicación está dentro de la etiqueta <body>.
Etiquetas de encabezados
Después tenemos a la etiqueta <body>, la cual contiene todo el demás contenido visible de nuestra página, dentro tenemos 6 etiquetas, <h1> a <h6>, la h significa Heading (encabezado), se ocupan para mostrar títulos o encabezados, <h1> es el de mayor relevancia y <h6> es el de menor.
Etiqueta para crear párrafos
Más abajo tenemos nuestro primer párrafo, para crear un párrafo se utiliza la etiqueta <p>, p significa Paragraph (parrafo). Luego tenemos dos listas de elementos ordenados y desordenados.
<p> El desarrollo web o programación web utiliza tres principales tecnologías;<strong>HTML, CSS y Javascript</strong>. Juntas permiten crear aplicaciones sofisticadas, facebook es el ejemplo más conocido, también mercadolibre e instagram.</p>
Etiqueta strong
La etiqueta <strong> permite marcar palabras o frases que son importantes, normalmente son palabras que cuando hablamos les damos un énfasis fuerte, con un tono más alto y a menor velocidad porque queremos ser más claros en la comunicación. Es por eso que los screen readers leen el contenido de esta etiqueta con un tono de voz diferente.
<p> El desarrollo web o programación web utiliza tres principales tecnologías;<strong>HTML, CSS y Javascript</strong>. Juntas permiten crear aplicaciones sofisticadas, facebook es el ejemplo más conocido, también mercadolibre e instagram.</p>
<p>Este medicamente debe almacenarse <strong>fuera del alcance de los niños<strong>.</p>
Los navegadores web marcan el contenido en negritas, pero esta etiqueta no debe usarse con el objetivo visual de remarcar un texto en negritas. Para poner texto en negritas por razones solo de diseño puedes utilizar un <span> en conjunto con alguna regla de estilos (CSS).
Etiqueta em
La etiqueta <em> es parecida a la etiqueta <strong> en el sentido de que se usa para enfatizar partes del texto y que los screen readers los lean en diferente tono de voz. Pero no tiene la misma importancia que un texto marcado con la etiqueta <strong>. Se utiliza para que el texto tenga más énfasis que el texto normal.
<p>Recuarda que <em>tienes</em> que apurarte para que te des un poco mas de tiempo<p>
Etiqueta para crear listas de elementos
Para crear una lista de elementos desordenados utilizamos la etiqueta <ul>, ul (Unorder List). Para crear una lista ordenada usamos <ol>, ol (Order List). Estas dos listas contiene tres etiquetas <li>, li significa List Item (Elemento de Lista).
Como vemos, no es difícil crear contenido para nuestra página, lo único que necesitamos saber son los nombres de las etiquetas y para qué nos sirven, aquí puedes encontrarlas. No tienes que memorizarlas, pero si comprender como se usan, así cada vez que necesites de alguna siempre puedes consultar en el anterior enlace.
En futuras publicaciones profundizaremos como funciona nuestro contenido HTML con CSS (Cascade Style Sheet, Hojas de Estilo en Cascada), para terminar incluyendo también Javascript en una tercera publicacion.
El patrón de diseño iterador o iterator proporciona una manera de acceder a elementos de un objeto (que contiene algún tipo de datos agregados como un arreglo o una lista) secuencialmente sin exponer su estructura interna.
Provide a way to access the elements of an aggregate object sequentially without exposing its underlying representation.
Este patrón de diseño también es conocido como cursor, si has usado cursores para recorrer los elementos obtenidos de una base de datos, ¿Que crees?, ahí estas utilizando el patrón de diseño iterador.
El objetivo de este patrón es poder recorrer y obtener elementos de un objeto sin necesidad de saber como estos datos están estructurados. Además de que la responsabilidad de recorrer los elementos no está en el objeto sino en el iterador.
Un iterador se compone normalmente de los siguientes métodos:
iterador.hasNext() o iterador.hayMas()
iterador.next() o iterador.siguiente()
iterador.current() o iterador.elementoActual()
iterador.rewind() o iterador.rebobinar(), que nos permite posicionar el “cursor” en el primer elemento.
Aquí te dejo como implementarlo en un navegador web:
Podemos notar que el siguiente elemento está determinado por la función iterador.next() el cual suma 2 a la variable index y es por eso que obtenemos los valores 1,3,5,7,9 del arreglo data.
Al final rebobinamos al inicio de data e imprimimos el elemento actual, es decir 1, con el método iterador.current().
MongoDB es una base de datos basada en documentos en formato BJSON que es la forma binaria de JSON, en MongoShell se puede ver el uso de este patrón de diseño:
En este ejemplo se obtienen los documentos de la colección users que tengan una propiedad type igual a 2, luego se recorren uno por uno a través de los métodos cursor.hasNext()y cursor.next().
En contraparte con las expresiones de plantillasque se usan en las interpolaciones y Property Binding, una Expresiónde Enlazado de eventos (Event Binding)tiene un efecto colateral, este efecto sin embargo, es deseado, es el objetivo de un evento, modificar el estado de la aplicación a través de las acciones del usuario.
Por la explicación anterior, se les llama también expresiones de estado, En el siguiente ejemplo podemos ver la invocación a un método, la sintaxis para Event Bindinges (evento)="expresión":
La sintaxis para las expresiones en Enlazado de eventos como las expresiones de plantillases parecida a las expresiones de Javascript normales, pero tiene ciertas limitaciones. No está permitido:
El operador new
Los operadores ++y --
Los operadores de asignacion (+=,-=, *=, etc), OJO: el operador =SI está permitido.
Los operadores a nivel de bits |y &
Los operadores de expresiones de plantillas: Operador de Tuberia |Operador de Guardia contra valores null o indefinidos, muy util en acceso a datos, ?.Operador para vereficar referencia NO Nulla, !
A diferencia de las expresiones de plantillas que se utilizan en interpolación y Property Binding, las expresiones de estado aceptan:
Aquí esta un ejemplo en acción, revisa el archivo src/app/app.component.ts, puedes dar click en los botones azules botho previewpara ver el código en acción.
¿De dónde se obtienen los valores de las expresiones de enlazado de eventos?
Al igual que las expresiones de plantillas, las expresiones de estado normalmente obtienen sus valores de los miembros de la clase del componente. Por ejemplo, las propiedades nombrey resultadoen el ejemplo anterior.
Y al igual que las expresiones de plantilla, se pueden usar las propiedades o variables de plantillasen el contexto de la plantilla misma.
Variables de input y de referencia
<p *ngFor="let persona of gente">
<input #nombre [value]="persona.nombre" (input)="persona.nombre = $event.target.value"/>
{{persona.nombre}}
<button (click)="eliminar(nombre.value, $event)">Eliminar</button>
</p>
Aquí se utiliza la variable de input personaque es un objeto y se accede a su propiedad nombreen la Expresión de Estado (input)="persona.nombre = $event.target.value"
También tenemos la variable de referencia #nombrela cual se utiliza en la expresión de estado (click)="eliminar(nombre.value, $event)".
En ambos casos vemos la propiedad de plantilla $event, la cual contiene la referencia al evento y elemento relacionado. Se accedió al valor de los input a través de $event.target.value.
También mandamos todo el objeto $eventen la expresión de estado para eliminar a una persona (click)="eliminar(nombre.value, $event)", y el método eliminar de la clase del componente imprime el tipo de evento en un alerta.
El enlazado de propiedades o Property Binding en ingles, es una forma fácil y rápida en que se puede definir una propiedad a un componente de una aplicación en angular y actualizar esta propiedad si se detecta un cambio en el origen de la información.
Uno de los ejemplos más sencillos es el enlazado de la propiedad src, en la sección Contenido segurode esta publicación podrás ver el ejemplo en acción con plunker:
<img [src]="persona.photoURL">
La etiqueta imgtambién tiene un atributo src, pero aquí vale la pena indicar que las propiedades y atributos de un elemento no son lo mismo. El Enlazado de Propiedades se aplica a las propiedades mismas, no a los atributos.
Los atributos a veces se ocupan para reflejar el estado de un elemento o componente, pero un atributo es útil para declarar información inicial del elemento en el código HTML, una propiedad forma parte de la instancia del elemento.
Para probar que son diferentes, si quieres obtener el valor de un atributo se utiliza elemento.getAttribute(nombreAtributo), para obtener el valor de una propiedad se utiliza elemento.propiedad.
Para definir un atributo se utiliza elemento.setAttribute(nombreAtributo, valor), para definir una propiedad se utiliza elemento.propiedad = valor.
Los atributos se guardan en una propiedad elemento.attributesde la instancia del elemento o componente. Para entender esto de atributos y propieades te recomiendo la sección sincronización de atributos y propiedades.
Ahora veamos como podemos habilitar y deshabilitar un <input>a través de la propiedad disabled:
<input [disabled]="isDisabled" value="Hola"/>
Existe otra notacion para enlazar propiedades, bind-propiedad="expresion":
<input bind-disabled="isDisabled" value="Hola"/>
Otro ejemplo interesante es definir el valor classde un elemento a traves de la directiva ngClass:
<p [ngClass]="clases"></p>
Aqui la pregunta es, ¿Cómo sabe angular que ngClasses una directiva y no una propiedad?
En otra publicación veremos como crear una directiva, por el momento solo toma en cuenta que la forma en que las directivas estan creadas permite a angular revisar si es una directiva o no. Angular antes de intentar hacer un property binding revisa si existe una propiedad ngClassen la directiva o en el elemento que se esta aplicando. En el caso anterior, los elementos nativos no tiene la propiedad ngClass, los elementos html tiene la propiedad classNamey classList, pero en este caso podemos decir que [ngClass]es un directiva.
Contenido seguro
Angular hace su trabajo en mantener tu codigo seguro, aquí un ejemplo usando property binding:
cuidado: string = '<script>alert('Este código es peligroso')</script>';
Comunicación entre componentes
El enlazado de propiedades es muy útil en la comunicación de Padre a hijo de componentes, veamos un ejemplo concreto, tenemos al componente padre pb-person-list, el cual contiene un listado de componentes hijos de tipo pb-persona.
El componente padre contiene un arreglo de personas, este arreglo se bindea a través de la directiva *ngFory Property Bindingcon la propiedad persondel componente hijo.
Aquí hay algo de suma importancia, para que en el componente hijo se pueda realizar el Enlazado de Propiedades, se define la propiedad personcon el decorador @Input('alias'), a si mismo la propiead persondentro del componente es utilizada como persona, pero desde el exterior se bindea con [person]="expresion"', esto es así debido a el alias que definimos en @Input('person) persona: Object. El alias es opcional, si no lo tiene, entonces se bindea con [persona]="expresion"
Es importante saber que son las expresiones de plantillas, estas se utilizan en las interpolaciones y en el Enlazado de propiedades (Property Binding).
Cuando creas un componente, se utiliza HTML para crear su plantilla, esto es bueno, no tienes que aprender mucho de otra sintaxis para plantillas, aun así angular incorpora una pequeña sintaxis, que, aunque pueda ser nueva, es de gran utilidad y en esta publicación veremos expresiones de Javascript, interpolación y property binding en las plantillas de angular.
En las plantillas de angular cualquier elemento HTML es valido, a excepción de elementos como <html>, <head>, <base>, los cuales no tiene que estar en una plantilla de angular porque las plantillas de angular se “dibujan”dentro de la etiqueta <body>.
Otra excepción de suma importancia es la etiqueta <script>, esta etiqueta no se debe usar en las plantillas por el riesgo que se corre a ataques de XSS. Afortunadamente Angular previene XSS a través de sanitización, esta técnica convierte texto potencialmente ejecutable (código no deseado) a texto totalmente seguro.
¿Qué son las expresiones de plantillas?
Las expresiones de plantillas no son más que expresiones de Javascript normales con ciertas limitaciones. Veamos dos ejemplos:
En Interpolación se utiliza la sintaxis {{expresion}}:
<h3>2 + 2 es igual a {{2 + 2}}</h3>
El resultado es:
<h3>2 + 2 es igual a 4</h3>
En enlazado de propiedades se utiliza la sintaxis [propiedad]="expresion":
<h2 [hidden]="oculto">Ejemplo Enlazadode propiedades</h2><input [hidden]="oculto" value="Este es un input oculto">
En el ejemplo, debido que la propiedad ocultoes un boleano igual a true, el h2y el inputpermanecen ocultos. El mismo resultado se obtiene si usamos el comparador de igualdad:
<h2 [hidden]="oculto === true">Ejemplo Enlazadode propiedades</h2><input [hidden]="oculto === true" value="Este es un input oculto">
Vemos que dentro de la sintaxis de doble llaves existe una operación de suma y usamos el operador de igualdad en oculto === true, es decir, podemos utilizar Expresiones de Javascripten nuestras plantillas, aunque podemos utilizar expresiones de Javascript, no todo está permitido.
Las expresiones Javascript que producen efectos colaterales no se deben utilizar y NO están permitidas:
Las asignaciones (=,+=,-=, *=, etc)
El operator new
Las Expresiones consecutivas con ;o ,. Ejemplo {{1+1;2+2}}
Los operadores ++y --
Los operadores a nivel de bits |y &
Una característica importante en las expresiones de plantillas y que es distinta de las expresiones Javascript normales es que se pueden utilizar los siguientes operadores, pero ojo, no son operadores a nivel de bits:
Operador de Tuberia |
Operador de Guardia contra valores null o indefinidos, muy util en acceso a datos, ?.
Operador para vereficar referencia NO Nulla, !
Estos tres últimos operadores los veremos a detalle en otra publicación.
Interpolación
La interpolación nos permite obtener información en una aplicación, genera un enlacecon el origen de la información, es decir, si los datos de origen cambian, la interpolación actualiza ese cambio en la vista. En otras palabras, reacciona al cambio de datos.
Ejemplo, contenido de src/app/app.component.html:
<div><h2>Hola {{nombre}}</h2><h2>{{"cadena".split('').reverse().join('')}}</h2> <h2>{{false ? 'SI':'NO'}}</h2><imgsrc="{{logo}}"><h3>2 + 2 es igual a {{2 + 2}}</h3><h2 [hidden]="oculto">Ejemplo Enlazadode propiedades</h2> <input [hidden]="oculto" value="Este es un input oculto"><h2 [hidden]="oculto === true">Ejemplo Enlazadode propiedades</h2> <input [hidden]="oculto === true" value="Este es un input oculto"><button (click)="cambiarNombre()">Voltear nombre</button></div>
Ejemplo en acción, revisa el archivo src/app/app.component.ts:
En el ejemplo tenemos un componente llamado my-appdefinido en el archivo src/app/app.component.ts, la plantilla del componente está definida en la propiedad templateUrldel decorador @component, carga un arhivo html externo.
Podemos ver que cuando damos clic en el botón Voltear textola propiedad nombrees cambiada invirtiendo los caracteres, se invierte los caracteres a través del método cambiarNombre. Y la reacción a este cambio esta enlazado con la interpolación {{nombre}}.
También se puede utilizar interpolación en atributos, en el ejemplo anterior para mostrar la imagen se utilizó:
<imgsrc="{{logo}}">
Otro ejemplo:
<h3>2 + 2 es igual a {{2 + 2}}</h3>
¿De dónde se obtienen los valores de las expresiones de plantilla?
Normalmente los valores estan definidos en el componente como vimos en el anterior ejemplo, nombrey logoestán definidos como miembros de la clase y en el constructor se les define su valor.
Pero también se puede definir propiedades en el contexto de la plantilla llamadas variables de plantillas, existen dos tipos de estas variables:
En este otro caso se ocupa el carácter #y luego el nombre de la variable de referencia que deseas crear. Con esto se puede utilizar la variable en interpolación como se ve en {{varReferencia.value}}.
La jerarquía o prioridad del valor final obtenido en las expresiones de plantillas es así:
Variables en plantilla, input y de referencia.
Directivas
Componentes
Para ilustrar la prioridad, veamos el ejemplo, en la parte donde se utiliza la directiva *ngForpara recorrer el arreglo gente, ahí se define una variable de input persona, y después se accede a la propiedad nombre de cada persona, podemos notar que debido a la jerarquía arriba listada se tomo primero en cuenta la variable de plantilla personaantes que el miembro personadel componente. El miembro personaes un string “soy otra persona”y nunca se imprime dentro de la lista de personas.
Cuando uses una expresión de plantilla, sigue estos consejos:
Tu expresión debe ser rápida de ejecutar porque no va a ser la única en toda tu plantilla. Si es necesario, considera guardar los resultados de las expresiones que se van a utilizar varias veces en la plantilla y asi la expresion no se ejecuta varias veces.
Utiliza el principio de mantener todo estúpidamente simple, no uses complejas expresiones porque genera mucho ruido en la plantilla, para expresiones más complejas utiliza la clase del componente, y aún ahí considera el principio KISS (Keep It Simple, Stupid).
Investiga el funcionamiento de detección de cambios de angular para mantener tus expresiones lo más eficientes posibles, en una futura publicación explicaré la detección de cambios y como nos ayuda a mejorar el rendimiento de nuestro aplicación.
En este artículo vamos a utilizar el API de Elementos HTML personalizados) para crear nuevas etiquetas y utilizarlas en nuestro código HTML, en futuras publicaciones explicaremos como se usan en conjunto con los otros 3 estándares. Para crear un componente web se utilizan 4 tecnologías principales estándares de la web.
Custom elements o elementos HTML personalizados.
Shadow DOM, DOM en las sombras.
Carga de módulos o componentes externos.
HTML imports con la etiqueta <link rel="import">.
<script type="module">, cargando módulos usando el tag script. Esta tecnología sustituye a los html imports.
Cada uno de estos ciclos es un evento único; dieta, elección, selección, estación, clima, digestión, descomposición y regeneración, difieren cada vez que ocurren. Por lo tanto, es el número de estos ciclos, grandes y pequeños, lo que decide el potencial de diversidad. Deberíamos sentirnos privilegiados de ser parte de esa renovación eterna. Con solo vivir hemos logrado la inmortalidad como hierba, saltamontes, gaviotas, gansos y otras personas. Somos parte de la diversidad que experimentamos en todos los sentidos. Si, como nos aseguran los científicos, todos tenemos moléculas de Einstein, y si las partículas atómicas de nuestro cuerpo físico llegan a los límites más externos del universo, entonces todos somos en efecto componentes de todas las cosas. No nos queda ningún lugar adonde ir si ya estamos en todas partes, y esto es, en verdad, todo lo que tendremos o necesitaremos. Si nos amamos a nosotros mismos, deberíamos respetar todas las cosas por igual y no reclamar ninguna superioridad sobre lo que son, en efecto, nuestras otras partes. ¿Es la mano superior al ojo? ¿El hijo de la madre?
Bill Mollison
Elementos HTML Personalizados
El estándar Custom elements nos indica dos maneras de extender la funcionalidad del HTML:
Crear nuestros propios elementos desde cero, nuevos elementos a los que le agregamos toda la funcionalidad que sea necesaria.
Extender la funcionalidad de elementos ya existentes. Lamentablemente esta característica no está soportada por todos los navegadores modernos. En la versión v0 si había soporte, pero esa versión ya está obsoleta.
Desde la versión 67 de chrome esto funciona correctamente, Firefox lo tiene en desarrollo, Edge lo va a implementar, lamentablemente safari decidió no implementarlo.
Más información en https://www.chromestatus.com/feature/4670146924773376
Para entender la diferencia, en el primer caso podríamos crear un elemento llamado <mi-boton>, al que tendríamos que agregar estilos y funcionalidad desde cero para que se comporte como un botón.
En el segundo, podemos crear un elemento <mi-boton-extendido>, el cual extiende de la etiqueta <button>, entonces este componente si tendría los estilos, eventos y demás comportamientos de un botón, es decir, hereda el comportamiento de <button> y entonces solo se le agregaría algún comportamiento extra para cumplir con el objetivo en mente.
Si en los ejemplos no lanza el alerta especificado en el código, siempre puedes presionar “edit on codepen” para que el alerta funcione y puedes ver el código en un espacio más grande.
Crear un nuevo elemento desde cero
Veamos la primera forma para crear un nuevo tipo de elemento, desde cero.
Hay algunas cosas importantes que remarcar en el código:
Todos los elementos deben tener un prefijo, esto es un requisito para evitar que en futuras versiones de HTML las nuevas etiquetas colisionen con los elementos creados por ti u otros programadores.
Podemos registrar un elemento en dos pasos, creando la clase y pasando su referencia como parámetro en el método customElements.define o utilizar una clase anónima como se hizo con <mi-boton-2> directamente en el método customElements.define.
Una clase en Javascript no es una clase como en otros lenguajes de programación orientada a objetos, realmente es como un tipo de función especial que te permite utilizar herencia de prototipos de una forma más familiar y limpia.
En el constructor siempre debemos de invocar la función super(), de esta manera obtenemos la herencia, pues provoca que se invoque este mismo método en la cadena de prototipos/herencia. Si no se invoca, el navegador web te mostrara un caught ReferenceError: Must call super constructor in derived class before accesing 'this' or returning from derived constructor.
Para establecer estilos se usa la nuevas etiqueta creadas mi-boton y mi-boton-2. Al ser nuevas etiquetas, cualquier selector de css puede funcionar, hablamos de selector de clase, el id, pseudoselectores y pseudoelementos.
Extender la funcionalidad de elementos ya existentes
Ahora vamos a crear un nuevo elemento basado en uno ya existente, solo pondremos el ejemplo del código, realmente como mencionamos antes, no todos navegadores aún soportan este estándar, esperemos que en futuras versiones lo hagan.
Las principales diferencias cuando extendemos la funcionalidad de elementos nativos es que seguimos utilizando el nombre de la etiqueta nativa y agregamos el atributo is para indicar que será del tipo elemento que definimos. Esto en código HTML.
Pero en código Javascript es necesario en la definición (método customElements.define), utilizar un tercer parámetro donde podemos indicar de que elemento HTML vamos a extender, extends. Y definir la propiedad is a través de código JS.
Métodos del ciclo de vida de un elemento
Los custom elements tiene funciones que se ejecutan en un determinado momento de su existencia, de tal manera que el autor puede ejecutar acciones, cambios o inicialización de datos en uno o mas momentos del ciclo de vida de un componente.
Si revisas la consola de la página creada por codepen, el orden en que son ejecutados estos callbacks es:
constructor: Cuando el elemento es creadoattributeChangedCallback: Cuando cambia un atributoconnectedCallback: Cuando el elemento es insertado en el documento
Para probar disconnectedCallback solo inspecciona el elemento <mi-mensaje> y elimínalo. Un mensaje de alerta parecerá informando de la eliminación.
Cuando se crea el elemento, attributeChangedCallback se ejecuta al definir por primera vez el atributo antes de que el elemento sea insertado en el DOM.
Sincronización de atributos y propiedades
Recuerda que las propiedades y los atributos son cosas diferentes, aunque los atributos se ocupen para reflejar el estado de un elemento, no son lo mismo. Un atributo se ocupa normalmente para declarar información del elemento en el código HTML y reflejar su estado, una propiedad forma parte de la instancia del elemento.
Para obtener un atributo se utiliza elemento.getAttribute(nombreAtributo), para obtener una propiedad se utiliza elemento.propiedad.
Para definir un atributo se utiliza elemento.setAttribute(nombreAtributo, valor), para definir una propiedad se utiliza elemento.propiedad = valor.
Los atributos se guardan en una propiedad elemento.attributes de la instancia del elemento.
Para entender mejor esto, vamos a crear un ejemplo un poco más complejo, donde se implementa la sincronización de atributos, propiedades y el estado del elemento. Este nuevo elemento consta de dos propiedades principales, msj y casiVisible, estos se sincronizan con los atributos msj y casi-visible.
Cuando el atributo casi-visible está declarado, el elemento se opaca hasta casi desaparecer, además el borde negro desaparece.
Cuando decimos que se sincronizan, es que un cambio en la propiedad, se refleja en el atributo y viceversa.
Puedes hacer varias pruebas, inspeccionando los elementos, agrega y elimina el atributo casi-visible.
También puedes inspeccionar el elemento y modificar el atributo msj para ver que sucede.
Las mismas pruebas las puedes hacer con las propiedades, utilizando google chrome inspecciona los elementos y en la consola ejecutas el código de abajo:
$0.msj ='HOLA MODIFICANDO EL MENSAJE';$0.casiVisible =false;// muestra el elemento$0.casiVisible =true;// casi oculta el elemento
En todos los casos notarás cambios en el estado del elemento y en el contenido del mensaje.
En siguientes publicaciones veremos como utilizar el estándartemplate o plantilla y shadow DOM (DOM en las sombras), luego veremos el uso JS modules, para al final crear componentes completos y ver como se comunican entre ellos.
Para entender los componentes web, tenemos que entender un poco a la naturaleza. Como seres humanos a veces se nos olvida que somos parte de la naturaleza y que el desarrollo de software siempre trata de representar el mundo real.
Veo el micelio como la Internet natural de la Tierra, una conciencia con la que podríamos comunicarnos. A través de la interfaz entre especies, es posible que algún día intercambiemos información con estas redes celulares sensibles. Debido a que estas redes neurológicas externalizadas sienten cualquier impresión en ellas, desde pasos hasta ramas de árboles que caen, podrían transmitir enormes cantidades de datos sobre los movimientos de todos los organismos a través del paisaje.
Paul Stamets
Los componentes web tratan de representar el mundo real
La programación y el desarrollo de software se inspira en la naturaleza. El desarrollo de software al ser una actividad humana y social, siempre se usa en busca de solucionar problemas reales de nuestro entorno.
Antes de explicar que es un componente web me gustaría mucho compartir contigo esta información sobre diseño atómico. Interesante la relación con los átomos, moléculas y organismos ¿Verdad?. La naturaleza nos enseña mucho, pues está diseñada de una manera superior y el ser humano puede aprender mucho de este gran sistema. El mundo mismo es un sistema, el universo es un sistema.
Teniendo una noción de estos componentes podemos encontrar su relación con el desarrollo de software y con ello aprender a diseñar mejor nuestros sistemas computacionales.
Comunicación entre componentes
Los átomos se comunican y forman moléculas, las moléculas se comunican y forman organismos y como estos también se comunican y forman organismos más complejos. Luego esos organismos más complejos forman sistemas completos, como el sistema respiratorio o el mismo ser humano. ¡Ups!, creo que acabo de describir la esencia de la programación orientada a objetos, porque es lo mismo, desde la comunicación entre funciones, clases, componentes, módulos, hasta la comunicación entre aplicaciones.
Imagina como los pulmones forman parte del sistema respiratorio, y como este último forma parte de un ser humano. El cerebro se encarga de indicarle a los pulmones cuando contraerse y cuando expandirse sin que nosotros seamos conscientes de esos movimientos. ¿Te das cuenta de la comunicación entre el cerebro y los pulmones?
También los pulmones se comunican con otro componente llamado corazón. Los pulmones limpian la sangre llena de dióxido de carbono y agregan oxígeno. Es en ese momento en que esa sangre rica en oxígeno se envía al corazón. El corazón bombea la sangre a todas las partes de nuestro cuerpo. ¿Te das cuenta de todas las comunicaciones que existen entre los órganos (componentes)?
Dicho todo el rollo anterior y después de darle por lo menos un vistazo al diseño atómico. Nos damos cuenta de la importancia de los componentes que conforman el diseño de algo más complejo. Y en nuestro caso los componentes con los que construimos nuestras aplicaciones web.
¿Qué es un componente web?
Entonces, ¿Qué es un componente web? Un componente web es lo mismo que explicamos en los párrafos anteriores solo que con el contexto de aplicaciones web. Dado que es tecnología web, se usa mucho javascript, CSS y HTML, cuando se crea un componente web. Se crea una nueva etiqueta HTML para ser reutilizada tal como usamos las etiquetas h1, p, o form.
Diseño atómico, átomos, moléculas, organismos y plantillas
Tomando como ejemplo nuestro sistema respiratorio y utilizándola como analogía a la multiplicación de números. Primero, en lugar de nariz, laringe y traquea para ingerir aire, tenemos elementos de entrada como inputs y botones para insertar los números.
En los pulmones se obtiene el oxígeno para crear una combustión interna para luego mandar al corazón sangre rica en oxígeno, también se despide el resultado de la combustión en forma de CO2. En la multiplicación, tenemos un componente Multiplicación de números que permite recibir dos números, multiplicarlos y mostrártelos en la aplicación a través de texto.
¿Cómo empezar a utilizar los componentes web?
Ahora, la creación de componentes web está basado en cuatro principales estándares de la web. Estos nos permite crear componentes reutilizables y encapsular su funcionamiento y al mismo tiempo permiten la comunicación entre ellos para crear sistemas robustos.
Custom elements o elementos personalizados
Shadow DOM, DOM en las sombras.
HTML Templates, Plantillas HTML.
<script type="module">, cargando módulos usando el tag script.
Antes se usaba HTML imports, importar componentes a través del tag <link rel="import">
Actualmente el soporte de estos cuatro estándares en los navegadores web es el siguiente. Tomado de https://www.webcomponents.org/.
Soporte de componentes web en navegadores
La imagen fue tomada de webcomponents.org, y si quieres saber más a detalle sobre el soporte de los navegadores, aquí te dejo la lista:
También existen frameworks como Angular y Vue, y librerías como React, que se basan en componentes. Aunque no ocupen los cuatro estándares principales, se utilizan para crear aplicaciones web robustas con los mismos principios.
Aquí hay un compendio inicial de algunos de ellos:
Vue.js es un framework para crear interfaces de usuario, muy parecido a Polymer y a la vez a React, pero también tiene cosas de Angular. Es un framework relativamente pequeño al que puedes ir adaptando a tus necesidades y hacerlo mucho más robusto a través de librerías y herramientas modernas como webpack.
Es uno de los frameworks mejor documentados y con la menor curva de aprendizaje, así que si no tienes experiencia utilizando algún framework parecido, este es el primero que recomiendo que aprendas.
Interpolación
Para empezar a utilizar Vue.js juega con este ejemplo donde creamos nuestra primera implementación con Vue.
Si nos damos cuenta la propiedad mensajedel objeto dataha sido pintada, pero no solo se pintó data.mensajeen la página, sino que tanto el DOMcomo dataestán enlazados y se comportan de manera reactiva, ¿Cómo lo sabes?, en el código guardamos una instancia de Vue en una variable llamada app, esta variable está definida globalmente, por lo que si damos click derecho sobre la página que nos genera codepen, es la parte derecha con fondo blanco y dice Hola soy Vue.js, luego Inspeccionar elementoy nos vamos a la pestaña consola(console), podremos obtener la referencia a esa instancia y modificar sus datos.
Inténtalo de esta manera:
app.mensaje = 'Nuevo mensaje';
Deberás ver en la página como el texto se actualiza automáticamente reaccionando al cambio. Por el momento recuerda que los elementos del datareaccionan al cambio en el DOM y/o directamente cambiando el valor en el código.
Lo que hicimos con {{}}se le llama interpolación, es decir, realiza la operación necesaria para obtener el resultado de mensaje. En este caso nos regresa un resultado en forma de una cadena, podemos utilizarlo también en atributos.
Interpolación en atributos y directivas
Ahora la interpolación se hizo a través de un atributo raro v-bind, a este tipo de atributos se les llama directivas, una directiva son atributos creados por Vue y tienen el prefijo v-, estas directivas aumentan el funcionamiento de un determinado elemento, en este ejemplo pudimos aumentar el funcionamiento del atributo titleen el elemento spanpara que muestre la propiedad mensajede manera reactiva cuando pasamos el cursor del mouse. En otras palabras, se crea un enlace de comunicación el cual permite actualizar la información.
Directiva condicional v-if
Ahora veamos una directiva muy útil v-if , que nos permite pintar o no un elemento basándose en una condición de nuestra aplicación.
Esta interpolación recibe un valor falso, es decir, un valor que se convierte en un boleano false, aquí te dejo una lista de estos valores. Importante, todos los valores que no estén en la lista se convierten en valores verdaderos cuando se ejecutan en una condición.
false
null
undefined
0
cadena vacía “”
El numero NaN (Not a Number)
Directiva repetidora v-for
Esta directiva, muy parecida al forde Javascript te permite iterar sobre los elementos de un Arrayo un Object.
Al igual que el primer ejemplo, puedes acceder a la variable global appy cambiar el valor de buenosHabitospara que la lista con v-forreaccione a los nuevos datos.
app.buenosHabitos = ['Ir a nadar', 'Dormir temprano'];
Interacción con el usuario usando v-on y v-model
La directiva v-onpermite agregar escuchadores de eventos a elementos HTML, y definir que método de nuestra instancia de Vue ejecutar cuando se dispara el evento. A nuestra instancia le podemos agregar métodos en su propiedad methodscomo se ve en el ejemplo:
También en el ejemplo usamos la directiva v-model, la cual nos permite actualizar los datos en dos direcciones, es decir, desde el input y hacia él, si cambiamos su valor, se refleja como se actualiza el texto que aparece después del botón, y también si oprimimos el botón, vemos como el cambio se refleja en el input y en el texto al revés.
Espero y te sirva este post, comenta si así lo fue y que tipo de temas te gustaría que se explicaran en futuros artículos.
En la versión de Google Chrome 61 para Android se agregó esta interesante funcionalidad que te permite compartir información en redes sociales utilizando las aplicaciones nativas de tu smartphone.
¿Cómo se usa?
Para poder utilzar esta Web share API, necesitas:
Chrome 61 o una versión mayor en Android
Que la aplicación o sitio web funcione sobre el protocolo seguro HTTPS
Aqui esta un ejemplo, pruebalo en tu android con Chrome 61 o una versión mayor, de lo contrario no funcionara. Esta funcionalidad no la tiene tu navegador de escritorio.
Al presionar el boton grande “Compartir” sale este cuadro de dialogo nativo de android:
¿Qué debes tomar en cuenta?
Esta funcionalidad solo se puede ejecutar con la accion del usuario, es decir, solo se puede invocar en controladores de eventos como click.
Solo se puede ejectar en Android y en el navegador web Chrome >= 61
En el ejemplo anterior, primero nos aseguramos que el navegador soporta la funcionalidad con navigator.share.
ES_MX 
EN