JS ecosystem

as for 05.06.2017

still work in progress

main todos at the end

Introduction

The influential post How it feels to learn JavaScript in 2016 highlighted important feature of JavaScript - a vast amount of JavaScript frameworks avaiable for developers. But feelings are not enough to describe the whole ecosystem and we need some data. Some of them were collected by the State of JavaScript Survey where we can find answers to questions on topics ranging from front-end frameworks and state management, to build tools and testing libraries. For those who are starting with web-development I would recommend to read A Study Plan To Cure JavaScript Fatigue.

My personal goal here is to analyse the most popular frameworks to highlight another troublesome feature of JavaScript. There is not only vast amount of the frameworks, but also the vast amount of versions of each framework. It is hard for the beginner to study particular framework based on the materials and courses avaiable online,

because there are becoming outdated very quickly. Even though that for most of them principles are not changing some features are appearing/disappearing often. But not only frameworks are changing. All existing JavaScript labels can give you a headache. The first encouter of ES5, ES6 and ES2016 can be frightening, and the advice that you can learn babel to resolve the problem is not helping. For those who are not familiar with them - here you have nice blog post about JavaScript versioning.

Based on github repos and npm stats I will check how often new version of each framework is released with emphasis on the major releases. Based on the the State of JavaScript Survey I will focus on the following frameworks:

• Front-End survey
  • React ✅
  • Angular ✅
  • Ember ✅
  • Vue ✅
  • Backbone ✅
• State Management survey
  • Redux ✅
  • Mobx
  • Relay
• Full- Stack survey
  • Meteor ✅
  • FeathersJS
  • DoneJS
• Build Tools survey
  • Webpack ✅
  • Grunt
  • Gulp
  • Browserify
• Node.js ✅

The analysis is done with R and presented using GitHub Pages. All codes are available on GitHub

Motivation

Some part of my motivation was described in the introduction. However it lacks data. Is it JavaScript really important? How important is it?

Using Google BigQuery httparchive datasets I check the growth rate of bytes count for web content. Starting from 2012-01-01 till 2017-04-01 the average size of JS code for 10,000 most popular webpages grew by 200% while HTML content only by ~50%. More importantly since 2014 Html count stabilized while JS and CSS code still rises. Data show how important JS is for the web development right now. Keep in mind that those data do not show e.g. the server-side JS implementations (or other back-end code base).

Bytes and Growth rates - web content

date	bytesHtml	bytesJS	bytesCSS	bytesPic	growthHtml	growthJS	growthCSS	growthPic
2012-01-01	41963	179479	34961	1256949	0.00	0.00	0.00	0.00
2012-04-01	42590	197774	37387	1302799	1.49	10.19	6.94	3.65
2012-07-01	43018	202495	36761	1240668	2.51	12.82	5.15	-1.30
2012-10-01	48171	205792	38407	1355806	14.79	14.66	9.86	7.86
2013-01-01	48673	207754	35775	1433817	15.99	15.75	2.33	14.07
2013-04-01	52531	233017	39406	1658013	25.18	29.83	12.71	31.91
2013-07-01	55262	238135	39385	1785808	31.69	32.68	12.65	42.07
2013-10-01	57919	278787	46698	1873393	38.02	55.33	33.57	49.04
2014-01-01	57057	296016	50125	1990561	35.97	64.93	43.37	58.36
2014-04-01	56389	303144	51734	2027095	34.38	68.90	47.98	61.27
2014-07-01	58914	321480	55876	2247900	40.39	79.12	59.82	78.84
2014-10-01	59408	330501	58642	2276486	41.57	84.14	67.73	81.11
2015-01-01	60720	340748	61452	2420417	44.70	89.85	75.77	92.56
2015-04-01	61672	364864	66954	2396793	46.96	103.29	91.51	90.68
2015-07-01	56653	413541	70301	2648086	35.01	130.41	101.08	110.68
2015-10-01	54444	381833	69619	2271052	29.74	112.74	99.13	80.68
2016-01-01	73143	430203	74778	2793915	74.30	139.69	113.89	122.28
2016-04-01	71189	432455	75122	2871931	69.65	140.95	114.87	128.48
2016-07-01	72129	489601	75518	2991113	71.89	172.79	116.01	137.97
2016-10-01	58765	509507	72927	3070641	40.04	183.88	108.59	144.29
2017-02-15	57150	507092	76550	3032973	36.19	182.53	118.96	141.30
2017-04-01	57867	535009	80242	3197328	37.90	198.09	129.52	154.37

JS frameworks

As for now the data about following frameworks was downloaded.

owner	name	date_min	version_first	date_max	version_last
angular	angular	2015-03-14	0.0.1	2017-06-01	4.2.0
jashkenas	backbone	2010-10-13	0.1.0	2016-04-05	1.3.3
webpack	webpack	2013-12-19	1.0.0	2017-06-07	3.0.0
nodejs	node	2009-05-27	0.0.1	2017-06-06	8.0.0
meteor	meteor	2011-12-10	0.0.40	2017-06-06	1.6
emberjs	ember.js	2011-06-18	0.9	2017-05-31	2.14.0
facebook	react	2013-07-02	0.3.0	2017-05-01	15.5.4
vuejs	vue	2013-12-07	0.6.0	2017-05-09	2.3.3
reactjs	redux	2015-06-02	0.2.0	2016-09-04	3.6.0
Polymer	polymer	2013-07-11	0.0.20130711	2017-06-15	1.9.2

Some frameworks use only numeric versioning, while other use also extended tags (e.g. rc1, rc2, etc. - see versioning).

Some data was downloaded using GitHub GraphQL api, some using webscrapping techniques. For more details see R codes.

NodeJS

• Ofifcial webpage
• Wikipedia
• NodeJS releases policy

Node.js is an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-side.

Nodejs with its node repo is using number versioning, however they are releasing so often that in description you have details about each release. Maybe in the future I will extend the analysis with those details.

Last 10 releases:

owner	name	date	version	version_ext
nodejs	node	2017-06-06	v6.11.0	6.11.0
nodejs	node	2017-05-30	v8.0.0	8.0.0
nodejs	node	2017-05-03	v7.10.0	7.10.0
nodejs	node	2017-05-02	v6.10.3	6.10.3
nodejs	node	2017-05-02	v4.8.3	4.8.3
nodejs	node	2017-04-11	v7.9.0	7.9.0
nodejs	node	2017-04-04	v4.8.2	4.8.2
nodejs	node	2017-04-04	v6.10.2	6.10.2
nodejs	node	2017-03-29	v7.8.0	7.8.0
nodejs	node	2017-03-21	v7.7.4	7.7.4

<script data-plotly="m.ziembinski:1" sharekey-plotly="BeYDrjyJ48pqdFRPOOJwlP" src="https://plot.ly/embed.js" async></script>

Interactive chart

<script data-plotly="m.ziembinski:3" sharekey-plotly="NdcRn3bJqX3rP1q5Cqi6vo" src="https://plot.ly/embed.js" async></script>

Interactive chart

Other links:

• Node by numbers

React

• Ofifcial webpage
• Wikipedia

React is an open-source JavaScript library for building user interfaces.

Facebook with its react repo is using mainly number versioning. After version v0.14.8 facebook change the versioning and started with the version v15.0.0. See tables below:

Last 10 releases:

owner	name	date	version	version_ext
facebook	react	2017-05-01	v15.5.1	15.5.1
facebook	react	2017-05-01	v15.5.2	15.5.2
facebook	react	2017-05-01	v15.5.3	15.5.3
facebook	react	2017-05-01	v15.5.4	15.5.4
facebook	react	2017-04-07	v15.5.0	15.5.0
facebook	react	2017-01-06	v15.4.2	15.4.2
facebook	react	2016-11-23	v15.4.1	15.4.1
facebook	react	2016-11-16	v15.4.0	15.4.0
facebook	react	2016-09-19	v15.3.2	15.3.2
facebook	react	2016-08-19	v15.3.1	15.3.1

Major versions:

owner	name	major	N	date_first	date_last	previous	since_release	since_previous
facebook	react	15	20	2016-03-08	2017-05-01	2015-07-03	419 days	249 days
facebook	react	14	13	2015-07-03	2016-03-29	2015-02-22	270 days	131 days
facebook	react	13	6	2015-02-22	2015-05-08	2014-10-16	75 days	129 days
facebook	react	12	4	2014-10-16	2014-12-18	2014-07-13	63 days	95 days
facebook	react	11	4	2014-07-13	2014-09-16	2014-03-19	65 days	116 days
facebook	react	10	2	2014-03-19	2014-03-21	2014-02-17	2 days	30 days
facebook	react	9	2	2014-02-17	2014-02-20	2013-12-19	3 days	60 days
facebook	react	8	1	2013-12-19	2013-12-19	2013-10-16	0 days	64 days
facebook	react	5	3	2013-10-16	2013-12-18	2013-07-17	63 days	91 days
facebook	react	4	3	2013-07-17	2013-12-18	2013-05-29	154 days	49 days
facebook	react	3	2	2013-05-29	2013-06-20	NA	22 days	NA

Interactive chart

Interactive chart

NPM stats.

Angular

Last 10 releases:

owner	name	date	version	version_ext
angular	angular	2017-06-01	4.2.0-rc.2	4.2.0
angular	angular	2017-05-26	4.2.0-rc.1	4.2.0
angular	angular	2017-05-19	4.2.0-rc.0	4.2.0
angular	angular	2017-05-17	4.1.3	4.1.3
angular	angular	2017-05-10	4.2.0-beta.1	4.2.0
angular	angular	2017-05-10	4.1.2	4.1.2
angular	angular	2017-05-04	4.2.0-beta.0	4.2.0
angular	angular	2017-05-04	4.1.1	4.1.1
angular	angular	2017-04-26	4.1.0	4.1.0
angular	angular	2017-04-21	4.1.0-rc.0	4.1.0

Major versions:

owner	name	major	N	date_first	date_last	previous	since_release	since_previous
angular	angular	4	30	2016-12-14	2017-06-01	2015-03-14	169 days	641 days
angular	angular	2	113	2015-03-14	2017-03-17	NA	734 days	NA

Interactive chart

Polymer

Last 10 releases:

owner	name	date	version	version_ext
Polymer	polymer	2017-06-15	v1.9.2	1.9.2
Polymer	polymer	2017-06-15	v1.9.2-dev	1.9.2
Polymer	polymer	2017-05-25	v2.0.1	2.0.1
Polymer	polymer	2017-05-15	v2.0.0	2.0.0
Polymer	polymer	2017-05-13	v2.0.0-rc.9	2.0.0
Polymer	polymer	2017-05-12	v2.0.0-rc.8	2.0.0
Polymer	polymer	2017-04-19	v2.0.0-rc.7	2.0.0
Polymer	polymer	2017-04-18	v2.0.0-rc.6	2.0.0
Polymer	polymer	2017-04-17	v1.9.1	1.9.1
Polymer	polymer	2017-04-17	v1.9.1-dev	1.9.1

Major versions:

owner	name	major	N	date_first	date_last	previous	since_release	since_previous
Polymer	polymer	2	11	2017-03-04	2017-05-25	2015-05-27	82 days	647 days
Polymer	polymer	1	45	2015-05-27	2017-06-15	2013-07-11	750 days	685 days
Polymer	polymer	0	56	2013-07-11	2015-05-27	NA	685 days	NA

Interactive chart

Redux

Last 10 releases:

owner	name	date	version	version_ext
reactjs	redux	2016-09-04	v3.6.0	3.6.0
reactjs	redux	2016-04-24	v3.5.2	3.5.2
reactjs	redux	2016-04-20	v3.5.0	3.5.0
reactjs	redux	2016-04-20	v3.5.1	3.5.1
reactjs	redux	2016-04-08	v3.4.0	3.4.0
reactjs	redux	2016-02-06	v3.3.1	3.3.1
reactjs	redux	2016-02-05	v3.3.0	3.3.0
reactjs	redux	2016-02-02	v3.2.1	3.2.1
reactjs	redux	2016-02-01	v3.2.0	3.2.0
reactjs	redux	2016-01-31	v3.1.6	3.1.6

Major versions:

owner	name	major	N	date_first	date_last	previous	since_release	since_previous
reactjs	redux	3	24	2015-09-12	2016-09-04	2015-09-01	358 days	11 days
reactjs	redux	2	1	2015-09-01	2015-09-01	2015-06-30	0 days	63 days
reactjs	redux	1	4	2015-06-30	2015-08-15	2015-06-02	46 days	28 days
reactjs	redux	0	20	2015-06-02	2015-06-19	NA	17 days	NA

Interactive chart

Interactive chart

WebPack

Last 10 releases:

owner	name	date	version	version_ext
webpack	webpack	2017-06-07	v3.0.0-rc.1	3.0.0
webpack	webpack	2017-06-05	v3.0.0-rc.0	3.0.0
webpack	webpack	2017-05-25	v2.6.1	2.6.1
webpack	webpack	2017-05-22	v2.6.0	2.6.0
webpack	webpack	2017-05-06	v2.5.1	2.5.1
webpack	webpack	2017-05-04	v2.5.0	2.5.0
webpack	webpack	2017-04-14	v2.4.1	2.4.1
webpack	webpack	2017-04-14	v2.4.0	2.4.0
webpack	webpack	2017-04-13	v1.15.0	1.15.0
webpack	webpack	2017-04-03	v2.3.3	2.3.3

Major versions:

owner	name	major	N	date_first	date_last	previous	since_release	since_previous
webpack	webpack	3	2	2017-06-05	2017-06-07	2015-11-01	2 days	582 days
webpack	webpack	2	58	2015-11-01	2017-05-25	2013-12-19	571 days	682 days
webpack	webpack	1	178	2013-12-19	2017-04-13	NA	1211 days	NA

Interactive chart

Interactive chart

Framework

Last 10 releases:

Major versions:

Interactive chart

Interactive chart

Appendix

Something about JS

• Overview of the JavaScript ecosystem
• A JAVASCRIPT ECOSYSTEM OVERVIEW
• JavaScript Fatigue
• The current JavaScript churn, and its long-term effect on your business

Other useful links if you want to know how Internet is working

• npm statistics
• Find out what websites are Built With
• Libscore - stats on JavaScript library usage
• the State of JavaScript Survey

Versioning

I won't go into details of the details of a software release life cycle, as they can be easily check, e.g on Wikipedia. Here you can find meanings of the most common abbreviations:

• GA - General availability (a release); should be very stable and feature complete
• RC - Release candidate; probably feature complete and should be pretty stable - problems should be relatively rare and minor, but worth reporting to try to get them fixed for release.
• M - Milestone build - probably not feature complete; should be vaguely stable (i.e. it's more than just a nightly snapshot) but may still have problems.
• LTS - Long-term support; a type of special versions or editions of software designed to be supported for a longer than normal period.

Awesome GraphQL

• awesome-graphql
• APIs-guru

To Do

• analysis of alpha, beta and rc releases
• summary of all frameworks releases
• github pages webpage to present data
• why release dates are different in graphql database and tags web?

diff between releases and tags. React data suggest that tag dates are better (see react ver. 0.10-0.12).

• download other libriaries
• changing charts to d3 to consider

Notes

pandoc -r markdown -w latex -o latex/outfile.tex README.md