Les Meilleurs Projets JavaScript en 2017

L'année 2017 s'est terminée avec une nouvelle fois beaucoup de changements dans l'univers JavaScript.

Revenons sur les tendances de l'année en choisissant comme indicateur le nombre d'étoiles ajoutées sur GitHub.

Quelles sont les étoiles montantes JavaScript de l'année ?



Les chiffres présentés sont les nombres d'étoiles ajoutées sur GitHub au cours de l'année 2017. Les projets présentés proviennent de Best of JavaScript, une application web qui rassemble toutes les tendances liées au développement web.

Projets les plus populaires en 2017

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆
3.0k
3.5k
3.9k
3.1k
3.2k
3.1k
3.6k
3.3k
3.6k
3.4k
3.1k
3.0k
J
F
M
A
M
J
J
A
S
O
N
D
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
2.0k
2.0k
2.6k
2.3k
2.3k
2.0k
2.6k
2.2k
2.5k
2.8k
2.5k
2.2k
J
F
M
A
M
J
J
A
S
O
N
D
3
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
2.1k
1.8k
2.3k
1.8k
2.2k
1.8k
1.9k
2.3k
1.5k
1.7k
1.7k
1.5k
J
F
M
A
M
J
J
A
S
O
N
D
4
Puppeteer

Puppeteer

Headless Chrome Node API
+22.0k☆
3.9k
2.9k
3.0k
2.2k
1.9k
J
F
M
A
M
J
J
A
S
O
N
D
5
Axios

Axios

Promise based HTTP client for the browser and node.js
+21.9k☆
1.5k
1.7k
2.2k
2.0k
1.9k
1.8k
1.9k
1.9k
1.7k
1.7k
1.9k
1.7k
J
F
M
A
M
J
J
A
S
O
N
D
6
VS Code

VS Code

Visual Studio Code
+20.2k☆
897
1.4k
1.8k
1.7k
1.5k
1.3k
1.4k
1.6k
1.6k
2.5k
2.6k
1.8k
J
F
M
A
M
J
J
A
S
O
N
D
7
Prettier

Prettier

Prettier is an opinionated code formatter.
+17.7k☆
114
1.1k
1.3k
2.6k
1.0k
1.8k
1.0k
1.3k
721
1.4k
956
1.5k
J
F
M
A
M
J
J
A
S
O
N
D
8
React Native

React Native

A framework for building native apps with React.
+15.6k☆
1.2k
1.3k
1.6k
1.3k
1.3k
1.3k
1.3k
1.2k
1.1k
1.2k
1.3k
1.2k
J
F
M
A
M
J
J
A
S
O
N
D
9
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
1.4k
1.2k
1.8k
1.2k
1.1k
1.0k
1.1k
1.1k
1.3k
1.4k
1.3k
1.1k
J
F
M
A
M
J
J
A
S
O
N
D
10
Electron

Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS
+14.8k☆
1.3k
1.2k
1.4k
1.3k
1.3k
1.1k
1.2k
1.2k
1.1k
1.3k
1.2k
1.2k
J
F
M
A
M
J
J
A
S
O
N
D

Et le grand vainqueur de l'année 2017 est une nouvelle fois Vue.js avec plus de 40 000 étoiles ajoutées sur GitHub.

C'est beaucoup plus qu'en 2016 et l'écart avec le poursuivant React s'est accentué.

Nul ne pourra ignorer le succès de Vue en 2018 !

Mais quelles sont les raisons du succès de ce framework "côté client" ?

  • Tout d'abord un accès facile pour les nouveaux venus, une approche "composant" comme avec React mais avec une syntaxe facile à appréhender pour les débutants.
  • Un éco-système bien étudié avec des solutions claires pour des tâches telles que:
    • Le routing entre les pages avec vue-router
    • Le contrôle de l'état de l'application (State management) avec Vuex
  • Le concept de fichier unique .vue: un fichier unique pour décrire un composant réutilisable: les balises HTML, le code JavaScript associé et leurs styles.
  • Inclus par défaut dans l'un des frameworks PHP les plus populaires Laravel
  • Ce n'est pas le produit d'un géant de l'internet tel que Facebook ou Google, mais c'est un projet maintenu par Evan You, avec une forte communauté "open source", en particulier du côté de la Chine.

Vue est utilisé par la plus grande plateforme de commerce électronique en Chine (Alibaba) mais aussi par des sociétés telles que Adobe ou GitLab.

Frameworks côté client

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆
3.0k
3.5k
3.9k
3.1k
3.2k
3.1k
3.6k
3.3k
3.6k
3.4k
3.1k
3.0k
J
F
M
A
M
J
J
A
S
O
N
D
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
2.0k
2.0k
2.6k
2.3k
2.3k
2.0k
2.6k
2.2k
2.5k
2.8k
2.5k
2.2k
J
F
M
A
M
J
J
A
S
O
N
D
3
Angular

Angular

One framework. Mobile & desktop.
+12.2k☆
827
949
1.4k
1.0k
884
911
983
989
925
1.1k
1.2k
930
J
F
M
A
M
J
J
A
S
O
N
D
4
Preact

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
+10.4k☆
779
498
575
634
829
920
729
2.0k
1.9k
545
401
532
J
F
M
A
M
J
J
A
S
O
N
D
5
Hyperapp

Hyperapp

1 KB JavaScript library for building web applications.
+8.1k☆
1.2k
779
148
113
2.1k
671
321
746
333
189
1.5k
J
F
M
A
M
J
J
A
S
O
N
D

La catégorie des "Frameworks côté client" est traditionnellement la catégorie reine, cette année aussi la bataille fut intense entre les prétendants.

3 grands acteurs se disputent les faveurs des développeurs dans cette catégorie: Vue.js, React et Angular

Nous avons vu précédemment ce qui faisait le succès de Vue.js.

React a un éco-système beaucoup plus fragmenté, laissant au développeur la liberté de créer une solution "à la carte" pour les questions suivantes: routing entre les pages, accès aux données depuis des API distantes, contrôle de l'état de l'application...

A l'opposé Angular propose une approche beaucoup plus systématique, car c'est un framework complet, on dit souvent qu'il y existe une "manière Angular" de faire les choses.

C'est la raison pour laquelle Angular remporte un grand succès dans le monde de l'entreprise. Ce succès est renforcé par l'utilisation par le framework du langage TypeScript, qui introduit dans le langage les "types" chers aux développeurs Java et C#.

Frameworks node.js

1
Express

Express

Fast, unopinionated, minimalist web framework for node.
+6.7k☆
542
586
613
587
583
552
512
525
485
610
560
524
J
F
M
A
M
J
J
A
S
O
N
D
2
Koa

Koa

Expressive middleware for node.js using ES2017 async functions
+5.8k☆
422
510
609
486
479
489
421
517
465
441
481
460
J
F
M
A
M
J
J
A
S
O
N
D
3
Fastify

Fastify

Fast and low overhead web framework, for Node.js
+5.8k☆
109
15
87
56
17
91
99
60
2.1k
2.2k
611
342
J
F
M
A
M
J
J
A
S
O
N
D
4
Gun

Gun

A realtime, decentralized, offline-first, graph database engine.
+3.2k☆
181
234
128
106
223
1.3k
162
183
87
128
198
184
J
F
M
A
M
J
J
A
S
O
N
D
5
micro

micro

Asynchronous HTTP microservices
+3.2k☆
434
277
272
252
273
177
244
419
230
198
223
157
J
F
M
A
M
J
J
A
S
O
N
D

Côté serveur également, JavaScript a une place de plus en plus importante.

Mikeal Rogers, un membre influent de la communauté Node.js, prédit que Node.js va dépasser Java dans 1 an.

Mais contrairement à des langages tels que PHP (avec Laravel), Ruby (avec Ruby on Rails) ou Python (avec Django), il n'existe pas de réel framework Node.js dominant ou d'architecture recommandée au moment de créer une nouvelle application serveur.

Malgré son âge, Express est resté en 2017 le framework Node.js le plus populaire. Qui plus est, il est utilisé en interne par de très nombreux projets tels que Feathers, Keystone or Nest.

Remarquons l'arrivée de 3 nouveaux venus dans le classement cette année:

  • Fastify inspiré by Hapi, propose une approche complète et convient très bien au développment d'API au format JSON, API dont sont friandes les applications web modernes.
  • Server.js est une solution qui propose d'emblée toutes les fonctionnalités d'un serveur web
  • Nest se différentie en proposant une architecture familière aux développeurs Angular, faite de "modules" et de "contrôleurs" écrits dans le langage TypeScript.

Eco-système React

1
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
2.1k
1.8k
2.3k
1.8k
2.2k
1.8k
1.9k
2.3k
1.5k
1.7k
1.7k
1.5k
J
F
M
A
M
J
J
A
S
O
N
D
2
Ant Design

Ant Design

🐜 A UI Design Language
+13.3k☆
936
1.1k
971
910
928
941
1.1k
887
1.2k
1.3k
1.6k
J
F
M
A
M
J
J
A
S
O
N
D
3
Next.js

Next.js

Framework for server-rendered or statically-exported React apps
+12.7k☆
893
664
2.1k
1.3k
1.2k
745
1.2k
856
697
1.2k
864
960
J
F
M
A
M
J
J
A
S
O
N
D
4
Storybook

Storybook

Interactive UI component dev & test: React, React Native, Vue, Angular
+9.7k☆
467
429
666
627
807
940
704
1.0k
671
837
1.3k
1.2k
J
F
M
A
M
J
J
A
S
O
N
D
5
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
J
F
M
A
M
J
J
A
S
O
N
D

Comme le domaine de React est limité à la partie visuelle des applications (la partie "vue" mais ce mot prête à confusion à cause du projet Vue.js !), cela libère de la place pour tout un éco-système de projets qui fonctionnent avec React.

En 2016, Create React App a résolu un problème récurrent: quel point de départ pour créer une nouvelle application avec React ?

Ce projet est très fréquemment mis à jour par Facebook et s'impose comme la manière quasi officielle de démarrer un nouveau projet. Comme une preuve supplémentaire de son succès, StackBlitz est un éditeur de texte en ligne qui permet de créer instantanément une application à partir de Create React App.

Pour les développeurs qui recherchent plus de fonctionnalités, une solution telle que React boilerplate offre toutes les joyeusetés d'une application moderne, y compris une couche "GraphQL" et la possibilité de fonctionner en local, en mode offline.

Parmi les autres projets du classement, on trouve des jeux de composants déjà stylés tels que Ant Design, Ant Design Pro ou Material UI qui permettent aux développeurs d'obtenir aisément une application web avec un joli rendu, qui donne une allure professionnelle (à défaut d'être originale sans doute !).

Le projet Recompose nous montre l'importance des motifs de programmation fonctionnelle (Functional Programming), motifs qui font une partie du succès de React. Tout peut se traduire par une simple fonction et Recompose propose un ensemble d'outils pour prolonger le voyage dans cette direction.

Eco-système Vue

1
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
1.4k
1.2k
1.8k
1.2k
1.1k
1.0k
1.1k
1.1k
1.3k
1.4k
1.3k
1.1k
J
F
M
A
M
J
J
A
S
O
N
D
2
iView

iView

A high quality UI Toolkit built on Vue.js 2.0
+9.5k☆
351
613
485
566
929
626
576
1.3k
788
585
J
F
M
A
M
J
J
A
S
O
N
D
3
Vuex

Vuex

🗃️ Centralized State Management for Vue.js.
+7.2k☆
547
597
713
632
588
579
553
582
600
569
638
555
J
F
M
A
M
J
J
A
S
O
N
D
4
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
26
116
1.4k
839
764
668
550
563
608
538
456
J
F
M
A
M
J
J
A
S
O
N
D
5
Nuxt

Nuxt

Versatile Vue.js Framework
+6.3k☆
164
354
625
515
537
481
592
732
532
606
635
498
J
F
M
A
M
J
J
A
S
O
N
D
6
Vuetify

Vuetify

Material Component Framework for Vue.js 2
+6.3k☆
322
191
363
385
402
360
569
554
1.1k
777
615
585
J
F
M
A
M
J
J
A
S
O
N
D
7
Mint UI

Mint UI

Mobile UI elements for Vue.js
+5.5k☆
116
J
F
M
A
M
J
J
A
S
O
N
D
8
vux

vux

Mobile UI Components based on Vue & WeUI
+4.6k☆
306
382
510
392
361
383
394
399
373
311
409
426
J
F
M
A
M
J
J
A
S
O
N
D
9
vue-router

vue-router

🚦 The official router for Vue.js.
+4.6k☆
408
400
460
411
396
407
370
352
374
403
351
313
J
F
M
A
M
J
J
A
S
O
N
D
10
Vue material

Vue material

Material design for Vue.js
+3.7k☆
328
405
449
320
307
304
303
293
251
273
245
234
J
F
M
A
M
J
J
A
S
O
N
D

L'invité spécial: Evan You

Nous sommes admiratifs devant le succès rencontré par Vue.js mais il faut confesser que nous n'étions pas assez familiers avec son éco-système pour nous permettre d'écrire à ce sujet.

C'est la raison pour laquelle nous avons demandé l'avis à un expert... Qui d'autre que le créateur de Vue.js en personne est plus qualifié pour donner son avis ?

De nombreux projets ont profité de la popularité grandissante de Vue.js pour construire un véritable éco-système en pleine croissance.

Element et iView sont les ensembles de composants UI (UI Toolkits) les plus populaires, ils permettent de réaliser rapidement des applications web classiques. De leut côté, Mint UI et vux misent sur les applications mobiles.

Vuetify est un framework qui adhère aux principes du "Material Design", il peut être utilisé aussi bien pour des applications mobiles que pour des applications web classiques. C'est sans doute le framework qui couvre le plus grand nombre de fonctionnalités: rendu côté serveur, applications web dites progressives (PWA), support pour ligne de commande (CLI)... Vue material est un autre framework qui suit rigoureusement les principes du "Material Design".

Nuxt est un framework de plus haut niveau qui permet de créer des applications dites universelles, produisant du code capable de s'executer tant côté serveur que côté client.

Weex est un framework qui permet de créer de véritables applications mobiles natives à partir d'une syntaxe et d'une API familières aux developpeurs Vue.js. Développé par Alibaba, le géant du e-commerce chinois, avec une priorité accordée aux performances, il a permis de construire certaines des applications les plus utilisées dans le monde.

Mobile

1
React Native

React Native

A framework for building native apps with React.
+15.6k☆
1.2k
1.3k
1.6k
1.3k
1.3k
1.3k
1.3k
1.2k
1.1k
1.2k
1.3k
1.2k
J
F
M
A
M
J
J
A
S
O
N
D
2
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
26
116
1.4k
839
764
668
550
563
608
538
456
J
F
M
A
M
J
J
A
S
O
N
D
3
Ionic

Ionic

Build amazing native and progressive web apps with open web technologies. One app running on everyth
+5.5k☆
500
443
515
530
509
437
439
419
421
465
510
311
J
F
M
A
M
J
J
A
S
O
N
D
4
Quasar

Quasar

Quasar Framework
+3.7k☆
17
297
341
244
314
266
298
397
360
343
301
331
J
F
M
A
M
J
J
A
S
O
N
D
5
NativeScript

NativeScript

NativeScript is an open source framework for building truly native mobile apps with JavaScript. Use
+2.9k☆
241
224
245
238
255
224
217
211
299
280
271
233
J
F
M
A
M
J
J
A
S
O
N
D

La polyvalence de JavaScript est telle que l'on peut construire de réelles applications mobiles avec des technologies web.

On retrouve dans cette catégorie le clivage entre les 3 acteurs dominants des frameworks côté client:

Comme en 2016, React Native s'impose comme la solution la plus populaire pour construire une application mobile pour toutes les plateformes (iOS, Android et Windows Mobile), à partir de JavaScript.

Comme le montre cette video très complète intitulée Cross platform apps with React Native, le slogan: "Un seul code pour toutes les plateformes" est devenu une réalité !

Compilateurs JavaScript

1
TypeScript

TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
+11.6k☆
738
855
972
1.1k
928
936
976
1.0k
818
1.2k
1.1k
992
J
F
M
A
M
J
J
A
S
O
N
D
2
Babel

Babel

Babel is a compiler for writing next generation JavaScript.
+5.7k☆
390
382
447
395
361
336
371
412
397
564
1.1k
587
J
F
M
A
M
J
J
A
S
O
N
D
3
Flow

Flow

Adds static typing to JavaScript to improve developer productivity and code quality.
+5.1k☆
335
303
505
577
484
447
381
420
372
433
392
417
J
F
M
A
M
J
J
A
S
O
N
D
4
Reason

Reason

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems
+2.1k☆
186
79
186
143
115
85
72
151
284
266
201
395
J
F
M
A
M
J
J
A
S
O
N
D
5
Purescript

Purescript

A strongly-typed language that compiles to Javascript
+1.2k☆
123
77
96
101
63
96
92
106
99
121
123
108
J
F
M
A
M
J
J
A
S
O
N
D

Les "compilateurs" de cette catégorie sont des outils qui transforment du code dans un langage donné en code JavaScript standard, capable de s'exécuter dans n'importe quel navigateur Web, ou tout environnement supportant JavaScript.

On peut avoir besoin d'un tel compilateuur pour 2 raisons:

  • Pour profiter des dernières avancées du langage JavaScript (spécifications ES6 et ES7) tout en produisant du code compatible avec la majorité des navigateurs web. C'est ce qui fait le succès de Babel, utilisé par un très grand nombre de projets Web.
  • Pour ajouter de nouvelles fonctionnalités au langage, en particulier les "types statiques" qui existent dans des langages institutionnels tels que Java ou C#.

Le langage JavaScript ne propose que des types "dynamiques", cette flexibilité peut poser problème, en particulier dans le cadre de gros projets.

Dans le but d'offrir aux développeurs web le confort et la sécurité des "types statiques", 2 concurrents s'opposent farouchement: TypeScript, créé par Microsoft et Flow, créé par Facebook, et utilisé en interne par Facebook sur de nombreux projets.

TypeScript, largement en tête en 2016, conserve l'avantage sur son rival en 2017. De nombreux projets utilisent TypeScript, à commencer par Angular et l'intégration facile avec l'éditeur de texte VS Code joue en sa faveur.

Pour mieux comprendre les différences, nous vous recommandons cet article de James Kyle: A Comparison Between Adopting Flow or TypeScript

Outils de construction

1
Parcel

Parcel

📦🚀 Blazing fast, zero configuration web application bundler
+14.0k☆
1
1
13.9k
J
F
M
A
M
J
J
A
S
O
N
D
2
Webpack

Webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting a
+13.1k☆
1.4k
1.2k
1.2k
1.1k
1.1k
1.2k
1.1k
995
714
1.0k
1.0k
1.0k
J
F
M
A
M
J
J
A
S
O
N
D
3
Gulp

Gulp

The streaming build system
+3.6k☆
344
313
376
391
303
254
291
302
237
286
270
228
J
F
M
A
M
J
J
A
S
O
N
D
4
Rollup

Rollup

Next-generation ES6 module bundler
+3.5k☆
338
267
270
498
288
289
254
260
200
203
297
362
J
F
M
A
M
J
J
A
S
O
N
D
5
Poi

Poi

Delightful web development.
+2.7k☆
127
132
94
129
82
78
54
165
178
200
1.3k
J
F
M
A
M
J
J
A
S
O
N
D

Pour construire une application web moderne, les développeurs ont besoin d'un outil capable d'assembler et de transformer diverses parties (templates, code JavaScript écrit dans un dialecte donné, styles...) et d'optimiser le tout dans le but de rendre l'application web performante. Ce sont ces outils de construction que nous analysons ici.

La plus grosse surprise de l'année est l'arrivée de Parcel qui détrône Webpack, le roi incontesté de la catégorie.

Lancé en août 2017, Parcel a connu un départ fulgurant avec 14 000 étoiles ajoutées sur GitHub en l'espace de quelques mois.

Alors que Webpack est basé sur tout un éco-système d'extensions appelées loaders, Parcel promet un usage extrêmement simple, sans aucune configuration nécessaire.

Ne faisons pas dire à ces chiffres ce qu'ils ne disent pas, Webpack reste extrêmement populaire et est inclus par de nombreux autres projets, en particulier Gatsby et Create React App.

Alors que Parcel et Webpack ciblent les développeurs d'applications web, Rollup, cible les créateurs de "librairies".

C'est ainsi que les créateurs de React ont migré leur processus de construction de Browserify vers Rollup en 2017, comme expliqué dans cet article issu du site officiel.

Tout comme Parcel, Poi mise sur une grande simplicité d'usage mais ne concerne (pour l'instant) que les projets créés avec React, Vue.js ou Preact.

Frameworks de test

1
Jest

Jest

🃏 Delightful JavaScript Testing.
+7.1k☆
498
519
647
549
884
499
549
476
473
705
664
675
J
F
M
A
M
J
J
A
S
O
N
D
2
AVA

AVA

Futuristic JavaScript test runner
+4.8k☆
1.0k
522
452
377
358
304
315
303
260
321
294
245
J
F
M
A
M
J
J
A
S
O
N
D
3
Mocha

Mocha

☕️ simple, flexible, fun javascript test framework for node.js & the browser
+3.1k☆
242
253
266
244
251
230
231
259
238
269
295
287
J
F
M
A
M
J
J
A
S
O
N
D
4
Jasmine

Jasmine

Simple JavaScript testing framework for browsers and node.js
+1.2k☆
93
95
128
97
106
94
96
120
88
76
109
83
J
F
M
A
M
J
J
A
S
O
N
D
5
Tape

Tape

tap-producing test harness for node and browsers
+1.0k☆
149
90
135
105
91
63
65
70
79
54
57
51
J
F
M
A
M
J
J
A
S
O
N
D

Jest, créé par Facebook pour tester les applications React, a évolué très vite au cours des derniers mois (plus de 22 versions majeures sont sorties !) et s'est imposé comme le framework de test le plus populaire en 2017.

Jest est devenu une solution de test complète qui peut être utilisée aussi bien côté client que côté serveur.

Ses points forts:

  • Pas de configuration nécessaire
  • Très confortable du point de vue du développeur (Jest détecte les changements sur les fichiers de manière intelligente, les compte-rendus d'exécution sont très lisibles...)
  • Syntaxe similaire à celle de Mocha, en particulier les mots-clefs describe et it sont connus de nombreux développeurs.
  • Pas de librairie supplémentaire pour écrire les tests, tout est inclus dans Jest.
  • Possibilité unique d'enregistrer automatiquement les réponses attendues aux futurs tests (snapshots)

AVA, le projet numéro 1 l'an dernier, glisse en seconde position cette année.

C'est l'un des innombrables projets de Sindre Sorhus qui l'utilise comme solution de test pour ses propres projets.

Par rapport à Jest, AVA est une solution plus légère qui privilégie les performances en exécutant les tests en parallèle, et utilise une syntaxe proche de standards utilisés par des solutions telles que Tape.

Editeurs de texte

1
VS Code

VS Code

Visual Studio Code
+20.2k☆
897
1.4k
1.8k
1.7k
1.5k
1.3k
1.4k
1.6k
1.6k
2.5k
2.6k
1.8k
J
F
M
A
M
J
J
A
S
O
N
D
2
Atom

Atom

The hackable text editor
+9.1k☆
838
766
764
604
798
695
774
871
921
763
724
557
J
F
M
A
M
J
J
A
S
O
N
D
3
Reactide

Reactide

Reactide is the first dedicated IDE for React web application development. http://reactide.io
+7.4k☆
2.2k
181
109
66
76
34
71
38
73
J
F
M
A
M
J
J
A
S
O
N
D
4
Brackets

Brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
+1.9k☆
138
164
233
142
172
126
189
161
192
142
112
106
J
F
M
A
M
J
J
A
S
O
N
D
5
Nuclide

Nuclide

An open IDE for web and native mobile development, built on top of Atom
+1.4k☆
152
167
154
152
145
101
127
75
123
68
82
76
J
F
M
A
M
J
J
A
S
O
N
D

Nous parlons ici des éditeurs de texte issus de projets open-source et utilisant des technologies web.

VS Code, créé par Microsoft et Atom, créé par GitHub, sont 2 applications construites à partir d'Electron une plateforme très populaire pour le développement d'applications desktop pour Windows aussi bien que pour MacOS.

Les 2 projets étaient au coude-à-coude en 2016 mais VS Code a pris un avantage déterminant en 2017.

VS Code progresse très vite, chaque mois apporte son lot d'innovations.

Sans devoir installer aucune extension, les développeurs disposent de toutes les fonctionnalités dont ils ont besoin:

  • Integration avec Git
  • Saisie assistée pour beaucoup de choses: le language JavaScript bien sûr, mais aussi les noms de fichiers en local, les noms de package installés depuis NPM...
  • Syntaxe React prise en compte
  • Ligne de commande intégrée

Si l'on ajoute Prettier à VS Code sans oublier d'activer l'option pour formater automatiquement le code à chaque enregistrement, on obtient la combinaison parfaite pour écrire du code dans un confort absolu !

Feuilles de style en JavaScript

1
Styled Components

Styled Components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without
+8.7k☆
852
545
899
861
874
744
703
697
625
677
555
703
J
F
M
A
M
J
J
A
S
O
N
D
2
CSS Modules

CSS Modules

Documentation about css-modules
+2.9k☆
234
227
272
234
313
307
246
254
194
210
234
217
J
F
M
A
M
J
J
A
S
O
N
D
3
Polished

Polished

A lightweight toolset for writing styles in JavaScript ✨
+2.9k☆
518
262
210
139
96
94
129
96
103
J
F
M
A
M
J
J
A
S
O
N
D
4
Glamorous

Glamorous

💄 Maintainable CSS with React
+2.9k☆
531
273
206
196
292
139
151
120
165
J
F
M
A
M
J
J
A
S
O
N
D
5
Emotion

Emotion

⚡️ The Next Generation of CSS-in-JS
+2.5k☆
488
257
190
352
186
298
J
F
M
A
M
J
J
A
S
O
N
D

Il n'y a toujours pas de consensus à propos de la meilleure façon de manipuler les styles d'une application construite avec React.

Il est possible d'utiliser des ensembles de composants React qui intègrent déjà leurs propres styles: c'est la cas de solutions telles que Material UI ou Ant Design. Cette solution est très pratique à condition que les besoins soient plutôt standards et ne nécessitent pas trop de personnalisation.

Il est aussi possible d'opter pour l'intégration d'une feuille de styles à l'ancienne, en utilisant le très célèbre Bootstrap ou encore Bulma, et en jouant avec la propriété className des composants pour associer les bons styles.

Mais dans ce cas les composants dépendent d'un contexte global, ils ne sont plus atomiques, ce qui rend le partage, les tests plus difficiles. Sans parler des risques de conflit entre les composants qui partagent des styles communs... jusqu'à ce qu'un besoin de personnalisation fasse jour. Un casse-tête bien connu des développeurs Web !

C'est la raison pour laquelle une nouvelle catégorie de solutions a émergé récemment: "CSS dans JavaScript" ou "Feuilles de styles en JavaScript".

Mark Dalgleish, l'auteur de CSS Modules, a écrit un excellent article qui explique l'intérêt de cette approche: Un language de style unifié.

Générateurs de Site Statique

1
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
J
F
M
A
M
J
J
A
S
O
N
D
2
Hexo

Hexo

A fast, simple & powerful blog framework, powered by Node.js.
+6.2k☆
664
519
609
487
469
431
494
537
471
509
476
486
J
F
M
A
M
J
J
A
S
O
N
D
3
React Static

React Static

⚛️ 🚀 A progressive static-site generator for React.
+3.0k☆
2.2k
341
338
J
F
M
A
M
J
J
A
S
O
N
D
4
Phenomic

Phenomic

Modular website compiler ⚡️
+1.4k☆
140
392
123
103
127
125
92
59
50
77
42
67
J
F
M
A
M
J
J
A
S
O
N
D
5
Metalsmith

Metalsmith

An extremely simple, pluggable static site generator.
+1.0k☆
107
90
72
85
82
72
136
73
81
72
80
61
J
F
M
A
M
J
J
A
S
O
N
D

Les Générateurs de Site Statique sont des outils capables de générer un ensemble de fichier HTML, CSS et JavaScript qu'il est possible de déployer sur n'importe quel serveur web.

De tels sites, dits statiques, ont l'avantage d'être performants, robustes et faciles à maintenir... à condition d'utiliser l'outil adéquat!

Numéro 2 en 2016, Gatsby tient sa revanche en 2017. Il permet de construire des sites web statiques en profitant du vaste éco-système React.

Cette année React Static est le nouveau venu dans la catégorie. Inspiré par Create React App, il propose une approche plus légère que Gatsby en misant sur la simplicité et les performances.

Observons que les projets Next.js et Nuxt, mentionnés précedemment parmi les éco-systèmes React et Vue, peuvent aussi être utilisés en tant que Générateurs de Site Statique.

GraphQL

1
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
J
F
M
A
M
J
J
A
S
O
N
D
2
React Starter Kit

React Starter Kit

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, Post
+4.3k☆
414
371
363
417
449
358
350
367
308
347
313
258
J
F
M
A
M
J
J
A
S
O
N
D
3
Apollo client

Apollo client

A fully-featured, production ready caching GraphQL client for every UI framework and GraphQ
+4.1k☆
64
338
348
285
295
327
295
331
414
438
393
J
F
M
A
M
J
J
A
S
O
N
D
4
GraphQL

GraphQL

GraphQL is a query language and execution engine tied to any backend service.
+2.8k☆
127
165
266
250
323
250
220
210
250
244
212
276
J
F
M
A
M
J
J
A
S
O
N
D
5
GraphiQL

GraphiQL

An in-browser IDE for exploring GraphQL.
+2.6k☆
213
222
242
J
F
M
A
M
J
J
A
S
O
N
D

Quand les historiens du futur jetteront un regard sur l'historique de GraphQL, 2017 sera probablement un point clé.

Des compagnies importantes telles que le New York Times ont commencé à adopter GraphQL, et sur le plan des librairies Relay et Apollo (les deux principales librairies client GraphQL) ont toutes les deux sorti des versions majeures cette année.

A part ces deux acteurs majeurs, d'autres compagnies telles que Graphcool ont aussi sorti une floppée d'autres outils et librairies, et les frameworks full-stack adoptant GraphQL tels que Vulcan commencent également à créer leur propre niche.

Il est aussi important de mentionner que le générateur de sites statiques le plus populaire de l'année, Gatsby, utilise également GraphQL en tant que maillon dans sa chaîne de traitement de données.

Avec autant de nouveaux entrants dans la galaxie GraphQL, ce n'est qu'une question de temps avant que cette technologie devienne une alternative valable à REST.

Conclusion

Nous avons donc vu que Vue.js reste au sommet de la hiérarchie des projets JavaScript, son succès s'étant accéléré en 2017.

L'eco-système React reste extrêmement populaire malgré les doutes et les craintes engendrés par un problème autour de la licence utilisée par Facebook pour ses projets open-source.

S'il fallait sélectionner un projet parmi les étoiles montantes de l'année, notre choix se porterait sur Prettier, c'est tellement pratique d'écrire du code sans plus se soucier du formatage !


Pour une approche plus qualitative sur l'univers JavaScript, lisez les résultats de l'enquête State of JavaScript 2017, nous avons collecté et analysé les réponses de plus de 23 000 développeurs.


Projetons-nous dans le futur, quels seront les grands projets de l'année 2018 ?

  • Un nouveau framework basé sur GraphQL ?
  • Une solution qui utilise le nouveau standard WebAssembly pour créer une expérience unique dans le navigateur web ?

Merci pour votre attention, rejoignez-nous sur Github... et rendez-vous dans un an !

Authors

Sacha Grief
Author of Discover Meteor and creator of Vulcan, a React+GraphQL open-source framework.