crea tus aplicaciones web con spa, angular2, web api y visual studio code
TRANSCRIPT
![Page 1: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/1.jpg)
#dotNetSpain2016
.NET Conference 2016Spain
![Page 2: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/2.jpg)
#dotNetSpain2016
Francesc JaumotMVP ASP.NET, Manager at [email protected]@fjaumot
Jose CousiñoSoftware Architect at [email protected]
Crea tus aplicaciones web con SPA, Angular2, Web Api y Visual Studio Code
![Page 3: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/3.jpg)
Patrocinadores
Colaboradores
#dotNetSpain2016
![Page 4: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/4.jpg)
#dotNetSpain2016
Single Page Applications¿Que es exactamente una SPA?Porqué las SPAs son…. Increíbles! aunque tienen sus retos
ASP.NET Core 1.0 y la web modernaVisual Studio CodeEl stack del cliente
Angular 2 + JS/TypeScript
El stack del servidorWeb Api
¿Qué hemos hecho?
Agenda
![Page 5: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/5.jpg)
#dotNetSpain2016
Emprendedor y entusiasta de las tecnologías Microsoft con amplio conocimiento en diferentes áreas de desarrollo con tecnologías .NET. Actualmente es fundador de diferentes compañías tecnologías y Manager en Clibb, a Birchman Company. Desde el año paso es MVP en ASP.NET
MCT desde 2004, profesor y Team Lead en Clibb, a Birchman Company, apasionado de las tecnologías Microsoft con amplio conocimiento en el área de .NET, sobretodo, en desarrollo web.
Jose Cousiño
Francesc Jaumot
![Page 6: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/6.jpg)
#dotNetSpain2016
Single Page Application
![Page 7: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/7.jpg)
#dotNetSpain2016
Son aplicaciones web que cargan una única página de HTML y la actualizan de forma dinámica en función de las interacciones del usuario con esa página.
¿Que es exactamente una SPA?
![Page 8: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/8.jpg)
#dotNetSpain2016
Son fluidas.
Acercan la experiencia de usuario de las aplicaciones de escritorio en un entorno web.
Usan tecnologías modernas y flexibles.
Los frameworks de desarrollo siguen patrones similares (MV*).
Están preparadas para el desarrollo empresarial.
Porqué las SPAs son… increíbles!
![Page 9: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/9.jpg)
#dotNetSpain2016
JavaScript es condición obligatoria.
Navega por el mar de los Frameworks de JS.
Demasiados años trabajando con código manejado en el servidor (C#/VB.NET)
Debemos cambiar la forma de pensar.
…aunque tiene sus retos
![Page 10: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/10.jpg)
#dotNetSpain2016
ASP.NET Core 1.0 y la web moderna
![Page 11: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/11.jpg)
OS X
.NET Core para cualquier SO
![Page 12: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/12.jpg)
#dotNetSpain2016
ASP.NET Core 1.0 y la web modernaUn framework nuevo, open source y cross-platform para construir aplicaciones web modernas usando .NET y pensando en la nube.
![Page 13: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/13.jpg)
#dotNetSpain2016
ASP.NET Core 1.0 y la web moderna
![Page 14: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/14.jpg)
#dotNetSpain2016
ASP.NET Core 1.0 y la web moderna.NET Core
![Page 15: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/15.jpg)
#dotNetSpain2016
ASP.NET Core 1.0 y la web moderna.NET Execution Enviroment (DNX)
DNX – Runtime EnviromentEntorno de ejecución dónde se ejecuta nuestra aplicación (compilador, herramientas del SDK y hosts nativos del CLR)
DNVM – Version ManagerHerramienta para actualizar e instalar las diferentes versiones de DNX.
DNU – Package ManagerHerramienta para restaurar e instalar paquetes de NuGet necesarios para la ejecución de las aplicaciones.
![Page 16: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/16.jpg)
#dotNetSpain2016
Modular
Portable a la nube rápidamente
Open Source
ASP.NET Core 1.0 y la web moderna
Rápido
Cross-Platform
Escoge tu editor y tus herramientas
![Page 17: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/17.jpg)
#dotNetSpain2016
ASP.NET Core 1.0 y la web modernaDesarrollo simplificado
Desarrollar más rápidamente al poder añadir funcionalidades debido a su orientación a packages.
El mismo código se ejecuta en entornos de desarrollo y en entornos productivos.
Podemos seleccionar que versiones queremos actualizar de los paquetes instalados.
Podemos modificar nuestro código y tan solo debemos refrescar el navegador.
Soporte completo para HTML5, CSS3 y JavaScript.
![Page 18: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/18.jpg)
#dotNetSpain2016
ASP.NET Core 1.0 y la web modernaRápido
Se ejecuta entre 2 y 3 veces más rápido.
Consume menos de memoria y tiene menos densidad en el tráfico HTTP (> 90%).
Completamente modular, nosotros escogemos que necesitamos en todo momento.
![Page 19: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/19.jpg)
#dotNetSpain2016
ASP.NET Core 1.0 y la web modernaCloud
Transición fluida de una instalación on-premise hacía la nube. Sin realizar ningún cambio en el código.
Listo y optimizado para la nube con una consistencia de configuración entre los entornos. La gestión de las sesiones y la caché son los mismos para ambos entornos.
Incorporación de trazas sin tener que volver a compilar con la opción de debugar directamente en la nube.
![Page 20: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/20.jpg)
#dotNetSpain2016
Visual Studio Code
![Page 21: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/21.jpg)
#dotNetSpain2016
Visual Studio Code
Optimizado para la edición de código
IntelliSense, debugging e integración con GIT
OS X, Linux, Windows
![Page 22: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/22.jpg)
#dotNetSpain2016
Visual Studio CodeCientos de extensiones
TSlint AdditionalThemes
React JasmineMDToolsGo PowerShell
ChefESLintWakatimeF#Wallaby JS yo searchdocs
![Page 23: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/23.jpg)
#dotNetSpain2016
Visual Studio CodeAplicaciones ASP.NET y node.js usando yeoman
ASP.NET Core
![Page 24: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/24.jpg)
#dotNetSpain2016
DemoNuestra primera solución
![Page 25: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/25.jpg)
#dotNetSpain2016
El stack del cliente
![Page 26: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/26.jpg)
#dotNetSpain2016
El stack del clienteAngular 2.0 for TypeScript
Framework MVC completo del lado del cliente ideal para crear aplicaciones SPA.
Se complementa con el servidor.
Comenzó en Google y ahora es OSS con versiones para TS, Dart o JS.
Estilo declarativo para la manipulación del DOM.
Estilo imperativo para expresar la lógica de programación.
Fácil de utilizar y de aprender.
![Page 27: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/27.jpg)
#dotNetSpain2016
El stack del clienteAngular 2.0 for TypeScript
Data bindingPipesTemplatesControllersModelsInyección de dependencias
![Page 28: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/28.jpg)
#dotNetSpain2016
El stack del clienteTypeScript
Fuertemente tipado
Intellisense
Paradigmas de desarrollo familiares
Aprovechar nuestras clases escritas en C#
TypeLite, generación de definiciones desde las clases de .NET
![Page 29: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/29.jpg)
#dotNetSpain2016
DemoNuestro cliente
![Page 30: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/30.jpg)
#dotNetSpain2016
El stack del servidor
![Page 31: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/31.jpg)
#dotNetSpain2016
El stack del servidorASP.NET Web Api
Servicios REST
Desarrollada con C# o VB.NET en el servidor
El servidor es el encargado en todo momento de proporcionar datos al cliente
Comparte los mismos procesos de negocio a múltiples consumidores
Desarrollo friendly para ASP.NET MVC
ASP.NET Core
![Page 32: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/32.jpg)
#dotNetSpain2016
DemoNuestro servidor
![Page 33: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/33.jpg)
#dotNetSpain2016
Y ahora, todo a la vez…
….y para todos los SO!
ASP.NET Core
![Page 34: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/34.jpg)
#dotNetSpain2016
¿Qué hemos hecho?
![Page 35: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/35.jpg)
#dotNetSpain2016
¿Qué hemos hecho?
¡Un aplicación web veloz, eficiente, preparada para un entorno cloud escalable y distribuido para Windows, Linux y Mac usando cómo nexo de unión .NET Core!
![Page 36: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/36.jpg)
#dotNetSpain2016
Referencias
![Page 37: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/37.jpg)
#dotNetSpain2016
Referenciashttp://asp.net http://docs.asp.nethttp://code.visualstudio.comhttp://angular.io http://nodejs.org http://yeoman.io
![Page 38: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/38.jpg)
Q&A
#dotNetSpain2016
http://aka.ms/DOTNETT1S5
![Page 39: Crea tus aplicaciones web con spa, angular2, web api y visual studio code](https://reader033.vdocuments.mx/reader033/viewer/2022042722/58a482721a28ab58738b4ee9/html5/thumbnails/39.jpg)
No olvides realizar la encuesta¡Gracias!
#dotNetSpain2016
http://aka.ms/DOTNETT1S5
Francesc JaumotMVP ASP.NET, Manager at [email protected]@fjaumot
Jose CousiñoSoftware Architect at [email protected]