Posts taggés Github

J’ai essayé MJML, le langage des emails responsive

1

La création d’email est bien souvent un casse-tête pour les intégrateurs. Entre la compatibilité des messageries/clients mail et le responsive, les tableaux HTML se transforment rapidement en champ de bataille.

Mailjet a développé un langage afin d’optimiser la création d’emails responsive, le langage est basé sur une sémantique simple, ce qui ne déstabilisera pas un intégrateur après une étude rapide de la documentation et des possibilités qu’il offre.

Le langage MJML reste proche du langage HTML et offre un système de CSS en ligne simple à utiliser.

L’environnement

Lors de l’ouverture de l’application, 4 possibilités nous sont proposées, nous pouvons accéder à nos templates préalablement créés, accéder à des templates prédéfinis, en créer un nouveau.

L’environnement de l’application ressemble à un éditeur de texte épuré.
L’écran est scindé en deux, une partie pour la saisie du code MJML et une partie dédiée à la prévisualisation en temps réel du rendu de ce dernier. Notons que la prévisualisation de notre travail est possible sur un écran desktop ou mobile.

 

Pour réaliser des tests en conditions réelles, l’option « Send » nous permet de faire un envoi rapide depuis l’application vers une adresse mail. Vous devrez cependant créer un compte MailJet et renseigner le champ « API KEY » correspondant à votre compte pour profiter de cette fonctionnalité.

 

Afin d’enregistrer notre travail, ou plutôt, de l’exporter, 2 choix sont proposés par l’éditeur : un export HTML ou MJML. N’oubliez pas de toujours réaliser un export dans ce dernier format afin de pouvoir y revenir plus tard si vous le souhaitez.

A noter la présence d’une option « Gist » permettant d’envoyer directement le code créé sur un compte GitHub.

Rapide tour d’horizon

mjml-head

<mj-head>

Le contenu global de notre template est entouré des balises ouvrantes et fermantes <mjml> et </mjml> (équivalentes à <html> et </html>).

La balise <mj-head> (correspondant à l’entête <head> en HTML) permet de définir des styles par défaut, de créer des classes, d’importer des polices par exemple.

L’ajout de classes réalisé de la sorte peut nous faire penser aux variables des préprocesseurs SASS et LESS.

Pour avoir plus de renseignements sur les composant de la balise <mj-head> vous pouvez-vous reporter au lien de la documentation suivant : https://mjml.io/documentation/#standard-head-components

<mj-body>

Le corps de notre code sera initialisé avec la balise <mj-body>, contenant un container avec la balise <mj-container>. https://mjml.io/documentation/#standard-body-components

<mj-section> / <mj-column>

Les différentes sections de nos templates seront, un peu comme le fait la classe row dans bootstrap, définies avec la balise <mj-section>.

Pour terminer ce rapide tour d’horizon, nous évoquerons les balises <mj-column>, qui servent à définir le nombre de colonnes dans notre section.

A noter : Le nombre de colonnes par section est de 4 maximum (si l’on veut aller au-delà il faudra préciser la largeur de chaque colonne avec un width), la largeur de chaque section sera logiquement de 25% lorsque nous en avons 4, 33,3% lorsque nous avons 3 colonnes et 50% lorsque les colonnes sont au nombre de 2.

Là encore, je vous invite à étudier de plus près la documentation MJML J https://mjml.io/documentation/#getting-started

Les composants simples de contenu

<mj-text>

La balise <mj-text> sert à ajouter du contenu. On peut également introduire des balises tel que des <h1> à l’intérieur.

<mj-image>

Cette balise nous sert à ajouter une image. Comme en HTML, l’attribut src= « » sert à indiquer le chemin afin de trouver l’image. Nous pouvons aussi noter qu’un attribut href= « » est disponible sur les images afin de rendre celles-ci cliquable et d’arriver sur une url voulue.

<mj-button>

Nous pouvons également rajouter de simples liens sous forme de bouton à l’aide de la balise <mj-button> comme ci-dessous.

Les composants avancés

Certains composants vont encore plus loin et offrent des fonctionnalités déjà prédéfinies.

Très pratique pour rendre nos newsletters plus vivantes.

<mj-social>

Nous remarquons de plus en plus la présence d’icônes pour les réseaux sociaux dans les newsletter, MJML permet d’insérer des call-to-action des différents réseaux existants de manière très simple.

<mj-navbar hamburger= «hamburger»

Tel un vrai site, MJML nous permet d’insérer une navigation à l’intérieur de notre email. Ceci peut s’avérer nécessaire lorsque l’on souhaite rediriger l’utilisateur vers différentes sections de notre site web.

A noter qu’un attribut burger menu pour les emails responsives est nativement présent dans l’application.

 

mj-navbar-hamburger-closedmj-navbar-hamburger-open

 

mj-navbar

<mj-carousel>

Souvent utilisé sur les sites web, les carousels peuvent s’avérer utiles afin d’afficher plusieurs images de manière dynamique.

mj-carousel2

mj-carousel

<mj-location>

On peut ajouter de façon rapide une adresse avec une localisation qui nous redirige au clic vers Google Maps.

mj-location2

mj-location

Avantages et inconvénients

Avantages

Commençons tout d’abord ce point avec le fait que MJML est open source et donc gratuit.

Facile à appréhender et à utiliser, MJML reste un outil très intuitif pour rendre les newsletters responsives. En peu de temps d’apprentissage, il pourra vous faire gagner un temps certain dans vos intégrations. Utilisant des préceptes s’inspirant de frameworks CSS et de préprocesseurs tels que SASS et LESS, un intégrateur n’aura pas de mal à comprendre son fonctionnement et améliorera sa productivité.

L’export en .html ou .mjml se fait en … 3 petits clics !

Notons aussi que de travailler avec MJML est plaisant grâce au fait de voir le rendu de notre travail en temps réel.

Inconvénients

Nous pouvons toutefois relever quelques inconvénients à l’utilisation de MJML.

Tout d’abord, étant une application basée sur la technologie NodeJS, il est nécessaire d’installer préalablement le package npm sur le poste local. Nuançons toutefois ce propos avec l’installation rapide et fluide du soft une fois le package installé.

Nous avons également pu remarquer quelques bugs sur le client lourd Outlook, tels que des titres mal gérés et coupés en 2.

Autre petit bémol, nous ne pouvons pas inspecter le code et donc procéder efficacement aux corrections de bugs.

 

Conclusion

MJML est en langage jeune mais très porteur pour l’avenir avec une communauté de plus en plus active.

En plus des fonctionnalités déjà proposées il existe certains plugins pouvant être téléchargé via le compte GitHub https://github.com/mjmlio . Notons d’ailleurs qu’il existe un plugin pour l’IDE Atom qui peut s’avérer utile pour les personnes travaillant déjà avec cet éditeur (https://github.com/mjmlio/atom-linter-mjml), la prévisualisation devient même disponible directement dans Atom !
MJML est donc un langage prometteur, bien qu’il soit encore un peu jeune pour couvrir la multitude de spécificités liées à toutes les messageries disponibles.

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.