Developpez.com - Rubrique JavaScript

Le Club des Développeurs et IT Pro

Granular : utilisez la puissance de WPF dans votre navigateur

Avec cette ré implémentation compilée en JavaScript

Le 2015-11-02 17:14:25, par vermine, Expert éminent sénior
Granular : utilisez la puissance de WPF dans votre navigateur
avec cette réimplémentation compilée en JavaScript

Granular est une réimplémentation de WPF, Windows Presentation Foundation. Ce dernier fournit aux développeurs un modèle de programmation unifié pour la construction moderne d'applications bureautiques sur Windows.

Granular est compilé en JavaScript, ce qui permet aux applications WPF de fonctionner dans le navigateur en utilisant le compilateur JavaScript Saltarelle C#).



Mais pourquoi faire cela ?

WPF peut être considéré comme une définition, pas uniquement comme une implémentation. Il définit plusieurs concepts avancés de l'interface utilisateur (tels que les arbres visuels/logiques, la mise en page, les événements routés, les ressources, etc.).
Il supporte bien entendu les modèles MVVM et les autres modèles d'interface utilisateur. Granular permet de profiter de tout cela dans le Web.

Sur le site de présentation, l'auteur donne pour exemple un projet réalisé en WPF et le même projet réalisé avec Granular. Le résultat est identique (bien entendu, ça peut varier légèrement selon le navigateur Web utilisé) :




Le rendu est donc le plus similaire possible.

Le principal avantage de cette approche est que le développement et les tests sont effectués uniquement dans Visual Studio, loin de n'importe quel navigateur ou débogueur JavaScript. De plus, il est inutile de manier le code HTML/CSS et les frameworks JavaScript à la mode. Granular reproduit l'API WPF, ce qui rend le processus de développement entier beaucoup plus propre et plus rapide.

Voici quelques caractéristiques :

  • le support de xamls, du binding, des animations, etc. ;
  • l'implémentation de contrôles comme les boutons, les checkbox, les scrollbar, le champ password et bien d'autres ;
  • l'utilisation de templates et de style / mise en forme ;
  • l'interaction avec la souris et le clavier ;
  • etc.


En pratique, l'outil peut être séparé en deux parties. La première concerne la présentation. C'est le maintien d'un arbre visuel avec des propriétés de dépendances, des événements routés, des animations, etc. La seconde concerne ce que l'on appelle le host. C'est un moteur d'affichage minimaliste et une source d'événements dits bruts. La partie présentation interagit avec la partie host de la même manière que le fait WPF (des messages MilCore, DirectX et WndProc).

L'outil est toujours en développement et tous les retours de tests sont appréciés.

Démonstration.
Le site officiel.

Et vous ?

Que pensez-vous de cet outil ?
Utilisez-vous WPF ou bien un outil similaire (si oui lequel) ?
  Discussion forum
7 commentaires
  • codec_abc
    Membre confirmé
    Aucun intérêt de mon point de vue.
    Comme dit plus haut les performances sont mauvaises. Il me faut 4 secondes pour exécuter le code js (qui freeze la page en attendant) ce qui est inacceptable d'un point de vue utilisateur.
    De plus, pour avoir touché à différents techno d'IHMs et notamment au XAML/WPF je trouve que c'est celle-ci qui est la plus pénible. Par contre, Blend étant assez mauvais et Visual pas toujours très utile pour le débogage de binding peut-être qu'il est possible de tirer partie que la plupart des navigateurs soient des IDEs dans une certaine mesures.
  • air-dex
    Membre expert
    L'idée est excellente et mériterait d'être plus souvent exploitée. Je pense qu'il y a de vrais progrès à faire dans la création d'interfaces Web en général. HTML et CSS imposent leur vision de la conception d'interfaces Web et c'est marche ou crève. Soit tu marches avec eux, soit tu meurs au front (badum tsss!). HTML n'est qu'un sac à composants bas niveau et CSS agence tout ça, et sans forcément distinguer l'agencement de ces composants et leur look and feel. Le Web manque de technologies proposant des méthodes alternatives et de haut niveau pour construire des interfaces Web. React et Bootstrap feraient de bonnes bases pour la création de composants et de layouts plus haut niveau facilitant la création d'interfaces Web. Il ne resterait plus alors qu'à créer une technologie purement dédiée au look and feel qui viendrait en complément. Celui qui créera au moins un framework d'interface Web basé sur React, Bootstrap et une techno Web pour du look and feel (pourquoi pas LESS ou SASS ?) aura tout compris.

    Bref il est grand temps d'amener la conception classique d'interfaces de logiciels "à la GTK+" ou "à la Qt" sur le Web, plutôt que de tout vouloir coder à base de <span> et autres <div> pour ensuite mettre indifféremment tout le reste dans le CSS (layout de la page et look and feel). Il est temps de porter les langages d'interfaces graphique sur les navigateurs. Granular fait un pas en ce sens et je ne peux qu'apprécier. On crée bien des technos au dessus de JavaScript, comme CoffeeScript et TypeScript voire Dart (via dart2js), pour nous faciliter la tâche. Pourquoi ne le ferait-on pas avec HTML et CSS ?
  • dfiad77pro
    Membre expérimenté
    Une très bonne initiative,
    cependant les performances sont mauvaises pour le moment sur des animations simples,
    sur des grosses applications ça risque de faire mal,
    mais bravo, c'est pas simple à développer !

    A voir aussi comment se comportera l'application niveau sécurité et communication serveur.

    D'autre par la fréquence de DEV est faible ( dernier commit il y'a 23 jours), 1 seul contributeur, c'est pas facile de sortir un framework robuste avec si peu de monde.

    J'ai toujours eu une préférence pour les clients lourds coté UI,
    on à vraiment l'impression d'utiliser un logiciel (un peu un effet placebo).
  • Issam
    Membre confirmé
    pas simple la tache , mais bravo quand même .

    c'est un travail énorme que de porter WPF en HTML/js , et c'est ce que Microsoft aurait du/pu faire

    un autre projet du même type
    http://cshtml5.com/

    mais ça reste encore assez loin .
  • tomlev
    Rédacteur/Modérateur
    Enorme !

    C'est une super idée, je vais regarder ça de plus près.

    Au passage, si quelqu'un a réussi à faire ça en JS, je ne vois pas ce qui empêcherait de faire un portage de WPF vers Linux ou OS X
  • psychadelic
    Expert confirmé
    wahoo!
    mais quelle idée étrange ?

    une sorte de cuisine pour interpréter WPF en HTML !
    c'est à dire rajouter une couche logicielle sur une couche logiciel...
    * pourquoi pas, mais ça me semble tout de même un peu délirant

    Enfi peut être qu'un jour on va voir apparaitre un interpréteur WPF => HTML5, histoire de porter l'utilisation d' applis c# sur un browser.. ???
  • hotcryx
    Membre extrêmement actif