Lorsque j’ai découvert Felgo je suis très vite tombé amoureux !

C’était en 2016 et je travaillais sur un projet d’application mobile pour un client.
A cette époque j’utilisais Xamarin sous Visual Studio avec le puissant couple XAML/C# et l’immense librairie .Net de Microsoft !

Mais j’étais persuadé qu’il devait exister autre chose, sans doute aussi évolué mais plus simple… en fait je voulais une technologie qui réunisse les critères suivants :

  • Simple, efficace et très rapide pour le montage des IHM (c’était mon critère principal de départ !)
  • Capable de builder des binaires en cross-platform natif (au moins Android et iOS)
  • Robuste ! …Je m’explique : avec un langage de programmation POO moderne et répandu (genre C#, C++, Java etc.) et une librairie complète. Et non pas avec un framework plus ou moins dérivé du HTML/Javascript pour permettre aux développeurs web d’accéder au développement d’applis.
  • Avec une forte communauté (que je ne me retrouve pas bloqué seul dans mon coin en cas de pbm)
  • Avec un IDE complet, puissant et prêt à l’emploi (et non pas avec pas une myriades d’outils à installer et configurer avant de faire la moindre ligne de code)
  • Avec une documentation en ligne complète et regroupée à un seul endroit.
  • Evolutive (pas un nouveau projet technologique qui risque de tomber à l’eau au bout de 3 mois)
  • Avec un éditeur intégré à l’IDE et d’un niveau suffisant (coloration syntaxique réglable, IntelliSense etc.)
  • Etc…

Vous pensez peut-être que j’étais un peu trop exigeant !
En réalité je le suis toujours quand il s’agit de choisir avec quoi je vais coder du matin au soir (et du soir au matin parfois 😉 ).
Je reconnais que j’étais déjà bien satisfait du couple XAML/C#, sous Visual Studio avec le framework .Net et Xamarin Forms… Pourtant le montage d’une IHM de base, pour une petite application classique et modeste (mais jolie et moderne), était bien trop lourd à mon goût en raison notamment du XAML.
Je ne voulais pas non plus aller vers un « app maker »…  Ce genre d’outils est toujours limité d’une certaine manière, et ça ne correspond pas à ma philosophie de codeur passionné, je cherchais donc, en parallèle du démarrage de mon projet, quelque chose qui puisse m’étonner en réunissant les critères précités.

Et là, par le hasard des recherches web, je tombe sur Felgo !
Mais qu’est-ce donc ?
Il s’agit du framework d’une startup Autrichienne, qui semblait répondre à tous mes critères…
Toutefois, 3 points me préoccupaient (avant d’en avoir une vue précise) :

  • Felgo se présente comme une sorte de surcouche à un autre framework : Qt (prononcez « cute » en anglais ou « kioute » en français).
    Qt est une entité bien plus importante que la startup autrichienne mais dont je n’avais jamais entendu parler, je devais donc enquêter un peu sur ce Qt et sur ce tandem Felgo/Qt
  • Le langage de base de ce framework est le C++, et bien que sa qualité ne fasse aucun doute, j’aurai préféré un langage un plus moderne comme C# ou Java, qui soit un peu moins contraignant que le C++ pour des besoins modestes.
  • Le langage pour monter les interfaces dans Qt c’est le QML et là j’étais un peu mitigé par la présence du javascript comme langage d’accompagnement, car je ne l’appréciais pas du tout à l’époque (trop permissif et pas assez évolué).

Donc j’ai creusé un peu du côté du QML et là j’avoue que j’ai été très vite séduit par les 1ers exemples que j’ai vus.

Pour résumer le QML est un langage basé sur la syntaxe JSON, qui s’articule très bien dans l’esprit « orienté objet » et dont les valeurs et expressions se manipulent en Javascript.

Par exemple :

AppButton {
    text: "Valider"
    onClicked: {
        // code javascript...
    }
}

Et bien entendu comme tout élément avec une syntaxe JSON ça s’imbrique !
Exemple :

Rectangle {
    color: "#FF00FF"
    width: 100
    height: 50
    Text {
        text: "Hello world!"
        anchors.centerIn: parent
    }
}

La propriété anchors.centerIn permet de centrer un objet par rapport à un autre (ici le parent est donc l’objet Rectangle)

Du coup si on attribue une position en (x, y) à notre objet Rectangle :

Rectangle {
    x: 20
    y: 10
    color: "#FF00FF"
    width: 100
    height: 50
    Text {
        text: "Hello world!"
        anchors.centerIn: parent
    }
}

L’objet Text étant l’enfant de l’objet Rectangle, du coup celui-ci reste positionné dans le rectangle (même si on retire la propriété anchors.centerIn)

Le truc fondamental à bien comprendre, c’est que tout ce qui se trouve à droite des définitions de propriétés des objets QML, c.a.d. au-delà des « : », comme par exemple dans
text: « Hello world! »
et bien c’est en réalité du Javascript !
C’est évalué automatiquement par le moteur QML comme une expression Javascript 😊
« Hello world! » est donc tout simplement une chaîne de caractère Javascript.
Donc on peut attribuer au niveau de chaque propriété QML, une expression Javascript …mais aussi une fonction ou tout une portion de code, tant que ça renvoie une valeur !
Exemple :

AppButton {
    text: "Valider" + maVariable
    onClicked: {
        // code javascript...
    }
}

Ici la propriété text de l’objet AppButton va donc prendre pour valeur, la concaténation de la chaine de caractère « Valider » avec la valeur contenue dans la variable maVariable.

Et bien entendu, si j’ai une fonction Javascript, définie quelque part dans mon code, qui s’appelle maFonction() et qui renvoie une valeur, je peux très bien mettre ma propriété text de cette façon :

text: maFonction()

Voilà entre autres pourquoi j’adore le QML ! C’est simple, souple et ça respecte un certain standard…

Je précise 2 choses :

  • le moteur Javascript intégré au QML et embarqué dans la version 5 de Qt est le « ECMA-262 7th edition » – Il s’agit donc d’un vrai javascript complet et standard et pas d’une version édulcorée ou adaptée.
  • les habitué(e)s du Javascript auront peut-être remarqué l’absence de « ; » en terminaison des lignes dans mes exemples.
    Je rappelle qu’en javascript, contrairement au langage C par exemple, le retour ligne est synonyme de terminaison de ligne, le « ; » n’est donc obligatoire que lorsque l’on place plusieurs expressions sur la même ligne.

Je vous laisse découvrir cet étonnant framework, très complet, puissant, facile à apprendre, et qui permet de développer des applis bien plus rapidement qu’avec tout ce que j’ai pu voir passer avant !
Felgo.com

Une prochaine fois je vous parlerai des composants et outils, très judicieux, proposés par Felgo, en compléments de la librairie QT Quick, et qui font gagner un temps non négligeable pour développer de l’appli ou du jeu !

6 réponses pour “Le jour où j’ai découvert Felgo et le QML !”

  • Excellent website. Plenty of helpful info here. I am sending it to some buddies ans also sharing in delicious.

    And certainly, thanks in your sweat!

  • Long time supporter, and thought I’d drop a comment.

    Your wordpress site is very sleek – hope you don’t mind me asking what theme
    you’re using? (and don’t mind if I steal it?
    :P)

    I just launched my site –also built in wordpress like yours– but
    the theme slows (!) the site down quite a
    bit.

    In case you have a minute, you can find it by searching for « royal cbd » on Google (would appreciate any feedback) – it’s still in the works.

    Keep up the good work– and hope you all take care of yourself during the coronavirus
    scare!

  • fantastic put up, very informative. I ponder why the other specialists of this sector don’t notice this.
    You should proceed your writing. I am sure, you have a huge readers’ base already!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *