NOMBRE: RICO VAZQUEZ YOVANI DANIEL

DOCENTE: GALLARDO GODINEZ JOSE ANTONIO

MATERIA: PROGRAMACION WEB

TEMA: características de cada una de ellas con aplicación

móvil, base de datos, nativa, graficar entre otros.

GRUPO: T61

NUMERO DE CONTROL: 16250627

FECHA: 31/10/2018
INTRODUCCION:

TECNOLOGIA ANGULAR JS

AngularJS es un framework MVC de JavaScript para el Desarrollo Web Front End que permite
crear aplicaciones SPA Single-Page Applications. Entra dentro de la familia de frameworks
como BackboneJS o EmberJS.

Con tanta oferta de frameworks se nos hace difícil elegir cuál usar en nuestras aplicaciones, qué
ventajas tienen unos frente a otros, etc. En esta entrada voy a comentar que hace a AngularJS
diferente al resto y unos cuantos enlaces a recursos online donde aprender a usar este framework
y coger soltura.

Sin embargo AngularJS está pisando fuerte. Aunque su primera versión es de 2009, se ha hecho
muy popular a finales de 2012 y ahora en 2013 está en pleno auge. Tanto que ya se habla de una
nueva technology stack como antes era LAMP (Linux + Apache + MySQL + PHP) ahora la
tendencia es MEAN (MongoDB/Mongoose + ExpressJS + AngularJS + NodeJS), lo que también
se traduce a aplicaciones JavaScript End-to-End. AngularJS está mantenido por Google y
bastante comunidad. También como punto a su favor está lo sencillo que crear Tests unitarios
y End-to-End con Jasmine y Karma, algo que suele ser un poco costoso al principio.

Este es un ejemplo de como se implementa el patrón MVC en AngularJS:

//Model: Objetos JavaScript

$scope.files = ['foo','bar', 'baz'];
<!-- View: HTML -->
<div ng-repeat="f in files"></div>
//Controller: Código Javascript
function addFile(fileName){
$scope.files.push(fileName);
}

lo que da como resultado:

foo
bar
baz

CARACTERISTICAS

Construye características rápidamente con plantillas simples y declarativas. Amplíe el idioma de la

plantilla con sus propios componentes y utilice una amplia gama de componentes existentes. Obtenga
ayuda y comentarios inmediatos específicos para Angular con casi todos los IDE y editores. Todo esto se
une para que puedas concentrarte en crear aplicaciones sorprendentes en lugar de intentar que el código
funcione.

requisitos previos
Antes de comenzar, asegúrese de que su entorno de desarrollo incluya Node.js®un administrador de
paquetes npm.
Node.js

Angular requiere la Node.js versión 8.xo 10.x.

 Para verificar su versión, ejecútela node -ven una ventana de terminal / consola.
 Para obtener Node.js, vaya a nodejs.org .
gestor de paquetes npm

Las aplicaciones Angular, Angular CLI y Angular dependen de las características y funcionalidades
proporcionadas por las bibliotecas que están disponibles como paquetes npm . Para descargar e instalar
paquetes npm, debe tener un administrador de paquetes npm.

Este Inicio rápido utiliza la interfaz de línea de comandos del cliente npm , que se instala Node.jsde
forma predeterminada.

Para verificar que tiene instalado el cliente npm, ejecútelo npm -ven una ventana de terminal / consola.

Paso 1: Instale el Angular CLI

Utiliza la CLI angular para crear proyectos, generar aplicaciones y códigos de biblioteca, y realizar una
variedad de tareas de desarrollo en curso, como pruebas, agrupación e implementación.

Instale el CLI angular a nivel mundial.

Para instalar el CLI usando npm, abra una ventana de terminal / consola e ingrese el siguiente comando:

content_copynpm install -g @angular/cli

Paso 2: crear un espacio de trabajo y un aplicación inicial

Desarrollas aplicaciones en el contexto de un espacio de trabajo angular . Un espacio de trabajo contiene

los archivos para uno o más proyectos . Un proyecto es el conjunto de archivos que comprende una
aplicación, una biblioteca o pruebas de extremo a extremo (e2e).

Para crear un nuevo espacio de trabajo y un proyecto de aplicación inicial:

1. Ejecute el comando CLI ng newy proporcione el nombre my-app , como se muestra aquí:

content_copy ng new my-app

2. El ng newcomando le solicita información sobre las características que debe incluir en el proyecto
de aplicación inicial. Acepte los valores predeterminados presionando la tecla Intro o Retorno.

Angular CLI instala los paquetes Angular npm necesarios y otras dependencias. Esto puede tardar unos
minutos.

También crea los siguientes archivos de proyecto de área de trabajo y de inicio:

  Un nuevo espacio de trabajo, con una carpeta raíz llamada my-app
 Un proyecto inicial de aplicación de esqueleto, también llamado my-app(en la srcsubcarpeta)
 Un proyecto de prueba de extremo a extremo (en la e2esubcarpeta)
 Archivos de configuración relacionados

El proyecto de aplicación inicial contiene una aplicación de bienvenida simple, lista para ejecutarse.

Paso 3: Servir el la aplicación

Angular incluye un servidor, para que pueda construir y servir su aplicación de manera fácil y local.

1. Ir a la carpeta del área de trabajo ( my-app).

2. Inicie el servidor utilizando el comando CLI ng serve , con la --openopción.

content_copycd my-app

ng serve --open

El ng servecomando inicia el servidor, observa sus archivos y reconstruye la aplicación a medida que
realiza cambios en esos archivos.

La opción --open(o simplemente -o) abre automáticamente su navegador

para http://localhost:4200/ .

Tu aplicación te saluda con un mensaje:

Paso 4: Edita tu primer componente angular

Los componentes son los componentes fundamentales de las aplicaciones angulares. Muestran datos en
la pantalla, escuchan las opiniones del usuario y toman medidas en función de esa entrada.
Como parte de la aplicación inicial, la CLI creó el primer componente angular para usted. Es
el componente raíz , y se nombra app-root.

1. Abierta ./src/app/app.component.ts .
2. Cambiar la titlepropiedad de 'my-app'a 'My First Angular App' .
src / app / app.component.ts

content_copy @Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'My First Angular App!';

El navegador se vuelve a cargar automáticamente con el título revisado. Eso está bien, pero podría
verse mejor.
3. Abre ./src/app/app.component.css y dale un poco de estilo al componente.
src / app / app.component.css

content_copy h1 {

color: #369;

font-family: Arial, Helvetica, sans-serif;

font-size: 250%;

Directivas Nativas[editar]
Algunas directivas nativas que podemos encontrar en angularjs son:

 ngApp (ng-app)
 ngController (ng-controller)
 ngModel (ng-model)
 ngClick (ng-click)
 ngInit (ng-init)
 ngChange (ng-change)
 ngShow (ng-show) | ngHide (ng-hide)
 ngBind (ng-bind)
ngular forma parte del Stack MEAN una integración de:

MongoDB: Como gestor de base de datos.

ExpressJS: Como application web server.

AngularJS: Encargado del Front-End de la aplicación.

NodeJS: Encargado del Back-End de la aplicación

Los 4 manejan JavaScript como lenguaje de desarrollo.

Características de Angular 2
Desarrollo Móvil: El desarrollo de aplicaciones de escritorio es mucho
más fácil cuando primero se manejan los problemas de rendimiento en el
desarrollo móvil.

Modularidad: Para desarrollar una nueva funcionalidad esta se

empaqueta en un módulo, produciendo un núcleo más ligero y más
rápido.

Compatibilidad: Es compatible con los navegadores más modernos y

recientes.

Angular 2 recomienda usar TypeScript un lenguaje de programación

libre y de código abierto desarrollado y mantenido por Microsoft,
considerado como un superconjunto de JavaScript, que
esencialmente añade tipado estático y objetos basados en clases.

TECNOLOGIA NODE.JS:
Node.js es un entorno Javascript del lado del servidor, basado en eventos. Node ejecuta javascript
utilizando el motor V8, desarrollado por Google para uso de su navegador Chrome. Aprovechando el
motor V8 permite a Node proporciona un entorno de ejecución del lado del servidor que compila y
ejecuta javascript a velocidades increíbles. El aumento de velocidad es importante debido a que V8
compila Javascript en código de máquina nativo, en lugar de interpretarlo o ejecutarlo como bytecode.
Node es de código abierto, y se ejecuta en Mac OS X, Windows y Linux.
Node.js es una librería y entorno de ejecución de E/S dirigida por eventos y por lo
tanto asíncrona que se ejecuta sobre el intérprete de JavaScript creado por Google V8. Lo cierto es
que está muy de moda aunque no es algo nuevo puesto que existen librerías como Twisted que
hacen exactamente lo mismo pero si es cierto que es la primera basada en JavaScript y que tiene
un gran rendimiento.
La escalabilidad como uno de sus objetivos principales
Node.js fue formulado para generar una sistema escalable y que tuviese la consistencia suficiente
como para poder generar un elevado número de conexiones de forma simultánea con el servidor.
Generalmente cuando se crea un gran número de conexiones el rendimiento y la velocidad de las
aplicaciones y páginas web se ven perjudicados. Esto se debe a que la gran mayoría de tecnologías
que trabajan desde el lado del servidor accionan las peticiones de forma aislada y mediante hilos
independientes. Por eso, cuando la cantidad de solicitudes que se hacen van en incremento, los
recursos y el consumo de los mismos también se incrementan.

JavaScript como la base de su semántica

Para generar una conexión entre dos o más dispositivos lo más normal es que exista un elemento
llamado servidor cuya función es mediar entre los diferentes usuarios que inician la conexión. Estos
usuarios o clientes establecen una comunicación directa con el servidor y reciben una información que
puede ser de cualquier tipo: Desde una página web a cualquier tipo de notificación o mensaje emitido
por cualquier otro cliente.

Gestor de librerías Node Package Manager

Uno de los puntos fuertes de nodeJS es su Node Package Manager (un los paquetes NPM). Una
especie de gestor que da acceso a un conjunto de librerías muy extenso que además son gratuitas y
generadas a partir de la colaboración de los usuarios de su comunidad. Algunos de los paquetes más
conocidos que podrás encontrar en su plataforma son React, Gulp, Browserify, Grunt-cli, Bower, Grunt,
Express, Cordova o Forever. (Podrás obtener más información accediendo a su página oficial
en npmjs.org).

¿Por qué utilizar NodeJS?

1. Se trata de un lenguaje que puede utilizarse en la gran mayoría de servidores, incluyendo los más
conocidos como Unix, Microsoft o Mac.
2. Una buena parte de las plataformas más eficiente y mejor optimizadas de la red como por
ejemplo Linkedin o Paypal fueron desarrolladas a partir de NodeJS, las cuales son fieles indicadores
de calidad y potencialidad.
3. Garantiza un elevado rendimiento. No sólo puede generar arquitecturas sólidas y potentes sino que
además reduce de una forma muy drástica el ratio de errores.
4. Al estar inspirado en JavaScript cuenta con una semántica muy fácil de digerir, aprender y aplicar
por cualquier programador.
 5. Su alta capacidad de escalabilidad ha llevado el mundo de la programación a un nuevo nivel. Hoy en
día los desarrolladores pueden generar aplicaciones potentes y con una capacidad escalable
asombrosa. Pero, ¿esto en qué se traduce? En aplicaciones web con potencialidades sorprendentes
como semánticas que permiten miles y miles de solicitudes a un único servidor de forma
simultánea. Esto ha permitido multiplicar las capacidades de las aplicaciones web que hasta entonces
podían soportar hasta un máximo de cuatro mil usuarios por servidor. Sin embargo NodeJS ha
permitido multiplicar la capacidad para alojar usuarios activos en las aplicaciones y sin necesidad de
incrementar la infraestructura de servidores.
6. Es quizá la opción más competitiva para diseñar aplicaciones que gestionen grandes cantidades de
información generadas por una comunidad elevada de usuarios. Un buen ejemplo sería Facebook,
una plataforma en la que se generan cientos de miles de comentarios y contenidos por cada segundo.
7. No sólo el funcionamiento de las aplicaciones resulta mucho más ágil y potente, sino que además el
proceso de desarrollo y programación también resulta mucho más liviano y rápido. Al final estamos
hablando de aplicaciones ideales a nivel de experiencia para los usuarios. Uno de los factores
determinantes es que NodeJS trabaja mediante el motor V8 de Google. El motor V8 de Google ha sido
generado para funcionar dentro de un navegador y poner en marcha el código JavaScript con una
velocidad asombrosa. NodeJS está planteado de tal modo que puede efectuar perfectamente el V8 de
Google desde el lado del servidor. Esto abre un nuevo abanico de posibilidades y permite que se
desarrolle un casi infinito conjunto de librerías que actúan casi como un nuevo ecosistema NodeJS.
8. Gracias a que NodeJS permite trabajar tanto desde el servidor como desde el cliente, es posible
generar una transferencia de información mucho más rápida e inmediata. El resultado de todo
esto es una reducción considerable en los periodos de trabajo.
9. Debido a sus altas prestaciones para gestionar y procesar grandes volúmenes simultáneos de
información, NodeJS es una opción estrella para el desarrollo de aplicaciones como chats online o
juegos interactivos.
10. Está diseñado para incentivar el intercambio entre usuarios y programadores: Ha desarrollado
una comunidad bastante amplia que permite establecer lazos de colaboración muy interesantes desde
diferentes ópticas lo cual resulta muy enriquecedor para los desarrolladores. Además al ser un
lenguaje popular y empleado por profesionales de todo el mundo resulta fácil encontrar información y
recursos en Internet.
Para qué sirve
Como ha visto hasta ahora, Node está extremadamente bien diseñado para situaciones en que
usted esté esperando una gran cantidad de tráfico y donde la lógica del lado del servidor y el
procesamiento requeridos, no sean necesariamente grandes antes de responder al cliente. Aquí
hay algunos buenos ejemplos en donde Node haría un gran trabajo:
 Una API RESTful
Un servicio Web que proporcione una API RESTful toma algunos parámetros, los interpreta, arma
una respuesta y descarga esa respuesta (usualmente una cantidad relativamente pequeña de
texto) de vuelta al usuario. Esta es una situación ideal para Node, porque puede construirse para
que maneje decenas de miles de conexiones. Tampoco requiere una gran cantidad de lógica y
básicamente sólo busca valores de una base de datos y los reúne como una respuesta. Como la
respuesta es una pequeña cantidad de texto y la solicitud entrante es una pequeña cantidad de
texto, el volumen de tráfico no es alto, y una máquina probablemente puede manejar las
demandas de API de incluso la API de la más ocupada de las empresas.
 Fila de Twitter
Piense en una compañía como Twitter que recibe tweets y los escribe en una base de datos.
Literalmente hay miles de tweets llegando cada segundo y la base de datos posiblemente no
puede seguir el ritmo del número de escrituras necesarias durante los horarios pico de uso. Node
se convierte en una pieza clave de la solución a este problema. Como hemos visto, Node puede
manejar decenas de miles de tweets entrantes. Luego puede escribirlos rápida/fácilmente en un
mecanismo de cola en memoria (memcached, por ejemplo), desde donde otro proceso separado
puede escribirlos en la base de datos. El rol de Node en esto es reunir rápidamente el tweet y
pasar esta información hacia otro proceso responsable de escribirlo. Imagine otro diseño — un
servidor PHP normal que intente manejar escrituras en la base de datos misma — cada tweet
podría causar una pequeña demora mientras se escribe en la base de datos, dado que el llamado
de base de datos estaría bloqueando. Una máquina con este diseño sólo podría manejar 2.000
tweets entrantes por segundo, debido a la latencia de base de datos. A un millón de tweets por
segundo, usted estaría hablando de 500 servidores. Node, en cambio, maneja cada conexión y
no causa bloqueo, permitiéndole capturar tantos tweets como se le puedan arrojar. Una máquina
nodo capaz de manejar 50.000 tweets por segundo, y usted estaría hablando de sólo 20
servidores.
 Estadísticas de videojuegos
Si usted alguna vez jugó un juego como Call of Duty on-line, algunas cosas le habrán llamado la
atención inmediatamente cuando observó las estadísticas del juego, principalmente el hecho de
que deben estar rastreando toneladas de información sobre el juego para poder producir tal nivel
de estadísticas. Luego, multiplique esto por los millones de personas que lo juegan en cualquier
momento, y tendrá una idea de la inmensa cantidad de información que se genera con bastante
rapidez. Node es una buena solución para este escenario, porque puede capturar los datos que
están generando los juegos, hacer un mínimo de consolidación con ellos y luego ponerlos en una
fila para escribirlos en una base de datos. Parecería algo tonto dedicar todo un servidor a rastrear
cuántas balas disparan las personas en los juegos, lo cual podría ser el límite útil si usted utilizara
un servidor como Apache, pero parecería menos tonto si en lugar de ello usted pudiera dedicar un
solo servidor a rastrear casi todas las estadísticas de un juego, como usted puede llegar a hacerlo
con un servidor que ejecute Node.
Módulos Node
Aunque originalmente no era un tema planeado en el artículo, debido a la demanda popular, el
artículo se ha expandido para incluir una breve introducción a los Node Modules y al Node
Package Manager. Así como a lo que las personas se han acostumbrado al trabajar con Apache,
usted puede expandir la funcionalidad de Node instalando módulos. No obstante, los módulos que
usted puede utilizar con Node mejoran en gran medida el producto, tanto, que es poco probable
que haya alguien que utilice Node sin instalar por lo menos algunos módulos. Así de importantes
se han tornado los módulos, hasta el punto de convertirse en parte esencial del producto
completo.
En el aparte de Recursos, incluyo un enlace a la página de módulos, donde están listados y
disponibles todos los módulos posibles. Como una muestra rápida de las posibilidades, estos
incluyen un módulo para escribir páginas creadas dinámicamente (como PHP), un módulo para
facilitar el trabajo con MySQL, un módulo para ayudar con WebSockets, y un módulo para asistir
en el análisis de texto y de parámetros, entre docenas de módulos disponibles. No entraré en
detalles sobre los módulos, porque como mencioné, este sólo es un artículo de visión general que
le ayuda a entender si Node es algo que usted debería buscar más adelante, pero es posible, si
decide utilizarlo más adelante, que definitivamente también vaya a trabajar con los módulos
disponibles.
Generador Node de números aleatorios
1 // these modules need to be imported in order to use them.

2 // Node has several modules. They are like any #include

// or import statement in other languages

3
var http = require("http");
4
var url = require("url");
5
6
// The most important line in any Node file. This function
7
// does the actual process of creating the server. Technically,
8
// Node tells the underlying operating system that whenever a
9
// connection is made, this particular callback function should be
10
// executed. Since we're creating a web service with REST API,
11
// we want an HTTP server, which requires the http variable
12 // we created in the lines above.
13 // Finally, you can see that the callback method receives a 'request'
14 // and 'response' object automatically. This should be familiar
15 // to any PHP or Java programmer.
16 http.createServer(function(request, response) {

17
18 // The response needs to handle all the headers, and the return codes

19 // These types of things are handled automatically in server programs

20 // like Apache and Tomcat, but Node requires everything to be done yourself

21 response.writeHead(200, {"Content-Type": "text/plain"});

22
// Here is some unique-looking code. This is how Node retrives
23
// parameters passed in from client requests. The url module
24
// handles all these functions. The parse function
25
// deconstructs the URL, and places the query key-values in the
26
// query object. We can find the value for the "number" key
27
// by referencing it directly - the beauty of JavaScript.
28
var params = url.parse(request.url, true).query;
29
var input = params.number;
30
31
// These are the generic JavaScript methods that will create
32 // our random number that gets passed back to the caller
33 var numInput = new Number(input);
34 var numOutput = new Number(Math.random() * numInput).toFixed(0);
35
36 // Write the random number to response

37 response.write(numOutput);

38
39 // Node requires us to explicitly end this connection. This is because

40 // Node allows you to keep a connection open and pass data back and forth,

// though that advanced topic isn't discussed in this article.

41
response.end();
42
43
// When we create the server, we have to explicitly connect the HTTP server to
44
// a port. Standard HTTP port is 80, so we'll connect it to that one.
45
}).listen(80);
46
47
// Output a String to the console once the server starts up, letting us know everything
48
// starts up correctly
49
console.log("Random Number Generator Running...");

TECNOLOGIA REACT:
React (también llamada React.js o ReactJS) es una biblioteca Javascript de código abierto diseñada para
crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Es
mantenido por Facebook y la comunidad de software libre, han participado en el proyecto más de
mil desarrolladores diferentes. 1
React intenta ayudar a los desarrolladores a construir aplicaciones que usan datos que cambian todo el tiempo.
Su objetivo es ser sencillo, declarativo y fácil de combinar. React sólo maneja la interfaz de usuario en una
aplicación; React es la Vista en un contexto en el que se use el patrón MVC (Modelo-Vista-Controlador)
o MVVM (Modelo-vista-modelo de vista). También puede ser utilizado con las extensiones de React-based que
se encargan de las partes no-UI (que no forman parte de la interfaz de usuario) de una aplicación web.

Virtual DOM
React mantiene un virtual DOM propio, en lugar de confiar solamente en el DOM del navegador. Esto deja a la
biblioteca determinar qué partes del DOM han cambiado comparando contenidos entre la versión nueva y la
almacenada en el virtual DOM, y utilizando el resultado para determinar cómo actualizar eficientemente el DOM
del navegador.67 Propiedades (props) de react.

Las propiedades
Las propiedades (también conocidas como 'props') pueden definirse como los atributos de configuración para
dicho componente. Éstas son recibidas desde un nivel superior, normalmente al realizar la instancia del
componente y por definición son inmutables.

El Estado
El estado de un componente se define como una representación del mismo en un momento concreto, es decir,
una instantánea del propio componente. Existen dos tipos de componentes con y sin estado, denominados
statefull y stateless.
JSX
React utiliza una sintaxis parecida a HTML, llamada JSX. No es necesaria para utilizar React, sin embargo,
hace el código más legible, y escribirlo es una experiencia similar a HTML. 8

Ejemplo de un componente escrito con JSX

React NativE
React Native es un framework te permite construir aplicaciones móviles utilizando solamente JavaScript y
React. Utiliza el mismo diseño que React.js, permitiéndote usar elementos de interfaz de usuario móvil. No es
para construir una ‘aplicación móvil web’, una ‘aplicación de HTML5’ o una ‘aplicación híbrida’, sino una
aplicación móvil real que es indistinguible de otra aplicación que usa construida en un lenguaje nativo. React
Native utiliza los mismos bloques fundamentales de interfaz de usuario que las aplicaciones normales de iOS y
Android. 9
A pesar de que React.js y React Native usen la misma estructura de código, no sirven para lo mismo. React.js
es utilizado para hacer páginas web y trabaja con elementos del virtual DOM, mientras que por el otro lado
React Native utiliza elementos nativos de interfaz de usuario de Android y iOS para crear aplicaciones para
ambas plataformas.

Composición de componentes
Así como en programación funcional se pasan funciones como parámetros para resolver
problemas más complejos, creando lo que se conoce como composición funcional, en ReactJS
podemos aplicar este mismo patrón mediante la composición de componentes

Las aplicaciones se realizan con la composición de varios componentes. Estos componentes

encapsulan un comportamiento, una vista y un estado. Pueden ser muy complejos, pero es algo de
lo que no necesitamos preocuparnos cuando estamos desarrollando la aplicación, porque el
comportamiento queda dentro del componente y no necesitamos complicarnos por él una vez se
ha realizado.

Esto es algo sobre lo que ya hemos hablado. En resumen, al desarrollar crearemos componentes
para resolver pequeños problemas, que por ser pequeños son más fáciles de resolver y en
adelante son más fáciles de visualizar y comprender. Luego, unos componentes se apoyarán en
otros para resolver problemas mayores y al final la aplicación será un conjunto de componentes
que trabajan entre sí. Este modelo de trabajo tiene varias ventajas, como la facilidad de
mantenimiento, depuración, escalabilidad, etc.

Desarrollo Declarativo Vs Imperativo

En la experiencia de desarrollo con librerías más sencillas como jQuery, o el propio "Vanilla
Javascript" realizamos un estilo de programación imperativo. En ese estilo se realizan scripts que
paso por paso tienen que informar sobre qué acciones o cambios en el DOM se deben realizar.
Hay que ser muy concisos en esas acciones, especificando con detalle cada uno de los cambios
que se quieren realizar. La forma imperativa de declarar nos obliga a escribir mucho código,
porque cada pequeño cambio se debe definir en un script y cuando el cambio puede ser
provocado desde muchos sitios, cuando agregamos eventos, el código comienza a ser poco
mantenible.

Sin embargo, el estilo de React es más declarativo, en el que nosotros contamos con un estado de
la aplicación y sus componentes reaccionan ante el cambio de ese estado. Los componentes
tienen una funcionalidad dada y cuando cambia una de sus propiedades ellos producen un
cambio. En el código de nuestra aplicación tendremos ese componente, y en él se declarará de
donde vienen los datos que él necesita para realizar su comportamiento. Podremos usarlo tantas
veces como queramos declarando que lo queremos usar y declarando también los datos que él
necesita para funcionar.

Quizás ahora, si no tenemos experiencia con otras librerías o frameworks de enfoque declarativo la
idea pueda quedar algo confusa, pero lo iremos viendo mejor con los ejemplos.

Flujo de datos unidireccional

Ésta es otra de las cosas que facilita React, aunque no es exclusivo. En este modelo de
funcionamiento, los componentes de orden superior propagan datos a los componentes de orden
inferior. Los de orden inferior trabajarán con esos datos y cuando cambia su estado podrán
propagar eventos hacia los componentes de orden superior para actualizar sus estados.

Este flujo tiende a ser unidireccional, pero entre componentes hermanos muchas veces se hace
más cómodo que sea bidireccional y también se puede hacer dentro de React. Sin embargo, si
tratamos siempre de mantener el patrón de funcionamiento unidireccional, nos facilitará mucho el
mantenimiento de la aplicación y su depuración.

Performance gracias al DOM Virtual

El desempeño de React es muy alto, gracias a su funcionamiento. Nos referimos al desempeño a la
hora del renderizado de la aplicación. Esto se consigue por medio del DOM Virtual. No es que
React no opere con el DOM real del navegador, pero sus operaciones las realiza antes sobre el
DOM Virtual, que es mucho más rápido.

El DOM Virtual está cargado en memoria y gracias a la herramienta que diferenciación entre él y el
real, el DOM del navegador se actualiza. El resultado es que estas operaciones permiten
actualizaciones de hasta 60 frames por segundo, lo que producen aplicaciones muy fluidas, con
movimientos suavizados.

Isomorfismo
Es la capacidad de ejecutar el código tanto en el cliente como el servidor. También se conoce
como "Javascript Universal". Sirve principalmente para solucionar problemas de posicionamiento
tradicionales de las aplicaciones Javascript.

Como anteriormente ya hemos hablado sobre este punto, lo vamos a dejar por aquí.

Elementos y JSX
ReactJS no retorna HTML. El código embebido dentro de Javascript, parece HTML pero realmente
es JSX. Son como funciones Javascript, pero expresadas mediante una sintaxis propia de React
llamada JSX. Lo que produce son elementos en memoria y no elementos del DOM tradicional, con
lo cual las funciones no ocupan tiempo en producir pesados objetos del navegador sino
simplemente elementos de un DOM virtual. Todo esto, como hemos dicho, es mucho más rápido.

React DOM y la herramienta de diffing, se encargarán más tarde de convertir esos elementos
devueltos por JSX en DOM Real, sin que nosotros tengamos que intervenir.

Componentes con y sin estado

React permite crear componentes de diversas maneras, pero hay una diferencia entre
componentes con y sin estado.

Los componentes stateless son los componentes que no tienen estado, digamos que no guardan
en su memoria datos. Eso no quiere decir que no puedan recibir valores de propiedades, pero esas
propiedades siempre las llevarán a las vistas sin producir un estado dentro del componente. Estos
componentes sin estado se pueden escribir con una sencilla función que retorna el JSX que el
componente debe representar en la página.
Los componentes statefull son un poco más complejos, porque son capaces de guardar un estado
y mantienen lógica de negocio generalmente. Su principal diferencia es que se escriben en el
código de una manera más compleja, generalmente por medio de una clase ES6 (Javascript con
ECMAScript 2015), en la que podemos tener atributos y métodos para realizar todo tipo de
operaciones. Los componentes statefull, con estado, necesitan tener un método render() que se
encarga de devolver el JSX que usar para representarlo en la página.

Podemos decir que los componentes con estado son componentes "listos" y los que no tienen
estado son "tontos". Los statefull se usan para resolver problemas mayores, con lógica de negocio,
mientras que los stateless se usan más para interfaces de usuario.

Ciclo de vida de los componentes

React implementa un ciclo de vida para los componentes. Son métodos que se ejecutan cuando
pasan cosas comunes con el componente, que nos permiten suscribir acciones cuando se produce
una inicialización, se recibe la devolución de una promesa, etc.

TECNOLOGIA VUE.JS:
Es un Framework progresivo, es decir, es un Framework que sirve para consumir interfaz del usuario.

Fue creado por Evan You que trabajaba en Google realizando prototipos y en el core del Framework de
Meteor, hasta que pensó en otra forma de hacer una opción más fácil que abarcara las necesidades a la
hora de hacer prototipos. Así surgió Vue en el 2014, desde entonces ha tenido una gran evolución y sigue
creciendo en su versión 2 cada vez más y más.

Características:

1. Accesible.
2. Versátil: Su núcleo es bastante pequeño y se escala a través de plugins, con lo cual escucharás mucho
que Vue es una librería muy parecida a React, una librería que cumple un propósito.
3. Escalable por el mismo tema de la versatilidad.
4. Reactivo.
5. Optimizado: Su core ocupa 74KB, como ves es bastante liviano.
6. Comunidad: Va creciendo a un ritmo importante con más 66500 estrellas en GitHub y 130 personas
contribuyendo al core cada día.
7. Licencia MIT: se publicó bajo el amparo de esta licencia.

Vue.JS tiene un gran ecosistema mantenido por los propios desarrolladores del core y la comunidad que
existe detrás de Vue.

Existen plugins muy importantes como:

1. VUE-ROUTER: Para la gestión de rutas.

2. Conectar a servicios externos: Como vue-axios o vuefire para conectarnos a una base de datos.
3. TEST: Se pueden hacer test unitarios y funcionales.
4. VUEX: Es una implementación de la arquitectura de aplicación FLUX basada en la
arquitectura ELM y además creado un poco en REDUX, es una implementación simple pero muy
 potente, fácil de utilizar y de entender, el cual nos permite gestionar el flujo de datos en nuestra
aplicación

Introducción a VueJS
Hoy quiero introducir un framework al cual le vi perspectivas desde su surgimiento por la sencillez en la que está enfocado.
Por alguna razón que en estos momentos me pregunto, deje de seguir sus nuevas versiones y las mejoras que estas traían,
enfocado en otras herramientas como Dojo Toolkit, la cual sigo recomendando a pesar de no ser tan popular. Hace poco
tiempo volví a ver a VueJS en su segunda versión y las potencialidades que tiene me llamaron bastante la atención sobre
todo porque mantiene el mismo enfoque de sencillez que le vi en sus primeras versiones. En este artículo veremos alguna
de las características que posee.

VueJS se autodenomina como un framework progresivo, nos brinda de posibilidad de indicar qué partes del framework
queremos incluir ya que está modularizado en diferentes librerías separadas que permiten ir añadiendo funcionalidad en el
momento que las vayamos necesitando.

El core principal de VueJS está formado por una librería encargada de renderizar vistas en el navegador. Su forma de
organizar el código es por medio de pequeños componentes que contienen todo el HTML, CSS y JavaScript necesario para
funcionar como pieza independiente. Estas piezas se van componiendo en un árbol jerárquico de componentes hasta formar
nuestra aplicación. Usar esta librería es tan fácil como importar el script en nuestra página HTML.

Si lo único que necesitamos como desarrolladores es una mejor forma de organizar y renderizar nuestros pequeños
componentes visuales, nos quedamos ahí y no incluiríamos nada más. En el momento que nuestra aplicación empezase a
crecer, contamos con librerías para gestionar las rutas de nuestra aplicación como vue-router o con librerías para gestionar
el estado global de la aplicación como pueda ser vuex. Si nuestra aplicación tuviese que tener una gran optimización o tener
buen SEO, podemos incluir y trabajar con vue-server-rendering.

Y así nos pasaría con muchas más funcionalidades. La cantidad de librerías con las que se cuentan (ya sean creadas por los
desarrolladores oficiales o por la comunidad) es tan grande y cubre tal espectro de funcionalidades, que será difícil que nos
encontremos desamparados y sin esa utilidad que nos es indispensable, y esa es una ventaja muy grande, el tener una amplia
comunidad sin dudas ayuda muchísimo, y a mi criterio, esta comunidad seguirá en aumento.
En VueJS, los componentes gestionan un modelo de datos interno. Estos componentes están diseñado bajo el patrón
MVVM. Esto quiere decir que el desarrollador no tiene que preocuparse tanto por cómo o cuando renderiza un modelo
en pantalla y sí más en cómo tiene que ser la lógica que gestiona ese modelo. El renderizado de HTML es delegado a
la librería. Nosotros simplemente jugamos con datos, métodos y plantillas HTML donde indicamos cuando se tiene que
pintar cada parte del modelo.

VueJS sabe comunicarse muy bien por medio de eventos asíncronos. Un componente hijo se puede comunicar con su
componente padre por medio de eventos. Dos partes del sistema pueden comunicarse por medio de eventos. Los
propios modelos de un componente son capaces de enviar eventos para indicar cuándo renderizarse. El sistema de
componentes se convierte en un organismo vivo que reacciona muy bien al cambio y realiza acciones programadas
por el desarrollador. Esto se debe a que el módelo de datos del componente es envuelto por getters y setters especiales
encargados de gestionar estas reacciones.

Para proyectos no tan básicos, se recomienda usar el CLI que han creado sobre NodeJS. Esta herramienta permite
empezar un proyecto con un boilerplate (o plantilla base) configurado a nuestro gusto de una manera fácil y sencilla.
Simplemente descargando desde npm la herramienta vue-cli, podremos crear una estructura inicial con la que trabajar
que cumple con la guía de estilo pactada por la comunidad.

Otra de las características que posee VueJS es que los componentes guardan todo lo necesario en ficheros con
extensión .vue. Estos ficheros contienen todo el HTML, el CSS y el JavaScript de un componente. Gracias a las
etiquetas template, script y style, se tienen los conceptos separados, pero juntos, de esta forma es más fácil reutilizar
ficheros en más de un proyecto. Todo el contenido queda más claro. Si el desarrollador está trabajando en un
componente en particular, tiene todo a la vista.
El ciclo de vida de VueJS contiene métodos con los que se puede manejar el comportamiento del mismo dependiendo
del momento. Puedes acceder a él en el momento de su creación, de su actualización, destrucción, etc. En estos
momentos es posible acceder para añadir o eliminar funcionalidades

1. Un framework para aprender y usar de

manera progresiva
VueJS se autodenomina como un framework progresivo. Cuando encaramos
un desarrollo con VueJS, podemos indicar qué partes del framework queremos
incluir. VueJS está modularizado en diferentes librerías separadas que permiten ir
añadiendo funcionalidad en el momento que las vayamos necesitando.

La modularización en librerías de un framework no es algo nuevo en el

desarrollo front. Tanto ReactJS como Angular cuentan con una organización
parecida de su código base. Lo que diferencia a VueJS de otras alternativas es lo
bien desacopladas que se encuentran estas partes, lo fácil que es extender la
funcionalidad core y lo bien que trabajan todas sus partes una vez que se decide
incluir más módulos.

Funcionalidades intuitivas, modernas y fáciles

de usar
VueJS no ha reinventado la rueda. Nuestro amigo verde fue creado como
proyecto personal por Evan You, antiguo desarrollador de Google, en un intento
de simplificar el funcionamiento de AngularJS. El framework empezó a ser tan
fácil y simple de usar que, una vez que su creador decidió subirlo a los
repositorios de Github, la comunidad fue usándolo en cada vez más proyectos.

1. El dato como centro de todo: En VueJS, los componentes gestionan un

modelo de datos interno. Estos componentes están diseñado bajo el patrón
MVVM. Esto quiere decir que el desarrollador no tiene que preocuparse tanto
por cómo o cuando renderiza un modelo en pantalla y sí más en cómo tiene
que ser la lógica que gestiona ese modelo. El renderizado de HTML es
delegado a la librería. Nosotros simplemente jugamos con datos, métodos y
plantillas HTML donde indicamos cuando se tiene que pintar cada parte del
modelo.

2. El sistema de componentes es reactivo: VueJS sabe comunicarse muy bien

por medio de eventos asíncronos. Un componente hijo se puede comunicar
con su componente padre por medio de eventos. Dos partes del sistema
pueden comunicarse por medio de eventos. Los propios modelos de un
componente son capaces de enviar eventos para indicar cuándo renderizarse.
El sistema de componentes se convierte en un organismo vivo que reacciona
muy bien al cambio y realiza acciones programadas por el desarrollador. Esto
se debe a que el módelo de datos del componente es envuelto por getters y
setters especiales encargados de gestionar estas reacciones.
3. Sin fricción con otras librerías o recursos: Cuando me enfrenté a ReactJS
sufrí un poco con el concepto de que todo era JS. Tener JSX no me ayudó para
su aprendizaje. Angular me medio obligó a incluir TypeScript para escribir
componentes. Me gusta TypeScript, lo que no me gusta es que me impongan
herramientas. VueJS es el más concienciado con esto: Usa lo que quieras, usa
la herramienta con la que te encuentres cómodo, céntrate en escribir HTML,
CSS y JavaScript. Si quieres añadir JSX o TypeScript hazlo. Si no lo quieres
incluir ahora, hazlo más tarde. Esto hace que desarrollar en VueJS sea más
intuitivo. Es casi como trabajar con JavaScript nativo. Particularmente, me
parece un paso muy natural si vienes de trabajar con jQuery.

4. Todo está en el sitio que tiene que estar. Cuando empecé con VueJS, me di
cuenta que miraba la documentación menos que en la de otras herramientas.
Asimilaba la sintaxis antes. Incluso la propia intuición me permitía usar la
librería sin tener que mirar la documentación previamente. Esto se debía a
que el naming de la API de VueJS es bastante intuitiva. Con saber lo que
significaprops, data y methods y qué puedo incluir en estas partes, podía
empezar a hacer mucho, con muy pocos conocimientos. De hecho, si no os
explico de qué trata cada una de estas partes de la API, lo más seguro es que
supieseis de qué estoy hablando. Es una de las virtudes de VueJS. Ser fácil,
intuitivo y poco recargado. Cada parte está en el lugar que debería estar. Esto
es algo dificil de entender hasta que no se está desarrollando algo en VueJS,
pero creedme, que si le dáis una oportunidad, esto lo notareis.
Todo el código de un componente se
encuentra en un único fichero
Vale, quizá tampoco sea nada novedoso. Habíamos comentado que en ReactJS
todo se transformaba en JavaScript, por tanto, todo el código de un componente,
ya sea HTML (JSX en este caso), CSS y JavaScript se va a encontrar en un único
fichero con extensión .jsx. Y quizá estos sistemas no lo veas ni como una ventaja
¿Qué pasa con la separación de conceptos? ¿Ya no debemos separar el
contenido, de su estilo y su lógica de negocio?

Bueno, pues sí, en VueJS, los componentes también guardan todo lo

necesario en ficheros con extensión .vue. Estos ficheros contienen todo el
HTML, el CSS y el JavaScript de un componente. Entonces ¿en qué se diferencia
de ReactJS? Se diferencia en que en VueJS, los conceptos están juntos en un
fichero, pero no revueltos.
<template>
<form class="search-box" @submit.prevent="search">
<input type="text" placeholder="Ej. Cinema Paradiso" v-model="query" />
<button>Buscar</button>
<span>{{ queryLength }}</span>
</form>
</template>
<script>
export default {
name: 'search-box',
props: {
value: { type: String, default: '' }
},
data() {
return {
query: this.value
}
},
computed: {
queryLength: function () {
return this.query.length;
}
},
methods: {
search() {
this.$emit('search', this.query);
}
}
}
</script>

<style lang="scss" scoped>

@import '../assets/scss/_colors';

$color-light-darken: darken($color-light, 15%);

.search-box {
display: flex;
height: 3rem;

button,
input {
&:focus {
outline: none;
}
}

input {
width: 100%;
padding: 0 0.5rem;
border: 1px solid $color-basic-2;
border-right: 1px solid $color-light;
}

button {
padding: 0 2rem;
background: $color-light-darken;
color: $color-basic;
font-weight: bold;
border: 1px solid $color-light-darken;

&:hover {
cursor: pointer;
background: $color-light;
border: 1px solid $color-light;
}
}

span {
display: block;
font-size: 1.5rem;
padding: 0.5rem 1rem;
}
}
</style>
En esta ocasión, observamos un componente que representa un típico buscador.
Es el componente SearchBox.vue. Este componente se encarga de renderizar un
formulario con un elemento <input /> y un elemento <button />.