Posts taggés css

Retour d’expérience d’un projet basé sur Apache Cordova + AngularJS + Angular Material

0

Contexte du projet

Dans le cadre d’un projet de recherche et développement, nous avons été amenés à réaliser une application mobile qui vient compléter un site web déjà existant et qui contribue au partage des bonnes trouvailles du web. Les systèmes d’exploitation ciblés étaient Android et IOS, aussi bien sur smartphones que sur tablettes. Le temps imparti au développement de celle-ci était limité mais sans contrainte particulaire sur les technologies à utiliser.

 

Orientation technique

Notre choix technique c’est porté sur :

Apache Cordova

Apache Cordova est un Framework open-source développé par la Fondation Apache. Il permet de créer des applications mobiles cross-plateformes en HTML, CSS et JavaScript pour la plupart des OS du marché (Android, Amazon Fire OS, Bada, Blackberry10, Firefox OS, IOS, Ubuntu, Windows Phone 8, Windows 8, Tizen), tout en bénéficiant des fonctionnalités natives des appareils (localisation GPS, appareil photo, contacts, etc). Les applications qui en résultent sont dites « hybrides », ce qui signifie qu’elles ne sont pas vraiment natives, ni purement basées sur les langages HTML, CSS et Javascript.

 

L’adoption d’une plateforme hybride pour la conception de l’application mobile au détriment du développement natif s’est justifiée principalement pour des raisons de timing. En effet les développeurs affectés à cette tâche n’avaient que très peu d’expérience dans les langages de programmations spécifique à chaque plateformes mobiles (Objective-C, Java, C#, etc) et avec une deadline à respecter.

AngularJS

Développé par Google, AngularJS est un Framework JavaScript MVW (Model View Whatever) très puissant, riche en fonctionnalité, libre et open-source. Il est fondé sur l’extension du langage HTML par de nouvelles balises et attributs, ce qui va nous permettre de créer une application web. Il est basé sur le patron de conception MVC (Modèle, Vue, Contrôleur).

Voici quelques aspects d’AngularJs qui nous ont poussés à l’utiliser :

  • Architecture du projet : le code est modulaire et structurer grâce notamment à un ensemble de vues conceptuels : Template, Directives, Model, Scope, Module, Injection de dépendance, …
  • Data-binding bidirectionnel : les modèles et les vues se mettent à jour automatiquement dès lors qu’une modification sur un objet, auxquelles elles sont liées, survient.
  • Directives : une directive permet de créer de nouveaux éléments (attributs HTML) que l’on va pouvoir utiliser directement dans nos vue. Cale permet de factoriser du code et de faciliter la ré-utilisabilité des composants. Autre aspect positif, nos vues ne contiennent que du HTML.
  • Il existe une multitude de modules Angular disponible pouvant enrichir une application.

Angular Material

Angular Material est une librairie développer par Google et conçu pour les développeurs qui utilisent AngularJS. Ce projet fournit un ensemble de composants (menus, interfaces) et de fonctionnalités qui sont propre à une application mobile (exemple : le slide pour faire apparaître un menu, etc). Il est très facile à prendre en main et suffit amplement pour de petites applications.

 

Utilisation

Il existe une multitude de tutoriel sur comment développer en AngularJs ou Cordova, donc ce que je vous propose, c’est une petit récapitulatif sur les problèmes auxquels nous avons été confrontés tout au long du projet.

 

Dès le début du projet, nous avons été confrontés à un problème de taille : gérer l’ordre d’instanciation afin de ne charger les classes JavaScripts qu’après l’initialisation d’Apache Cordova.

 

Pour ce faire nous avons utilisé la librairie « RequireJs » (site officiel).

Au sein de notre application, nous avons créé un fichier « autoload.js » qui fait appel à la méthode « require() » qui comporte deux paramètres :

  • le premier étant un tableau contenant la liste des fichiers à instancier (on y placera la déclaration de nos contrôleurs, services, directives, filtres, helpers, …)
  • le second étant une fonction. C’est dans celle-ci qu’on va pouvoir déterminer les actions à mener. Dans notre car instancier Angular et la base de données seulement après que Cordova le soit.
    • On va pouvoir déterminer que Cordova a bien été initialisé grâce à la méthode :

 

1

 

Ce fichier « autoload.js » que l’on vient de créer doit bien évidement être charger sur la page HTML (fichier index.html), après avoir déclaré toutes les librairies nécessaires au bon fonctionnement de l’application (Cordova, AngularJs, Angular Material, jQuery, …).

 

Pendant la phase de développement, nous avons utilisé le simulateur de l’IDE (Telerik App Builder), mais lorsque nous déployer notre application sur un téléphone, le résultat obtenu ne correspondait pas du tout au rendu sur le simulateur. Et pour cause, la connexion à la base de données locale ne s’effectue pas de la même façon.

Pour gérer la connexion à la base de données sur un vrai appareil, nous utilisons le plugin Cordova: « sqlitePlugin ».

Ce qui permet de faire la différence avec le simulateur, c’est en se basant sur l’identifiant unique de l’appareil utilisé. En effet, chaque appareil à un identifiant qui lui est propre.

 

Voici un exemple de connexion à la base de données :

2

 

La dernière partie concerne l’intégration avec l’utilisation d’Angular Material. Il faut savoir que les toutes les versions d’Android ne sont malheureusement pas compatible, en effet seules les versions supérieurs ou égale à la 4.4 le sont. Il faudra utiliser d’autres librairies pour assurer la rétrocompatibilité des styles sur les anciennes plateformes.

 

Liens

Apache Cordova :

AngularJs :

Angular Material :

RequireJs :

 

1

2

3

sublimeBracketsAtom_2

SUBLIME TEXT vs BRACKETS vs ATOM : 3 IDE pour les intégrateurs passés au crible

4

 

En matière d’outils pour le développement web, un large choix d’éditeurs de texte s’offre aux intégrateurs. Faisons ici un petit comparatif de trois IDE qui méritent d’être connus, si ce n’est pas encore le cas, par les intégrateurs.

 

Ces trois IDE ont communément des fonctionnalités de base telles que la coloration syntaxique, l’auto-complétion et la numérotation des lignes, toutes utiles pour faciliter tout travail d’intégration. Voyons maintenant ce qui les différencie.

Sublime Text

Sublime Text a acquis progressivement une renommée significative et est l’un des éditeurs les plus populaires depuis sa sortie en 2008.

Sublime Text est développé avec le langage de programmation Python.

Rapide et stable, il se lance en un rien de temps et ne ralentit pas, même avec  une installation importante d’extensions ou encore avec l’ouverture de plusieurs fichiers.

L’outil se caractérise également par une interface sobre et élégante.

Il est disponible sur tous les systèmes d’exploitation (OS, Linux et Windows), ce qui permet de le standardiser dans une équipe multiplateforme.

 

Principaux avantages

  • La navigation/recherche au travers d’un ensemble de fichiers (ex : trouver un morceau de code)
  • Sélection multiple (ex : faire plusieurs modifications en une fois)
  • Mode d’affichage multiple
  • Une colonne à droite permettant  de se repérer sur la page
  • Choix et création d’une multitude de raccourcis
  • Un nombre très important de plugins et une belle sélection de thèmes
  • Une palette de commande permettant d’accéder à de nombreuses fonctionnalités, snippets (configurer les préférences, insérer des portions ou des structures de code)
  • Une API bien documentée pour les développeurs de plugins

 

Inconvénients

  • Il n’est pas gratuit. On peut toutefois l’utiliser sans licence avec l’affichage régulier d’une popup de notification demandant de passer à la version payante.

 

sublimetext1

Palette de commandes composée d’une liste importante d’outils intéressants 

(insertion de snippets, renommer un fichier, configurer les préférences, etc.)

 

sublimetext2

Sélection multiple

 

sublimetext3

Navigation entre les fichiers d’un projet

 

sublimetext4

Proposition d’attributs CSS

 

Quelques plugins pratiques 

  • Package Control : indispensable, il s’agit d’une extension permettant d’installer des plugins. Une fois installée, il suffit d’ouvrir le panneau de commande et de sélectionner « install package » pour avoir accès à la liste de la majorité des plugins de Sublime Text.
  • Emmet : l’ancien Zen coding, assure un gain de temps dans l’écriture du HTML
  • CSSLint : signale les erreurs CSS
  • SCSS : permet de gérer les fichiers SCSS
  • Color Highlighter : au clic sur le code hexadécimal, la couleur correspondante apparait
  • ColorPicker
  • Live Reload : rafraichit le navigateur dès que l’on modifie un fichier
  • JavaScriptNext : permet d’obtenir une meilleure coloration syntaxique du Javascript
  • JsHint : permet de détecter des problèmes ou des erreurs potentielles en Javascript

 

Brackets

Créé par Adobe, Brackets est un éditeur écrit en HTML, CSS et Javascript qui a la particularité d’intégrer des outils visuels directement dans son interface (on peut y importer le PSD d’une maquette). Brackets est spécialement pensé pour le développement web, particulièrement le front. L’interface reste dans la lignée des autres logiciels d’Adobe.

 

Principaux avantages

  • Édition rapide : Brackets permet d’éditer les styles directement dans le fichier HTML, évitant ainsi d’ouvrir plusieurs fichiers liés et de passer continuellement des uns aux autres.
  • Aperçu en direct : cette fonctionnalité ouvre un aperçu du fichier HTML dans le navigateur puis le met à jour instantanément dès que l’on modifie le code (HTML ou CSS).
  • Les fichiers JS par contre sont en revanche automatiquement chargés après enregistrement.
  • Aide sur les attributs CSS avec la proposition des différentes valeurs possibles
  • Support des préprocesseurs Less et Sass
  • Intégration native de JSHint : A l’ouverture d’un fichier JS, un petit panneau s’affiche juste en-dessous avec les erreurs Javascript associées.
  • Grande sélection de thèmes et de plugins
  • Prévisualiseur natif d’images et de couleurs
  • Colorpicker natif
  • Éditeur de courbes de Bézier pour configurer une animation
  • Intégration d’Adobe Extract (outil permettant d’ouvrir un PSD en ligne) : des informations CSS sont fournies sur les éléments graphiques
  • API bien documentée
  • Multiple choix de langues

 

Les mises à jour et l’ajout de nouvelles extensions se font toutes les 3/4 semaines.

 

Inconvénients

  • L’aperçu en direct ne fonctionne qu’avec Chrome. Le plugin LiveReload permet toutefois d’obtenir l’équivalent sur Firefox ou Safari.

 

brackets1

Edition rapide du CSS  directement dans le fichier HTML

 

brackets2

Prévisualiseur/éditeur de couleur intégré

 

brackets3

Intégration d’un PSD dans Brackets avec des informations sur certains styles CSS correspondants

 

Quelques plugins pratiques

  • Le très pratique Emmet : génère du code HTML et CSS en utilisant seulement des abréviations
  • LiveReload (vu précédemment)
  • Beautify : propose une indentation du code utile pour une meilleure lisibilité
  • Image Dimension Extractor : renseigne sur la taille des images dans le CSS
  • Todo : outil qui permet d’ajouter des notes ou commentaires pour soi ou pour les autres

 

Atom

Atom, sorti en 2014, est un produit open source créé par l’équipe de Github. Atom est construit à partir de technologies Web telles que le HTML, le CSS et le JavaScript.

Il ressemble beaucoup à Sublime Text tant visuellement que fonctionnellement, mais se veut être un éditeur totalement flexible et personnalisable.

 

Principaux avantages 

  • Éditeur multiplateforme
  • Mode d’affichage multiple
  • Sélection multiple
  • Librairie de nombreux outils (thèmes, plugins) à disposition
  • LiveReload natif
  • Aperçu en direct du résultat du HTML (mais pas du CSS)
  • Intégration de Git et GitHub
  • Utilisation d’une grande partie des raccourcis de Sublime Text
  • Documentation très fournie

 

Inconvénients

  • Actuellement, l’équipe Github n’a pas comme projet de mettre à disposition d’autres logiciels de gestion de versions sur Atom. De plus, la configuration d’Atom permet difficilement de pouvoir développer des plugins à cet effet.

 

atom1

Aperçu en direct du HTML

 

atom2

La palette de commande façon Atom

 

atom3

Mode d’affichage multiple. Librairie d’outils native pratique.

 

Quelques plugins pratiques

  • Emmet : génère du code HTML et CSS en utilisant seulement des abréviations
  • CSSLint : signale les erreurs CSS
  • ColorPicker
  • JSHint : permet de détecter des problèmes ou des erreurs potentielles en Javascript

 

Synthèse

Le célèbre Sublime Text reste l’IDE le plus mature et garde sa position de leader en terme de stabilité, de rapidité, mais également grâce à sa plus large sélection de fonctionnalités et de plugins.
Atom pour sa part, ressemble beaucoup à Sublime Text, mais se différencie néanmoins avec sa complémentarité avec Git/Github. Ce grand plus, qui rappelez-vous vient du même constructeur, pourrait intéresser ceux qui travaillent en équipe ou tout simplement ceux qui apprécient de garder une trace de leurs différentes modifications.
Cependant, Brackets apporte sa touche révolutionnaire en proposant de nouvelles fonctionnalités tout à fait pratiques comme l’édition rapide de fichiers ou encore la mise à disposition d’Extract. Il faut admettre que ces nouvelles fonctionnalités sont très intéressantes pour un profil d’intégrateur car tout est pensé pour lui assurer un gain de temps. Il est d’ailleurs étonnant que d’autres éditeurs n’y aient pas pensé avant.

D’un point de vue ergonomique, Brackets me semble l’éditeur le plus sympathique.
Quand on sait que les éléments graphiques sont incontournables dans le travail d’un intégrateur, on se dit également que Brackets a l’avantage car il réunit nativement tous les outils nécessaires, notamment avec sa complémentarité avec Extract. On ne peut le nier, c’est un éditeur qui concentre toute son attention sur les besoins des développeurs front. Pour tous ces éléments évoqués précédemment, et surtout en tant qu’intégrateur, Brackets serait l’éditeur idéal et cela ne serait pas étonnant s’il détrônait prochainement le grand SublimeText.
Dernière chose, Brackets et Atom, sont tous deux développés en HTML, CSS et Javascript, ce qui facilite la tâche de beaucoup de développeurs pour le développement de plugins.

Vous avez maintenant tous les éléments en main pour décider par vous-même !

 

  TABLEAU COMPARATIF 
Sublime text Brackets Atom
Rapidité/Stabilité/Performance Leader En constante amélioration En constante amélioration
Open Source ✔️ ✔️
Prix 70$
Peut s’utiliser en version d’évaluation sans limite de durée
✔️
Gratuit
✔️
Gratuit
Multiplateforme
(OS, Linux & Windows)
✔️ ✔️ ✔️
Bien documenté ✔️ ✔️ ✔️
Personnalisable ✔️ ✔️ ✔️
Sélection multiple ✔️ ✔️ ✔️
Edition rapide du CSS dans un fichier HTML ✔️
Mode d’affichage multiple ✔️ Moins significatif que les autres ✔️
Gestionnaire de version intégré Pas natif
(exige des plugins tels que Git ou Sublime Version)
Actuellement, aucune évolution à ce niveau ✔️
(Git/Github)
Aperçu en direct ✔️
(Structure et mise en forme)
✔️
(Structure uniquement)
Mises à jour Actuellement, en version 3 bêta Toutes les 3/4 semaines Très régulières
Site de téléchargement http://www.sublimetext.com http://brackets.io/ https://atom.io