SlideShare una empresa de Scribd logo
#dotNetSpain2016
.NET Conference 2016
Spain
#dotNetSpain2016
Francesc Jaumot
MVP ASP.NET, Manager at Clibb
fjaumot@clibb.es
@fjaumot
Jose Cousiño
Software Architect at Birchman
Josemaria.cousino@birchmangroup.com
Crea tus aplicaciones web con
SPA, Angular2, Web Api y
Visual Studio Code
Patrocinadores
Colaboradores
#dotNetSpain2016
#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 moderna
Visual Studio Code
El stack del cliente
Angular 2 + JS/TypeScript
El stack del servidor
Web Api
¿Qué hemos hecho?
Agenda
#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.
#dotNetSpain2016
Single Page Application
#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.
#dotNetSpain2016
increíbles!
#dotNetSpain2016
#dotNetSpain2016
ASP.NET Core 1.0 y la web moderna
OS X
#dotNetSpain2016
Un framework nuevo, open source y cross-platform
para construir aplicaciones web modernas usando
.NET y pensando en la nube.
#dotNetSpain2016
#dotNetSpain2016
.NET Core
#dotNetSpain2016
.NET Execution Enviroment (DNX)
#dotNetSpain2016
#dotNetSpain2016
Desarrollo simplificado
#dotNetSpain2016
Rápido
#dotNetSpain2016
Cloud
#dotNetSpain2016
Visual Studio Code
#dotNetSpain2016
#dotNetSpain2016
Cientos de extensiones
#dotNetSpain2016
Aplicaciones ASP.NET y node.js usando yeoman
ASP.NET Core
#dotNetSpain2016
Demo
Nuestra primera solución
#dotNetSpain2016
El stack del cliente
#dotNetSpain2016
Angular 2.0 for TypeScript
#dotNetSpain2016
Angular 2.0 for TypeScript
#dotNetSpain2016
TypeScript
#dotNetSpain2016
Demo
Nuestro cliente
#dotNetSpain2016
El stack del servidor
#dotNetSpain2016
ASP.NET Web Api
ASP.NET Core
#dotNetSpain2016
Demo
Nuestro servidor
#dotNetSpain2016
Y ahora, todo a la vez…
….y para todos los SO!
ASP.NET Core
#dotNetSpain2016
¿Qué hemos hecho?
#dotNetSpain2016
¡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!
#dotNetSpain2016
Referencias
#dotNetSpain2016
http://asp.net
http://docs.asp.net
http://code.visualstudio.com
http://angular.io
http://nodejs.org
http://yeoman.io
Q&A
#dotNetSpain2016
http://aka.ms/DOTNETT1S5
No olvides realizar la encuesta
¡Gracias!
#dotNetSpain2016
http://aka.ms/DOTNETT1S5
Francesc Jaumot
MVP ASP.NET, Manager at Clibb
fjaumot@clibb.es
@fjaumot
Jose Cousiño
Software Architect at Birchman
Josemaria.cousino@birchmangroup.com

Más contenido relacionado

PDF
Fancy windows capturas de pantalla
PDF
Html 5
PDF
Diseñador gráfico con inglés
PPTX
[dotNetSpain2016] Aumentando nuestra productividad en Xamarin
PPTX
Introducción a SharePoint Framework
ODP
Una historia de bootstraping desde 2008 - Theevnt 2011
PPTX
Descúbre IT, Conoce CancunIT
Fancy windows capturas de pantalla
Html 5
Diseñador gráfico con inglés
[dotNetSpain2016] Aumentando nuestra productividad en Xamarin
Introducción a SharePoint Framework
Una historia de bootstraping desde 2008 - Theevnt 2011
Descúbre IT, Conoce CancunIT

Similar a Crea tus aplicaciones web con spa, angular2, web api y visual studio code (20)

PDF
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
PDF
WeLoveJS 2014: Un paseo por FirefoxOS
PPTX
Power bi para desarrolladores
PPTX
Formación Alfa9 2016
PDF
Presentacion veiss
PDF
PDF
Creando un Web API desde la idea hasta el despliegue de forma ágil
PPTX
Desarrolla Add-Ins de Office 365 con Angular 2
PPTX
Spsmad2016:Un SharePoint enla mochila
PPTX
Global integration bootcamp 2018 - Gobierno de APIs
PPTX
Global Integration Bootcamp 2018 - Gobierno de APIs
PDF
Presentacion arambee 04-01-2013
PDF
Combinatoria, programación para tus ideas
PPTX
Blontochain Feria Vegana Barcelona
PPTX
Roslyn: Hello from the other compiler - dotNet Spain Conference 2016
PDF
Catalogo de formacion en TIC - Legadrive_2014
PPTX
.NET Core 1.0 y ASP.NET Core 1.0
DOCX
Silabo de Programación Web 1
PPTX
Planifique, construya, y alcance el éxito con aplicaciones – Webinar
PDF
Ciclo de vida de un proyecto WordPress - WordCamp Barcelona 2016
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
WeLoveJS 2014: Un paseo por FirefoxOS
Power bi para desarrolladores
Formación Alfa9 2016
Presentacion veiss
Creando un Web API desde la idea hasta el despliegue de forma ágil
Desarrolla Add-Ins de Office 365 con Angular 2
Spsmad2016:Un SharePoint enla mochila
Global integration bootcamp 2018 - Gobierno de APIs
Global Integration Bootcamp 2018 - Gobierno de APIs
Presentacion arambee 04-01-2013
Combinatoria, programación para tus ideas
Blontochain Feria Vegana Barcelona
Roslyn: Hello from the other compiler - dotNet Spain Conference 2016
Catalogo de formacion en TIC - Legadrive_2014
.NET Core 1.0 y ASP.NET Core 1.0
Silabo de Programación Web 1
Planifique, construya, y alcance el éxito con aplicaciones – Webinar
Ciclo de vida de un proyecto WordPress - WordCamp Barcelona 2016
Publicidad

Último (11)

PPTX
sistemas de informacion.................
DOCX
trabajo programacion.docxxdxxxddxdxxdxdxxxdxxdxdxd
PPTX
Tratará sobre Grafos_y_Arboles_Presentacion.pptx
PPTX
Implementación equipo monitor12.08.25.pptx
PPTX
Fundamentos de Python - Curso de Python dia 1
PDF
AutoCAD Herramientas para el futuro, Juan Fandiño
PDF
Clase 3 - Presentación visual (Insertando objetos visuales) POWER POINT.pdf
PPTX
ORIGEN DE LA IA - GRADO 1102 INTELIGENCIA
PDF
Su punto de partida en la IA: Microsoft 365 Copilot Chat
PPTX
Derechos_de_Autor_y_Creative_Commons.pptx
PPTX
Conceptos basicos de Base de Datos y sus propiedades
sistemas de informacion.................
trabajo programacion.docxxdxxxddxdxxdxdxxxdxxdxdxd
Tratará sobre Grafos_y_Arboles_Presentacion.pptx
Implementación equipo monitor12.08.25.pptx
Fundamentos de Python - Curso de Python dia 1
AutoCAD Herramientas para el futuro, Juan Fandiño
Clase 3 - Presentación visual (Insertando objetos visuales) POWER POINT.pdf
ORIGEN DE LA IA - GRADO 1102 INTELIGENCIA
Su punto de partida en la IA: Microsoft 365 Copilot Chat
Derechos_de_Autor_y_Creative_Commons.pptx
Conceptos basicos de Base de Datos y sus propiedades
Publicidad

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

Notas del editor

  • #8: En una página tradicional, cada vez que se hace una navegación del cliente al servidor este renderiza una nueva página de HTML. Esto, ejecuta un refresco de la página en el navegador del cliente. En una página SPA, después de que la página sea cargada por primera vez, todas las interacciones con el servidor suceden a través de llamadas AJAX. Este devuelve datos, no tags en HTML, normalmente en un formato JSON. La aplicación web usa los datos devueltos en JSON para actualizar la página de forma dinámica, sin tener que recargar la página completa.
  • #10: 2ª línea Los framewroks son volátiles 3ª línea Hay que cambiar la mentalidad y pensar en el browser 4ª línea tenemos que pensar en que el servidor únicamente nos va a procesar/devolver datos mientras que en el browser se va a encargar de toda la UI de esos datos cómo su validación, etc…
  • #11: @fjaumot Microsoft nos proporciona una nueva plataforma para poder realizar aplicaciones multiplataforma de una forma sencilla y modular. @Jose Vamos a pasar de tener siempre un sistema muy jerárquico y acoplado a IIS a tener todo organizado por módulos y componentes. @Jose Además vamos a tener nuevos servidores que serán multiplataforma cómo el nuevo dnx (runtime) que es el que lanza el Kestrel (Servidor)
  • #13: @fjaumot Pensamos en una web global, en una web escalable, en una web que este en la nube y sea ágil, rápida y también que se sustente con pocos recursos. Aprovecharemos al máximo el front end, es decir, el browser @Jose Referencia al cross-platform y abrir a toda la comunidad de desarrolladores independientemente de las tecnologías usadas
  • #15: De hecho es Roslyn quien nos capacita para poder hacer esto. Obtiene el código y lo compila to IL.
  • #16: Es un SDK y un entorno de ejcucción. Es todo lo que necesitamos para compilar y hacer correr aplicaciones .NET para Windows, Mac y Linux. Realizado en .NET Core. Ecosistema basado en paquetes, Nuget para servidor y paquetes npm, bower, grunt… para el browser (cliente)
  • #17: 1rª Línea es más rápido porqué entre otras cosas, en versiones anteriores teníamos toda la dependencia de System.Web que estaba relacionada con el servidor y hacía que la ejecución fuera más lenta. Además, antes al ser modular y solo cargar lo que necesito, es más rápida. 4rª Línea remarcar Open Source las contribuciones (Ver código github) 4rª Sublime, Visual Studio y Visual Studio Code entre otros
  • #22: Podemos construir y debugar aplicaciones web modernas orientadas al cloud. Es totalmente gratuito, open source y por supuesto, esta disponible para todos los sistemas operativos.
  • #23: Docker, Angular JS, Python, yeoman
  • #24: NodeJs es un runtime open-source y cross-platform para desarrollar la parte servidora de las aplicaciones web. Yeoman le ayuda a poner en marcha nuevos proyectos, la prescripción de las mejores prácticas y herramientas para ayudar a mantener su productividad. Yo scaffolds crea nuevas aplicaciones y escribe la configuración por ti. npm para administrar aquetes, gulb que es un paquete automatizar que te permite minificar js, css, compilar typescript a js, bower administrador de paquetes
  • #25: 1.- Descargar visual studio code en el sistema operativo que se vaya a utilizar   2.- Para instalar el DNVM  hay que hacer lo siguiente todo desde la consola      Windows:        1.- ejecutar el siguiente comando           @powershell -NoProfile -ExecutionPolicy unrestricted -Command "&{$Branch='dev';iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.ps1'))}"      2.- Para instalar DNX para .Net Core       dnvm upgrade -r coreclr       3.- Para installar DNX para Full Net Framework       dnvm upgrade -r clr           Linux (Ubuntu):        1.- sudo apt-get install unzip curl       curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh        2.- Para instalar los pre-requisitorios DNX para .Net Core         sudo apt-get install libunwind8 gettext libssl-dev libcurl4-openssl-dev zlib1g libicu-dev uuid-dev    3.- Para instalar DNX para .Net Core       dnvm upgrade -r coreclr       Mac      1.- curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh     2.- DNX para Net Core      dnvm upgrade -r coreclr   3.- Para instalar Yoanmner      Windows    npm install -g yo grunt-cli generator-aspnet bower      Linux y Mac        npm install -g yo bower grunt-cli gulp      npm install -g generator-aspnet   4.- Ejecutar el comando        yo aspnet
  • #27: Declarativo entiéndase cómo un conjunto de directivas que extienden el HTML cómo ng-bind, ng-click, ng-show…. Imperativo es desarrollar comúnmente, sintácticamente vamos… pero desde JS $('#your-name').bind('input', function() { var name = $(this).val(); $('#output').html("Hello " + name); }); Última linea matizar si viene de programación de POO
  • #32: 1rª Servicios REST que consumiremos
  • #38: 1rª Servicios REST que consumiremos