Singular

Un framework pour le développement multi-plateforme

Arnaud Tournier, le 27-01-2015

Singular

Présenté par Daniel Kurka, développeur de l’équipe GWT.

Singular est un nouveau framework facilitant le développement multiplateforme (web et mobiles), tout en garantissant les performances natives sur chaque plateforme ciblée.

AngularJs

La ressemblance du nom n’y est pas pour rien, la comparaison avec Angular sera évidente.

Singular s’inspire d’Angular et commence par analyser les points forts et les points faibles de son parent.

Les bons points

  • Productivité du développement, élimine le code boiler plate, c’est très sympa. Avec GWT, on est loin de cet état de fait.
  • Structure des applications : injections de dépendances
  • Testing, comment être bon sans faire de test ? En angular, c’est très facile.

Une application Todo

Daniel nous écrit le traditionnel hello world d’Angular, c’est à dire une Todo List. On joue avec les scope, etc… Il nous montre le data binding, les ng-directives, les ng-templates…

Les mauvais points

  • Les performances : Angular doit balayer le DOM pour trouver les directives. Ce mécanisme est suffisant pour des applications modestes, mais devient très inefficace et donc lent dès qu’il est mis à l’épreuve.
  • Le dirty-checking : c’est le mécanisme qui permet de surveiller les valeurs impliquées dans le Data binding pour mettre à jour les modèles et les UIs. Ceci ne tient pas la route pour une grosse application.
  • Injections de dépendances : n’est pas optimisable par le compilateur car effectuées dynamiquement à l’exécution.

Ces problèmes sont sérieux et nécessitent une réponse à la hauteur. Comment obtenir le meilleur sans le moins bon ?

Réponse apportées par Singular

  • Parser et traiter les directives à la compilation,
  • Traitement des scopes pour éviter le dirty checking,
  • Faire des téléchargements plus rapides, car plus petits, car optimisés.

C’est tout ceci Singular !!!

Singular sera sans concession en ce qui concerne les performances (tout sera fait à la compilation), fidèle à la devise de GWT : “Productivité pour les développeurs, performances pour les utilisateurs”.

Démonstration

Un bout de html pour décrire notre template Singular, une classe modèle en Java avec les annotations adéquates (@NgScope, …). Et c’est tout ! Singular fait le reste…

Voilà une vue Singular écrite en HTML. Cette vue sera analysée à la compilation pour générer le code de liaison des données avec le controleur. Notez la référence à sayHello() dans le noeud du bouton :

Une vue Singular

Et le contrôleur associé, écrit en Java :

Un contrôleur Singular écrit en Java

Le framework Singular génère automatiquement le code pour déclencher l’appel à la méthode sayHello(). Ce code sera bien plus optimisé qu’avec Angular qui effectue la génération du code de liaison à l’exécution…

Applaudissements quand Daniel tape sur son clavier et qu’une div est mise à jour en live…

Puis Daniel nous montre comment intégrer des controleurs Polymer (celui de Google Map en l’occurence). Daniel binde l’attribut correspondant au marqueur dans les cartes avec une check box et cela lui vaut à nouveau une bonne salve d’applaudissement.

A cette étape préliminaire, le code généré avec Gwt est déjà 4x plus petit que l’équivalent Angular/Javascript pur.

MVC, MVP : Modèle de programmation de Singular

Le modèle objet utilisé par Singular est très inspiré de celui d’Angular. Ce modèle permet conceptuellement la possibilité de définir ses UIs de façon indépendantes à la plateforme, pourquoi ne pas en profiter ?

Le modèle de Singular

Selon la plateforme, les outils natifs pour définir ses UIs sont :

Plateforme Outils
Web HTML/CSS
Android Fichiers XML
iOS UiBuilder

Les UIs étant développées indépendamment pour chaque plateforme avec les meilleurs outils disponibles, les performances seront donc au rendez-vous. Et heureusement, le code de la logique applicative peut être partagé sans problème entre les plateformes.

Multi-target

Dans le même projet, Daniel nous montre le code XML définissant les vues Android (tout à fait classiques pour les développeur sous cet OS mis à part quelques attributs du style “tools:bind-text”). Daniel lance (avec IntelliJ) l’application ToDo list mais cette fois sur Android (avec le même code pour la logique applicative).

Donc à ce point, nous avons un code Java, des vues HTML et des vues Android. Le tout se compilant à volonté en appli Web classique ou bien en appli native Android, super !

Convergence des APIs pour les multi-plateformes

Toutes les plateformes partagent un bon nombre de fonctionnalités mais ne sont évidemment pas accessibles de la même façon. Représentons nous le problème : le Web se code en JavaScript, Android en Java et iOS en Objective-C, comment unifier tout cela ?

Voici quelques exemples de fonctionnalités accessibles sur toutes les plateformes :

  • HTTP, socket,
  • Storage, File system,
  • Location, Camera, …

Ce problème est déjà réglé par PhoneGap. Une seule API javascript sera convertie vers le pendant natif de chaque plateforme. Donc pour avoir une API cross plateforme, il suffit d’extraire le coeur de PhoneGap. C’est ce qui a été fait pour construire Singular !

Ecrire des UI natives

Singular fournit les APIs nécessaires pour intégrer les UIs natives à la logique applicative. Voici la “glue” proposée :

On nous montre les deux façons (HTML et Android) d’écrire des interfaces graphiques prêts à être bindées par Singular à la logique métier.

Voici une illustration de l’implémentation “Web” de l’UI :

Côté Android, ceux qui code pour cet OS seront en terrain familier…

On reconnait l’avantage d’un chemin de migration facile pour des développeurs Gwt qui veulent écrire des applications natives.

Les tests

De par son architecture, les tests sont aisés avec Singular – si l’on se cantonne aux tests ne portant pas sur la partie UI. En effet la logique métier est écrite en pur Java, donc l’utilisation de JUnit est facile et performante. Il est aussi possible d’utiliser les outils de mock, etc…

En résumé

Angular Js est remarquable pour de nombreuses raisons (productivité, tests, etc), mais il a aussi ses défauts, notamment côté performances.

Singular peut être vu comme une implémentation Java d’Angular, optimisée à la compilation, sans aucun mécanisme de dirty checking (Angular fait grand usage des timers et de parcours d’objets pour détecter les changements dans les modèles, ce qui pose des problèmes de performances pour de grosses applications).

Les controlleurs sont partagés entre les plateformes, accroissant la productivité, facilitant les tests. Tandis que la partie UI est écrite en utilisant les outils natifs de chaque plateforme cible, ce qui apporte d’excellentes performances notamment sur les OS mobiles.

Questions

Calendrier de sortie ?

Pour l’instant aucune sortie officielle n’est planifiée. Probablement en terme de semaines.

Lien avec Inbox

Inbox n’utilise pas Singular. Même si des problématiques et des réponses sont partagées, Singular essaye plutôt de s’orienter vers une API unique pour toutes les plateformes graphiques, c’est sa valeur ajoutée.

L’aspect compilation multiplateforme se situe en dessous de ces problématiques. Inbox, Google Spreadsheet et Angular y répondent de la même façon mais chacun de leur côté.

Internationalisation

Pas prévu ni réfléchi pour le moment…


Arnaud Tournier, le 27-01-2015