Posts taggés Sublime text

typescript_une

Pourquoi intégrer TypeScript à ses équipes web?

0

Aujourd’hui, le JavaScript est partout, aussi bien sur les sites Web (JQuery, AngularJS), sur les serveurs Web (NodeJS) que dans les applications mobiles (WinJS ou Apache Cordova). Microsoft a longtemps cherché à fournir aux développeurs .NET des alternatives, comme les controles sous ASP.NET WebForms pour leurs faciliter la vie. Mais cet âge sombre est révolu et le géant de Redmond se fait pardonner en nous offrant un langage qui permet de faire le pont entre C# et JavaScript, j’ai nommé TypeScript. 

Avoir des développeurs .NET séniors c’est super, surtout quand on a besoin de faire des applications .NET : ils sont compétents et efficaces. Mais parce qu’il est probable qu’ils aient débuté avec ASP.NET WebForms, ou avec technologies de clients lourds comme Winforms ou WPF, ils ont naturellement tendance à favoriser les contrôles serveurs sur le JavaScript client.

Les développeurs juniors sont mieux armés car JavaScript est définitivement à la mode, mais le manque d’expérience sur un langage objet par prototype ne pardonne pas. Il n’est pas rare de voir de très grandes disparités de qualité de production entre deux personnes avec à priori la même expérience.

Bref le JavaScript, sauf à partir du moment où il travaille essentiellement avec ASP.NET MVC, proche du web moderne et du JavaScript, n’est pas vraiment critique pour un développeur exclusivement .NET. Et c’est un problème dans un monde où les applications sont de plus en plus hybrides. Le développeur .NET possède les outils cognitifs et l’expérience pour exploiter au maximum le paradigme objet de classe comme on le trouve en C#, en Visual Basic ou en Java. En revanche maîtriser le paradigme objet de prototype qu’on trouve en JavaScript est un effort. C’est une sortie de la zone de confort et la montée en compétence peut parfois être très lente. C’est précisément pour palier à ce type de situation, avec des compétences en programmation orientée objet mais un déficit en JavaScript, que les équipes de Microsoft ont conçu TypeScript.

Le langage TypeScript est utilisé en interne par Microsoft pour la grande partie des travaux JavaScript récent, tel Babylon.js leur moteur 3D pour le Web par exemple. Il possède 2 grandes forces que je vais expliquer à mesure que je vais présenter son fonctionnement : la barrière d’apprentissage quasi-nulle et le fait que l’intégrer représente une prise de risque réellement nulle pour vos projets aussi bien à court terme qu’à long terme.

Comparons les spécifications du C#, du JavaScript et du TypeScript :

C# JS TS
Paradigme objet Classe Prototype Classe
Typage  Statique et dynamique Dynamique Statique et dynamique
Gestion des libraires Simple Simple Simple
Debug Visual Studio Navigateur Visual Studio

On observe donc que le TypeScript a effectivement été développé depuis sa conception initiale pour pouvoir s’intégrer aux travaux en NET. On remarque d’ailleurs que le père du TypeScript est Anders Hejlsberg, également architecte du C#, du Delphi et du Turbo Pascal.

Tout d’abord, il faut savoir que TypeScript est un langage qui va être compilé en JavaScript, que le compilateur de TypeScript a été conçu en TypeScript et que, par conséquence, il est possible de le compiler via Visual Studio 2013.2+ et 2015 (logique pour une technologie Microsoft) mais aussi via Node.JS (logique pour un programme en JavaScript). Autre conséquence directe, puisque le compilateur est un outil autonome, on peut développer en TypeScript avec une myriade d’IDE : Visual Studio 2013.2+ donc, WebStorm, Eclipse, Sublime Text, VI, Emacs et Atom (au moment de la rédaction de ce billet), pour seulement ensuite le compiler en JavaScript.

Revenons sur le langage en lui-même. TypeScript est open source, il est d’ailleurs disponible sur GitHub, et vise à intégrer les spécifications de ECMAScript 6, l’avenir de JavaScript.

En pratique, pourquoi est-ce que le TypeScript est un outil naturellement accessible ? Parce que c’est du JavaScript. Du JavaScript où nous allons pouvoir optionnellement décrire le type des variables de manière statique.

La présence de typage statique offre la possibilité à Intellisense de signaler quand le développeur commet une erreur de type sans que celui-ci ne soit contraint d’engager une démarche fastidieuse pour trouver l’origine de ces erreurs,  ce qui va se traduire en gain de temps substantiel.

 

typescript1

 

Ainsi si vous compilez du code JavaScript en JavaScript via le compilateur TypeScript, il n’y aura aucune différence entre le code d’entrée et le code de sortie. Autrement dit, tout code JavaScript est du code TypeScript.

Le compilateur va uniquement transformer un certain nombre de structures et de syntaxes en JavaScript. Cela tombe bien, car ces structures sont celles, à quelques détails près, du C#.

 

typescript2

typescript3

 

Et cela même dans les fonctionnalités complexes comme les lambdas, les génériques et les inférences de type. Les classes seront transformées en fonctions de prototypage. Il existe même la possibilité d’utiliser des spécificateurs d’accès mais uniquement dans du code TypeScript à typage statique (public, protected et private, en leurs absences la valeur par défaut est public et non protected comme en C#, dans un souci d’harmonie avec le JavaScript). Les interfaces peuvent être implémentées de manière implicite, ce qui facilite l’utilisation à certaines librairies.

L’héritage est également présent, avec son lot de notions à garder en tête par rapport au JavaScript.

 

typescript4

typescript5

typescript6

typescript7

 

Grâce à IntelliSense et au compilateur, nous instaurons un certain cadre de développement, afin de toujours garder une cohérence entre les structures que nous définissons et ce que l’on peut écrire, même quand le JavaScript n’est pas aussi strict. Une notion important en TypeScript est le comportement du mot-clé « this » : en TypeScript, « this » fait toujours référence à l’objet qui appelle la méthode. Le type de « this » dépends donc de sa position.

Donc si on récapitule, les développeurs vont écrire du simili-C# en JavaScript. C’est un coup à prendre mais un coût en temps humain bien inférieur à l’adoption de CoffeeScript, Dart ou d’un autre langage qui propose d’accélérer le travail des développeurs en JavaScript. Non seulement l’adoption est rapide mais elle tellement rapide que quelques heures suffisent pour permettre à un développeur d’augmenter son efficacité.

Si on revient sur le processus d’utilisation du TypeScript, on a vu que l’on  génére du code JavaScript. Donc si pour une raison quelconque, vous ne souhaitez plus utiliser TypeScript, il vous suffit de générer une dernière fois vos fichiers .js et de supprimer vos fichiers .ts. Voilà, votre migration est faîtes. Vous trouverez des exemples de codes ainsi que les spécifications détaillées sur le site http://www.typescriptlang.org/.

Il existe des outils très pratiques, comme TypeLite par exemple, qui va permettre de transformer des interfaces en C# .NET vers du TypeScript.

Finalement, TypeScript est un langage à mi-chemin entre JavaScript et C#. Il convient donc d’avoir à l’esprit les particularités du JavaScript et du C# lors de son utilisation. Malgré tout, l’intégration dans Visual Studio et la disponibilité d’outils en ligne gratuit offre un gain d’efficacité qui permettra à une équipe peu performante dans ses clients légers de produire des applications web évoluées ainsi que d’amener des perspectives différentes comme la découverte de Node.JS.

 

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