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 filantes 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 bestof.js.org, 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☆
En 2017, avec plus de 40.0k étoiles gagnées sur GitHub, Vue.js a été le projet JavaScript numéro 1. Tweet
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☆
En 2017, avec plus de 27.8k étoiles gagnées sur GitHub, React a été le projet JavaScript numéro 2. Tweet
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☆
En 2017, avec plus de 22.5k étoiles gagnées sur GitHub, Create React App a été le projet JavaScript numéro 3. Tweet
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☆
En 2017, avec plus de 22.0k étoiles gagnées sur GitHub, Puppeteer a été le projet JavaScript numéro 4. Tweet
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☆
En 2017, avec plus de 21.9k étoiles gagnées sur GitHub, Axios a été le projet JavaScript numéro 5. Tweet
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☆
En 2017, avec plus de 20.2k étoiles gagnées sur GitHub, VS Code a été le projet JavaScript numéro 6. Tweet
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☆
En 2017, avec plus de 17.7k étoiles gagnées sur GitHub, Prettier a été le projet JavaScript numéro 7. Tweet
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☆
En 2017, avec plus de 15.6k étoiles gagnées sur GitHub, React Native a été le projet JavaScript numéro 8. Tweet
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☆
En 2017, avec plus de 14.9k étoiles gagnées sur GitHub, Element a été le projet JavaScript numéro 9. Tweet
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☆
En 2017, avec plus de 14.8k étoiles gagnées sur GitHub, Electron a été le projet JavaScript numéro 10. Tweet
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
11
Bootstrap

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first project
+14.5k☆
En 2017, avec plus de 14.5k étoiles gagnées sur GitHub, Bootstrap a été le projet JavaScript numéro 11. Tweet
996
1.0k
1.4k
1.3k
1.1k
1.0k
1.1k
1.4k
1.2k
1.5k
1.3k
1.1k
J
F
M
A
M
J
J
A
S
O
N
D
12
Parcel

Parcel

📦🚀 Blazing fast, zero configuration web application bundler
+14.0k☆
En 2017, avec plus de 14.0k étoiles gagnées sur GitHub, Parcel a été le projet JavaScript numéro 12. Tweet
1
1
13.9k
J
F
M
A
M
J
J
A
S
O
N
D
13
Node.js

Node.js

Node.js JavaScript runtime
+13.7k☆
En 2017, avec plus de 13.7k étoiles gagnées sur GitHub, Node.js a été le projet JavaScript numéro 13. Tweet
869
1.1k
1.2k
1.0k
1.1k
1.1k
1.0k
1.2k
946
1.8k
1.5k
1.0k
J
F
M
A
M
J
J
A
S
O
N
D
14
Ant Design

Ant Design

🐜 A UI Design Language
+13.3k☆
En 2017, avec plus de 13.3k étoiles gagnées sur GitHub, Ant Design a été le projet JavaScript numéro 14. Tweet
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
15
Webpack

Webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting a
+13.1k☆
En 2017, avec plus de 13.1k étoiles gagnées sur GitHub, Webpack a été le projet JavaScript numéro 15. Tweet
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
16
Next.js

Next.js

Framework for server-rendered or statically-exported React apps
+12.7k☆
En 2017, avec plus de 12.7k étoiles gagnées sur GitHub, Next.js a été le projet JavaScript numéro 16. Tweet
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
17
D3

D3

Bring data to life with SVG, Canvas and HTML.
+12.7k☆
En 2017, avec plus de 12.7k étoiles gagnées sur GitHub, D3 a été le projet JavaScript numéro 17. Tweet
1.1k
1.1k
1.6k
1.3k
1.1k
768
1.0k
1.0k
985
879
879
797
J
F
M
A
M
J
J
A
S
O
N
D
18
Angular

Angular

One framework. Mobile & desktop.
+12.2k☆
En 2017, avec plus de 12.2k étoiles gagnées sur GitHub, Angular a été le projet JavaScript numéro 18. Tweet
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
19
Bulma

Bulma

Modern CSS framework based on Flexbox
+12.0k☆
En 2017, avec plus de 12.0k étoiles gagnées sur GitHub, Bulma a été le projet JavaScript numéro 19. Tweet
1.1k
867
927
840
907
873
1.1k
1.1k
888
1.7k
1.0k
778
J
F
M
A
M
J
J
A
S
O
N
D
20
TypeScript

TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
+11.6k☆
En 2017, avec plus de 11.6k étoiles gagnées sur GitHub, TypeScript a été le projet JavaScript numéro 20. Tweet
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
21
Preact

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
+10.4k☆
En 2017, avec plus de 10.4k étoiles gagnées sur GitHub, Preact a été le projet JavaScript numéro 21. Tweet
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
22
Redux

Redux

Predictable state container for JavaScript apps
+10.1k☆
En 2017, avec plus de 10.1k étoiles gagnées sur GitHub, Redux a été le projet JavaScript numéro 22. Tweet
870
821
1.1k
913
820
780
767
809
738
812
876
797
J
F
M
A
M
J
J
A
S
O
N
D
23
Animate.css

Animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
+10.0k☆
En 2017, avec plus de 10.0k étoiles gagnées sur GitHub, Animate.css a été le projet JavaScript numéro 23. Tweet
784
757
942
922
817
764
776
822
777
894
961
743
J
F
M
A
M
J
J
A
S
O
N
D
24
Storybook

Storybook

Interactive UI component dev & test: React, React Native, Vue, Angular
+9.7k☆
En 2017, avec plus de 9.7k étoiles gagnées sur GitHub, Storybook a été le projet JavaScript numéro 24. Tweet
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
25
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
En 2017, avec plus de 9.7k étoiles gagnées sur GitHub, Gatsby a été le projet JavaScript numéro 25. Tweet
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

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☆
En 2017, avec plus de 40.0k étoiles gagnées sur GitHub, Vue.js a été le framework JavaScript côté client numéro 1. Tweet
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☆
En 2017, avec plus de 27.8k étoiles gagnées sur GitHub, React a été le framework JavaScript côté client numéro 2. Tweet
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☆
En 2017, avec plus de 12.2k étoiles gagnées sur GitHub, Angular a été le framework JavaScript côté client numéro 3. Tweet
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☆
En 2017, avec plus de 10.4k étoiles gagnées sur GitHub, Preact a été le framework JavaScript côté client numéro 4. Tweet
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☆
En 2017, avec plus de 8.1k étoiles gagnées sur GitHub, Hyperapp a été le framework JavaScript côté client numéro 5. Tweet
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
6
dva

dva

🌱 React and redux based, lightweight and elm-style framework. (Inspired by elm and choo)
+5.3k☆
En 2017, avec plus de 5.3k étoiles gagnées sur GitHub, dva a été le framework JavaScript côté client numéro 6. Tweet
315
403
463
402
387
384
447
525
463
405
551
510
J
F
M
A
M
J
J
A
S
O
N
D
7
Inferno

Inferno

An extremely fast, React-like JavaScript library for building modern user interfaces
+4.6k☆
En 2017, avec plus de 4.6k étoiles gagnées sur GitHub, Inferno a été le framework JavaScript côté client numéro 7. Tweet
1.6k
396
375
237
276
193
239
364
500
151
149
116
J
F
M
A
M
J
J
A
S
O
N
D
8
Moon

Moon

🌙 ⚡️ A minimal, blazing fast UI library.
+3.7k☆
En 2017, avec plus de 3.7k étoiles gagnées sur GitHub, Moon a été le framework JavaScript côté client numéro 8. Tweet
20
356
226
403
1.9k
566
98
96
73
J
F
M
A
M
J
J
A
S
O
N
D
9
Angular 1

Angular 1

AngularJS - HTML enhanced for web apps!
+3.6k☆
En 2017, avec plus de 3.6k étoiles gagnées sur GitHub, Angular 1 a été le framework JavaScript côté client numéro 9. Tweet
381
388
392
277
365
347
323
317
270
217
203
130
J
F
M
A
M
J
J
A
S
O
N
D
10
Rax

Rax

A universal React-compatible render engine.
+2.6k☆
En 2017, avec plus de 2.6k étoiles gagnées sur GitHub, Rax a été le framework JavaScript côté client numéro 10. Tweet
1.1k
268
119
124
100
98
122
104
328
87
77
80
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☆
En 2017, avec plus de 6.7k étoiles gagnées sur GitHub, Express a été le framework Node.js numéro 1. Tweet
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☆
En 2017, avec plus de 5.8k étoiles gagnées sur GitHub, Koa a été le framework Node.js numéro 2. Tweet
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☆
En 2017, avec plus de 5.8k étoiles gagnées sur GitHub, Fastify a été le framework Node.js numéro 3. Tweet
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
micro

micro

Asynchronous HTTP microservices
+3.2k☆
En 2017, avec plus de 3.2k étoiles gagnées sur GitHub, micro a été le framework Node.js numéro 4. Tweet
434
277
272
252
273
177
244
419
230
198
223
157
J
F
M
A
M
J
J
A
S
O
N
D
5
Keystone

Keystone

node.js cms and web app framework
+3.0k☆
En 2017, avec plus de 3.0k étoiles gagnées sur GitHub, Keystone a été le framework Node.js numéro 5. Tweet
289
279
289
252
250
252
314
264
193
225
197
235
J
F
M
A
M
J
J
A
S
O
N
D
6
Nest

Nest

A progressive Node.js framework for building efficient and scalable server-side applications on top
+3.0k☆
En 2017, avec plus de 3.0k étoiles gagnées sur GitHub, Nest a été le framework Node.js numéro 6. Tweet
296
120
61
165
391
667
429
385
J
F
M
A
M
J
J
A
S
O
N
D
7
Feathers

Feathers

A REST and realtime API layer for modern applications.
+3.0k☆
En 2017, avec plus de 3.0k étoiles gagnées sur GitHub, Feathers a été le framework Node.js numéro 7. Tweet
305
273
280
257
293
258
250
234
190
232
226
165
J
F
M
A
M
J
J
A
S
O
N
D
8
Server.js

Server.js

Simple and powerful server for Node.js
+2.9k☆
En 2017, avec plus de 2.9k étoiles gagnées sur GitHub, Server.js a été le framework Node.js numéro 8. Tweet
17
10
4
8
3
17
10
8
1
34
2.7k
131
J
F
M
A
M
J
J
A
S
O
N
D
9
Loopback

Loopback

LoopBack makes it easy to build modern applications that require complex integrations.
+2.3k☆
En 2017, avec plus de 2.3k étoiles gagnées sur GitHub, Loopback a été le framework Node.js numéro 9. Tweet
193
180
224
194
224
283
208
168
167
192
158
139
J
F
M
A
M
J
J
A
S
O
N
D
10
Sails

Sails

Realtime MVC Framework for Node.js
+2.0k☆
En 2017, avec plus de 2.0k étoiles gagnées sur GitHub, Sails a été le framework Node.js numéro 10. Tweet
210
176
219
172
211
182
164
152
148
128
135
108
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, faites 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☆
En 2017, avec plus de 22.5k étoiles gagnées sur GitHub, Create React App a été le projet React numéro 1. Tweet
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☆
En 2017, avec plus de 13.3k étoiles gagnées sur GitHub, Ant Design a été le projet React numéro 2. Tweet
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☆
En 2017, avec plus de 12.7k étoiles gagnées sur GitHub, Next.js a été le projet React numéro 3. Tweet
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☆
En 2017, avec plus de 9.7k étoiles gagnées sur GitHub, Storybook a été le projet React numéro 4. Tweet
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☆
En 2017, avec plus de 9.7k étoiles gagnées sur GitHub, Gatsby a été le projet React numéro 5. Tweet
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
6
Material UI

Material UI

React components that implement Google's Material Design.
+9.6k☆
En 2017, avec plus de 9.6k étoiles gagnées sur GitHub, Material UI a été le projet React numéro 6. Tweet
641
749
833
842
816
757
883
796
701
848
864
918
J
F
M
A
M
J
J
A
S
O
N
D
7
React Navigation

React Navigation

Learn once, navigate anywhere
+8.8k☆
En 2017, avec plus de 8.8k étoiles gagnées sur GitHub, React Navigation a été le projet React numéro 7. Tweet
1.6k
910
846
646
822
612
586
494
535
609
632
486
J
F
M
A
M
J
J
A
S
O
N
D
8
React Router

React Router

Declarative routing for React
+8.7k☆
En 2017, avec plus de 8.7k étoiles gagnées sur GitHub, React Router a été le projet React numéro 8. Tweet
690
748
1.1k
747
762
647
710
725
572
662
673
666
J
F
M
A
M
J
J
A
S
O
N
D
9
Create React Native App

Create React Native App

Create a React Native app on any OS with no build config.
+7.7k☆
En 2017, avec plus de 7.7k étoiles gagnées sur GitHub, Create React Native App a été le projet React numéro 9. Tweet
56
34
3.4k
637
498
493
476
478
393
438
403
363
J
F
M
A
M
J
J
A
S
O
N
D
10
Ant Design Pro

Ant Design Pro

👨🏻‍💻👩🏻‍💻 An out-of-box UI solution for enterprise applications
+5.7k☆
En 2017, avec plus de 5.7k étoiles gagnées sur GitHub, Ant Design Pro a été le projet React numéro 10. Tweet
2.9k
1.1k
J
F
M
A
M
J
J
A
S
O
N
D
11
React boilerplate

React boilerplate

A highly scalable, offline-first foundation with the best developer experience and a focus on
+5.3k☆
En 2017, avec plus de 5.3k étoiles gagnées sur GitHub, React boilerplate a été le projet React numéro 11. Tweet
721
607
557
503
413
380
401
351
330
391
343
338
J
F
M
A
M
J
J
A
S
O
N
D
12
Recompose

Recompose

A React utility belt for function components and higher-order components.
+5.0k☆
En 2017, avec plus de 5.0k étoiles gagnées sur GitHub, Recompose a été le projet React numéro 12. Tweet
301
282
439
426
597
467
437
481
437
396
393
379
J
F
M
A
M
J
J
A
S
O
N
D
13
react-loadable

react-loadable

A higher order component for loading components with promises.
+4.9k☆
En 2017, avec plus de 4.9k étoiles gagnées sur GitHub, react-loadable a été le projet React numéro 13. Tweet
499
262
212
377
307
285
178
553
511
471
J
F
M
A
M
J
J
A
S
O
N
D
14
NativeBase

NativeBase

Essential cross-platform UI components for React Native
+4.4k☆
En 2017, avec plus de 4.4k étoiles gagnées sur GitHub, NativeBase a été le projet React numéro 14. Tweet
315
546
433
414
403
381
344
335
322
272
311
326
J
F
M
A
M
J
J
A
S
O
N
D
15
Enzyme

Enzyme

JavaScript Testing utilities for React
+4.4k☆
En 2017, avec plus de 4.4k étoiles gagnées sur GitHub, Enzyme a été le projet React numéro 15. Tweet
322
362
369
399
342
325
341
344
380
411
408
382
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 !).

En position numéro 10, 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☆
En 2017, avec plus de 14.9k étoiles gagnées sur GitHub, Element a été le project Vue.js numéro 1. Tweet
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☆
En 2017, avec plus de 9.5k étoiles gagnées sur GitHub, iView a été le project Vue.js numéro 2. Tweet
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☆
En 2017, avec plus de 7.2k étoiles gagnées sur GitHub, Vuex a été le project Vue.js numéro 3. Tweet
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☆
En 2017, avec plus de 6.5k étoiles gagnées sur GitHub, Weex a été le project Vue.js numéro 4. Tweet
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☆
En 2017, avec plus de 6.3k étoiles gagnées sur GitHub, Nuxt a été le project Vue.js numéro 5. Tweet
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☆
En 2017, avec plus de 6.3k étoiles gagnées sur GitHub, Vuetify a été le project Vue.js numéro 6. Tweet
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☆
En 2017, avec plus de 5.5k étoiles gagnées sur GitHub, Mint UI a été le project Vue.js numéro 7. Tweet
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☆
En 2017, avec plus de 4.6k étoiles gagnées sur GitHub, vux a été le project Vue.js numéro 8. Tweet
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☆
En 2017, avec plus de 4.6k étoiles gagnées sur GitHub, vue-router a été le project Vue.js numéro 9. Tweet
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☆
En 2017, avec plus de 3.7k étoiles gagnées sur GitHub, Vue material a été le project Vue.js numéro 10. Tweet
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 sont 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 application 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. Alibaba, le géant du e-commerce chinois, l'utilise pour construire des applications utiliseés de manière intense à travers le monde, avec une priorité accordée aux performances.

Mobile

1
React Native

React Native

A framework for building native apps with React.
+15.6k☆
En 2017, avec plus de 15.6k étoiles gagnées sur GitHub, React Native a été le framework JavaScript pour mobiles numéro 1. Tweet
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☆
En 2017, avec plus de 6.5k étoiles gagnées sur GitHub, Weex a été le framework JavaScript pour mobiles numéro 2. Tweet
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☆
En 2017, avec plus de 5.5k étoiles gagnées sur GitHub, Ionic a été le framework JavaScript pour mobiles numéro 3. Tweet
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☆
En 2017, avec plus de 3.7k étoiles gagnées sur GitHub, Quasar a été le framework JavaScript pour mobiles numéro 4. Tweet
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☆
En 2017, avec plus de 2.9k étoiles gagnées sur GitHub, NativeScript a été le framework JavaScript pour mobiles numéro 5. Tweet
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☆
En 2017, avec plus de 11.6k étoiles gagnées sur GitHub, TypeScript a été le compilateur JavaScript numéro 1. Tweet
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☆
En 2017, avec plus de 5.7k étoiles gagnées sur GitHub, Babel a été le compilateur JavaScript numéro 2. Tweet
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☆
En 2017, avec plus de 5.1k étoiles gagnées sur GitHub, Flow a été le compilateur JavaScript numéro 3. Tweet
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☆
En 2017, avec plus de 2.1k étoiles gagnées sur GitHub, Reason a été le compilateur JavaScript numéro 4. Tweet
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☆
En 2017, avec plus de 1.2k étoiles gagnées sur GitHub, Purescript a été le compilateur JavaScript numéro 5. Tweet
123
77
96
101
63
96
92
106
99
121
123
108
J
F
M
A
M
J
J
A
S
O
N
D
6
ClojureScript

ClojureScript

Clojure to JS compiler
+1.0k☆
En 2017, avec plus de 1.0k étoiles gagnées sur GitHub, ClojureScript a été le compilateur JavaScript numéro 6. Tweet
73
59
83
75
54
72
81
70
59
56
54
46
J
F
M
A
M
J
J
A
S
O
N
D
7
CoffeeScript

CoffeeScript

Unfancy JavaScript
+896☆
En 2017, avec plus de 896 étoiles gagnées sur GitHub, CoffeeScript a été le compilateur JavaScript numéro 7. Tweet
77
78
63
98
71
62
70
70
118
96
56
37
J
F
M
A
M
J
J
A
S
O
N
D
8
Elm

Elm

Compiler for Elm, a functional language for reliable webapps.
+880☆
En 2017, avec plus de 880 étoiles gagnées sur GitHub, Elm a été le compilateur JavaScript numéro 8. Tweet
71
51
82
53
62
56
51
50
55
63
55
61
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☆
En 2017, avec plus de 14.0k étoiles gagnées sur GitHub, Parcel a été l'outil de construction JavaScript numéro 1. Tweet
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☆
En 2017, avec plus de 13.1k étoiles gagnées sur GitHub, Webpack a été l'outil de construction JavaScript numéro 2. Tweet
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☆
En 2017, avec plus de 3.6k étoiles gagnées sur GitHub, Gulp a été l'outil de construction JavaScript numéro 3. Tweet
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☆
En 2017, avec plus de 3.5k étoiles gagnées sur GitHub, Rollup a été l'outil de construction JavaScript numéro 4. Tweet
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☆
En 2017, avec plus de 2.7k étoiles gagnées sur GitHub, Poi a été l'outil de construction JavaScript numéro 5. Tweet
127
132
94
129
82
78
54
165
178
200
1.3k
J
F
M
A
M
J
J
A
S
O
N
D
6
FuseBox

FuseBox

A blazing fast js bundler/loader with a comprehensive API
+2.5k☆
En 2017, avec plus de 2.5k étoiles gagnées sur GitHub, FuseBox a été l'outil de construction JavaScript numéro 6. Tweet
109
1.3k
185
76
107
276
81
92
94
100
60
75
J
F
M
A
M
J
J
A
S
O
N
D
7
Browserify

Browserify

browser-side require() the node.js way
+1.1k☆
En 2017, avec plus de 1.1k étoiles gagnées sur GitHub, Browserify a été l'outil de construction JavaScript numéro 7. Tweet
101
90
81
103
94
77
72
82
76
89
94
92
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☆
En 2017, avec plus de 7.1k étoiles gagnées sur GitHub, Jest a été le framework de test JavaScript numéro 1. Tweet
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☆
En 2017, avec plus de 4.8k étoiles gagnées sur GitHub, AVA a été le framework de test JavaScript numéro 2. Tweet
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☆
En 2017, avec plus de 3.1k étoiles gagnées sur GitHub, Mocha a été le framework de test JavaScript numéro 3. Tweet
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☆
En 2017, avec plus de 1.2k étoiles gagnées sur GitHub, Jasmine a été le framework de test JavaScript numéro 4. Tweet
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☆
En 2017, avec plus de 1.0k étoiles gagnées sur GitHub, Tape a été le framework de test JavaScript numéro 5. Tweet
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 majeurs 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é 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éponse 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 in 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☆
En 2017, avec plus de 20.2k étoiles gagnées sur GitHub, VS Code a été l'éditeur de texte numéro 1. Tweet
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☆
En 2017, avec plus de 9.1k étoiles gagnées sur GitHub, Atom a été l'éditeur de texte numéro 2. Tweet
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☆
En 2017, avec plus de 7.4k étoiles gagnées sur GitHub, Reactide a été l'éditeur de texte numéro 3. Tweet
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☆
En 2017, avec plus de 1.9k étoiles gagnées sur GitHub, Brackets a été l'éditeur de texte numéro 4. Tweet
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☆
En 2017, avec plus de 1.4k étoiles gagnées sur GitHub, Nuclide a été l'éditeur de texte numéro 5. Tweet
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 issues de projets open-source et utilisant des technologies web (désolé pour les utilisateurs de Sublime !).

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 formatter 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☆
En 2017, avec plus de 8.7k étoiles gagnées sur GitHub, Styled Components a été l'outil CSS-dans-JavaScript numéro 1. Tweet
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☆
En 2017, avec plus de 2.9k étoiles gagnées sur GitHub, CSS Modules a été l'outil CSS-dans-JavaScript numéro 2. Tweet
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☆
En 2017, avec plus de 2.9k étoiles gagnées sur GitHub, Polished a été l'outil CSS-dans-JavaScript numéro 3. Tweet
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☆
En 2017, avec plus de 2.9k étoiles gagnées sur GitHub, Glamorous a été l'outil CSS-dans-JavaScript numéro 4. Tweet
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☆
En 2017, avec plus de 2.5k étoiles gagnées sur GitHub, Emotion a été l'outil CSS-dans-JavaScript numéro 5. Tweet
488
257
190
352
186
298
J
F
M
A
M
J
J
A
S
O
N
D
6
Styled JSX

Styled JSX

Full CSS support for JSX without compromises
+1.7k☆
En 2017, avec plus de 1.7k étoiles gagnées sur GitHub, Styled JSX a été l'outil CSS-dans-JavaScript numéro 6. Tweet
125
133
216
138
163
105
123
76
92
231
135
129
J
F
M
A
M
J
J
A
S
O
N
D
7
Aphrodite

Aphrodite

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum
+1.5k☆
En 2017, avec plus de 1.5k étoiles gagnées sur GitHub, Aphrodite a été l'outil CSS-dans-JavaScript numéro 7. Tweet
167
117
161
194
172
135
101
99
91
85
62
91
J
F
M
A
M
J
J
A
S
O
N
D
8
Glamor

Glamor

inline css for react et al
+1.3k☆
En 2017, avec plus de 1.3k étoiles gagnées sur GitHub, Glamor a été l'outil CSS-dans-JavaScript numéro 8. Tweet
208
92
100
140
192
92
122
98
56
75
69
69
J
F
M
A
M
J
J
A
S
O
N
D
9
JSS

JSS

JSS is an authoring tool for CSS which uses JavaScript as a host language.
+1.3k☆
En 2017, avec plus de 1.3k étoiles gagnées sur GitHub, JSS a été l'outil CSS-dans-JavaScript numéro 9. Tweet
94
107
107
94
101
107
115
94
89
120
142
126
J
F
M
A
M
J
J
A
S
O
N
D
10
Radium

Radium

A toolchain for React component styling.
+1.2k☆
En 2017, avec plus de 1.2k étoiles gagnées sur GitHub, Radium a été l'outil CSS-dans-JavaScript numéro 10. Tweet
144
120
112
126
99
92
89
88
68
81
106
68
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 confilt entre les composants qui partagent des styles communs... jusqu'à ce que 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 unique.

Générateurs de Site Statique

1
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
En 2017, avec plus de 9.7k étoiles gagnées sur GitHub, Gatsby a été le générateur de site statique JavaScript numéro 1. Tweet
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☆
En 2017, avec plus de 6.2k étoiles gagnées sur GitHub, Hexo a été le générateur de site statique JavaScript numéro 2. Tweet
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☆
En 2017, avec plus de 3.0k étoiles gagnées sur GitHub, React Static a été le générateur de site statique JavaScript numéro 3. Tweet
2.2k
341
338
J
F
M
A
M
J
J
A
S
O
N
D
4
Phenomic

Phenomic

Modular website compiler ⚡️
+1.4k☆
En 2017, avec plus de 1.4k étoiles gagnées sur GitHub, Phenomic a été le générateur de site statique JavaScript numéro 4. Tweet
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☆
En 2017, avec plus de 1.0k étoiles gagnées sur GitHub, Metalsmith a été le générateur de site statique JavaScript numéro 5. Tweet
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. Insipé 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☆
En 2017, avec plus de 9.7k étoiles gagnées sur GitHub, Gatsby a été le projet GraphQL JavaScript numéro 1. Tweet
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☆
En 2017, avec plus de 4.3k étoiles gagnées sur GitHub, React Starter Kit a été le projet GraphQL JavaScript numéro 2. Tweet
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 server or UI framework
+4.1k☆
En 2017, avec plus de 4.1k étoiles gagnées sur GitHub, Apollo client a été le projet GraphQL JavaScript numéro 3. Tweet
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☆
En 2017, avec plus de 2.8k étoiles gagnées sur GitHub, GraphQL a été le projet GraphQL JavaScript numéro 4. Tweet
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☆
En 2017, avec plus de 2.6k étoiles gagnées sur GitHub, GraphiQL a été le projet GraphQL JavaScript numéro 5. Tweet
213
222
242
J
F
M
A
M
J
J
A
S
O
N
D
6
Relay

Relay

Relay is a JavaScript framework for building data-driven React applications.
+2.5k☆
En 2017, avec plus de 2.5k étoiles gagnées sur GitHub, Relay a été le projet GraphQL JavaScript numéro 6. Tweet
157
128
193
541
201
191
212
181
161
171
148
206
J
F
M
A
M
J
J
A
S
O
N
D
7
Apollo Server

Apollo Server

GraphQL server for Express, Connect, Hapi, Koa and more
+2.3k☆
En 2017, avec plus de 2.3k étoiles gagnées sur GitHub, Apollo Server a été le projet GraphQL JavaScript numéro 7. Tweet
301
199
179
208
187
211
J
F
M
A
M
J
J
A
S
O
N
D
8
Graphcool

Graphcool

⚡️ Turns your database into a GraphQL API
+1.7k☆
En 2017, avec plus de 1.7k étoiles gagnées sur GitHub, Graphcool a été le projet GraphQL JavaScript numéro 8. Tweet
241
939
477
J
F
M
A
M
J
J
A
S
O
N
D
9
Vulcan

Vulcan

🌋 A toolkit to quickly build apps with React, GraphQL & Meteor
+1.4k☆
En 2017, avec plus de 1.4k étoiles gagnées sur GitHub, Vulcan a été le projet GraphQL JavaScript numéro 9. Tweet
127
65
109
140
138
153
149
140
91
79
88
79
J
F
M
A
M
J
J
A
S
O
N
D
10
GraphQL Playground

GraphQL Playground

🎮 GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collabor
+1.3k☆
En 2017, avec plus de 1.3k étoiles gagnées sur GitHub, GraphQL Playground a été le projet GraphQL JavaScript numéro 10. Tweet
172
134
109
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 the 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éararchie 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 formattage !


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 !

This article is also available in:

English

中文

Español