Retour sur le Tech.days camp 2016

Capture d'écran 2016-03-20 19.28.50
Le mercredi 16 mars 2016, Microsoft France a organisé et accueilli dans ses locaux une après-midi de conférences ouverte aux communautés, le Tech.days camp, évènement auquel plusieurs développeurs Soatiens ont répondu présent.

Le dessinateur et le scénariste du site CommitStrip sont à l’honneur pour l’introduction de la keynote, afin de réaliser en live (sous les yeux de nombreux fans) une planche pour illustrer le thème de cet après-midi. Le dessin final plante le décor : les langages et technologies ne cessent d’évoluer, ce qui oblige les développeurs à toujours apprendre plus et à élargir leur expertise technique.

Commence alors la keynote, avec Pierre Lagarde et Etienne Margraff qui introduisent le tech.days avec une première annonce : à l’occasion des 10 ans des Tech.Days, cet évènement fait peau neuve, change de nom et de format. Microsoft Tech.days devient ainsi Microsoft Experiences, et nous donne rendez-vous le 4 et 5 octobre 2016. Autre nouveauté, Microsot met à disposition une plateforme regroupant tout au long de l’année des vidéos techniques, mais aussi des retours d’expériences et vidéos business, sur le site dédié, dans le but de permettre à chacun de pouvoir se tenir à jour sur les dernières technologies, et bien sûr pas uniquement sur les technologies Microsoft.

Microsoft, open source et Github : une belle histoire d’amour

Pour la première présentation, Microsoft démarre fort en affirmant que l’open source est omniprésent dans le quotidien. L’occasion à Etienne Margraff de rappeler que Microsoft s’est ouvert à l’open source depuis quelques années, en énonçant que chaque équipe de la société a au moins un produit ou framework open source, disponible sur leur GitHub. L’adoption de GitHub et de l’open source est massive parmi les employés de Microsoft, puisqu’on y retrouve plus de 9000 contributeurs pour environ 1800 projets. Fini donc l’effet de mode que l’on suit par principe, Microsoft fait de l’open source un réel enjeu pour son avenir et le concrétise à travers la plateforme Github. En plus du site global regroupant tous les projets, chaque spécialisation possède son organisation (voire image ci-dessous).

Outre l’aspect collaboratif, on apprend que des équipes de Microsoft et Github travaillent ensemble pour fournir la meilleure expérience en termes d’intégration et synchronisation. C’est le cas pour Visual Studio code, un IDE basé sur une technologie initiée par Github. Alain Hébali présente également l’extension GitHub pour Visual Studio, qui permet d’interagir avec GitHub tout en restant dans l’environnement de développement. Autre projet, GitHub Enterprise, pour faire tourner GitHub sur les serveurs d’entreprise ou sur le cloud Azure, afin d’avoir une instance privée, pour laquelle l’entreprise pourra contrôler les accès.

Capture d'écran 2016-03-20 00.32.25

La possibilité de déployer un repository sur Azure donne accès à une interface regroupant différentes informations, mais cela permet également, après un commit, de déployer automatiquement le projet, par exemple une webapp.

Top 5 des trends UX de 2016

C’est au tour de Michel Rousseau de monter sur scène et de présenter les tendances en matière de design pour cette année.

N°5 : Le parcours personnalisé

Le parcours personnalisé est ce qui permet à l’utilisateur de mieux apprécier et d’adhérer au contenu qui lui est proposé, et cela passe tout d’abord par l’adaptation du design aux usages de la plateforme de l’utilisateur. Un autre enjeu est de laisser le choix à l’utilisateur d’éditorialiser l’application, par exemple pouvoir sélectionner ce qui l’intéresse et qu’il souhaite voir en premier. C’est le cas pour les IA Cortana, Siri ou Google Now, qui permettent à l’utilisateur de personnaliser son expérience.

N°4 : Le branding sans couture

Le but est de s’inspirer du système des marques qui, peu importe le produit, impose une image commune et reconnaissable à celles-ci, et de l’appliquer au domaine du digital. C’est à dire, dans notre cas, proposer une expérience continue à travers tous les périphériques en fonction de l’image que l’entreprise souhaite véhiculer, et c’est notamment le cas de Netflix ou Office. Quel que soit la plateforme mobile, ou PC ou tablette, les couleurs et l’expérience restent sensiblement les mêmes et permettent de reconnaître la marque ou le produit. La moralité à retenir est qu’en 2016, on ne développe plus une interface pour une ou plusieurs plateformes, on développe une expérience qui véhicule notre image de marque.

Capture d'écran 2016-03-20 01.13.00

N°3 : Le card style

Tendance venant du monde mobile, et plus particulièrement de la plateforme Android, le card style s’inspire du côté émotionnel qui nous rattache aux cartes (de jeu, de visite, etc.). Le visuel est simple, modulable, sympathique et permet d’avoir rapidement une notion du contenu qu’elle présente, à l’image d’un sommaire dans un livre.

N°2 : Le design “télépathique”, ou design du Jedi

Capture d'écran 2016-03-20 01.16.44Aujourd’hui, on s’adresse de plus en plus à des plateformes au design invisible, par exemple l’IOT ou Hololens, qui ont des interfaces lointaines ou indirectes, et qui exigent de redéfinir les codes de l’expérience utilisateur. Par exemple, avec Hololens, contrairement aux grands gestes utilisés avec la Kinect, ce sont les petits gestes, comme la fermeture du poing ou un mouvement “clic” avec le doigt, qui sont utilisés. On sort aujourd’hui du classique design sur écran, il faut donc adapter l’UX en conséquence.

N°1 : Le motion design vidéo

Auparavant considérée comme simple contenu, les vidéos tendent aujourd’hui à devenir une partie intégrante de l’expérience utilisateur. Michel Rousseau montre le cas d’un site présentant différents commerces dans une rue de Zurich, qui se sert d’une vidéo d’une façon tout à fait nouvelle : à chaque scroll de la souris va correspondre un déplacement dans la vidéo (et donc dans la rue), et cela va permettre de découvrir au fur et à mesure les magasins de manière interactive.

Microsoft et les applications mobiles

Nouveau changement d’univers, mais néanmoins très lié au domaine de l’UX, puisqu’il est temps de parler des applications mobiles. Et pour cela, Jean-Sebastien Dupuy démarre avec une présentation des solutions pour développer une application mobile, avec leurs différences, avantages et inconvénients :Capture d'écran 2016-03-20 01.33.56

  • Native
  • HTML (hybride)
  • C++
  • Unity

Toujours dans une politique d’intégrer au mieux chaque technologie au socle des outils Microsoft, on découvre une intégration sous Visual Studio de Apache Cordova ou Ionic, avec des templates de projets, ainsi qu’une disponibilité de plugins. Bientôt, peu importe le type de projet ou le langage/technologie, les développeurs auront la possibilité de le faire sous Visual Studio (du moins c’est le ressenti).
On apprend aussi qu’il y a quelques jours, Microsoft a annoncé la mise à disposition d’un SDK pour développer des applications Windows 10 grâce à Unity, mais aussi sur Hololens. Le sdk et la documentation sont disponibles ici.

Le vin, Paris, l’amour, et Xamarin

Pour continuer sur le sujet du mobile, Alexandre Popp prend place sur scène, et propose dans un premier temps de parler de vérités universelles.
En effet, selon lui, Paris est une ville de vérités universelles. Tout d’abord l’hospitalité : effectivement, grâce à une application mobile qui lui confirme à son arrivée sa réservation, il se sent très bien accueilli dans la ville, et apprécie l’expérience.
Ensuite, le vin : en tant qu’américain élevé à la française, Alexandre Popp nous parle de sa passion pour le vin. Et c’est encore grâce à une application mobile qu’il va pouvoir trouver à proximité de lui où acheter de bonnes bouteilles de vins.
Enfin, l’amour. Paris est la ville de l’amour et, muni de sa tablette et de l’application Skype, il peut dialoguer avec sa fiancée. Et si Paris lui as appris toutes ces vérités universelles, il souhaite à son tour nous en apprendre une autre, qu’il vient d’ailleurs de démontrer indirectement : aujourd’hui, nous vivons tous des moments mobiles.

Capture d'écran 2016-03-20 16.38.41Entre, d’une part, l’explosion du nombre d’appareils, qui sont de plus en plus hétérogènes (que ce soit mobile, tablette, pc, smartwatch, etc.) et, d’autre part, l’explosion des applications sur les différents stores, il devient indéniable que le mobile prend une place primordiale dans notre quotidien.
En reprenant l’exemple du vin, Alexandre Popp nous montre que, quel que soit le rôle dans la chaine du business d’une société vinicole, nous avons de grandes chances d’avoir besoin d’une ou de plusieurs applications mobiles pour travailler correctement.

Après avoir rappelé les différentes solutions pour créer une application mobile (et avoir bien sûr montré l’intérêt de choisir Xamarin), la présentation continue sur les différents outils ou plateformes qui permettent une intégration totale de Xamarin dans le processus du développement d’une application : les tests, avec Xamarin Test Cloud, la traque de bugs avec Xamarin Insight, et enfin la formation avec Xamarin University.

Pour terminer de convaincre ceux qui ne l’étaient pas encore, s’affiche pour finir à l’écran un ensemble de chiffres qui illustre la confiance que les développeurs et entreprises ont en Xamarin. Et même si cela n’a pas été évoqué, il est intéressant de rappeler qu’il y a quelques semaines, Xamarin a passé un accord pour se faire racheter par Microsoft… Mais nous en saurons sans doute plus lors de la Build qui aura lieu début avril.

Développement d’applications Office

Capture d'écran 2016-03-20 16.41.29Dans le même thème des applications cross-platform, mais sur une base différente, démarre la présentation de création d’applications pour Office.
Pour commencer, nous profitons de quelques chiffres pour montrer les opportunités liées à Office (voir ci-contre). Et en effet, vu le nombre d’utilisateurs, c’est un domaine alléchant.
Etant donné qu’Office est présent partout (mobile, desktop), il se doit d’être multi-plateformes. Mais contrairement au développement d’applications mobiles, cette fois-ci, seul le développement web avec node.js, .NET, ou autre langage web, est possible. Visual Studio ou Visual Studio fournissent d’ailleurs les templates pour créer un add-in Office.

Dropbox fait partie des entreprises qui ont déjà leurs outils intégrés pour Office. Les possibilités sont multiples :
– pouvoir ouvrir, par exemple depuis Dropbox, un fichier word, sur word Online et partager le fichier dropbox à un contact
– voir en direct la modification du document par une autre personne
– créer directement depuis Word un fichier sur Dropbox

Rien de bien nouveau en terme de fonctionnalité, ce qui change c’est l’intégration d’un outil de partage de fichier non natif Microsoft (en effet cela est déjà possible avec OneDrive), ce qui est très intéressant d’autant plus que Dropbox est très utilisée.

Microsoft aime Linux

Après avoir parlé d’applications, de design, il est temps de parler architecture, et c’est avec l’exemple d’une architecture Linux sous Azure que Microsoft a choisi de faire sa déclaration d’amour à ce système.
Il faut savoir qu’une machine virtuelle sur quatre dans Azure tourne sous Linux. Et le but est de faire fonctionner au mieux Linux sous Azure.
La démonstration qui accompagne la présentation montre l’utilisation d’un template ARM, un fichier sous forme de json qui décrit l’ensemble d’un déploiement de services sur Azure et les liaisons entre eux. Ici, le template choisi décrit l’architecture de la machine virtuelle et sa configuration. Le point à retenir est que, grâce aux différents templates qui décrivent la configuration de la machine virtuelle, Azure va pouvoir lancer la création de celle-ci très simplement.

Dans le cloud, il faut distinguer trois types de cloud : le cloud privé, public, et hybride. Et pour faire cohabiter tout cela, Microsoft a annoncé la disponibilité d’Azure Stack, pour héberger une infrastruture Azure on-premise. Pour cette première preview, un focus sur les services IaaS a été réalisé. L’avantage est qu’il existe des templates spécialement pour Azure Stack, et le concept de déploiement reste le même.

Full Stack Web

Capture d'écran 2016-03-20 17.38.19
De nouveau, changement complet d’ambiance, puisque la conférence suivante parle du web, autant front que back. Comme le montre l’image ci-dessus, le présentateur met en lumière le nombre impressionnant de langages, outils, frameworks mis à disposition pour le développement web.
Mais dans cette présentation, peu importe le langage/outil/framework, le but est de revenir à la base du développement web : le contenu. Un contenu accessible par tous (je ne sais pas vous, mais moi cela me fait penser à l’Anneau Unique du Seigneur des Anneaux).

Du coup, pour résoudre cette problématique d’un contenu accessible par tous, un ensemble de bonnes pratiques ont émergé, et Microsoft montre son implication sur le sujet : ils travaillent avec Alsacreations sur la création d’un site communautaire pour recenser différentes bonnes pratiques, lewebmoderne.com (bientôt disponible).
Etienne Margraff présente également un site qui va pouvoir scanner de façon statique une page, et remonter d’éventuels problèmes dans le code qui conduiraient à des erreurs ou comportements indésirables sur certains navigateurs.
Cela passe par des erreurs dans le CSS, l’utilisation d’une version obsolète d’un framework, et j’en passe.

Un autre outil aide beaucoup lors du débuggage en développement web : Vorlon.JS. Vorlon.JS simule le F12 bien connu des développeurs web, et il intègre en plus un onglet regroupant les best practices. Point très intéressant de l’outil, il est capable de détecter des problèmes d’accessibilité, comme par exemple un contraste trop faible sur un élément, qui pourrait empêcher les personnes avec des problèmes de vue de voir correctement cet élément. Ci-dessous une capture d’écran de Vorlon.JS en action :
Capture d'écran 2016-03-20 17.48.03

Après le debug côté client, on passe côté serveur avec un exemple d’une application crée avec Node.JS. Depuis Visual Studio Code, on va pouvoir débugger en local l’application web, c’est à dire mettre des breakpoints, ce qui peut être fort pratique. Mais ce n’est pas tout, car grâce à Vorlon.js il est également possible de débugger le code backend en live, voire même de faire des modifications sur le code pour avoir un aperçu direct. Bien entendu, les modifications effectuées lors du debug sont temporaires, mais cela reste fort pratique.

Azure

Capture d'écran 2016-03-20 18.21.47La prochaine conférence reste du côté back, mais cette fois-ci à un niveau de zoom beaucoup plus petit, puisqu’il est temps de parler Cloud et Architecture.
Plusieurs niveaux sont présentés pour choisir l’hébergement des solutions :

  • 1er niveau : le IaaS
  • 2ème niveau : le PaaS
  • 3ème niveau : le SaaS

Comme le montre le schéma ci-dessus, les applications vont donc finalement se brancher sur un ou plusieurs de ces niveaux, de manière différente selon le besoin.

Pour expliciter l’affirmation du large choix en termes de niveaux, les présentateurs prennent l’exemple d’un site de musique créé avec ASP.net Core, avec trois solutions possibles pour héberger ce projet.

La 1ère solution est d’utiliser le premier niveau du schéma (le IaaS), c’est à dire utiliser une machine virtuelle pour héberger la base de données et le site. Bien que cette solution soit simple, elle n’est pas forcément pertinente ni flexible.

Capture d'écran 2016-03-20 18.36.43La 2ème solution est d’utiliser par exemple App Services (donc du PaaS, le deuxième niveau du schéma), pour héberger le code, et de coupler cela avec l’utilisation d’Azure SQL Database pour la partie base de données. Cette solution dispense de la gestion de l’infrastructure ou de la machine virtuelle. Ce choix permet aussi de disposer de fonctionnalités telles que la géoréplication de base de données, à travers un ensemble de datacenters définis dans le portail Azure (voir capture d’écran ci-contre), ce qui peut être un véritable atout si le site doit être hautement disponible à l’international.

La 3ème solution va encore plus loin, puisqu’il s’agit de découper son architecture en services (donc faire du SaaS, troisième et dernier niveau du schéma), par exemple avec la création d’une API qui pourra être consommée par le site ou par un site mobile. Cela permet de gagner en agilité et flexibilité. L’avantage côté hébergement est de pouvoir gérer chaque brique de façon autonome, de pouvoir adapter indépendamment les ressources selon le besoin.

Capture d'écran 2016-03-20 18.58.26Un dernier aspect pour encore gagner en indépendance, est d’utiliser des conteneurs Docker pour l’hébergement d’applications. Grâce au niveau d’abstraction qu’apporte Docker et au découpage de l’application en microservices, on va pouvoir associer un microservice à un conteneur Docker, qui va effectuer un certain nombre de tâches. On peut, en plus de cela, profiter de Docker Swarm, qui va permettre de gérer l’ensemble des conteneurs sur le cluster de machines comme si la machine était unique. En couplant Docker Swarm avec Azure Container Service, l’application profitera des avantages de Docker tout en étant disponible dans le cloud. Dans l’exemple proposé lors de la présentation, chaque image de conteneur hérite d’un même conteneur de base, qui est asp.net core clr et, ensuite, selon l’image, différents éléments vont construire l’application.

Finalement, avec la combinaison de Docker et de services comme Azure App Service, Azure SQL Database, Visual Studio Team Services, et Github, à chaque commit, une nouvelle image va être créée et déployée sur le hub Docker, et il suffira de signaler au cluster qu’il doit télécharger les images et les faire démarrer.

Azure Marketplace avec F5 Network

Le dernier sujet de la keynote concerne la sécurité. Microsoft va, là encore, proposer une de ses solutions, Azure Security Center, qui va permettre d’analyser la sécurité d’une solution Azure, de définir un certain nombre de stratégies, comme par exemple un firewall, fourni entre autre par F5 Network.
Capture d'écran 2016-03-20 19.05.12

Et c’est parti pour une démonstration de F5 Network, sur un site WordPress qui a pour première règle de ne pas pouvoir être disponible à tous sur le net. On veut donc tout d’abord sécuriser le site, fonctionnalité que F5 peut mettre à disposition via un système d’authentification. On peut également mettre en frontal un reverse proxy pour du loadbalancing, qui sera fourni par F5. Deuxième demande, laisser la tâche du chiffrement/déchiffrement à la charge du load balancer (f5) et non pas au serveur applicatif.

F5 va finalement permettre de faciliter la mise en place de différentes politiques de sécurité sur une application Azure, tout en fournissant nombre de fonctionnalités poussées pour optimiser cette sécurité.

L’atelier Xamarin

Suite à la keynote, j’ai choisi d’assister à l’atelier sur le thème de Xamarin, puisque c’est mon sujet de prédilection. Au programme, les nouveautés de Xamarin 4, présentées par Alexandre Popp, et un retour d’expérience d’un partenaire Xamarin, Betclic, présentée, entre autres, par Cyril Cathala, un expert .NET à Soat qui est intervenu sur ce projet.

Les nouveautés de Xamarin 4

Après un rapide rappel des principes de Xamarin, Alexandre Popp a choisi de mettre l’accent sur quatre points :

Xamarin.Forms :
Cette solution qui pousse encore plus loin le principe du partage de code dans une application cross-platform s’est dotée depuis quelques mois d’une nouvelle version. Elle apporte entre autre plus de stabilité et de meilleures performances (des aspects qui lui étaient souvent reprochés par le passé, notamment sur la plateforme Android).

Xamarin Test Cloud :
xamarin-test-cloud@2xComme Alexandre Popp l’a introduit durant la keynote, la création d’une application mobile ne se résume pas qu’au développement de celle-ci. En effet, pour s’assurer une bonne qualité de l’application, le moins de crashs possibles, et une disponibilité sur le plus d’appareils possibles, il faut passer par l’étape des tests. Et pas n’importe quels tests : les tests fonctionnels. Pour cela, Xamarin propose la plateforme Xamarin Test Cloud, qui s’intègre parfaitement à ses outils et aux environnements de développement utilisés pour une application Xamarin. Cette plateforme va fournir la possibilité de tester une application sur un très grand nombre d’appareils mis à disposition. Le grand avantage est que l’entreprise s’affranchit du coût d’achat de ces appareils, qui peuvent rapidement être élevés. De plus, ce parc d’appareils va être géré par Xamarin, et l’entreprise va pouvoir, de manière dynamique, choisir sur quels périphériques et aussi sur quelles versions des systèmes déployer l’application pour les tests.

Xamarin Insights :
Cette solution créée par Xamarin permet de récupérer des informations déclenchées par les interactions avec les utilisateurs, mais aussi les bugs dans une application mobile. Tout comme Xamarin Test Cloud, Xamarin Insights s’intègre très bien avec l’ensemble de l’environnement d’une application Xamarin, puisqu’il suffit de créer une app sur le portail dédié, ensuite d’installer un package Nuget, d’initialiser l’API (1 ligne de code), et ensuite le tour est joué, on peut rediriger les erreurs vers Xamarin Insights. Le portail permet ainsi de voir tout un ensemble d’informations concernant les éventuelles erreurs, mais aussi de coupler le projet à Visual Studio ou Github par exemple.

univeristy-logo_blue_horizontal1-1024x319Xamarin University :
Bien que l’avantage énorme de Xamarin réside dans le principe de ne pas avoir à réapprendre plusieurs langages pour réussir un projet mobile, il faut néanmoins savoir maîtriser les aspects différents de chaque plateforme, et quand on s’y penche de plus près, il y en a tout de même un nombre relativement important. Même si la documentation fournie par Xamarin est d’une excellente qualité, elle ne résout pas le problème dans tous les cas, et il faut donc explorer les sites d’entraide à la recherche de la solution native à adapter. Cette étape peut être fastidieuse et peut faire perdre un temps considérable sur un projet, et c’est pour palier à ça que Xamarin propose une formation complète et certifiante, grâce à Xamarin University.

Retour d’expérience pour Betclic

Après cette partie intéressante mais plutôt orientée business, il est temps de laisser place aux trois acteurs du projet Xamarin effectué au sein de Betclic.
En effet, suite à l’internalisation des applications mobiles iOS et Android, ils se sont rapidement rendu compte de la difficulté de maintenance, et ont décidé de repartir de zéro, en choisissant des bases adaptées à leurs besoins.
Les présentateurs proposent à l’auditoire de recenser dans un premier temps les différents choix techniques effectués au début du projet, ensuite de citer les difficultés techniques mais aussi les réussites, et enfin de terminer sur un bilan, un peu plus d’un an après avoir commencé ce projet.
Concernant les choix techniques, Betclic s’est évidemment tourné vers Xamarin, puisqu’au niveau des compétences techniques internes et des promesses de la technologie, cela leur est apparu comme le choix le plus logique. De plus, afin de faciliter les développements, ils ont pris le parti d’utiliser le framewok MVVM Cross, qui simplifie entre autre la mise en place du binding et dispose d’une bonne communauté.
En revanche, la possibilité d’utiliser Xamarin.Forms a vite été écartée, la technologie étant trop jeune (6 mois à l’époque), et ne correspondant pas au besoin d’avoir des vues complexes sur les plateformes.
Afin de partager le plus de code possible, l’équipe a choisi de s’appuyer sur les concepts d’héritage, d’IOC, ainsi qu’un socle commun.

Cependant, même si Xamarin permet de réutiliser les compétences C# des développeurs, l’équipe a néanmoins dû se former quelques semaines par le biais de Xamarin University ou encore de Pluralsight. C’est donc un petit, mais néanmoins premier blocage, mais qui leur a été réellement bénéfique par la suite puisque, une fois les connaissances acquises, il devient très facile d’avancer.

Au final, après 1 an de développement et la sortie il y a peu des applications iPhone et Android, ils ont pu établir différentes statistiques : le pourcentage de partage de code atteint environ 40%. Par rapport à la promesse de Xamarin, cela peut paraître peu, mais cela s’explique de deux façons : la part du design est très importante, pour respecter les guidelines de chaque plateforme et les besoins de Betclic. Egalement, le binding avec MVVMCross oblige sous iOS à un plus grand nombre de lignes de code. En effet sur le total de code, si 40% sont partagés, 34% sont pour la partie iOS, 16% pour Android et enfin 10% pour les tests.

L’équipe de développement ne regrette pas le choix de Xamarin et est confiante pour l’avenir de ses applications, dont la maintenance sera dorénavant simplifiée.
La présentation se termine avec un ensemble de conseils concernant l’utilisation d’une webview, ou encore pour avoir de bonnes performances au sein d’une application, ce dernier point étant primordial dans une application mobile, que ce soit sous iOS ou Android.

Le mot de la fin

IMG_4642En conclusion de cet article, ce fut une après-midi bien remplie, avec découvertes ou redécouvertes de technologies ou outils au rendez-vous, et en bonus une soirée Workshop avec en invité, Dark Vador et ses stormtroopers !

Nombre de vue : 187

AJOUTER UN COMMENTAIRE