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.
En este post explicaré como crear la estructura básica del diseño de una aplicación con Angular y Angular material design. Angular material design es una colección de componentes visuales optimizados para una mejor experiencia de usuario y creación de interfaces gráficas.
Utilizarlo nos ahorra mucho tiempo creando y diseñando nuestros propios componentes, por lo que es una buena opción para acelerar las creación de aplicaciones web.
Primero vamos a crear una nueva aplicación con **angular-cli:
$ ng new basic-angular-material
Luego ejecutamos nuestra aplicación con ng serve:
cd basic-angular-material && ng serve
Nuestra aplicación se debería de ver así:
Ahora instalamos el paquete de Angular material:
npm install --save @angular/material @angular/cdk
Si te das cuenta, ademas de instalar el paquete de @angular/material, también instalamos el paquete @angular/cdk, este ultimo en versiones anteriores formaba parte del paquete de @angular/material, pero es tan útil en la creación de componentes que ahora es independiente y al serlo permite que otros desarrolladores se beneficien para crear sus propios componentes al mero estilo de angular material.
Como muchos componentes de angular material realizan animaciones para una mejor experiencia de usuario, si queremos que nuestros componentes tengan animaciones debemos instalar el paquete @angular/animationse importar el modulo BrowserAnimationModuleen nuestra aplicación.
npm install --save @angular/animations
En el archivo src/app/app.module.tsimporta el modulo de animaciones, lineas 7 y 16, en el código de ejemplo:
Ahora debemos incluir un tema para nuestra app, es requerido para la correcta visualización de la mayoría de los componentes. Debemos incluir la siguiente linea de código en el archivo /src/styles.css.
Para que los componentes reaccionen bien a eventos de touch en pantallas, necesitamos de la librería HammerJS, varios componentes utilizan HammerJS así que lo podemos instalar con el siguiente comando:
npm install --save hammerjs
En el archivo /src/main.tsimportamos la librería en la linea 8.
Importamos los módulos de Angular Material que vayamos a utilizar. Vamos a modificar el archivo src/app/app.module.tspara que quede como el código de abajo. Otra opción es crear un modulo nuevo donde importemos los componentes de angular material que vayamos a utilizar. En este ejemplo importamos los componentes en la linea 9.
Con todo lo anterior listo, podemos empezar a utilizar los componentes, vamos a modificar el contenido por defecto del template del componente principal que nos genera la herramienta de linea de comandos de angular-cli.
Versión final:
Nuestra app debe verse así:
Y cuando damos click(o touch) en el menú:
Para que tu app se vea de esta manera, sin espacios en blanco a los lados y la barra lateral a toda la altura del navegador web, tu archivo src/styles.cssdebe ser así:
Demo de interfaz gráfica para creación de encuestas. Angular 5 y Angular material design 5:
Cada patrón describe un problema que ocurre una y otra vez en nuestro entorno, y luego describe el núcleo de la solución a ese problema, de tal manera que puedes utilizar esta solución millones de veces, sin nunca hacerlo de la misma forma dos veces.
Arquitecto Christopher Alexander
La definición del patrón de diseño no viene del desarrollo de software, sino de la arquitectura del habitat humano.
Tanto la arquitectura del hábitat humano como el desarrollo de software tienen muchas similitudes, esto es porque como seres humanos somos parte del mundo y de la naturaleza. Por lo tanto el desarrollo de software busca siempre representar el mundo real, de hecho la programación de cualquier aplicación siempre se usa para solucionar problemas reales de nuestro entorno.
Entonces podemos comprender que un patrón de diseño permite ofrecer una solución a problemas comunes en el diseño de software, describe la solución a problemas que se repiten muchas veces y que son muy similares entre ellos, en concreto, esta similitud permite diseñar una solución para un conjunto de problemas parecidos.
Los patrones de diseño actuales fueron popularizados por el libro Design patterns: elements of reusable object-oriented softwarede los autores conocidos como GoF(Gang of Four):
Erich Gamma
Richard Helm
Ralph Johnson
John Vlissides
En este libro se describen 23 patrones de diseño que desde 1995 hasta nuestros días siguen en uso con un gran impacto en el desarrollo de software. Esto no quiere decir que estos patrones no fueron utilizados mucho antes de la publicación del libro.
Este artículo será el primero de una serie, que nos permitirá entender como se pueden implementar muchos de estos patrones de diseño en el lenguaje de programación Javascript y no solo los descritos por GoF, también se explicara otros patrones de diseño útiles en Javascript.
El primer patrón de diseño es el Patron Singleton.
Patrón Singleton
Este patrón nos permite tener una solo instancia de un tipo de objeto, porque no es necesario crear varias instancias nuevas cuando una solo instancia puede encargarse del mismo trabajo en toda la aplicación. Al solo tener una instancia, centralizamos la información, funcionalidad y mejoramos el rendimiento disminuyendo el uso de memoria.
En Javascript es muy fácil utilizar este patrón, tan fácil como crear un objeto literal, por ejemplo supongamos que tenemos una configuración para el número de caracteres y palabras que se muestran en un sitio web optimizado para buscadores:
let configSEO ={nombre:'Pensemosweb',seo:{descripcion:{limiteCaracteres:155,limitePalabras:23},titulo:{limiteCaracteres:70,limitePalabras:9}}};
Un simple objeto de configuración es un singleton, pues en toda la app se va a hacer referencia al objeto configSEO y nunca se va a crear más nuevos objetos porque se puede extender esa configuración añadiendo más propiedades.
Ahora supongamos que necesitamos utilizar objeto donde existan funciones de configuración y métodos, además de una interfaz para obtener la instancia, tomando el mismo ejemplo de configSEO ahora vamos a utilizar funciones anidadas y closure (o cierres), esto ultimo permite a una función tener acceso a las funciones y variables definidas en el ámbito en que esta función también es definida.
La función anónima principal se invoca inmediatamente con la notacion (function() {}()) y recibe un parámetro el, el cual guarda la referencia al elemento del DOM con id resultado. Este parámetro se lo pasamos a la función inmediata a través de la variable global elem.
Debido a que definimos instancia dentro de la función principal, las funciones anidadas definidas más adelante tienen acceso a esa variable instancia que guardara nuestro singleton cuando invoquemos la función configSEO().
Además metodoPublico()y privada() tienen acceso a las variables instancia y el.
Si nos fijamos en la línea 48, elem.append(conf1 === conf2), comparamos igualdad de referencia, conf1y conf2son el mismo objeto, como singleton, solo trabajamos con una instancia.
También podemos hacer uso de otro patrón de diseño llamado factory, el cual veremos más a detalle en otro post, por el momento solo ten en cuenta que tendremos una función que fabricara singletons.
Podemos notar que con una sola función, podemos acceder a los singletons creados anteriormente y podemos agregar más si queremos. Este tipo de patrón factory de singletons es muy utilizado en frameworks como AngularJS. Aquí abajo un ejemplo del singleton configSEO y el factor y usando AngularJS.
Scheme, Paradigma funcional. Influenciado por Lisp
Self, Paradigma orientado a objetos, basado en prototipos en lugar de clases. Influenciado por Smalltalk
A mediados de los noventa, la compañía Netscape necesitaba un lenguaje para su navegador web. Entonces contrataron a Brendan Eich quien inicialmente quería usar algo como Scheme dentro del navegador.
En esa época, Netscape tenía tratos con Sun microsystems para mostrar Java en el navegador a través de applets. Así que tenían en mente un lenguaje hermano, mucho más simple. Pero poquito despues sintieron que ya no deberían crear este lenguaje, que con Java era suficiente.
Al final gracias a Brendan y otras dos personas de Netscape y Sun Microsystems, se vio la necesidad de un lenguaje que pudiera correr directo en una página web. Y que pudiera ser utilizado por personas que no supieran lo que es un compilador.
Brendan Eich tomó la sintaxis de Java, el modelo funcional de Scheme, y la programación orientado a objetos basada en prototipos de Self.
Aunque la sintaxis la toma de Java, esta sintaxis realmente viene de C/C++ de los cuales Java surgió.
Javascript: scheme, self y Java en uno
JavaScript fue creado a prisas y con mucha presión, en diez días Brendan Eich creó la primera versión, aun así la habilidad de Brendan en tomar los mejores aspectos de los lenguajes de programación Scheme, Self y C/C++ han hecho de JavaScript un lenguaje muy potente y expresivo.
En un inicio se llamó mocha, después LiveScript en su primer lanzamiento oficial en 1995 y tres meses después lo llamaron JavaScript. Este último nombre tiene muy poco que ver con el lenguaje, según se entiende, lo llamaron así por estrategia de mercadotecnia porque Netscape incrustaba Java en el navegador web.
Tiempo después Netscape anuncio una reunión con la organización de estándares Ecma International para dar paso a la estandarización de Javascript. Así la primera edición ECMA-262, fue aceptada por la asamblea general de Ecma en junio de 1997. Realmente el estándar del lenguaje se llama ECMAScript.
¿Dónde se usa Javascript?
Javascript es un lenguaje de programación muy flexible, multiparadigma, dinámico y con un gran potencial, es por eso que lo encontramos actualmente en diferentes áreas, por mencionar algunas:
Navegadores web como Firefox, Google Chrome, Opera, Safari.
Aplicaciones móviles, incrustados en la aplicación nativa mediante WebViews, o con herramientas como Cordova y Ionic
En Node.js para crear servidores http, ftp y cualquier tipo de tecnología de red de una forma escalable, otro ejemplo es ejecutar scripts en tu sistema operativo para automatizar tareas.
Programación de Robots e IoT (Internet de las cosas), por ejemplo Arduino y johnny-five.
¿Cómo se usa Javascript?
Javascript es un lenguaje compilado en el momento (Just-in-time compiled), el motor de JavaScript recorre linea por línea y así va traduciendo el código a lenguaje maquina para que la computadora lo pueda entender. En las primeras versiones de JavaScript se ocupaba un intérprete.
Como ya mencionamos, Javascript no solo se puede ejecutar en el navegador web, sino también del lado del servidor, como lo hace en node.js, a estos lugares donde javascript se puede ejecutar se les llama ambientes huésped. Estos ambientes tienen sus propias funcionalidades y APIs que no son parte del estándar de ECMAScript. Por ejemplo, en el navegador encontramos los objetos window y document, en node.js podemos encontrar los objetos http y fs.
Para aprender cualquier otro lenguaje, todos sabemos que necesitamos saber su gramática, es por eso que vamos a ver la definición de gramática sacada de Wikipedia:
La gramática es el estudio de las reglas y principios que gobiernan el uso de las lenguas y la organización de las palabras dentro de unas oraciones y otro tipo de constituyentes sintácticos.
Solo veremos la gramática básica para poder empezar a crear código. De tal manera que se combinen con ejemplos prácticos y en próximas publicaciones iremos aumentando nuestro entendimiento de la misma forma.
Variables
Uno de los elementos más usados son las variables, las variables son cajitas con etiquetas, y tienen un espacio de memoria para guardar algún tipo de dato.
Las etiquetas de las cajitas deben cumplir ciertas reglas. Su nombre o identificador no puede iniciar con un número, deben iniciar con alguna letra (incluyendo _ y $), y además Javascript es sensible a mayúsculas y minúsculas.
Existen dos maneras de declarar una variable. Una es usando var y la otra usando let.
Es importante describir correctamente el contenido de las variables, porque así le facilitamos la vida a la siguiente persona que necesite leer y modificar nuestro código. Esta siguiente persona muy a menudo eres tú del futuro, y al menos que seas un robot, no podrás recordar cada detalle de tu código.
Del código anterior, presta atención solo a las definiciones de variables, ahí tanto let como var tienen el mismo efecto, definen una variable global que puede ser accedida en cualquier parte de la ejecución.
También podemos ver que no es necesario definir el tipo de dato, y realmente no lo necesitamos, vemos claramente que las variables contienen cadenas de caracteres (string), un string se declaran dentro de unas comillas simples o dobles.
A las variables que no le definimos algún valor, Javascript les asigna el valor undefined.
Además de las variables existe un tipo de cajita que no puede cambiar lo que guarda una vez definido su valor, por eso se llaman constantes.
Al tratar de reasignar un valor a una constante como en la cuarta línea del código, JavaScript mostrara un TypeError, indicando que no se puede reasignar un valor a una constante.
Javascript es un lenguaje débilmente tipeado, o sea, que no es necesario definir el tipo de dato. Pero no quiere decir que no tenga tipos, pues el tipo de dato es definido en tiempo de ejecución por Javascript, recordemos que Javascript es un lenguaje compilado en el momento.
Datos primitivos
Casi todo en JavaScript es un Objeto, la excepción son los datos primitivos, los cuales no son Objetos y no tiene métodos, entonces tenemos siete tipos de datos, objetos y los siete datos primitivos de abajo:
Number, números como; 1, 0, 18500, 89.95124
BigInt, agregado en el 2020, para representar números enteros muy, pero muy grandes.
String, cadena de caracteres como ‘Hola’ y ‘Buenas noches’.
Boolean, solo acepta true o false, es decir, si o no.
null, sirve para indicar que algo es nada, su único valor es null.
undefined, sirva para indicar que algo aún no está definido.
Symbol, nuevo en el lenguaje a partir de EcmaScript 6, año 2015
Objetos
Todo lo demás son objetos, incluso los tipos de datos String, Boolean, Number y Symbol tiene su correspondiente representación en Objeto. Una función es un objeto. Ejemplos de objetos:
Object
Function
Array
Date
RegExp
Error
La verdad que no preocuparme por el tipo de dato me ha facilitado el desarrollo de software. Además los editores de código vienen con muchas herramientas y plug-ins que te ayudan mucho en este aspecto, te ahorras bastante dolor de cabeza al tratar de convertir entre tipos.
Solo nos interesa lo que nuestro objeto puede hacer, no de que tipo es o si es padre o hijo de algo. Cuando realizas una suma entre números en el mundo real, no te importa que tipo es, solo te importa que se puedan sumar, sin importar si es un entero o decimal, o fracción.
Normalmente si nombras tus variables/objetos de manera adecuada y de manera muy entendible, con el contexto de tu función, modulo o componente sabrás que tipo de datos son.
Su valor ya te indica de que tipo es, me parece redundante definir el tipo de algo a lo que yo mismo le asigno el valor.
Comentarios
Aunque los comentarios no los recomiendo porque son un indicador de que nuestro código no es fácil de entender, se pueden usar para casos en los que ya no tenemos de otra.
La sintaxis de los comentarios fue tomada de C++.
// Este es un comentario de mucho valor
/**
* Este es un comentario con mas de una linea
* y esta es la segun linea
* y una tercera linea
*/
Funciones
Las funciones son otro de los elementos más importantes del lenguaje. Si no es que el más importante. Con una función podemos realizar un conjunto de acciones sin volverlo a escribir y nos permitirá obtener un resultado según los argumentos que recibe a la hora de ejecutarla.
Pero no solo eso, nos permite resolver problemas desde el punto de vista de paradigmas de programación como funcional y orientado a objetos. Por poner un ejemplo, nos permite crear patrones de diseño muy útiles como el Singleton o el Patron de diseño Observador.
¿Por qué las funciones son tan flexibles en JavaScript? Porque las funciones son objetos de primera clase en el lenguaje. Es decir, pueden ser tratadas como cualquier otra variable, pueden ser pasadas como parámetros y pueden ser el valor de retorno de otra función.
Un consejo, selecciona bien tus nombres, un nombre de función debe ser un verbo, porque internamente realiza una acción.
Otro consejo procura usar muy pocos argumentos, no más de tres, créeme, no todos tenemos memoria de fotográfica y con muchos argumentos es difícil reusar la función. Porque no sabremos que parámetros recibe y en que orden.
Cuando queremos que el código de una función se ejecute, se dice que necesitamos invocar la función. Para invocar a una función se deben poner un par de paréntesis (), y si tiene parámetros o argumentos, estos se separan con comas.
En el ejemplo vemos como invocamos dos veces la función getNombreCompleto(nombre, apellido) ahorrando tiempo y esfuerzo obteniendo un resultado similar. Esta función recibe dos parámetros, los cuales separamos con una coma.
Ámbito de variables
En Javascript no existe ámbitos de bloques como en C y Java, donde las variables definidas en un bloque utilizando llaves {} solo existen en ese ámbito y no puede ser accedidas desde afuera.
JavaScript tiene ámbito de función, para ilustrar este tipo de ámbito vamos a crear una función donde se definen dos variables. Más adelante en el código, fuera de la función se intenta obtener el valor de la variable jaime, pero esto no es posible y tendremos un ReferenceError.
Hasta junio del 2015 solo existía la forma de var para declarar variables. Actualmente la forma let de declarar variables permite utilizar ámbito de bloque. Por ejemplo en un bloque if, o simplemente dentro de llaves:
Por último veamos como crear un objeto. Un objeto literal es una colección de pares nombre: valor, parecido a los arrays asociativos de PHP. Estos pares de nombre/valor se les llama propiedades, una propiedad es como una variable y puede contener cualquier tipo de valor.
Para crear un objeto no necesitas crear una clase, tú simplemente creas el objeto y lo empiezas a utilizar.
En el ejemplo tenemos un objeto persona, tiene varias propiedades de diferentes tipos, su nombre es un String, su edad es un Number, getNombre y hablar son de tipo Function, las funciones que son miembros de un objeto se les llama métodos.
ES_MX 
EN