El ecosistema de Javascript moderno
www.jesusrodriguezp.com
Evolucion de la web.

Hasta hace algún tiempo JavaScript era el lenguaje programación del lado del cliente (Navegador), mas extendido en el mundo. Es un dialecto del estándar ECMAScript , el cual ha venido teniendo su evolución al pasar de los años. Hoy en día pueden construirse aplicaciones JavaScript tanto del lado del cliente como del lado del servidor.


Cronología de la evolución de JavaScript.

www.jesusrodriguezp.com
Evolucion de la web.


¡El standard evoluciona EcmaScript 6!

Después de 6 años sin recibir actualizaciones finalmente EcmaScript ha hecho innumerables mejoras, para adaptar el estandar mas grande soportado por todos los navegadores a las necesidades actuales de las aplicaciones mas modernas.


  • Función Arrow.
  • Clases (Herencia, polimorfismo,etc..)
  • Mejoras en el This.
  • let (similar a var pero privado para ese ámbito) y const (constantes que no se pueden alterar en la ejecución).
  • Template Strings (se podra concatenar cadenas de una forma mas comoda)
  • Valores por defecto en declaracion de funciones
www.jesusrodriguezp.com
Documentacion ES6
www.jesusrodriguezp.com
Evolucion de la web.

Entendamos un poco como funciona el Internet para poder comprender la evolución y utilidad de este lenguaje.


Modelo clásico de comunicación cliente-servidor:

Era necesario navegar entre paginas y cargar la pagina entera para poder recuperar nueva información del servidor.

www.jesusrodriguezp.com
Evolucion de la web.

La necesidad de aplicaciones web dinámicas que cargaran contenido sin necesidad de recargar la pagina o hacer navegar al usuario, hizo que Jesse James Garrett planteara un nuevo tipo de arquitectura que permitiera la comunicación asíncrona entre el navegador del usuario y un servidor, solo solicitando la información requerida y colocándola en la sección del a pagina deseada, a esto lo llamo AJAX.


Dando paso a las actualmente conocidas SPA (Single Page Application)

www.jesusrodriguezp.com
Evolucion de la web.

La necesidad de aplicaciones web dinámicas que cargaran contenido sin necesidad de recargar la pagina o hacer navegar al usuario, hizo que Jesse James Garrett planteara un nuevo tipo de arquitectura que permitiera la comunicación asíncrona entre el navegador del usuario y un servidor, solo solicitando la información requerida y colocándola en la sección del a pagina deseada, a esto lo llamo AJAX.


Dando paso a las actualmente conocidas SPA (Single Page Application)

                            $(function(){      
                                $.ajax({
                                    url: 'url.php',
                                    type: "POST",
                                    data: 'parametro=valor',
                                    success: function(data)
                                    {
                                        //alertar la respuesta 
                                        //del script remoto
                                        alert(data);
                                        //codigo aqui
                                    }   
                                });
                            });
                        
www.jesusrodriguezp.com
Evolucion de la web.

www.jesusrodriguezp.com
WebSockets

Es una tecnología que proporciona un canal de comunicación bidireccional y full-duplex sobre un único socket TCP. Está diseñada para ser implementada en navegadores y servidores web, pero puede utilizarse por cualquier aplicación cliente/servidor. La API de WebSocket está siendo normalizada por el W3C, mientras que el protocolo WebSocket ya fue normalizado por la IETF.

www.jesusrodriguezp.com
WebSockets

Para hacer uso de websockets han surgido una cantidad grande de alternativas lo mas común es NodeJS y SocketIO aunque tambien hay implementaciones en PHP.


Documentación

http://socket.io/
www.jesusrodriguezp.com
Universo JavaScript


www.jesusrodriguezp.com
Node JS


Hasta ahora habíamos hablado de JavaScript solo del lado del cliente, donde era usual verlo, sin embargo, en el 2009 aparece Node JS, creado por Ryan Dahl , un entorno en tiempo de ejecución multiplataforma, de código abierto basado en el lenguaje de programación ECMAScript, que a su vez esta basado en el motor V8 de Google, usado por Google Chrome y Android, desarrollado en C++ y es capaz de ejecutarse de forma individual (standalone).


Documentación:

https://nodejs.org/es/docs/

www.jesusrodriguezp.com
Node JS


Para instalarlo:


En Windows descargar el .exe:

https://nodejs.org/es/download/

En Ubuntu:

https://nodejs.org/es/download/package-manager/

Desde una terminal :


                            curl -sL https://deb.nodesource.com/setup_6.x |
                            sudo -E bash -sudo apt-get install -y nodejs
                        

Para saber la versión de node:


                            node -v
                        

www.jesusrodriguezp.com
NPM


Aunque su desarrollador en su ficha de github, dice sus siglas significan “NPM is not an acronym” en la primera linea del README.md puede apreciarse la frase The Node Package Manager, por lo que podemos definirlo por eso: el gestor de paquetes de Node, esta potente herramienta nos sirve para descargar de forma ordenada código alojado en el universo Node, y dejar rastro en nuestra aplicación de esa inclusión de código como una “Dependencia”.


Para añadir una dependencia a nuestra aplicación:

                        npm install [<@scope>/]
                        #ejemplo
                        npm install -g @angular/cli
                        

Eliminar una dependencia de nuestra aplicación:


                        npm uninstall [<@scope>/][@]
                        

Saber version instalada:


                        npm -v
                        

www.jesusrodriguezp.com
NPM


NPM usualmente viene instalado junto con el paquete de NODE , por lo que no hace falta hacer mas nada para empezarlo a usar en lo que realizamos la instalación de Node.


Documentación:

https://docs.npmjs.com/

www.jesusrodriguezp.com
Express


Es un complemento de NodeJS que nos permite levantar un servicio web dentro de otras funcionalidades interesantes usando Node, con el objetivo de construir nuestras aplicaciones web.


http://expressjs.com/es/
                        npm install express --save
                        

www.jesusrodriguezp.com
Frameworks de Javascript

www.jesusrodriguezp.com
Angular


Es un Frameworks basado en la patrón MVVM (Model View View-Model) El cual es un sucesor del bien conocido MVC (Model View Controler) , quien comenzó en su versión 1 (actualmente 1.5) la cual fue dejada a un lado para lanzar Angular 2 (Actualmente 4) con una nueva arquitectura totalmente distinta mucho mas cómoda para trabajar.

Para quienes deseen aprender AngularJS 1.5 :


https://angularjs.org/

Y su sucesor Angular 4:


https://angular.io/

Diagrama del MVC


Diagrama del MVVM


www.jesusrodriguezp.com
Funcionalidades y Ventajas Angular

Funcionalidades principales de Angular:

  • Es orientado a objetos.
  • Usa el patrón MVVM.
  • Esta basado en componentes .
  • Es modular.
  • Sistema interno de rutas..
  • Es un framework respaldado por google.
  • Servicios.

Ventajas:

  • Permite una mejor organizacion del codigo.
  • Nos facilita el trabajo.
  • Aumenta la productividad.
  • Disminuye la cantidad de errores.
  • Hacemos software de calidad.
  • Es un framework respaldado por google.
  • Posee una altísima demanda.

www.jesusrodriguezp.com
Instalación de Angular

Instalar Angular 4 puede ser algo complejo por lo que se recomienda descargar una aplicación base (quickstart) que solo contiene un “Hola Mundo” desde su web:


O hacer un Clone usando github y npm para bajar las dependencias:


https://angular.io/docs/ts/latest/guide/setup.html


www.jesusrodriguezp.com
Instalación con Angular CLI

La forma mas productiva haciendo uso de una herramienta muy potente y productiva que fue desarrollada mucho despues y lleva por nombre Angular CLI(Command Line Interface)


Teniendo ya instalado el NPM se procede a ejecutar un comando global para que quede instalado para todo el sistema operativo:


                    npm install -g @angular/cli
                    

De esta manera usarla cuando se necesite:

Para crear un proyecto basta con hacer desde la consola ubicado en la carpeta donde deseamos alojar nuestro proyecto:


                    ng new PROJECT-NAME
                    

Esto creara una carpeta con el nombre que hallamos puesto al proyecto , con todo lo necesario para correr Angular y su respectivo “Hola Mundo" para probar que el entorno esta preparado Luego hay que adentrarse en ese directorio con un CD y finalmente lanzar ng serve para levantar el servicio


                    cd PROJECT-NAME
                    ng serve
                    

Documentación:


https://cli.angular.io/


www.jesusrodriguezp.com
MEAN Stack

www.jesusrodriguezp.com
MEAN Stack

www.jesusrodriguezp.com
MongoDB

MongoDB nace en octubre de 2007 desarrollado por la compañía de software 10gen. (de la palabra en inglés “humongous” que significa enorme) es un sistema de base de datos NoSQL orientado a documentos, desarrollado bajo el concepto de código abierto.


MongoDB guarda estructuras de datos en documentos similares a JSON con un esquema dinámico (MongoDB utiliza una especificación llamada BSON)


Para descargarlo en Windows/MAC:

https://www.mongodb.com/download-center#community

Para descargarlo o Ubuntu:

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/
www.jesusrodriguezp.com
JSON(JavaScript Object Notation):
                    {
                        "menu": {
                            "id": "file",
                            "value": "File",
                            "popup": {
                                "menuitem": [
                                    {
                                        "value": "New"
                                    },
                                    {
                                        "value": "Open"
                                    },
                                    {
                                        "value": "Close"
                                    }
                                ]
                            }
                        }
                    }
                    
www.jesusrodriguezp.com
MongoDB vs SQL
www.jesusrodriguezp.com
Mongoose:

Mongoose es un ORM(Object-Relational mapping)* para MongoDB, escrito en node.js. Que nos permite trabajar con mayor facilidad con la base de datos Mongo.

*ORM = es una técnica de programación para convertir datos entre el sistema de tipos utilizado en un lenguaje de programación orientado a objetos y la utilización de una base de datos relacional como motor de persistencia


Para instalarlo:

                    npm install mongoose
                    

Para incluirlo en nuestro proyecto:

                    var mongoose = require('mongoose'); 
                    mongoose.connect('mongodb://localhost/test');
                    

Documentación:

http://mongoosejs.com/docs/
www.jesusrodriguezp.com
Demostración del stack MEAN:

Para acceder a esta diapositiva:

http://jesusrodriguezp.com/presentacionCW/

gitHub: @jrodriguezwebb


Repositorio con codigo DEMO:

https://github.com/jrodriguezwebb/congresoWebMEAN
www.jesusrodriguezp.com
Agradecimientos

www.jesusrodriguezp.com