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…
Top Related