Build 2015 – Day 1

Par Benoît,
Pôle .Net MCNEXT

Bonjour à tous,

Après la keynote qui nous a tant surpris de part les avancées technologiques de Microsoft (HoloLens,…) que ses choix stratégiques (Android et iOS au sein du store), les sessions ont débuté.

Aussi vous trouverez ci-joint un compte rendu pour chacune des 4 sessions auxquelles j’ai pu participer en cette première journée. J’ai suivi un parcours plutôt orienté XAML, mais au-delà la techno, ces sessions ont été une manière de voir les orientations fonctionnelles et design pour W10.

1 – Strategies for developing cross-platform applications with VS 2015
Une session traitant du développement multiplateforme grâce à Xamarin et Cordova.

2 – What’s new in XAML for Universal Windows Apps
Un point sur les nouveautés XAML introduit par W10, entre contrôles universels, nouveau binding et layout responsive.

3 – Data Binding : Boost your app’s performance through new advancement to XAML Data Binding
Introduit lors de la précédente session, le nouveau binding compilé est ici étudié en profondeur.

4 –  UX Patterns and Responsive Techniques for Universal Windows Apps
Cette ultime session de la journée fait le point sur les bonnes pratiques du design d’Universal App (qui reprend nombre de guidelines Windows 8).

Bonne lecture ! Benoit

_______________________________________________________

1 – Strategies for developing cross-platform applications with VS 2015

Si vous connaissez déjà Cordoba et Xamarin passez votre chemin !
On était en droit d’espérer d’une Build d’avoir des nouveautés, mais cette session n’aura été qu’un aperçu de ce qui existe déjà depuis les premières versions de VS2015 en terme de crossplatform.

Cette session se basant essentiellement sur des démos (9 !), le contenu de ce rapport sera succinct.

Celle-ci débute par un rappel de l’intérêt stratégique de cibler du multiplateforme (réduction des coûts, pas d’outsourcing) et définit 2 caps possible : le natif et le web. L’un permettra d’avoir accès aux fonctionnalités propres au device et le second permettra d’obtenir une interface unique quelque ce soit le device (et donc minimiser les coûts de formation etc.).

On commence donc par Xamarin, et donc par les contrôles natifs. Une application de type Uber nous sert de point d’appui pour voir les différences entre un Windows phone, un Android et un iPhone.

Build2015_1bis_Benoit
Rapide aperçu de ce que VS2015 nous propose comme templates, vue du diagramme dgml pour voir les dépendances et on passe sur du… C++ ! En effet il est aussi possible de coder en C++ , tout en choisissant entre CLANG et GCC comme plateform toolset et en utilisant OpenGL ! Ici l’utilisation du control BingMap a été possible grâce à un wrapper sur lequel on ne s’attardera pas.

La speakerine revient sur la présence d’émulateurs Android, qui sont des images complètes de l’OS et qui permettent notamment le drag and drop d’api.

Puis on passe sur Cordova.

Build2015_2_Benoit

On décortique la solution, développe l’intérêt des plugins (pour les fonctionnalités spécifiques entre autres), teste le débogage VS sur différentes plateformes.
Le plus gros intérêt de cette application a été l’utilisation du plugin Insights et la visualisation en ligne des différents indicateurs (pages views, users, top devices, top crashes, versions,…)

Pour résumer, cette session sert principalement de piqure de rappel sur ce qui existe déjà en terme de crossplatform mais reste toutefois intéressante pour l’aspect C++ et l’utilisation d’insight pour Cordova.

2 – What’s new in XAML for Universal Windows Apps

Cette session s’adresse aux développeurs XAML, mais pas que ! Ici on parlera aussi d’UI et des choix d’interfaces pour Windows 10. Une session très intéressante.
Donc quoi de neuf concernant native UI Framework de Windows 10 ?

On commence par l’homogeneisation des interfaces sur les différents supports. On passe en revue les différents devices, du PC au WP en passant par le rasberry pi et la Xbox pour s’apercevoir que chacun d’eux affiche de manière identique les contrôles.

Cette introduction passée, on attaque les nouveaux contrôles universels !
– Le pivot
– Le contentDialog
– La Map qui devient offline, 3D et avec l’affichage panoramique des rues

Puis vient le sujet pages ‘responsives’ et des vues multiples. L’idée est ici de simplifier le développement d’applications implémentant ces comportements avec notamment l’arrivée des statesTriggers et de l’adaptiveTrigger, qui nous évite de nous abonner à l’événement resized de la fenêtre pour jouer sur les visualstates.

Build 2015 - What’s new in XAML for Universal Windows Apps

Un nouveau layout fait son apparition : le relativePanel. Comme son nom l’indique, il va nous permettre de placer un élément à côté d’un autre simplement en précisant sa position par rapport à  ce dernier. Cette démarche évite la surutilisation des Grids avec leurs définitions de lignes et colonnes.

Build 2015 - What’s new in XAML for Universal Windows Apps

Puis vient un concept très intéressant : le Compiled Binding.
A la différence du binding bien connu, le compiled binding va être résolu à la compilation et va donc pouvoir générer des erreurs. C’est la fin des erreurs de bindings silencieuses et cachées dans la fenêtre de sortie !

Build2015_What’s new in XAML for Universal Windows Apps

De nouvelles autres possibilités s’offrent à nous, avec en vrac :
– La transformation 3D fait son arrivée avec des effets de rotation et de parallax. Il suffit simplement de définir la propriété Transform3D pour en voir les effets sur l’UI.
– Il est désormais possible de définir son propre chrome et de remplacer celui par défaut.
– L’InkCanvas permettant d’annoter plus facilement
– Le drag and drop, par exemple depuis l’explorateur de fichiers vers son application.
– L’amélioration du contrôle Webview.

Enfin, on peut citer la fonctionnalité Live Visual Tree, qui comme son nom l’indique, va permettre tel Snoop pour WPF de naviguer dans le visual tree pour le décortiquer et modifier les différentes propriétés d’un élément.
Au final cette session a été vraiment intéressante, je vous la conseille vivement, car elle combine design, nouveaux contrôles et fonctionnalités VS.

3 – Data Binding : Boost your app’s performance through new advancement to XAML Data Binding

Derrière son nom à rallonge, cette session a pour but de nous dévoiler le tout dernier concept de liaison de données : le Compiled Binding !
A savoir ce que c’est au juste, comment et pourquoi l’appliquer, ses contraintes, et sa face cachée (code généré).
Je ne vous cache pas que cette session a été passionnante et je vous la conseille vivement.
Apres une courte démo sur le temps de rendu d’une page selon le binding appliqué (onetime, oneway, twoway, compiled binding ou tout simplement pas de binding), on s’attarde sur les indicateurs de performance et de mémoire :

Buid2015_Data Binding : Boost your app’s performance through new advancement to XAML Data Binding

Le compiled binding est simple à mettre en place, il suffit de remplacer  {Binding…} par  {x :Bind …}. Il faut savoir que x :Bind est fortement typé et qu’il est en OneTime par défaut.

Utilisé côté DataTemplate, ce dernier doit être explicite, et on doit se résoudre à des contraintes si on veut l’utiliser dans un ResourceDictionary.

Il est désormais possible de spécifier des phases pour un rendu progressif d’une grande liste d’items. En ajouter l’attribut x :Phase suivi d’un index, on va pouvoir favoriser une liaison de données plutôt qu’une autre. Si on prend l’exemple d’un trombinoscope d’une grande entreprise, on favorisera le l’affichage du nom de la personne à celui de son numéro de téléphone.

Build2015_Data Binding : Boost your app’s performance through new advancement to XAML Data Binding

Ce nouveau binding peut s’appliquer également aux évènements mais sous certaines conditions :

Build2015_Data Binding : Boost your app’s performance through new advancement to XAML Data Binding

On peut également préciser que ce nouveau type de binding s’accompagne de nouvelles méthodes :
Update() pour une mise à jour asynchrone des données
– StopTracking() pour stopper momentanément la maj des données.

Cependant il n’est pas possible d’utiliser x :Bind partout, de nombreuses contraintes subsistent encore, il n’est pas possible par exemple de l’utiliser dans un setter de style, de le définir en code behind (ajout ou modification) ou encore de l’utiliser sur des objets non typés (ex : json).


4 – Design : UX Patterns and Responsive Techniques for Universal Windows Apps

La dernière session de la journée nous amène à réfléchir sur le design des applications universelles Windows 10.
Même si de nombreux concepts de design de Windows 8 sont préservés, quelques changements pointent leurs nez.

L’introduction de cette session nous amène à prendre en considération les éléments suivant :
– la taille de l’écran
– les capacités de l’appareil
– la connectivité
– les interactions basiques
– la durée d’utilisation
– …

Il faut donc s’adapter à tous ces points pour cibler un panel très large d’appareils.

L’appbar de Windows 8 (top et bottom) devient la commandbar de Windows10.

Le concept de ‘scaling algorithm’ est abordé afin que le développeur/designer prenne en compte la taille de l’écran ET la distance avec l’utilisateur pour que la taille perçue par celui-ci soit identique sur l’ensemble des appareils (du smartphone à l’écran TV).

Une application peut se découper en 3 éléments : Le contenu, les commandes et la navigation.
La navigation :
Microsoft ne préconise pas l’utilisation précise d’une navigation, mais spécifie une liste de conventions. On peut citer le pivot, les onglets, le hub, le master-details et le hamburger.

Les Commandes :
Elle ne doit pas contenir plus de 4 actions principales, et doit placer les actions secondaires dans le menu complémentaires signalé par les ‘…’. Il n’y a pas d’emplacement spécifique, c’est selon le choix de chacun.

Le Contenu :
6 points sont abordés, les «6 R’s » qui en cas de réduction de l’écran doivent :
– Resize : adapter le contenu à la taille de l’écran
– Reflow : passer par exemple du contenu sur 2 colonnes à une seule
– Reposition: pouvoir passer d’éléments côte à côte à des éléments superposés
– Reveal : on cache du contenu qui n’est pas jugé indispensable
– Re-architect : on repense l’application, avec par exemple le passage d’une page master-details à une liste permettant une navigation vers les détails
– Replace : réagencement du contenu

Cette session, au final assez courte (40min) reprend beaucoup de notions déjà appliquées sous Windows 8 et n’apporte pas grand-chose à celui qui développe déjà pour cet OS.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s