39
#dotNetSpain2016 .NET Conference 2016 Spain

Crea tus aplicaciones web con spa, angular2, web api y visual studio code

Embed Size (px)

Citation preview

Page 1: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#dotNetSpain2016

.NET Conference 2016Spain

Page 2: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#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

Patrocinadores

Colaboradores

#dotNetSpain2016

Page 4: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#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

#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

#dotNetSpain2016

Single Page Application

Page 7: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#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

#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

#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

#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

OS X

.NET Core para cualquier SO

Page 12: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#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

#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

#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

#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

#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

#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

#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

#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

#dotNetSpain2016

Visual Studio Code

Page 21: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#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

#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

#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

#dotNetSpain2016

DemoNuestra primera solución

Page 25: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#dotNetSpain2016

El stack del cliente

Page 26: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#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

#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

#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

#dotNetSpain2016

DemoNuestro cliente

Page 30: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#dotNetSpain2016

El stack del servidor

Page 31: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#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

#dotNetSpain2016

DemoNuestro servidor

Page 33: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#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

#dotNetSpain2016

¿Qué hemos hecho?

Page 35: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#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

#dotNetSpain2016

Referencias

Page 37: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

#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

Q&A

#dotNetSpain2016

http://aka.ms/DOTNETT1S5

Page 39: Crea tus aplicaciones web con spa, angular2, web api y visual studio code

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]