Créer des application Mac, Windows, Linux, IOS et Android avec du HTML, CSS et JS !

Vous avez toujours eu envie de créer une application bureau ou une application Mobile, mais les seuls langages que vous connaissez sont le Javascript, le HTML et le CSS ? Réjouissez-vous ! Il existe maintenant de nombreuses solutions pour réaliser votre rêve tout en restant dans vos langages de conforts.

Créer une application bureau en HTML, CSS3 et Javascript

Portables sur toutes les plateformes, accessible sans installation et aux mises à jour automatiques, les applications Web ont de nombreux avantages mais gardent aussi un défaut majeur : il est impossible d'accéder au disque de l'utilisateur depuis un navigateur (pour des raisons de sécurités évidentes).

Ce simple défaut fait que les applications bureau restent parfois le point de passage obliger pour certains besoins. Comment faire si vous vous retrouvez dans ce cas, mais que vous ne connaissez que les techniques Web ? Utiliser une des solutions presentee dans cet article !

NW.js

NW (pour Node-webkit) est un moyen de faire tourner Node js dans le moteur Webkit (quelle surprise). 

L'intérêt de cette technique est que tous les modules de Node sont accessibles depuis le node, et qu'il est donc possible de créer des applications demandant à la fois un accès au disque ET un accès à internet, et donc de créer des applications bureau complètes !

NW est portable sur Linux, Mac et Windows, ainsi que sur Chrome Apps (donc sur Chrome OS), et sa documentation est vraiment bien faite. C'est vraiment le choix que je vous recommande.

Electron

Electron peut passer pour un fork de NW js, mais est en réalité plus une récriture complète du projet par le team de Github. Son rôle premier était de permettre la création de l'éditeur de texte Atom, mais le projet a bien grandi et est maintenant une vraie solution multiplate-forme pour la création d'application bureau.

Plus recent que NW, il y a aussi moins de projets l'utilisant que ce dernier actuellement. Son gros point positif reste néanmoins Github, mastodonte qui lui assure un suivi sans failles.

UGUI

UGui est plus un framework basé sur NW qu'une solution en lui-même, mais les ajouts qu'il fait à ce dernier fait qu'il se démarque tout de même.

En plus d'un framework CSS vous permettant de créer une application au look "bureau" très simplement ainsi que de nombreuses fonctions Javascript permettant de simplifier le travail sur NWWjs, UGUI vous permet de générer automatiquement une interface pour tous vos programmes en ligne de commande.

Appjs

Appjs est un framework semblable aux trois proposes plus haut, a l'énorme différence près qu'il n'est plus maintenu ! Ne tombez donc pas dans ce piège, et choisissez donc une des solutions presentee plus haut !

Des framework CSS pour les applications bureaux ?

Il n'existe pas beaucoup de Framework au look "Applications bureaux" pour l'instant malheureusement, je n'en ai que deux à vous proposer.

Photon

React Desktop

Créer une application mobile

Pour ce qui est du mobile, le choix de la technologie a employé est un peu plus simple : après avoir fait quelques recherches, je n'ai trouvé qu'une seule solution gratuite et dont le développement ainsi que la licence open source m'ont semblé pérennes : Phone Gap

PhoneGap

PhoneGap est un framework Open source permettant de créer des applications Mobiles (de vraies applications, que vous pourrez proposer au téléchargement dans les stores mobiles) avec les techniques Web que nous connaissons tous : Javascript, HTML et CSS3. Contrairement aux applications bureau, pas besoin de Node js ! En revanche, si vous souhaitez mettre en place des fonctionnalités connectées sur votre application, une partie serveur sera nécessaire pour votre application.

 

PhoneGap et Cordova, quelle differences ?

En quelques mots, PhoneGap est une version de Cordova possèdant des liaisons à d'autres projets Adobe, ainsi que de potentiels morceaux de codes sous licence propriétaire (ce n'est pas le cas actuellement, mais rien ne l'empêche).

Il existe pas mal d'endroits sur internet ou les choses ne sont vraiment pas claires sur la relation entre PhoneGap et le projet Cordova, et ce car la situation n'est pas des plus simples à comprendre ! 

PhoneGap est un projet Open source créé par Adobe. En 2011, Adobe à donne PhoneGap a la fondation Apache sous le nom Cordova, de façon à ce que le projet soit open source sur le long terme, et que la contribution soit plus simple pour des entreprises concurrentes.

Adobe a néanmoins continué à travailler sur PhoneGap (sous ce nom) de manière open source, et donc continuer à faire évoluer le projet Cordova en parallèle.

Maintenant, PhoneGap est basé sur Apache Cordova, un peu comme Google Chrome et Safari sont basés sur le moteur de rendu Webkit.

Quels frameworks HTML et CSS utiliser pour construire l'application ?

Il existe de très nombreux frameworks complets pour applications mobilent, et la plupart sont de très bonne qualité. Je vais néanmoins limiter mon listeau deux que j'affectionne le plus.

Foundation for Apps

Fondation est un framework basé sur Angular. Il vous fournira une base solide pour créer vos application sans avoir à choisir les libraries Javascript à utiliser (router, templates, …).

Ionic

Ionic n'est pas réellement un Framework, mais plus une collection très complète d'éléments nécessaire à toutes interfaces mobiles. Ici, vos etes libres de choisir vos techniques Javascript et de les intégrer vous-même !