#UWPHTML – Building Windows 10 web applications

Many people still ignores it, but since Windows 8 (and 8.1 for Windows Phone), you can build Windows native applications using HTML and JavaScript. Yes you read it correctly NATIVE applications. Those applications does NOT run through a webview but with a native HTML/JavaScript application shell called « wwahost ». Those applications are now called « Windows web applications ».

Windows 10 introduced a few enhancements to Windows web apps. They run with a different security context and on Microsoft Edge engine. There is also something called « project Westminster ». More simply, Westminster is « hosted applications », or applications that runs with content hosted on the internet but still have access to Windows APIs. You could find more about hosted apps on our blog, or obviously on Microsoft’s blog.

Windows web apps are fully parts of the new concept of Universal Windows Platform applications. It means that you could make applications using HTML/JavaScript for Windows desktop and tablet, but also for Windows 10 mobile, Xbox, Windows IoT, and the soon to come Hololens.

This post is the first of a serie where we will talk about various aspects of Universal Windows web apps using HTML and JavaScript. We will illustrate the different topics with a real application called « Bring the popcorn », a remote controller for a Kodi or Xbmc media server.

This application is open source, and available in the Windows store. It uses WinJS and WinJSContrib to provide a fast and fluid experience, using the latest features of Edge and Chakra engine (or at least those made available in web apps…).

Hope you will enjoy this serie !

Build 2015 – The « Microsoft Edge » rendering engine that makes the Web just works

Le moteur d’Internet Explorer a 20 ans (1995), mettre en place de nouvelles versions sans altérer la compatibilité devenait un réel problème, et la gestion de la compatibilité un frein à l’innovation et aux performances. Les navigateurs concurrents ne se posent pas ces contraintes… il était donc temps pour Microsoft de faire place nette.

Le moteur de Edge est issu de celui de Trident (le moteur HTML de IE), mais il a subit un gros nettoyage avec la suppression de certaines fonctionnalités anciennes (ex: attachEvent) et de tout ce qui touchait à la compatibilité avec les version séculaires de IE. Edge s’aligne ausi sur le comportement implémenté dans les autres navigateurs pour que les sites fonctionnent correctement, même si ils sont alignés sur les spécificités de webkit.

Edge implémente aussi beaucoup de nouvelles choses. La liste est longue et l’idéal est de consulter status.modern.ie pour se faire un aperçu complet.

Si vous jetez un oeil à cette session, vous pourrez voir des démos de css filters (post processing d’un noeud du DOM avec des shaders déclarés en css), @support (feature detection en css), srcset (gestion des images selon la résolution), svg foreign objects (incorporer du HTML dans du SVG), et HTTP 2 (multiplexage des requêtes, …).

La session se termine par une petite démo de Vorlon.js, un nouvel outil dans la ligné de choses comme weinre, pour diagnostiquer et auditer très facilement une application web, quel que soit son mode de fonctionnement (Cordova, web, web mobile, etc).

Build 2014 – Applications Windows Phone 8.1 en HTML et en Javascript (Channel 9) : David Rousset, Microsoft France, reçoit Guillaume Leborgne, MCNEXT – http://bit.ly/1pX4SDs via @ch9

[Build 14] – How to Analyze Performance Issues in Your Windows and Windows Phone Apps

Mail de John
Samedi 5 avril 2014 20:33
How to Analyze Performance Issues in Your Windows and Windows Phone Apps

La performance est un problème d’expérience utilisateur. C’est l’utilisateur qui jugera. Avoir une application performante améliore les notes dans le store.

Les outils :
– Visual Studio
– WP 8.1 SDK VS Dev Power Tools
o Tracer l’application
– Windows Performance Toolkit
o Tracer l’application et faire une analyse approdonfie
o http://aka.ms/downloadWPT

Identifier les scenarii :
– Se focaliser les scenarii qui
o Ont une vraie valeur pour les utilisateurs
o Sont les clefs de l’utilisation de l’application
o Ont des problèmes de performances visibles
– Fast scenarios
o App launch
o Page navigation
o User Interaction
– Fluid scenarios
o Glitch free animation
o Glitch free panning
o Keeping up with the panning

Demo :
– Capturer une trace
– Localiser un scenario dans la trace
– Investiguer les problèmes de vitesse
– Investiguer les problèmes de fluidité

Cette démonstration utilise à la fois de XAML et du HTML pour montrer que WPA fonctionne dans les deux environnements à la fois sur Windows et sur Windows Phone.
John

Stories from Building the New Windows Mail App (3-104)

Session animée par Jeremy Epling

Retour d’expérience sur la réalisation de la nouvelle application de mail et présentation des tops et pratiques utilisées.

L’application doit fonctionner correctement de matériel 8 pouces peut puissants aux all in one 27 pouces avec quad core.

On voit les différents concepts d’implémentation et les nouvelles possibilités d’ergonomie proposée dans 8.1 comme la possibilité d’ouvrir plusieurs fenêtres pour une même appli (ouvrir plusieurs mails en même temps).

Le choix de html pour l’application de mail a été principalement drivé par le fait que les mails sont souvent en html, ils sont donc plus faciles a restituer dans une app html. On voit comment ils ont découpé le layout et utilise les nouveaux contrôles comme la search box.

Pour les perfs, l’équipe a teste très régulièrement sur Windows RT car, si une app est rapide sur rt, elle est rapide partout. Le nouveau contrôle de Scheduler a beaucoup aidé à améliorer les perfs en permettant de coordonner les opérations, et en facilitant le fait de préparer des portions d’ihm non visibles (comme la fenêtre pour un nouveau mail).

L’appli mail utilise aussi les web workers pour construire des portions d’ihm en générant une string avec le html qui est ensuite envoyée dans l’ui (pas de dom dans les workers).

Pour les listes, garder un layout simple pour les items a un impact significatif sur les perfs (le layout grid par exemple peut parfois être couteux).

Penser ses sélecteurs css et les faire l’élue spécifique possible impacte aussi les perfs (ca se voit sous le nom blopr dans les outils de perf).

Guillaume Leborgne