http://ElAveFenix.net

Sistema de licencias

• Está disponible en la dirección:

http://go.microsoft.com/fwlink/?LinkId=524433

Características principales:

• Entorno de desarrollo integrado completo y totalmente extensible

• Ecosistema con miles de extensiones

• Desarrollo de Windows, iOS y Android apps

• Desarrollo web y nube

• Incluye soporte para varios lenguajes C#, C++, JavaScript, Python y más

• GRATIS para desarrolladores individuales

• GRATIS para proyectos Open Source, investigación, educación y pequeños

equipos profesionales

Visual Studio Web Tools

(evolucióny posibilidades

actuales)

Browser Link

Editor HTML,

CSS3 y

JavaScript

Web

EssentialsSide Waffle

Con Visual Studio 2013 –> Web Tools

11

BrowserLink

BrowserLink - Inspect

BrowserLink

• Se basa en un estándar de JavaScript 5: Web Sockets

•Microsoft implementa Web Sockets mediante la librería SignalR

•Permite integrar otros navegadores en la experiencia de desarrollo y depuración

•Posibilita en lanzamiento múltiple de varios navegadores simultáneos.

•No excluye el uso de "Inspector"

14

¡Aquí van los datos!

¡Sí!

Básicamente…

• Conexión persistente entre Cliente y Servidor sobre HTTP

• Aplicaciones multi-usuario de tipo real-time fáciles de construir

• Auto-negociación del transporte

¿Cómo funciona SignalR?

• Permite técnicas push y RPC de servidor a cliente

• Construido de forma asíncrona para soportarhasta 1000’s conexiones concurrentes

• Escalable mediente Service Bus, SQL Server & Redis

• Open Source en GitHub

Un hub is una clase .NET

que hereda de

Microsoft.AspNet.SignalR.Hub

Como los Hubs se llaman

desde el cliente por el

nombre se puede

personalizar si es necesario

La propiedad Clients del

Hub expone propiedades

dinámicas utiles para

dirigirse a clientes

específicos

Las clases Hub tienen

métodos virtuales para

responder a eventos de

conexión/desconexión

Clients.All.doWork()

Clients.Caller.doWork()

Clients.Others.doWork()

Clients.Users(“Brady”).doWork()

Cliente JavaScript Cliente .NET

Note – the order is

important!

HTML5 CSS3

JavaScript TypeScript(*)

Soporte de estándares Web: Análisis individual

Web Essentials

Web Essentials

• Complemento disponible en todas lasversiones de Visual Studio desde 2010

• Incluyendo las versiones Express y Community

• Instalable desde la opción "Extensiones y Actualizaciones"

• Creada y mantenida por MadsChristensen, del equipo de ASP.NET

Web Essentials

• Soporte HTML5 en etiquetas y atributos

• Soporte semántico en HTML5

• "Snippets" de construcción rápida de Código

• Soporte de EMMET (antiguo Zen Coding)

Web Essentials

• Soporte sintáctico de librerías de terceros:

• Knockout, Angular, BootStrap, jQuery, etc.

• Soporte de herramientas de optimización Web:

• Optimización de imágenes

• Conversión a formatos Base64 (imágenes, fuentes…)

• Contextos: detección de características CSS con indicación del navegador soportado y la version

• Soporte de meta-lenguajes CSS: LESS y SASS

Web Essentials

• Soporte extendido de JavaScript• Junto a otras características de los editores de Visual Studio,

ahora disponemos de un conjunto completo de desarrollo para este lenguaje:

• Depuración (condicional, etc.)

• Intellisense (extendido por el usuairo)

• IntelliTrace, etc.

TypeScript

TypeScript

• Muchas novedades respecto a este lenguaje• Actualmente, se encuentra en las versiones:

• 1.4: Estable

• 1.5: Beta (incluye Annotations)• Es un motor sintáctico que cuenta con un editor y un

"transpilador" de Código integrados en Visual Studio• Genera código JavaScript utilizable hasta en IE7.• Su sintaxis es totalmente OOP

TypeScript

• TypeScript aporta tipado a JavaScript

• Permite declarar clases, interfaces y módulos

• Esto aporta separación, al igual que la que obtenemos con lenguajes .NET

• Podemos heredar, implementar interfaces, declarar miembros privados, protegidos y públicos, etc.

• El editor reconoce las definiciones e indica los errores en tiempo de edición.

TypeScript: La gran sorpresa

• En el pasado evento Google I/O, el Jefe de Proyecto de Angular (MiškoHevery), anunciaba en la "Keynote" un par de cosas:

• Que llevaban trabajando con el equipo de Heljsberg (TypeScript) casi un año

• Que desde ese momento abandonaban su propio lenguaje (AtScript) para pasar a construir Angular 2.0 totalmente en TypeScript

TypeScript: La gran sorpresa

• En contrapartida, el propio Anders Hejlsberg llamaba al estrado de su presentación de TypeScript a Heveryy su colega Brian Milnar para hacer el anuncio más oficial:

• ¡La colaboración Google/Microsoft en temas de JavaScript es completa!

Emuladores: Android,

MAC, W. Phone

Apache Cordova

(PhoneGap)

Integración Xamarin

Herramientas de

Terceros:

Node.js, NPM, Bower,

Grunt, Gulp, etc.

• Apache/Cordova es una plataforma basadas en los

lenguajes fundamentales de internet (HTML, CSS y

JavaScript) que permite programar con un solo núcleo

básico y acceder a los recursos de cualquier dispositivo

• Para ello, suministra un conjunto de API's que permiten

dicho acceso directamente desde JavaScript

• Con Visual Studio, podemos programar cualquier

aplicación usando A/C sin necesidad de más

herramientas.

Arquitectura de Apache/Cordova (A/C)

• Apache/Cordova proporciona un

marco común de ejecución a través

de un "envoltorio nativo" (native

wrapper), que posteriormente

puede distribuirse a la plataforma

que se desee.

• Eso implica que tendremos que

realizar diversas "compilaciones" o

distribuciones finales del código si

queremos poder probarlo en los

distintos emuladores o en los

dispositivos finales.

Arquitectura de Apache/Cordova (A/C)

• Apache/Cordova suministra un acceso

común a un número cada vez más

grande de plataformas móviles

• Permite utilizar los "frameworks"

JavaScript habituales sin ninguna

interferencia:

• AngularJS

• BootStrap

• jQuery/jQuery UI/jQuery Mobile

• KnockOut, Ember, etc.

Soporte en los IDE (V. Studio)

• Aunque la plataforma está

soportada desde versiones

anteriores (2012) el soporte de A/C

desde Visual Studio 2015 es óptimo

y no precisa recurrir a ninguna

instalación adicional

• En las versiones anteriores a la

VS2015 RC, se requieren algunas

instalaciones adicionales

(Secondary Installer)

Soporte en los IDE (V. Studio)

• A partir de la VS2015 RC

es solamente una

opción más de

instalación

• Esto incluye varios

emuladores: iOS,

Android, Windows

Phone, Windows 8, etc.

Soporte en los IDE (V. Studio)

• Las posibilidades de depuración

son completas y las mismas que

esperamos de cualquier otra

plataforma y/o lenguaje dentro

de Visual Studio.

• Eso incluye la depuración directa

en dispositivo

Soporte en los IDE (V. Studio)

• La edición del código también

cuenta con las ventajas habituales:

• Intellisense

• "Code completion"

• Sugerencias

• Sensible al contexto

• Multilenguaje

Soporte en los IDE (V. Studio)

• Lo mismo puede decirse

respecto al código fuente, en

cuanto a las posibilidades

habituales: Ventanas de

depuración, puntos de

ruptura condicionales,

Intellitrace, etc.

Soporte en los IDE (V. Studio)

• El acceso a las capacidades

nativas del dispositivo de salida

se configura igualmente desde

el propio IDE

Soporte en los IDE (V. Studio)• Lo mismo puede decirse de los accesos a

datos mediante varios tipos de servicios:

Open Source

• Al igual que muchos otros

proyectos de software en la

actualidad, Microsoft está poniendo

como código abierto buena parte

de las librerías de desarrollo.

• Esto incluye colaboraciones con

Google (AngularJS), o software de

servidor o cliente, como Entity

Framework o ASP.NET

Primera aplicación Apache/Cordova• A partir de ese momento, dispondremos de un nuevo

tipo de proyecto en V. Studio

Primera aplicación Apache/Cordova

• El explorador de Soluciones nos

muestra la arquitectura base de la

aplicación vacía, que ya es operativa y

puede servir para probar las

funcionalidades de soporte y ejecución.

• Vemos que se incluyen carpetas

específicas para las diversas

plataformas

• También incluyen recursos Web

personalizados (iconos, pantallas

iniciales, código JavaScript, etc.)

Primera aplicación Apache/Cordova

• La carpeta merges guarda

contenidos que serán

distribuidos junto con la

aplicación final en el

momento del empaquetado

de la aplicación

• Ahí se puede añadir

contenido personalizado

para cualquiera de las

plataformas, de manera que

solo sea utilizado en alguna

de ellas, dependiendo del

dispositivo.

La página principal• El código de la página principal no es más que un fichero HTML5,

con el marcado adaptado al nuevo estándar.

• Podemos utilizar cualquiera de las etiquetas promovidas por el

estándar tanto para la estructura del documento:

• <article>, <section>, <nav>, <header>, <footer>, <aside>…

• …como para la introducción de datos:

• La serie <input> (incluyendo calendarios, sliders,

numericUpDown… )

• O para recursos multimedia:

• <canvas>, <svg>, <video>, <audio>, etc.

<!DOCTYPE html><html><head>

<meta charset="utf-8" /><title>DemoInicial</title>

<!-- DemoInicialIndra references --><link href="css/index.css" rel="stylesheet" />

</head><body>

<p>Hello, your application is ready!</p>

<!-- Cordova reference, this is added to your app when it's built. --><script src="cordova.js"></script><script src="scripts/platformOverrides.js"></script>

<script src="scripts/index.js"></script></body></html>

La Depuración• Todas las opciones de depuración que podemos esperar de

cualquier otro lenguaje están disponibles (pero multiplicadas) en las

herramientas de este tipo de proyectos (empezando por los

emuladores)

La Compilación

• Es el proceso de integración y empaquetado de una

aplicación para un dispositivo concreto (el seleccionado

en las opciones de depuración anteriores)

• Podemos ver cómo Visual Studio utiliza las herramientas

que –de otra forma- tendríamos que utilizar para el

empaquetado desde líneas de comandos: Node.js, NPM,

etc.

La ejecución en simulador

• Una vez lanzada la aplicación, el

emulador Ripple (Chrome), nos

permitirá probar la ejecución e

incluso nos suministra algunas

herramientas de "testing"

adicionales.

La ejecución en simulador

• Además, debido a la similitud de los motores de interpretación de Ripple y

Android, lo que se puede ver es una simulación bastante aproximada a la

experiencia real.

• Por otra parte, podemos utilizar las herramientas habituales de depuración

para comprobar cambios en el código de marcado, modificaciones

(dinámicas, incluso) en el CSS de presentación, y añadir puntos de ruptura en

el código JavaScript

• Independientemente, podemos seguir utilizando las herramientas de

depuración de Chrome como siempre, y analizar el comportamiento del

HTML, CSS y JavaScript, utilizando puntos de ruptura, etc.

• Todo se invoca inicialmente en una función anónima que establece los comportamientos: Inicial, De pausa y de recuperación (resume)

// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints, // and then run "window.location.reload()" in the JavaScript Console.(function () {

"use strict";

document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

function onDeviceReady() {// Handle the Cordova pause and resume eventsdocument.addEventListener( 'pause', onPause.bind( this ), false );document.addEventListener( 'resume', onResume.bind( this ), false );

// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.};

function onPause() {// TODO: This application has been suspended. Save application state here.

};

function onResume() {// TODO: This application has been reactivated. Restore application state here.

};} )();

Qué sucede por debajo (en ejecución)

• Dependiendo de la plataforma elegida, los diversos

"wrappers" del código a distribuir establecen "puentes"

con el dispositivo, mientras ejecutan el resto del código

en un contexto de seguridad.

Qué sucede por debajo (en ejecución)

• Desde el punto de vista de las "pilas de ejecución" el

esquema correspondiente es algo como esto

Acceso a recursos del dispositivo (Plug-ins)• El acceso a recursos del dispositivo requiere una

configuración del archivo "config.xml" que se incluye en el

proyecto.

• Desde Visual Studio, disponemos de un editor visual más

adecuado que nos evita errores de sintaxis, al tiempo que

nos recuerda qué opciones están disponibles y con qué

valores:

Opciones de configuración de emuladores

• De igual forma, los emuladores

disponibles presentan ventanas

de configuración donde podemos

realizar el "ajuste fino" de cara a la

depuración y pruebas con

diferentes versiones. Así que

disponemos de un Gestor del

Emulación de Android…

Opciones de configuración de emuladores

• Gestor del SDK de Android…

Opciones de configuración de emuladores• De Android Device Monitor…

Opciones de configuración de emuladores• También disponemos de una herramientas de

configuración para iOS y Windows Phone …

• Existe un buen conjunto de ejemplos, recursos y documentación ya disponible en sitios diversos.

• Y más especializada, en recursos como

• StackOverflow: http://stackoverflow.com/questions/tagged/visual-studio-cordova

• Foros MSDN: https://social.msdn.microsoft.com/Forums/

• Twitter: http://www.twitter.com/VSCordovaTools

• Y ejemplos en Github:

• Angular: https://github.com/Microsoft/cordova-samples/tree/master/todo-angularjs

• WinJS: http://go.microsoft.com/fwlink/?LinkID=398518

• Backbone: http://go.microsoft.com/fwlink/?LinkID=398517

Emuladores: Android,

MAC, W. Phone

Emuladores: Android,

MAC, W. Phone

Apache Cordova

(PhoneGap)

Integración Xamarin

Herramientas de

Terceros:

Node.js, NPM, Bower,

Grunt, Gulp, etc.

Con Visual Studio 2015 –> Cross Platform

Emuladores

• Visual Studio 2015 RC incluye la opción de instalar

emuladores adicionales.

• Por tanto podemos probar la ejecución de código en

diversos dispositivos (tanto móviles como tabletas) de

plataformas distintas, Windows incluido.

• Como hemos dicho: esto incluye Android, Mac,

Windows Phone, etc.

Emuladores• Uno de los emuladores favoritos del momento es

Ripple (vinculado a Chrome) y soportado

directamente por Visual Studio

• Pero también podemos emular en emuladores

especiales que simulan de forma casi idéntica al

dispositivo real

• Tengamos en cuenta que V. Studio también permite

depurar en el dispositivo real.

Emuladores: Android

Emuladores: iOS• También podemos emular en dispositivos iOS reales o mediante

emuladores instalables, que podemos configurar como una opción

más de Visual Studio

Emuladores: Windows• Finalmente, también podemos emular mediante simuladores de

máquina local, que reproduce en mismo sistema operativo Windows

donde nos encontremos:

Emuladores: Android,

MAC, W. Phone

Apache Cordova

(PhoneGap)

Integración XamarinIntegración Xamarin

Herramientas de

Terceros:

Node.js, NPM, Bower,

Grunt, Gulp, etc.

Con Visual Studio 2015 –> Cross Platform

Tipos de

aplicaciones

móviles

Panorama actual

• Hay 3 aproximaciones al problema del desarrollo multiplataforma:• Código nativo: Objective-C (Apple), Java (Android), .NET (Windows Phone,

XBOX, etc.)

• 3 Proyectos distintos

• Sin código en común

• Código estándar: HTML5 + CSS3 + JavaScript5

• Un solo proyecto -> Mismo código

• Fácil de implementar y de probar

• Herramientas de todo tipo

• Funciona en navegadores modernos (IE9+, Chrome, Firefox,Opera)

• Solución híbrida: C# + Xamarin

Desarrolloespecífico:

La aplicaciónse construye3 veces

Desarrollomedianteestándares

Mínimocomúndenominador

Generación de

la aplicación

El formato de los dispositivos

•Enorme variedad y sigue creciendo

¿Por qué esta aproximación?

•HTML5 + CSS3 + JavaScript funciona en 25 navegadores diferentes, en más de 10 plataformas distintas (lo más universal que existe).

• La entidad que decide qué es el estándar es independiente: World Wide Web Consortium

•Él último estándar para páginas Web era del año 2000 (HTML 4.01)

¿Por qué esta aproximación?

• JavaScript5 (con todas sus carencias) ofrece la posibilidad de crear Aplicaciones Web (y no solamente sitios)

•Todos los navegadores modernos implementan un nuevo motor de JavaScript que aprovecha el hardware de la máquina:• Hebras de ejecución• “Cores” disponibles• GPU, etc.

http://ie.microsoft.com/testdrive/http://ie.microsoft.com/testdrive/

http://ie.microsoft.com/testdrive/

http://devchannel.modern.ie/

https://developer.chrome.com/home/devtools-pillar/

https://developer.mozilla.org/es/

http://www.opera.com/es-ES/developer/

https://developer.apple.com/devcenter/safari/index.action

http://www.w3c.es/

¿Y el soporte?• IE10+, IE Edge, FireFox 14+, Chrome 21+, Opera 9.5+, Safari

6+ (Mac) tienen buenas implementaciones de los estándares

• La solución con el soporte hacia atrás son los “Fallbacks”• Librerías basadas en JavaScript que simulan el comportamiento de los

estándares en navegadores antiguos

• Las hay de varios tipos, y tenéis una referencia a muchas de ellas en la documentación del módulo de CSS3

• Si el problema es el soporte de IE, será porque las empresas quieren:• La última versión de IE11 (desde Mayo/2014) permite que se configure el navegador

para comportarse exactamente, como si fuera: IE6, IE7 o IE8

• Se configura corporativamente para la aplicación y la versión que se desee

• La versión IE Edge se comportará en cuanto a actualizaciones y comportamiento igual que Chrome

¿El desarrollo para móviles es igual?

• El desarrollo es igual para el móvil que para tabletas, laptops o escritorio

• Pero hay que adoptar una política de diseño distinta:• Diseño “Mobile First”

• Primero pensamos en la estructura del sitio/aplicación tal y como debiera verse en un móvil

• Se continúa con un “escalado hacia arriba”• Se puede llegar hasta el diseño en grandes dispositivos (TV murales,

proyectores de entornos masivos, etc.)

• Se deben adatar los recursos por “familias de dispositivos”, dependiendo de “patrones de superficie”

• La forma en que el dispositivo utilizará una “versión” u otra es mediante “Media Queries”

• Se crea un patrón y las M.Q. adaptan el que conviene al dispositivo

¿El desarrollo para móviles es igual?

• Podemos usar librerías especializadas• jQuery Mobile es una de las más populares

• BootStrap para la parte de presentación/adaptación

• PhoneGap/Cordova (distribución de las aplicaciones en la nube)

• Iconic es otra opción reciente que parece interesante

SoluciónXamarin(para código nativo)

Nativomediantecomparticiónde código

C# funciona en 2.600 millonesde dispositivos

Windows APIs

iOSAPIs

100% coverage

AndroidAPIs

100% coverage

CómofuncionaXamarin

C# + .NET Runtime

IU Nativa

Rendimiento Nativo

Otros recursos

• Interfaces de usuario• UX Magazine: http://uxmag.com

• UX Matters: http://uxmatters.com

• UX Mastery: http://uxmastery.com

• CSS3• Lea Verou (http://lea.verou.me/)

• Chris Coyer (http://css-tricks.com/)

• Manoella Illic (Mary Lou) http://tympanus.net/codrops/

• JavaScript• David Flanagan (autor de “JavaScript. The Definitive Guide” 6ª Ed)

• http://it-ebooks.info/book/416/ (!!!!!!!!)

• Brendan Eich (autor de Javascript) https://brendaneich.com/

• Douglas Crockford (JSON): http://www.crockford.com/

• John Resig (jQuery): http://jquery.com

Emuladores: Android,

MAC, W. Phone, etc.

Apache Cordova

(PhoneGap)

Integración Xamarin

Herramientas de

Terceros:

Node.js, NPM, Bower,

Grunt, Gulp, etc.

Herramientas de

Terceros:

Node.js, NPM, Bower,

Grunt, Gulp, etc.

Con Visual Studio 2015 –> Cross Platform

¿Qué son todas esas nuevas herramientas?Nombre Función

Node.js Servidor Web, multiplataforma, no-bloqueante

NPM Manejador de paquetes para Node. Se

especializa en instalación de Herramientas.

NuGet Instalador de librerías externas en aplicaciones

cliente: incluye DLL's (.NET), y librerías

(JavaScript, CSS, etc.).

Bower Similar a NuGet, especializado en instalación de

paquetes "script" en cliente. El acceso pasa a ser

nativo en V. Studio 2015.

Grunt

Gulp

Git Repositorio de código fuente

Observaciones

Solo DLL's para ASP.NET 5

Pasa a jugar el papel de NuGet

en lo referente a librerías de

"scripts". Dispone de muchas

más librerías que NuGet.

¿Qué son todas esas nuevas herramientas?

Nombre Función

Node.js Servidor Web, multiplataforma, no-bloqueante,

de instalación ligera.

NPM Manejador de paquetes para Node. Se

especializa en instalación de Herramientas.

NuGet Instalador de librerías externas en aplicaciones

cliente: incluye DLL's (.NET), y librerías

(JavaScript, CSS, etc.).

Bower Similar a NuGet, especializado en instalación de

paquetes "script" en cliente. El acceso pasa a ser

nativo en V. Studio 2015.

Grunt Ejecución de tareas en aplicaciones cliente. Se

instalan vía NPM y por aplicación (dif. Versiones)

Gulp Competidor del anterior. Realiza tareas como

compilación, B&M

Git Repositorio de código fuente

Observaciones

Soporta un motor de JavaScript interno para

su configuración.

Compiladores LESS, SASS, TypeScript,

CoffeScript, Bundling & Minifying etc.

Solo DLL's para ASP.NET 5

Pasa a jugar el papel de NuGet en lo

referente a librerías de "scripts". Dispone de

muchas más librerías que NuGet.

• Todas ellas pueden seguirse utilizando desde la línea de comandos (como hasta ahora)

• Pero se integran con el IDE y podemos usarlas todas directamente sin necesidad de ventanas CMD adicionales.

• Dispondremos de una experiencia de usuario mejorada.

Soporte de nuevas herramientas en V. Studio 2015

Nueva estructura de proyectos

Intellisense en todos los editores

Intellisense en todos los editores

Bower en acción

El Explorador de Soluciones ofrece menús inteligentes

Lo instalado por Bower podemos examinarlo

Gulp

Gulp

Gulp

Gulp

Gulp

Gulp

Gulp

Gulp

Grunt

• El último recurso…