Les notions clés à connaître avant de choisir son framework web en 2017

Les notions clés à connaître avant de choisir son framework web en 2017

Tour d’horizon de ces notions qui baigneront notre futur

Plus de 29.000 personnes dans 4.600 entreprises ont évalué leur entreprise selon six critères : développement professionnel, environnement de travail, management, salaire & reconnaissance, fierté et “fun”.

Les notions clés à connaître avant de choisir son framework web en 2017 ?

Le choix d’un framework n’est jamais chose facile : il engage le futur technologique et humain de l’entreprise. Dans l’univers du Front ceci est d’autant plus vrai qu’actuellement les technologies utilisées (javascript par exemple)  évoluent pour fournir des solutions et des architectures plus matures et pérennes. 

Nous observons une explosion de frameworks autour du front: Angular2, ReactJS, Aurelia, VueJS, AngularJS, ...  Le choix d’un framework Front pour vos futurs développements doit être mûrement réfléchi à l’aune des évolutions à venir des concepts et des standards.
Avant de choisir son framework qui apportera ses propres notions -fonctionnalités qui seront différentes entre les framework-  il est important de maîtriser les éléments de base communs à tous. Faisons un tour d’horizon de ces notions qui baigneront notre futur.

Le langage

Le langage javascript évolue ; les futurs frameworks prendront en compte ces évolutions
dont il existe aujourd’hui deux tendances

  • ES2015 est l’approche standard. C’est l’évolution du javascript standard (ES5).
  • ypescript est une extension de l’ES2015 avec des ajouts tels que le support des types, des interfaces et les futures évolutions du langage JavaScript. 

À ce jour, tous les navigateurs ne supportent pas ces changements, mais il existe des pré-compiler qui permettent de générer de l’ES5 à partir du code.

Les modules

Plus une application web grossit, plus elle est difficile à maintenir. Entre les possibles conflits d’écrasement des variables globales, les références de fonctions d’une page JS à une autre, les possibilités de bug sont énormes et visibles uniquement au Runtime.
 
Le concept de module reprend des concepts simples : 

  • Tout ce qui est déclaré dans une page JS est privé. 
  • Il faut expliciter les fonctions/variables qui sont visibles par d’autres pages
  • Dans une page JS, il faut définir explicitement quel fonction/variable on souhaite utiliser.

Par exemple dans le code suivant : 

//variables.js
let name = 'World'; // cette variable ne peut être utilisé en dehors de cette page

export default hello = 'Bonjour ' + name;

---

//main.js
import hello from './variables';
let name = 'Mon Nom';
console.log(hello, name);

Dans ces quelques lignes : 

  • les 2 variables name (variables.js et main.js) sont différentes. Aucun risque de conflit entre ces variables car elles résident uniquement dans la page.
  • Dans variables.js je viens définir explicitement que je souhaite exporter la variable hello
  • Dans main.js, je viens explicitement importer la variable hello depuis ./variable.js. 
  • Il n’y a aucun risque de conflit avec une autre variable hello qui proviendrait d’un autre script.
  • Le code interne de variables.js peut être changé. Tant que j’exporte une variable hello, je suis sûr de ne casser aucune autre partie de mon code.

Decorators

Les decorators (ou aussi appelés annotations) permettent de spécifier des méta-informations sur des parties du code.

Par exemple : 

class Car {
    @readonly
    brand = 'Car';
}

Ces decorators vont pouvoir être exploités par d’autres parties du code pour définir un comportement sur l’attribut, la classe décorée. Sur l’exemple, avec l’annotation @readonly, il est possible de mettre un contrôle sur l’accès en écriture sur mon attribut brand.
Aujourd’hui les decorators ne sont implémentés que dans Typescript, mais la spécification est à l’étude dans les futures versions d’EcmaScript.

Webcomponents

Les webcomponents sont une spécification regroupant plusieurs autres spécifications : 

  • custom element : Spécification permettant de définir ses propres balises HTML.
  • shadow dom : Permet d’avoir une sandbox entre les éléments du DOM.
  • templates : Qui donne la possibilité de définir des templates de documents en HTML, et de pouvoir les instancier directement dans un autre document HTML.
  • html import : Qui permet d’importer et de réutiliser dans un document HTML d’autres documents HTML.

Les webcomponents permettent de standardiser la création de composants graphiques.

Ainsi je peux, par exemple, écrire un bout de code comme suit : 

<google-map latitude="37.77493" longitude="-122.41942">
</google-map>

Mathieu Broutin

Partager

Vous aimerez aussi

+
+
+