Le Post Infeeny

Les articles des consultants et experts Infeeny

Archives Mensuelles: avril 2015

Build 2015 – Windows App Lifecycle from activation/suspension, background and multitasking

Session intéressante sur le cycle de vie des applications et les tâches de fond dans Windows 10. Pas besoin de connaitre déjà ces mécanismes pour voir cette session puisque le speaker explique ces éléments « from scratch ».

Le cycle de vie reprend celui de Windows 8 avec 3 états : Not running / Running / suspended

Dans windows 10, une application tournant en mode desktop est suspendue quand on la passe en « minimize »

La grosse nouveauté concernant le cycle de vie dans Windows 10 est le concept de « Extended Execution ». Une application peut demander un sursit pour by-passer la suspension (par défaut l’application a quelques secondes et elle est tuée si la suspension prend trop de temps). L’objectif est de permettre des traitements plus long à la suspension (enregistrement des données), ou de continuer l’execution (application de navigation GPS par exemple). Ce sursit peut être révoquée par le système en cours de route si il est nécessaire de libérer des ressources, un évènement est alors déclenché pour notifier l’application qu’elle va être quand même suspendue. Côté code, cela passe par la création d’un objet de session qu’on référence au niveau du système, et qui va porter la callback de révocation.

Pour les traitements en tâche de fond, le modèle est également celui de WinRT, avec des évènements déclencheurs (triggers) et des conditions. Il existe cependant plein de nouveaux types de triggers (ajout d’un appointment, d’un contact, device bluetooth demandant une connexion, capteurs, …). Une différence cependant est que les applications n’ont plus besoin d’être sur le lock screen pour certains déclencheurs comme le TimeTrigger (bonne nouvelle car c’est galère).

Parmis les choses intéressantes, de nouveaux triggers comme le ApplicationTrigger, ou des anciens comme le MaintenanceTrigger tournent maintenant en mode opportuniste, sans quota de ressources. Cependant, les tâches de fond de ce type ne fonctionnent que si les ressources sont disponibles. Autre nouveauté intéressante, le ApplicationTrigger, qui permet (enfin) de déclencher une tâche de fond depuis l’application. Très interessant dans les applis offline pour déclencher une première synchro, ou un traitement long.

On peut maintenant aussi avoir une tache de fond qui s’execute dans le même process que l’application.

Build 2015 – Project Oxford : Adding smart to applications

Project Oxford est une nouvelle fonctionnalité qui n’a pas été annoncée pendant la keynote. Elle fait partie de Azure, dans la famille du machine learning

C’est un set d’API REST basé sur du machine learning pour interagir avec des contenus multimedias
– traitement images (analyse, OCR, thumbnail intelligent, …)
– reconnaissance visages (detection, verification, identification)
– speech (Text To Speech, Speech To Text)
– LUIS (language understanding intelligent service, ex: traductions, détecter les intentions)

L’API semble simple d’utilisation, et la partie LUIS permet seule, ou combinée au speech, des scénarios métier assez intéressant pour pouvoir définir des commandes, un peu comme le fait Cortana.

Project Oxford est disponible en béta ici:
http://www.projectoxford.ai

Cela passe par la souscription et le portail azure donc il vous faudra obligatoirement un compte Azure pour pouvoir tester

[Build 2015] Guillaume et Benoît, Experts .Net MCNEXT, en live depuis la Build 2015 à San Francisco

Get ready ! Guillaume et Benoît, Experts .Net MCNEXT, en live depuis la Build 2015 à San Francisco.

Build 2015 Arrivée 29042015

#PASSBAC 2015 – Andrew Brust – Using Hadoop with Excel and Power Query

Andrew débute la première partie de sa session en présentant Hadoop.

On parle de Big Data lorsque le volume de données dépasse les centaines de To et va jusqu’au Po ou plus. Il s’agit de données transactionnelles énormes issues en grande partie : des données financières, de logs de site web, des réseaux sociaux, des objets connectés (IoT), des données mobiles, etc. Pour pouvoir traiter et analyser ces données, un système monolytique ne suffit plus, il est nécessaire d’adopter une architecture scalable afin de pouvoir effectuer des traitements en parallèle au travers différents serveurs en cluster. C’est le principe même d’Hadoop.

Les concepts principaux à connaître sur Hadoop sont

  1. HDFS : Hadoop distributed files system : c’est le système de fichiers qui détermine où et comment les données sont distribuées et stockées sur le cluster. Les données sont répliquées sur les différents nœuds du cluster, ce qui permet :
  • d’avoir une architecture haute disponibilité (si un nœud tombe => aucune perte de données)

Distributed File System : on where data gets distributed over commodity drives on commodity servers

  • de pouvoir effectuer des traitements en parallèle
  • d’ajouter simplement de la puissance de calcul en ajoutant de nouveaux nœuds au cluster (scale-out)
  1. Map Reduce : c’est l’opération qui permet de parser l’ensemble des données en parallèle pour n’extraire que celles dont vous avez besoin. Cette opération se décline en deux temps :
  • Map step : les données sont parsées en parallèle sur l’ensemble des nœuds du cluster
  • Reduce step : retourne toutes les données associé à la même clé et les agrège

Ces opérations se font en java.

  1. Schema-on-Read : lorsque vous traiter des données non structurées, le schéma est imposé lors de la requête et dépend du contexte par exemple :
  • Si vous scanner un livre, les valeurs à retournées sont-elles les mots, les lignes, les pages, les chapitres ?
  • Est-ce que la date et l’heure sont deux champs séparés ou bien un seul …

Pig et Hive sont les deux outils qui permettront d’effectuer cette interprétation de schéma à la volée.

Andrew continue ensuite par la présentation de la stack Hadoop V1 puis V2. Je ne m’attarderai quant à moi qu’à la V2.

HadoopStack

Je complète juste par quelques annotations sur les éléments les plus marquants de cette stack :

  • HDFS : Hadoop Distributed File System
  • YARN : ressource governor
  • HBASE : base de données avec stockage en colonne
  • Hive et Pig : couche d’abstraction permettant de faire du Map Reduce
  • SCOOP : utiliser pour l’import/export RDBMS bidirectionnel
  • Sparl SQL, Impala et Tez permettent de faire du SQL interactif
  • Lucine et SolR sont des moteurs de recherche
  • Sparl MLib et Mahout : permettent de faire du machine learning/ Data Mining
  • Spark Streaming, Storm et Kafka : sont utilisés pour le Streaming Data

Les différentes distributions d’Hadoop sont Cloudera, Hortonworks HDP, MapR, IBM InfoSphere, Pivotal HD et Microsoft HDInsight. Elles utilisent toutes le même noyau Hadoop décrit précédemment.

Microsoft HDInsight a été développé avec Hortonworks et permet d’avoir une distribution HDP sous Windows. Les spécificités de cette distribution sont :

  • Windows Azure HDInsight
  • Azure Blobs Storage
  • L’accessibilité via du PowerShell et des cmdlets HDInsights
  • Une interface web permettant d’exécuter des requêtes Hive et de monitorer des jobs

S’en vient alors les démos :

  • Mise en place du cluster sous Azure
    • Création d’un cluster HDInight via le portail MS Azure => cela se fait en quelques clics, en configurant soit même le type de plateforme souhaitée (nombre de nœud dans le cluster, la région, le type de vm (core CPU + mémoire), un username, l’accès en RDP, le stockage). Le cluster Hadoop est créé et accessible quelques minutes
    • Connexion au cluster HDP via l’interface Azure
    • Utilisation de la console HDIngith Query Console vous permettant d’exécuter des requêtes Hive
    • Revue des solutions proposées avec ou sans sample data)
  • Hadoop commands (cf. slide pris en photo sur tel)
  • Connexion au cluster hadoop en rdp via la console Azure,
    • ouverture d’une fenêtre de command hadoop et quelques exemples de commandes Hadoop
    • Création d’un job executant une requête hive
  • Récupération de données HDP via Excel
    • Via le driver ODBC
  • Pig est un combo entre un requêteur et un ETL, il permet de travailler avec des données structurées et non structurées. Andrew nous livre quelques exemples de requêtes Pig.
  • Démo Power Query sur une source de données HDFS
  • Power Bi 2.0
    • Pas de dépendance avec Office 365
    • Moins cher : freemium model, Pro version pour $10/user/month
    • Across platform experience (iOS, Android, Windows)
  • Démo Power BI Designer
    • Connexion à HD Insight via Power Query, quelques transformations, puis passage en mode reporting/dahsboarding sur Power BI Site
  • Démo Tableau
    • Connexion à HD Insight et exécution de la même requête
    • Travail sur les mêmes données….

Andrew n’a pas eu le temps de faire d’autre démo avec d’autres outils comme Qlik Sense ou Jaspersoft, peu importe, quel que soit l’outil utilisé, les données Hadoop sont très facilement utilisables et exploitables.

Il ne vous reste plus qu’à aller sur le site d’Hortonworks pour aller télécharger la sandbox et jouer avec. Ou bien aller directement sur Azure.

Resolving WinJS webcomponents attributes

Now that you know how to use WinJS as webcomponents, and how to declare your controls, we will talk about the mecanism for resolving attribute values.

Lets work with an example :

<win-listview id="recentItemsList" member 
	itemdatasource="list:ctrl:recentItemsPromise" 
	itemtemplate="select:#pictureItem" 
	iteminvoked="event:ctrl:recentListItemInvoked"></win-listview>

You could think of attribute resolution as

[what to do]:[where to look]:[string token]

If you look at the « itemdatasource » attribute, you could read it like this : get the « recentItemsPromise » property from parent control, and wrap it in a WinJS.Binding.List for the ListView.

In this example, « recentItemsPromise » is just a string, and « ctrl » and « list » are operators. The list operator is smart enougth to see that it received a promise, and await it to set value.

Operators are just functions referenced in the namespace WinJSContrib.Utils.ValueParsers. You could provide your own operators by adding them to this namespace.

When the attribute is resolved, you will endup with something equivalent to :

list(domelement, ctrl(domelement, "recentItemsPromise"));

As you can see, their is no complex parsing involved, it is very efficient, and enforce composition. You have no limit at the number of operators you can chain like this.

You could find the list and details about built-in operators in the API documentation.

#PASSBAC 2015 – Teresa Palmer Boroski – Instant dashboard for your critical business

Teresa nous montre les forces de Power BI au travers un panel de démo permettant d’éprouver :

  • La richesse des connecteurs Power BI
    • Exemple de dashboard sur Dynamics CRM, sur Google Analytics (un nouveau né) et Salesforce puis revue des autres connecteurs Excel workbook Power BI Designer File, Analysis Services, GitHub, Marketo, Dynamics Marketing, Salesforce, SendGrid et ZenDesk
  • La simplicité d’utilisation de l’outil
    • Au cours des différentes démos, nous avons pu voir :
      • Comment créer une connexion à une source de données
      • Comment créer un dataset
      • Comment créer des rapports
      • Comment créer des dashboards
      • Comment ajouter des éléments sur un dahboard issus de différents datasets
      • Comment rafraîchir les données (soit par l’intermédiaire d’une planification, soit à la demande)
      • Comment modifier l’apparence de son dashboard en disposant et en redimensionnant les éléments à la volée
      • L’utilisation du Q&A

Pour résumer cette session :

  • Les forces de l’outil :
    • De nombreux connecteurs
    • Permet aux utilisateurs de se connecter à leurs données sans savoir une plateforme analytique dédiée
    • La grande simplicité d’utilisation de l’outil
    • Richesse des graphes
    • Des mises à jour tous les mois
  • Les faiblesses sont quant à elles pointées par l’audience
    • Pas d’encapsulation possible sur un autre portail Web ou dans une application comme Dynamics
    • Pas d’autorefresh à l’ouverture, par conséquent, le rapport partagé expose les dernières données rafraîchies avec les credentials enregistrés au niveau des data sources et non ceux de l’utilisateur connecté
    • Pas de possibilité de passer des paramètres dans l’url
    • Pas de mode déconnecté
    • Pas de push mail, ni de data alerting

Il faut donc se tourner vers le support pour indiquer les fonctionnalités que vous voulez voir implémenter et se tenir au courant de celles délivrées chaque mois.

#PASSBAC 2015 – Jen Underwood – Best Practice Mobile Dashboard Design

Des décisions cruciales doivent être prises à tout moment, partout et sur n’importe quel appareil. Fournir des réponses immédiates à vos utilisateurs quand ils en ont le plus besoin peut se révéler être un véritable défi. Quand on sait que plus de 80% des employés utilisent déjà des appareils mobiles aussi bien dans leur cadre personnel que professionnel, il est désormais crucial de fournir à vos employés les informations nécessaires pour prendre les bonnes décisions au bon moment.

Dans cette session, Jen (http://www.jenunderwood.com) nous initie aux considérations à prendre en compte pour la mise en en œuvre d’un BYOD et nous fournis un ensemble de démos intéressantes sur Power BI et Datazen.

Quels sont les challenges de la BI mobile ?

  • Les différentes tailles d’écran des terminaux
  • Le manque de clavier physique
  • La navigation tactile

Quelles sont les questions à se poser ?

  • Quelles actions doivent être prises ?
  • Comment les utilisateurs vont utiliser les dashboards ?
  • Quels sont les terminaux qui seront utilisés pour visualiser les dashboards ?
  • Est-ce que les utilisateurs peuvent voir les évolutions, les tendances ou bien faire des comparaisons rapides ?
  • Est-ce que les utilisateurs peuvent personnaliser les dashboards pour recevoir/emmettre des alertes contextuelles ou proactives ?

Quelles sont les bonnes pratiques ?

  • Repensez le besoin, n’apporter que l’information essentielle
  • Concevez l’information afin qu’elle puisse être affichée sur les plus petits écrans
  • Adoptez une visualisation en mosaïque du haut vers le bas Créez des templates par terminaux
  • Utilisez des palettes de couleurs réduites
  • Vérifiez la disponibilité des polices sur vos différents terminaux (les tailles de polices les plus utilisées sont 9,12 et 15)
  • Utilisez des noms et des formats de données courts
  • Mettre en places des « one top actions » pour partager rapidement l’information (email, twitter, facebook, etc.)

La data visualisation est essentielle

  • Quelles significations ont les couleurs et les icones ?
  • N’oubliez pas de prendre en compte les daltoniens => faites un tour sur http://colorlab.wickline.org/colorblind/colorlab/
  • Le contexte social, l’identité, la motivation et la langue sont autant de facteurs à ne pas négliger.

Les erreurs de visualisation les plus communes :

  • L’utilisation de graphes camembert ou en 3-D modifie la perception de l’information
  • Trop d’informations affichées
  • L’utilisation de pattern de remplissage
  • Des axes inconsistants, un mauvais tri ou un mauvais placement
  • L’utilisation du count vs %

Il faut donc rester sobre, succinct, et ordonner l’affichage des données en fonction de leur priorité en choisissant le graphe le plus adapté en fonction de l’information à véhiculer.

Jen passe ensuite de la théorie à la mise en pratique par quelques démos effectuées sur Datazen avec une utilisation multi plateforme (sur PC sous win 8.1, sur IPad  et sur IPhone). La prise en main du Datazen Designer est simple et montre la capacité du produit à concevoir un même dashboard sur différents devices (PC, tablette, smartphone), définir des templates, de définir et d’utiliser ces propres maps, etc. Un produit qu’il faudra prendre en main rapidement, d’autant plus, qu’il est gratuit pour tous ceux possédant une licence SQL Server 2008 Enterprise et plus, avec ou sans software assurance.

Jen passe ensuite aux démos Power BI, toujours en Public Preview. A ce sujet, entre les sessions, j’ai pu discuter avec Kasper De Jongue afin d’avoir une éventuelle date de release de Power BI (Et oui, pour ma part je n’ai jamais connu de client partir sur une preview sauf pour des POCs, en règle générale ils attendent plutôt le SP1). Kasper m’a alors répondu que Google était resté en preview pendant plus de 10 ans sans que cela ne gêne personne. Il faudra donc faire avec et convaincre nos clients de la maturité du produit tout en jouant sur les update packs qui sont délivrés tous les mois et qui sont loin d’être des mises à jour correctives :

  • Apparition du Power BI Designer
  • Apparition de nouveaux connecteurs ces derniers mois Salesforce, Dynamics, SAP BO, Google Analytics,…
  • De nouveaux graphes (treemap, funnel chart, filled map, cluseterd combo, gauge) et de nouvelles fonctionnalités (gestion des relations many-to-many dans Power Pivot, de nouvelles transformations Power Query)
  • La possibilité de piloter Power BI via l’API
  • Un mode de licensing agressif par rapport à la concurrence

Je suis pour ma part plutôt convaincu par Power BI, mais il reste encore quelques points clés comme

  • avoir la main sur les palettes de couleurs
  • pouvoir embarquer des rapports/dashboards Power View dans Dynamics ou bien sur un portail SSRS natif ou bien n’importe quel site .Net par l’intermédiaire d’un viewer
  • la gestion des credentials pour certaines sources de données
  • permettre un mode déconnecté
  • intégrer SSRS, car pour l’instant c’est le seul qui sache faire du reporting opérationnel, une diffusion en masse pilotée par les données, et du data alerting

Merci à Jen pour cette session très enrichissante.

 

registering your WinJS webcomponents

In the last episode, we had a glimpse of using WinJS controls with webcomponents syntax, thanks to WinJS Contrib. Let’s dig a little deeper and see how you could use your own controls with it.

On platforms with non native implementation of webcomponents, the WinJS Contrib module is attaching an observer on each page controls (and releasing it on when disposing the page). This observer uses MutationObserver to track changes in the DOM and automatically build the WinJS controls that you registered. It means that controls, not on a page (like controls in default.html) are not instantiated. In such case, you must call « WinJSContrib.UI.WebComponents.inspect(element) » just like you would have to call WinJS.UI.processAll with vanilla WinJS.

Registering a control is just about providing the name of the DOM element, and how to map DOM attributes to your control implementation. If you don’t want to use DOM element attribute, you could still use data-win-options, or use both.

Declaring a control is quite easy. If you look in « winjscontrib.ui.webcomponents.js », you will find the declarations for WinJS controls. Lets look at the declaration for the DatePicker :

	WinJSContrib.UI.WebComponents.register('win-datepicker', WinJS.UI.DatePicker, {
		properties: ['calendar', 'datePattern', 'disabled', 'maxYear', 'minYear', 
				'monthPattern', 'yearPattern', 'onchange', 'current'],
		events : ['change']
	});	

You must call WinJSContrib.UI.WebComponents.register to wrap your control. You must at least provide the name of the DOM element, and the constructor for your control. The third argument is an object containing the mapping for your control. Within this object, the items in « properties » indicate the name of the properties that you want to map as attribute on the element, and « events » indicate the name of the events you want to map.

« properties » and « events » are shortcuts to build a mapping. You could provide a raw map if you have to do fancy stuf. Lets imagine that the calendar attribute used on DOM element must map to something like _calendarBuilder.calendar in your control. In such case you could use :

	WinJSContrib.UI.WebComponents.register('win-datepicker', WinJS.UI.DatePicker, {
		properties: ['datePattern', 'disabled', 'maxYear', 'minYear', 
				'monthPattern', 'yearPattern', 'onchange', 'current'],
		events : ['change'],
		map: {
			"CALENDAR" : {
				attribute : "calendar",
				property : "_calendarBuilder.calendar",
				type : "property",
				resolve : true
			},
			"CHANGE" : {
				attribute : "change",
				property : "_calendarBuilder.changeevent",
				type : "event",
				resolve : true
			}
		}
	});	

This syntax is more verbose but you have total control over the mapping. Note that the mapping key should be uppercase.

Another scenario that may come in mind is how do I map a fragment/page to a webcomponent ?

This is a lesser known feature of WinJS but WinJS.UI.Pages.define actually returns the constructor for the page, with the exact constructor signature of common WinJS controls (first parameters provides containing DOM element, and second parameter for control options).

To map a page/fragment to a component, you just have to pass the constructor. If you look at the searchbar control in the sample application, you will find an example that looks like this :

var SearchBarCtor = WinJS.UI.Pages.define("/controls/searchbar/searchbar.html", {
	//control implementation not mentionned here for brievity
});

//for use as standard control with data-win-control
WinJS.Namespace.define('Flickity.UI', { SearchBar: SearchBarCtor });

if (WinJSContrib.UI.WebComponents) {
   	WinJSContrib.UI.WebComponents.register('flickity-searchbar', SearchBarCtor);
}

The last use case we will cover now is for controls containing controls. Sometimes you write a control that wraps one or more other controls. You can map those controls directly to DOM attributes by using their own registration. WinJS Contrib has a control that wrap a SemanticZoom and the two associated ListView for managing list with groupings. The declaration for this control use that pattern :

WinJSContrib.UI.WebComponents.register('mcn-semanticlistviews', WinJSContrib.UI.SemanticListViews, {
	properties: [],
	controls: {
		"listview": WinJS.UI.ListView,
		"zoomedOutListview": WinJS.UI.ListView,
		"semanticZoom": WinJS.UI.SemanticZoom
	},
	map: {
		"DEFAULTGROUPLIMIT": { attribute: 'defaultGroupLimit', property: '_dataManager.defaultGroupLimit', resolve: true },
		"GROUPKIND": { attribute: 'groupKind', property: '_dataManager.groupKind', resolve: true },
		"FIELD": { attribute: 'field', property: '_dataManager.field', resolve: true },
		"ITEMS": { attribute: 'items', property: '_dataManager.items', resolve: true },
	}
});

The mapping can also have a « controls » section, which is used as a map. The key is the prefix for the control, and the value is the constructor for the control. When you register a control, the webcomponents module is creating a mapping and attach it to the constructor. That’s why you have nothing more to pass to map child control. However, the controls you are using as child map should have been declared before declaring this one.

The control can then be declared like this :

<mcn-semanticlistviews id="semanticzoom"
	listview.itemtemplate="select:#listItemTemplate"
	listview.groupheadertemplate="select:#groupItemTemplate"
	zoomedoutlistview.itemtemplate="select:#semanticItemTemplate"
	defaultGroupLimit="12"
	groupKind="global:WinJSContrib.UI.DataSources.Grouping.byField"
	field="metadata.genre"
	items="global:moviesSample">				
</mcn-semanticlistviews>

Next time we will have a look at the resolution of properties and detail the various options you have.

Using WinJS controls as webcomponents

WinJS Contrib goal is to makes WinJS development faster, and simplify common tasks. Last time we saw that WinJS contrib enables using JavaScript classes to define your pages, enabling ECMAScript 6 or Typescript in your applications.

This time we will talk about something that could radically change the way you write your pages. As stated previously, WinJS Contrib override core page control. This new control has the benefit of providing an extensible page lifecycle.

The code snippets in this post are coming from the sample applications we built to illustrate WinJS Contrib features. The first is from a vanilla WinJS application, and the other is from the exact same application with WinJS Contrib and webcomponents.

With vanilla WinJS, you declare controls like this:

<div id="recentItemsList" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ 
        itemTemplate : select('#pictureItem') 
    }"></div>

The control model in WinJS is very effective but this syntax for declaring controls is a bit ugly. It’s verbose, and the parsing of options does not allow extensions. In all WinJS samples, the list is bound to data in the options using a static variable. Believe me, it is really a bad practice. In some templates, you will find the data bound with syntax like this « select(‘.pagecontrol’).winControl.myData ». Despite the fact that this syntax is also ugly, in any real world application, you have to link some of your controls property to something coming from a promise. It can be http call, data stored in files, local database, etc. You end up writing code for wiring data and controls.

enter webcomponents !

WebComponents is a new paradigm, currently under discussion by W3C, to declare components as custom DOM elements. You can get details on this by looking at webcomponents.org. As the time of this writing, Webcomponents have native implementation in Blink (engine used in Chrome and Opera) and partial support in Firefox. No support in IE or Spartan yet.

Webcomponents is really a very promising spec, and almost all modern front-end framework uses this syntax. Unfortunately, WinJS does not…

WinJS Contrib has a new module, that enables using controls with a webcomponents syntax like this :

<win-listview id="recentItemsList" member 
    itemdatasource="list:ctrl:recentItemsPromise" 
    itemtemplate="select:#pictureItem" 
    iteminvoked="event:ctrl:recentListItemInvoked"></win-listview>

Using this also allow many improvements on the syntax. As you can see, some of the code that resides in the controller with vanilla WinJS now moved to the declaration of the control. The resolution of control properties can be extended and use the same mecanism we described previously for providing arguments to other WinJS Contrib helpers.

We will deep dive into this mecanism in another post, but to give you a sneek peak, this mecanism use operators to resolve the property. If we look at the « itemdatasource », the string « list:ctrl:recentItemsPromise » could be read as : get the recentItemsPromise property from the containing control, and wrap the result in a WinJS.Binding.List datasource. WinJS Contrib has several operators and you could add your own.

To use webcomponents in your application, you just have to include « winjscontrib.core.js » and « winjscontrib.ui.webcomponents.js ». The module is defining the components for most WinJS controls. It maps control’s properties as attributes on the DOM element. We haven’t tested them all with this new syntax. We would be pleased to get any feedback from you if you encounter troubles with it, or if we missed some properties.

This module use core webcomponents on platform supporting it, and a polyfill for the others. The polyfill uses « MutationObserver ». It means it will work on IE11 and above, so you can use it in your Windows 8.1 and Windows Phone 8.1 applications, and obviously on Windows 10. We haven’t fully tested on Android and iOS yet but it’s the next step, because we use WinJS in many cross platform applications.

In the next posts, we will detail the resolution of properties, and the way you could declare your controls to use webcomponents syntax. In the meantime, go check the sample application, and feel free to send us feedback.

WinJS and ES6

It’s time for a new episode about WinJS and WinJS Contrib ! this time we will talk about using ECMAScript 6 with WinJS and more specifically about using JavaScript classes.

With WinJS pages, you use object literal to define your pages, something like :

WinJS.UI.Pages.define('/pages/home/home.html', {    
    processed: function(element, option){ 
    },
    ready : function(element, options){
    }
});

WinJS will build a constructor for the page and add the content of the object literal as a mixin on that constructor. When the page is invoked, the constructor is used to produce a new object that hold those methods on its prototype. What is great is that you could call WinJS.UI.Pages.define multiple time on the same page, using some external mixin. This model is very interesting because you could work in the best possible way for a developper : composition.

This programming model has no limit in terms of what you can do, however it has some drawbacks. First, a lot of developpers are not JavaScript gurus. Using OO languages along with JavaScript, they are not familiar or comfortable with the concept of mixins and this syntax looks like some esotheric thing. It’s also a different programming model than the business logic where you may enforce something more « object oriented ». I know « object oriented » is not in the « pure » JavaScript paradigm, but that’s where JavaScript is going with things like ES6 classes.

The other problem with this syntax is about the tooling. More often than not, intellisense goes nuts and does not provide you any help about a variable you created in another function, 5 lines of code above.

Last but not least, the object literal makes things like ECMAScript 6 classes, or Typescript a hell to work with WinJS. This is really odd because : 1 – Typescript is from Microsoft and it does not fit well with their own UI/front-end framework, and 2 – if you play with Windows 10 preview and dev tools, you may have noticed that, if you create an universal app in JavaScript, you can use ES6 in your application. It has not been officially announced yet but it looks like Windows 10 UAP in HTML and JavaScript uses some form of EdgeHTML (the Spartan engine). It means that you can use all the ES6/HTML/CSS goodness that comes along with it, as well as the performance benefits.

So, how could you use JavaScript / ES6 / Typescript classes with WinJS ? in fact it is quite simple. Last time we looked at the basic features of WinJS Contrib, and more specifically the fact that WinJS Contrib override WinJS page control. Once you put WinJS Contrib, you could call WinJS.UI.Pages.define with a constructor instead of an object literal.

class HomePage{
    ready(element, options){
    }
}
WinJS.UI.Pages.define('/pages/home/home.html', HomePage);

If you start playing with ES6 or Typescript, you may also use some of the other ES6 features. One that could help you improve readability and reduce code is arrow functions. Arrow functions are anonymous function with a syntax identical to lambdas in C#. In addition to syntactic sugar, the arrow functions does not change scope. If you use arrow function instead of functions, the « this » scope is preserved, and you avoid writing tons of ugly code like « that = this ».

To demonstrate those features, we made an ES6 version of the demo application using JavaScript classes. This version is still a Windows 8 version transpiled using Babel, but if you want to have a lot a fun, you could bring it to a Windows 10 UAP (it’s just copying files) and drop Babel, it will work just fine and it is a wonderful playground to experiment with new features of HTML/Javascript in the new rendering engine in Windows 10.

If you want a more direct look, you could check the « searchbar » control that we used to illustrate WinJS Contrib basics on the previous post.