:::: MENU ::::

Développement web : tendances et perspectives pour 2015

Le web avance très vite, trop diront certains. Quoi qu’il en soit il est indispensable de suivre l’actualité et les tendances passées, présentes et à venir pour ne pas être pris de cours et savoir anticiper. En guise de bonne année, voici selon moi les perspectives et tendances à suivre pour 2015 en matière de développement web .

Javascript, langage de l’année ?

Bien évidemment je ne pouvais m’empêcher de commencer en parlant de javascript. Il est au cœur de la plupart des développements web si ce n’est de tous et est sur le point de connaitre une nouvelle montée en puissance. La nouvelle année annonce de nombreux changements , des nouveautés mais surtout la découverte de fonctionnalités déjà bien présentes.

Un renouveau avec Ecmascript 6

Il y a eu 2005 et AJAX, 2010 avec nodejs, 2015 sera l’année de la nouvelle spécification de javascript : Ecmascript 6 .

Cette évolution attendue de longue date apporte un très grand lot de nouveautés, aussi bien en terme de syntaxe ( fonctions flèches , classes, for or … ) que de fonctionnalités ( modules , générateurs, promises … ) .

Du fait du support déjà bien présent notamment chez mozilla firefox, et de l’existence de nombreux transpileurs, on peut s’attendre à une adoption rapide d’autant plus que ES7 semble sur la bonne voie pour continuer cette évolution.

C’est aussi un bon moyen de découvrir ou de redécouvrir les fonctionnalités déjà disponibles d’Ecmascript 5 en particulier sur les tableaux et de maîtriser Javascript non plus comme un langage de script quelconque mais bien comme un véritable langage.

Il est tout à fait pertinent d’utiliser Ecmascript 6 dès aujourd’hui

Toujours plus d’outils

L’abondance d’outils va dans le sens d’une adoption toujours plus importante et de la mise en place de workflows et bonnes pratiques autour du javascript. Les principaux navigateurs intègrent des consoles de débogage très complètes et on peut noter la présence de microsoft avec IE11 qui est aujourd’hui tout à fait au niveau des solutions proposées par Firefox et Chrome.

Un écosystème grandissant

Avec la sortie de nodejs en 2010 est né npm comme système de gestion de paquets. Il est aujourd’hui utilisé bien au delà de nodeJs, autant pour des projets backend que pour du front et devient par l’occasion le plus gros dépôt de paquets tout langages confondus. Son utilisation au centre du workflow coté cliet à l’aide notamment des scripts est de plus en plus plébiscité, cela signe surement à terme la fin des gestionnaires de dépendances tel que bower  .

Le fork de nodeJs : ioJs

Un futur logo potentiel de io.js

Un futur logo potentiel de io.js

Une nouvelle a bousculé l’univers javascript il y a quelques temps quand l’annonce du fork de nodejs à été faite. Il s’agit peut être là d’une bonne chose qui va donner un coup d’accélérateur à nodeJs qui commençait à stagner, l’idée étant de repartir sur une communauté active et ouverte . La première release de io.js est prévue le 13 janvier, affaire à suivre !

 

 

Moins de frameworks , plus de bibliothèques

Les SPA sont de plus en plus présentes aussi bien sur les applications desktop que celles destinées aux mobiles. Elles ont souvent besoin d’une architecture de fond plus ou moins complexe ( routage , modules, ressources REST , template .. ) . Heureusement, de nombreux frameworks viennent en aide aux développeurs en proposant des solutions à ces problématiques courantes. Mais attention car le framework lui même peut devenir une problématique ( courbe d’apprentissage, logique propriétaire , maintenance à moyen et long terme ) .

On peut citer le cas d’AngularJs qui va à terme mourir dans sa branche courante 1.x au profit d’un tout nouveau Angular 2.0. C’est de mon point de vue une bonne chose car avec les nouveautés d’ES6 et des webcomponents, la plupart des fonctionnalités actuelles ne seront bientôt plus justifiées puisque présentes en tant que standard.

2015 sera à la fois la fin et le renouveau d’AngularJs

Si les frameworks « lourds » disparaissent, cela pourrait être au profit des standards HTML5 et Javascript mais aussi de bibliothèques plus spécialisées voir de micro librairies qui permettent de charger uniquement ce dont on à besoin et sans avoir à se soucier d’un apprentissage spécifique.

En connaissant les APIs natives , on devrait pouvoir effectuer la plupart des taches sans dépendances inutiles

Isomorphisme et programmation reactive

Avec l’entrée en scène de ReactJs en 2013 deux nouvelles tendances sont apparues :

L’isomorphisme est la capacité d’avoir le même code exécutable coté client et serveur. Cela permet de répondre entre autre à des problématiques de SEO puisque un robot peut « utiliser » un site généré coté serveur avec le même rendu que sur le client.

En ce qui concerne la programmation réactive c’est un paradigme qui n’a rien de récent puisqu’il est utilisé dans les bibliothèques d’IHM et de nombreux langages, dont javascript !

Il est basé sur un concept de flux de données qui va propager les changements d’une valeur aux éléments qui en dépendent .  Cette gestion des opérations et des interactions est réalisée de manière asynchrone, à l’aide d’événements et de callbacks ( ça vous rappel quelque chose ? ). On parle aussi de programmation réactive fonctionnelle qui est en fait une addition de cette gestion de flux asynchrone avec des principes de programmation fonctionnelle

Au final bien que ce modèle ne soit pas nouveau il est toujours d’actualité et des langages threadés comme le java s’y tournent de plus en plus . Coté javascript l’arrivée des promises natives et des générateurs d’ES6 sera une petite révolution pour la gestion de l’asynchrone, sans compter le potentiel des fonctions asynchrones d’ES7 .

 

Coté Backend arrière-guichet

Pour commencer, si ce n’était pas déjà votre cas, il faut arrêter avec le xml et utiliser json , le javascript est fait pour le json, c’était le cas en 2014 ce sera toujours le cas cette année et de plus en plus d’api sont json first. Suivant la cible cela reste néanmoins intéressant de proposer les deux format ( standard international, compatibilité avec des anciens logiciels ).

Evolution des recherches google Json (rouge) vs XML (bleu) Evolution des recherches google Json (rouge) vs XML (bleu)

 

Les API REST  sont et seront de plus en plus en vogue notamment à travers ce qu’on appel l’API Driven Development qui consiste à définir une architecture et son API pour ensuite concevoir les programmes utilisant ces ressources. Cette façon de développer est assez logiquement liée à l’émergence des SPA et cette dissociation de plus en plus nette entre client et serveur où l’interaction se fait majoritairement coté client. Le serveur se contente de fournir de base pour la gestion des données.

Une autre tendance qui reste assez liée à ce modèle de développement est la programmation orientée composants, aidée par l’arrivée des modules natifs de javascript et des webcomponents à venir. C’est un peu la suite logique à la POO, tout est là aujourd’hui pour faire des applications web industrialisées et solides.

Avec l’arrivée en masse d’objets connectés en tout genre, les solutions de cloud vont continuer leur développement avec toujours plus de sociétés de services spécialisées  ( stockage, authentification, paiement ). On entend parler de MBaaS ou BaaS qui relègue la partie serveur comme un ou plusieurs  services disponibles à travers des API ou via SDK. A la différence des « anciens » modèles de type *aaS , celui ci est directement adapté pour servir une problématique mobile.

HTML et CSS

La renaissance HTML 5

HTML5 LogoEn octobre l’année derniere on a pu assister à un grand moment : le passage du HTML5 par le W3C en tant que Recommandation. Cela signifie officiellement que l’on peut qu’il faut utiliser la norme HTML5.. Si tout va bien les prochaines évolutions devraient être plus rapides comprenant entre autre une augmentation du nombre d’API en particulier pour l’accès au matériel sur les mobiles.

Une conception modulaire avec les webcomponents

webcomponentsOn entend parler de plus en plus des webcomponents . Inititiés en 2012 par le W3C puis démocratisés en 2014 en partie grâce à des librairies qui implémentent le concept , il s’agit en fait d’un ensemble de spécifications qui comprend le shadow DOM , les imports et templates HTML et enfin la notion de custom éléments. Tout cela dans le but de créer de nouveaux éléments packagés et réutilisables. Cette tendance rejoint les concepts de modularisation du web évoqué plus haut, il y a donc fort à parier qu’elle explose dans les mois / années à venir.

 

Le CSS3 bien supporté , un futur en préparation

Les navigateurs gèrent très bien la plupart des standards du CSS3 et on peut généralement y aller sans soucis et sans préfixes à partir d’IE9 . Le site CanIUse reste néanmoins une référence avant de se lancer pour être sur de la bonne compatibilité des sélecteurs et/ou fonctionnalités choisies suivant la cible visée . Personnellement je pense que l’évolution de 2015 viendra de la propriété flexbox qui permet de construire assez facilement des layouts complexes sans utiliser de systèmes de grilles ou de dépendances annexes.

Derrière tout ça l’avenir est en route et la prochaine mouture du CSS promet d’enterrer définitivement photoshop et pas mal de vieux plugins jQuery . En vrac on pourra citer de nouveaux sélecteurs les variables (enfin ! ), des fonctions de calcul et notamment certaines assez poussées sur les couleurs .

Vous pouvez jeter un oeil sur le projet cssnext qui propose une transpilation pour travailler dès aujourd’hui avec les fonctionnalités de demain.

Design, interfaces et expérience utilisateur

On arrive à un aspect plus subjectif et clairement influencé par des modes. J’avais déjà écrit un article sur le sujet en 2011 faisant un récapitulatif de l’évolution de ces tendances dans le cas du « Web 2.0 » et on peut voir que chaque année apporte son lot de nouveautés .

Material design

Material Design

Si la dernière tendance était au flat design porté entre autre par Microsoft et son interface Metro, 2015 sera surement celle du Material design de Google. En quelque sorte une évolution du Flat design , ajoutant du relief et un coté plus physique tout en restant sobre.

 

 

Des interfaces animées

En plus des vidéos, gif et icones animés de plus en plus présentes il est fort possible qu’on assiste à une explosion des animations d’interfaces alimentées justement par les interactions dynamiques du material design. Les outils des navigateurs se perfectionnent dans ce sens .

 

Responsive ou rien

Le marché mobile est toujours en croissance, si vous vous posiez encore la question, il est indispensable de penser la mobilité de son site web. De plus le langage qui s’impose comme référence pour les applications mobiles semble être à base de technos web. Le plus simple pour coller aux différents support est de penser adaptatif aussi bien pour les sites que pour les applications.

 

Conclusion

La plupart des évolutions et tendances pour la nouvelle année ne sont pas nécessairement des nouveautés . A mon sens , le plus gros changement interviendra du coté du javascript. J’ai commencé l’écriture de cet article avant la parution de l’index TIOBE qui faisait l’hypothèse d’une possible sélection de javascript comme langage de l’année 2014, d’où mon premier titre. Il se trouve qu’aujourd’hui , le javascript à été sélectionné et s’il continue dans cette progression , aucun doute qu’il pourra prétendre au titre pour 2015.

 

Notes:
1. Contrairement à nodeJs qui appartient à l’entreprise joyent
2. Single Page Application
3. AngularJs est sorti en 2009 et la branche 1 date de 2012 , l’environnement n’était pas le même qu’actuellement et les fonctionnalités aujourd’hui discutables étaient tout à fait pertinentes à ce moment là
4. l’utilisation de jQuery pour la seule sélection d’élément du DOM est à mon sens l’exemple le plus courant et le plus flagrant
5. mais qui a réellement commencé à faire parler de lui en 2014
6. déjà plébiscité par Gartner en 2013 comme technologie à suivre
7. Mathématiquement parlant lorsqu’on a b = 1 et y = b + 1 , y sera toujours égale à b + 1 même si b change de valeur dans le futur. La valeur de y est en quelque sorte synchronisée
8. Encore un paradigme de programmation, basé sur des fonctions qui retournent toujours le même résultat si on leur rentre les mêmes arguments. On y trouve le concept des expressions lambda introduites avec java 8 et tout ce qui est traitement des tableaux en javascript ( map reduce … )
9. et pour éviter les fameux callback hell  callback-hell
10. Mobile Backend as a Service
11. SaaS IaaS PaaS
12. Cette mise à jour fait du bien la dernière version du standard 4.0 ( 4.1 étant une mise à jour mineure)  datait de 1997 !!
13. Bosonic , Polymer, X-Tag et même les directives d’AngularJs
14. et certains sont déjà bien supportés, faites le test
Contrairement à nodeJs qui appartient à l’entreprise joyent
Single Page Application
AngularJs est sorti en 2009 et la branche 1 date de 2012 , l’environnement n’était pas le même qu’actuellement et les fonctionnalités aujourd’hui discutables étaient tout à fait pertinentes à ce moment là
l’utilisation de jQuery pour la seule sélection d’élément du DOM est à mon sens l’exemple le plus courant et le plus flagrant
mais qui a réellement commencé à faire parler de lui en 2014
déjà plébiscité par Gartner en 2013 comme technologie à suivre
Mathématiquement parlant lorsqu’on a b = 1 et y = b + 1 , y sera toujours égale à b + 1 même si b change de valeur dans le futur. La valeur de y est en quelque sorte synchronisée
Encore un paradigme de programmation, basé sur des fonctions qui retournent toujours le même résultat si on leur rentre les mêmes arguments. On y trouve le concept des expressions lambda introduites avec java 8 et tout ce qui est traitement des tableaux en javascript ( map reduce … )
et pour éviter les fameux callback hell  callback-hell
Mobile Backend as a Service
SaaS IaaS PaaS
Cette mise à jour fait du bien la dernière version du standard 4.0 ( 4.1 étant une mise à jour mineure)  datait de 1997 !!
Bosonic , Polymer, X-Tag et même les directives d’AngularJs
et certains sont déjà bien supportés, faites le test

7 Comments

So, what do you think ?