Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

2016 - 2019 前端现状对比统计

image.png

历史的车轮

每一条线都代表着 2016 到 2019 的数据统计,越往上表示使用的人越多,越往右表示有越多的用户想使用。

从下图可以看出 React、TypeScript、Express、Jest 越来越受用户的青睐。

WX201912212123292x.png

新特性

最让人兴奋的是 JavaScript 做为一种语言并没有停滞不前。从箭头函数到结构,在过去几年中添加的很多重要特性现在已经成为我们编写 JavaScript 的一部分。

{
  "color": [
    "rgb(65, 199, 199)",
    "rgb(29, 126, 126)",
    "rgb(206, 205, 204)"
  ],
  "legend": {
    "data": [
      "使用过",
      "知道",
      "未使用"
    ]
  },
  "tooltip": {},
  "xAxis": {
    "data": [
      "Destructuring",
      "Spread Operator",
      "Arrow Functions",
      "Proxies",
      "Async/Await",
      "Promises",
      "Decorators",
      "Maps",
      "Sets",
      "Typed Arrays",
      "Array.prototype.flat()",
      "Fetch",
      "i18n",
      "Local Storage",
      "Service Workers",
      "Web Animations",
      "Web Audio",
      "Web Components",
      "WebGL",
      "WebRTC",
      "WebSocket",
      "Web Speech API",
      "WebVR",
      "Progressive Web Apps",
      "WebAssembly (WASM)"
    ]
  },
  "yAxis": {},
  "series": [
    {
      "name": "使用过",
      "type": "bar",
      "stack": "one",
      "data": [
        17864,
        18719,
        20336,
        3601,
        18363,
        19465,
        7883,
        14533,
        11602,
        5768,
        5515,
        16646,
        8476,
        17918,
        7366,
        2886,
        4184,
        5637,
        3398,
        2210,
        12048,
        1528,
        620,
        9787,
        1444
      ]
    },
    {
      "name": "知道",
      "type": "bar",
      "stack": "one",
      "data": [
        19627,
        20282,
        20791,
        11856,
        20587,
        20543,
        15661,
        19373,
        17893,
        13042,
        13912,
        18958,
        16511,
        20021,
        18388,
        13455,
        15990,
        18090,
        17349,
        11612,
        18926,
        11060,
        10461,
        19017,
        16694
      ]
    },
    {
      "name": "未使用",
      "type": "bar",
      "stack": "one",
      "data": [
        1763,
        1563,
        455,
        8255,
        2224,
        1078,
        7778,
        4840,
        6291,
        7274,
        8397,
        2312,
        8035,
        2103,
        11022,
        10569,
        11806,
        12453,
        13951,
        9402,
        6878,
        9532,
        9841,
        9230,
        15250
      ]
    }
  ]
}

JavaScript 语言

概览

下图从满意度对主流语言做了 2016 - 2019 的统计对比,恭喜 TypeScript 再次获胜

{
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": [
      "TypeScript",
      "Reason",
      "Elm",
      "PureScript",
      "ClojureScript"
    ]
  },
  "xAxis": {
    "data": [
      "2016",
      "2017",
      "2018",
      "2019"
    ]
  },
  "yAxis": {
    "type": "value",
    "axisLabel": {
            "formatter": "{value} %"
        }
  },
  "color": [
    "rgb(103, 139, 255)",
    "rgb(255, 104, 239)",
    "rgb(255, 151, 151)",
    "rgb(171, 120, 255)",
    "rgb(255, 201, 73)"
  ],
  "series": [
    {
      "name": "TypeScript",
      "type": "line",
      "data": [
        83,
        85.3,
        89.6,
        88.9
      ],
      "smooth": true
    },
    {
      "name": "Reason",
      "type": "line",
      "data": [
        null,
        69.7,
        86.7,
        78.8
      ],
      "smooth": true
    },
    {
      "name": "Elm",
      "type": "line",
      "data": [
        83.6,
        80.8,
        73.4,
        71.7
      ],
      "smooth": true
    },
    {
      "name": "PureScript",
      "type": "line",
      "data": [
        66.6,
        63.6,
        72.1,
        59.7
      ],
      "smooth": true
    },
    {
      "name": "ClojureScript",
      "type": "line",
      "data": [
        null,
        null,
        null,
        69.8
      ],
      "smooth": true
    }
  ]
}

分类比对

颜色越亮代表越积极

{
  "color": [
    "rgb(254, 106, 106)",
    "rgb(252, 143, 143)",
    "rgb(65, 199, 199)",
    "rgb(101, 224, 224)",
    "rgb(206, 205, 204)"
  ],
  "legend": {
    "data": [
      "继续使用",
      "不再使用",
      "有兴趣", 
      "没有兴趣",
      "没听过"
    ]
  },
  "tooltip": {},
  "xAxis": {
    "data":  [
      "TypeScript",
      "Reason",
      "Elm",
      "ClojureScript",
      "PureScript"
    ]
  },
  "yAxis": {
"axisLabel": {
            "formatter": "{value} %"
        }},
  "series": [
    {
      "name": "继续使用",
      "type": "bar",
      "stack": "one",
      "data": [58.5, 3.5, 4.7, 2, 1.6]
    },
    {
      "name": "不再使用",
      "type": "bar",
      "stack": "one",
      "data":[7.3, 0.9, 1.8, 1.3, 0.7]
    },
    {
      "name": "有兴趣",
      "type": "bar",
      "stack": "one",
      "data":[22.3, 18.6, 24.1, 14.9, 9.6]
    },
 {
      "name": "没有兴趣",
      "type": "bar",
      "stack": "one",
      "data": [11.7, 24.8, 41.9, 49.9, 30.4]
    },
 {
      "name": "没听过",
      "type": "bar",
      "stack": "one",
      "data": [0.3, 52.1, 27.5, 31.9, 57.7]
    }
  ]
}

使用经验年限

<1 1~2 2~5 5~10 10~20 >20
TypeScript 1.4% 9.4% 34.5% 33% 18.1% 3.6%
Reason 0.9% 6.8% 32.5% 34.8% 21.7% 3.4%
Elm 0.5% 3.7% 26.4% 40.4% 24.8% 4.2%
ClojureScript 1.6% 5.5% 23.4% 36.2% 28.1% 5.2%
PureScript 3.7% 12.2% 27.5% 32.2% 19.3% 5.1%

使用者薪酬范围

$ 0 0~10k 10~30k 30~50k 50~100k 100~200k >200k
TypeScript 3.6% 5.7% 15.6% 19.6% 31.2% 21.3% 2.8%
Reason 3.9% 5.4% 9.7% 17.8% 31.5% 26.7% 5%
Elm 2.7% 3.4% 7% 16.5% 36.4% 30.1% 3.9%
ClojureScript 4.9% 4.4% 10.1% 15% 30.8% 31.1% 3.8%
PureScript 4.5% 12.9% 18.9% 19.9% 23.4% 16.4% 3.8%

使用者公司规模

雇佣人数 1 1~5 5~10 10~20 20~50 50~100 100~1000 1000+
TypeScript 6.6% 6.7% 6.8% 9.5% 13.8% 11.9% 24.1% 20.7%
Reason 5.7% 7.8% 9.4% 8.8% 15.1% 13.5% 18.9% 20.7%
Elm 6.5% 6.9% 7.7% 9.5% 14.7% 12.6% 22% 20.1%
ClojureScript 5.8% 6.6% 10.5% 8.7% 15.2% 12.9% 20.2% 20.2%
PureScript 7.7% 8.1% 8.4% 10.4% 14.1% 12.8% 20.2% 18.2%

满意程度

2016 2017 2018 2019
3.9 4 4.2 3.9

其他语言或工具

前端框架

概览

{
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": [
      "React",
      "Vue.js",
      "Angular",
      "Preact",
      "Ember",
      "Svelte"
    ]
  },
  "xAxis": {
    "data": [
      "2016",
      "2017",
      "2018",
      "2019"
    ]
  },
  "yAxis": {
    "type": "value",
    "axisLabel": {
            "formatter": "{value} %"
        }
  },
  "color": [
    "rgb(103, 139, 255)",
    "rgb(255, 104, 239)",
    "rgb(255, 151, 151)",
    "rgb(171, 120, 255)",
    "rgb(255, 201, 73)",
     "rgb(127, 226, 80)"
  ],
  "series": [
    {
      "name": "React",
      "type": "line",
      "data": [92.5, 93.1, 90.6, 89.3],
      "smooth": true
    },
    {
      "name": "Vue.js",
      "type": "line",
      "data": [87.2, 91.1, 91.2, 87.1],
      "smooth": true
    },
    {
      "name": "Angular",
      "type": "line",
      "data": [67.9, 66, 41.3, 38],
      "smooth": true
    },
    {
      "name": "Preact",
      "type": "line",
      "data":[null, null, 83.5, 77.8],
      "smooth": true
    },
    {
      "name": "Ember",
      "type": "line",
      "data": [47, 41.4, 44.6, 30.5],
      "smooth": true
    },
    {
      "name": "Svelte",
      "type": "line",
      "data": [null, null, null, 87.7],
      "smooth": true
    }
  ]
}

分类比对

颜色越亮代表越积极

{
  "color": [
    "rgb(254, 106, 106)",
    "rgb(252, 143, 143)",
    "rgb(65, 199, 199)",
    "rgb(101, 224, 224)",
    "rgb(206, 205, 204)"
  ],
  "legend": {
    "data": [
      "继续使用",
      "不再使用",
      "有兴趣", 
      "没有兴趣",
      "没听过"
    ]
  },
  "tooltip": {},
  "xAxis": {
    "data":   [
      "React",
      "Vue.js",
      "Angular",
      "Preact",
      "Ember",
      "Svelte"
    ]
  },
  "yAxis": {
"axisLabel": {
            "formatter": "{value} %"
        }},
  "series": [
    {
      "name": "继续使用",
      "type": "bar",
      "stack": "one",
      "data": [71.7, 40.5, 21.9, 9.5, 3.6, 6.8]
    },
    {
      "name": "不再使用",
      "type": "bar",
      "stack": "one",
      "data":[8.6, 6, 35.8, 2.7, 8.3, 1]
    },
    {
      "name": "有兴趣",
      "type": "bar",
      "stack": "one",
      "data":[12, 34.2, 9.7, 25.6, 14.3, 44.9]
    },
 {
      "name": "没有兴趣",
      "type": "bar",
      "stack": "one",
      "data": [7.7, 19, 32.4, 37.8, 64.6, 22.6]
    },
 {
      "name": "没听过",
      "type": "bar",
      "stack": "one",
      "data": [0, 0.4, 0.2, 24.4, 9.1, 24.7]
    }
  ]
}

使用经验年限

<1 1~2 2~5 5~10 10~20 >20
React 2.3% 11.5% 34.3% 31.3% 17.3% 3.3%
Vue.js 1.4% 10.1% 35.6% 31.6% 17.2% 4.2%
Angular 1.6% 9.8% 36.3% 32.3% 16.3% 3.6%
Preact 0.3% 4% 27.1% 40% 24.7% 3.8%
Ember 0.8% 4.5% 21.4% 40.8% 26.8% 5.6%
Svelte 0.7% 8.2% 32.2% 30.5% 22.9% 5.5%

使用者薪酬范围

$ 0 0~10k 10~30k 30~50k 50~100k 100~200k >200k
React 4.1% 6.6% 15.3% 19% 31.1% 21.4% 2.6%
Vue.js 4.3% 7.3% 17.3% 21.3% 31% 17.3% 1.5%
Angular 3.2% 7.4% 19.6% 20.9% 29.6% 17.3% 1.9%
Preact 3.2% 3% 10% 17.5% 35.9% 26.5% 3.9%
Ember 1.9% 3.3% 8.3% 15.3% 33.2% 33.2% 4.8%
Svelte 5.9% 5.6% 14.2% 19% 32.3% 20% 3%

使用者公司规模

雇佣人数 1 1~5 5~10 10~20 20~50 50~100 100~1000 1000+
React 7.6% 7.2% 7.1% 9.5% 13.2% 11.6% 23.6% 20.2%
Vue.js 8.6% 8.5% 8% 10.9% 14.5% 11.5% 21.6% 16.4%
Angular 5.7% 6.5% 6% 9.4% 13.8% 11.9% 23.9% 22.9%
Preact 7% 6% 6.9% 8.8% 13% 10.2% 24.8% 23.2%
Ember 5.5% 8.5% 7.3% 10.1% 12% 13.2% 19.9% 23.5%
Svelte 10.7% 9.7% 7.4% 8.5% 12.1% 10.4% 21.3% 19.9%

满意程度

2016 2017 2018 2019
3.8 3.8 4.3 4.1

其他框架

数据层

概览

{
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": [
      "Redux",
      "Apollo",
      "GraphQL",
      "Relay",
      "MobX"
    ]
  },
  "xAxis": {
    "data": [
      "2016",
      "2017",
      "2018",
      "2019"
    ]
  },
  "yAxis": {
    "type": "value",
    "axisLabel": {
            "formatter": "{value} %"
        }
  },
  "color": [
    "rgb(103, 139, 255)",
    "rgb(255, 104, 239)",
    "rgb(255, 151, 151)",
    "rgb(171, 120, 255)",
    "rgb(255, 201, 73)",
     "rgb(127, 226, 80)"
  ],
  "series": [
    {
      "name": "Redux",
      "type": "line",
      "data":  [93.1, 90.9, 82.1, 70.7],
      "smooth": true
    },
    {
      "name": "Apollo",
      "type": "line",
      "data": [84, 93.9, 92.9, 89.8],
      "smooth": true
    },
    {
      "name": "GraphQL",
      "type": "line",
      "data": [89.4, 94.2, 94.2, 94.8],
      "smooth": true
    },
    {
      "name": "Relay",
      "type": "line",
      "data":[69.5, 71.2, 45.8, 53.3],
      "smooth": true
    },
    {
      "name": "MobX",
      "type": "line",
      "data": [79.1, 78.2, 77.7, 69.5],
      "smooth": true
    }
  ]
}

分类比对

颜色越亮代表越积极

{
  "color": [
    "rgb(254, 106, 106)",
    "rgb(252, 143, 143)",
    "rgb(65, 199, 199)",
    "rgb(101, 224, 224)",
    "rgb(206, 205, 204)"
  ],
  "legend": {
    "data": [
      "继续使用",
      "不再使用",
      "有兴趣", 
      "没有兴趣",
      "没听过"
    ]
  },
  "tooltip": {},
  "xAxis": {
    "data":  [
      "Redux",
      "Apollo",
      "GraphQL",
      "Relay",
      "MobX"
    ]
  },
  "yAxis": {
"axisLabel": {
            "formatter": "{value} %"
        }},
  "series": [
    {
      "name": "继续使用",
      "type": "bar",
      "stack": "one",
      "data": [47.7, 24.9, 38.7, 2.2, 8.3]
    },
    {
      "name": "不再使用",
      "type": "bar",
      "stack": "one",
      "data":[19.8, 2.8, 2.1, 1.9, 3.6]
    },
    {
      "name": "有兴趣",
      "type": "bar",
      "stack": "one",
      "data":[18.5, 36.1, 50.6, 22.5, 23.2]
    },
 {
      "name": "没有兴趣",
      "type": "bar",
      "stack": "one",
      "data":  [11.4, 9.7, 5.9, 21.1, 26.5]
    },
 {
      "name": "没听过",
      "type": "bar",
      "stack": "one",
      "data":[2.6, 26.5, 2.7, 52.3, 38.3]
    }
  ]
}

使用经验年限

<1 1~2 2~5 5~10 10~20 >20
Redux 1.7% 10.3% 35% 32.2% 17.5% 3.2%
Apollo 0.7% 8.2% 35.3% 33.1% 18.9% 3.8%
GraphQL 0.9% 9% 33.7% 33.3% 19.2% 4%
Relay 0.5% 2.8% 31.6% 33.5% 29% 2.6%
MobX 0.7% 6.2% 32.6% 36.1% 20.2% 4.2%

使用者薪酬范围

$ 0 0~10k 10~30k 30~50k 50~100k 100~200k >200k
Redux 3.2% 6.1% 15.6% 20.1% 31.5% 21.2% 2.4%
Apollo 2.9% 5.6% 12.5% 18.5% 32.5% 24.8% 3.2%
GraphQL 3.4% 5.6% 12.9% 18.1% 32.5% 24% 3.5%
Relay 4.3% 4.8% 8.7% 17.8% 26.7% 26.4% 11.3%
MobX 2.8% 4.6% 16.2% 18.4% 31.4% 23.2% 3.4%

使用者公司规模

雇佣人数 1 1~5 5~10 10~20 20~50 50~100 100~1000 1000+
Redux 6.2% 6.4% 6.7% 9.5% 13.6% 11.8% 24.9% 21%
Apollo 7.2% 8.1% 7.6% 10.2% 13.8% 11.1% 23% 18.8%
GraphQL 7.7% 7.9% 7.7% 10.3% 13.7% 11.2% 22.4% 19.2%
Relay 5.2% 6.6% 5.9% 9.2% 12.7% 11.8% 20% 28.7%
MobX 5.7% 7.5% 7.9% 10.2% 13.9% 12.7% 23.9% 18.2%

满意程度

2016 2017 2018 2019
3.4 3.5 3.8 3.6

其他数据层

后端框架

概览

{
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data":["Express","Next.js","Koa","Meteor","Sails","Feathers","Nuxt","Gatsby"]
  },
  "xAxis": {
    "data": [
      "2016",
      "2017",
      "2018",
      "2019"
    ]
  },
  "yAxis": {
    "type": "value",
    "axisLabel": {
            "formatter": "{value} %"
        }
  },
  "color": [
    "rgb(103, 139, 255)",
    "rgb(255, 104, 239)",
    "rgb(255, 151, 151)",
    "rgb(171, 120, 255)",
    "rgb(255, 201, 73)",
     "rgb(127, 226, 80)",
"rgb(43, 229, 255)",
"rgb(255, 255, 109)"
  ],
  "series": [
    {
      "name": "Express",
      "type": "line",
      "data": [null, 92.5, 94.3, 92.6],
      "smooth": true
    },
    {
      "name": "Next.js",
      "type": "line",
      "data": [null, null, 88.3, 90.5],
      "smooth": true
    },
    {
      "name": "Koa",
      "type": "line",
      "data":[null, 83.3, 84.8, 80.2],
      "smooth": true
    },
    {
      "name": "Meteor",
      "type": "line",
      "data":[59.8, 45.3, 37.6, 27.6],
      "smooth": true
    },
    {
      "name": "Sails",
      "type": "line",
      "data":[null, 36.4, 28.1, 26.1],
      "smooth": true
    },
    {
      "name": "Feathers",
      "type": "line",
      "data":[60.8, 71.5, 68.5, 52.8],
      "smooth": true
    } ,
    {
      "name": "Nuxt",
      "type": "line",
      "data":[null, null, null, 88.5],
      "smooth": true
    },
    {
      "name": "Gatsby",
      "type": "line",
      "data":[null, null, null, 88.4],
      "smooth": true
    } 
  ]
}

分类比对

颜色越亮代表越积极

{
  "color": [
    "rgb(254, 106, 106)",
    "rgb(252, 143, 143)",
    "rgb(65, 199, 199)",
    "rgb(101, 224, 224)",
    "rgb(206, 205, 204)"
  ],
  "legend": {
    "data": [
      "继续使用",
      "不再使用",
      "有兴趣", 
      "没有兴趣",
      "没听过"
    ]
  },
  "tooltip": {},
  "xAxis": {
    "data": ["Express","Next.js","Koa","Meteor","Sails","Feathers","Nuxt","Gatsby"]
  },
  "yAxis": {
"axisLabel": {
            "formatter": "{value} %"
        }},
  "series": [
    {
      "name": "继续使用",
      "type": "bar",
      "stack": "one",
      "data": [71.6, 24.7, 11.3, 3.6, 2.1, 1.9, 11.3, 22]
    },
    {
      "name": "不再使用",
      "type": "bar",
      "stack": "one",
      "data": [5.8, 2.6, 2.8, 9.5, 5.9, 1.7, 1.5, 2.9]
    },
    {
      "name": "有兴趣",
      "type": "bar",
      "stack": "one",
      "data":[12, 43.1, 18.3, 16.8, 9.1, 9.1, 26.7, 35]
    },
 {
      "name": "没有兴趣",
      "type": "bar",
      "stack": "one",
      "data":  [6.2, 15.7, 23.1, 46.5, 29.5, 21.2, 24.4, 17.9]
    },
 {
      "name": "没听过",
      "type": "bar",
      "stack": "one",
      "data":[4.4, 14, 44.4, 23.5, 53.5, 66.1, 36.1, 22.3]
    }
  ]
}

使用经验年限

<1 1~2 2~5 5~10 10~20 >20
Express 1.8% 10% 34% 32.1% 18.3% 3.8%
Next.js 1.3% 8.6% 36% 33.9% 17.3% 3%
Koa 0.7% 5.6% 30.3% 35.3% 24.6% 3.5%
Meteor 1.1% 4.7% 28.8% 36.6% 23.4% 5.4%
Sails 1% 4.4% 25.3% 38.3% 26.3% 4.7%
Feathers 0.5% 3.5% 31.5% 35.6% 24.5% 4.3%
Nuxt 1% 8.6% 37.7% 33.2% 16.1% 3.4%
Gatsby 1.2% 10.4% 36.1% 32.7% 16.9% 2.7%

使用者薪酬范围

$ 0 0~10k 10~30k 30~50k 50~100k 100~200k >200k
Express 4.5% 6.6% 14.8% 19.2% 31.5% 21% 2.4%
Next.js 3.8% 5.8% 14.3% 19.5% 32.4% 21.4% 2.8%
Koa 4.2% 5% 14% 17.9% 30.9% 24.6% 3.5%
Meteor 4.9% 4.9% 13.1% 19.1% 31.7% 24.6% 1.6%
Sails 2.8% 5.6% 18% 19.3% 25.1% 24.9% 4.3%
Feathers 4.7% 9.4% 16.6% 18.2% 27.1% 20.4% 3.6%
Nuxt 4.1% 8.4% 19.1% 21.9% 30.2% 14.9% 1.5%
Gatsby 3.7% 5.5% 13% 18.1% 34.7% 22.4% 2.7%

使用者公司规模

雇佣人数 1 1~5 5~10 10~20 20~50 50~100 100~1000 1000+
Express 8.3% 7.6% 7.3% 9.7% 13% 11.5% 22.6% 20%
Next.js 8.1% 7.2% 7.9% 9.5% 13.8% 10.9% 23.3% 19.2%
Koa 7.1% 6.9% 6.7% 9.4% 13.5% 11.6% 23% 21.7%
Meteor 9.6% 8.8% 7.8% 12.8% 14.6% 11.3% 16.7% 18.4%
Sails 5.9% 8.9% 9.1% 10.6% 12.1% 15.1% 19.5% 18.8%
Feathers 12.2% 11.9% 8.1% 9.2% 16.5% 11.1% 16.8% 14.3%
Nuxt 9.5% 10.3% 9.3% 11.6% 14.6% 12.2% 19.3% 13.3%
Gatsby 9.3% 7.9% 8.3% 10.2% 13.9% 10.8% 21.9% 17.8%

满意程度

3.6

其他后端框架

测试

概览

{
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data":["Jest","Mocha","Storybook","Cypress","Enzyme","AVA","Jasmine","Puppeteer"]
  },
  "xAxis": {
    "data": [
      "2016",
      "2017",
      "2018",
      "2019"
    ]
  },
  "yAxis": {
    "type": "value",
    "axisLabel": {
            "formatter": "{value} %"
        }
  },
  "color": [
    "rgb(103, 139, 255)",
    "rgb(255, 104, 239)",
    "rgb(255, 151, 151)",
    "rgb(171, 120, 255)",
    "rgb(255, 201, 73)",
     "rgb(127, 226, 80)",
"rgb(43, 229, 255)",
"rgb(255, 255, 109)"
  ],
  "series": [
    {
      "name": "Jest",
      "type": "line",
      "data": [58.8, 93.7, 96.5, 96.4],
      "smooth": true
    },
    {
      "name": "Mocha",
      "type": "line",
      "data": [93.8, 87.3, 82.3, 77.7],
      "smooth": true
    },
    {
      "name": "Storybook",
      "type": "line",
      "data":[null, null, 89.1, 91.9],
      "smooth": true
    },
    {
      "name": "Cypress",
      "type": "line",
      "data":[null, null, null, 93.2],
      "smooth": true
    },
    {
      "name": "Enzyme",
      "type": "line",
      "data":[94.9, 94.4, 88.4, 71.3],
      "smooth": true
    },
    {
      "name": "AVA",
      "type": "line",
      "data":[85.4, 75, 71.6, 63.4],
      "smooth": true
    } ,
    {
      "name": "Jasmine",
      "type": "line",
      "data":[83.3, 79.6, 74.8, 66.9],
      "smooth": true
    },
    {
      "name": "Puppeteer",
      "type": "line",
      "data":[null, null, null, 89.1],
      "smooth": true
    } 
  ]
}

分类比对

颜色越亮代表越积极

{
  "color": [
    "rgb(254, 106, 106)",
    "rgb(252, 143, 143)",
    "rgb(65, 199, 199)",
    "rgb(101, 224, 224)",
    "rgb(206, 205, 204)"
  ],
  "legend": {
    "data": [
      "继续使用",
      "不再使用",
      "有兴趣", 
      "没有兴趣",
      "没听过"
    ]
  },
  "tooltip": {},
  "xAxis": {
    "data": ["Jest","Mocha","Storybook","Cypress","Enzyme","AVA","Jasmine","Puppeteer"]
  },
  "yAxis": {
"axisLabel": {
            "formatter": "{value} %"
        }},
  "series": [
    {
      "name": "继续使用",
      "type": "bar",
      "stack": "one",
      "data": [61.2, 42, 32.2, 23.8, 23.6, 5.1, 28.6, 24.3]
    },
    {
      "name": "不再使用",
      "type": "bar",
      "stack": "one",
      "data": [2.3, 12, 2.8, 1.7, 9.5, 2.9, 14.1, 3]
    },
    {
      "name": "有兴趣",
      "type": "bar",
      "stack": "one",
      "data":[22.8, 22.1, 26, 28.4, 15.7, 8.7, 16.7, 27.2]
    },
 {
      "name": "没有兴趣",
      "type": "bar",
      "stack": "one",
      "data":  [5.1, 15.7, 7.6, 9.1, 12.5, 14, 20.7, 12.5]
    },
 {
      "name": "没听过",
      "type": "bar",
      "stack": "one",
      "data": [8.5, 8.1, 31.3, 36.9, 38.7, 69.4, 19.8, 33]
    }
  ]
}

使用经验年限

<1 1~2 2~5 5~10 10~20 >20
Jest 1.1% 8.5% 33.3% 33.7% 19.7% 3.7%
Mocha 0.8% 6.9% 30.5% 34.9% 22% 5%
Storybook 0.6% 6.2% 32.4% 36.1% 21.3% 3.5%
Cypress 0.6% 6.2% 30.5% 36.6% 21.8% 4.2%
Enzyme 0.9% 8.4% 32.6% 34.8% 19.8% 3.5%
AVA 0.3% 3.3% 22.6% 42.8% 26.8% 4.3%
Jasmine 0.5% 5.4% 28.7% 36.1% 24.1% 5.2%
Puppeteer 0.5% 5.6% 30.4% 36.4% 23.1% 4%

使用者薪酬范围

$ 0 0~10k 10~30k 30~50k 50~100k 100~200k >200k
Jest 2.8% 4.7% 13.9% 19.1% 33.2% 23.4% 2.9%
Mocha 3% 4.2% 13% 18% 33.4% 25.5% 3%
Storybook 1.9% 3.2% 12.4% 18.8% 34.5% 26% 3.2%
Cypress 2.1% 3% 11.6% 18.4% 36.2% 25.8% 2.8%
Enzyme 2.1% 3.5% 13.1% 17.9% 33.7% 26.5% 3.1%
AVA 4.8% 5.2% 10.1% 15.1% 33% 27.1% 4.7%
Jasmine 2.4% 3.2% 12.4% 17.8% 34.1% 27% 3.1%
Puppeteer 3.2% 4.3% 13.2% 19.8% 32.7% 23.2% 3.7%

使用者公司规模

雇佣人数 1 1~5 5~10 10~20 20~50 50~100 100~1000 1000+
Jest 5.9% 6.2% 6.5% 9% 13.3% 11.8% 25.2% 22.2%
Mocha 6% 6.7% 6.9% 9.3% 13.1% 11.4% 24.2% 22.3%
Storybook 4.5% 5.1% 5.9% 8.8% 13.6% 12.7% 26.9% 22.5%
Cypress 4.9% 6.1% 6.4% 9.5% 14.2% 12.6% 25.4% 21%
Enzyme 4.5% 4.5% 5.2% 7.8% 12.3% 11.8% 27.7% 26.2%
AVA 8.4% 7.1% 7.9% 9.1% 16.9% 9.4% 21.8% 19.4%
Jasmine 5.1% 5.4% 5.8% 8.6% 13.1% 11.6% 25.5% 24.9%
Puppeteer 7.1% 7.2% 6.9% 9.9% 13.1% 11.1% 22.4% 22.3%

满意程度

2016 2017 2018 2019
3.2 3.2 3.8 3.6

其他测试

移动端和桌面

概览

{
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data":["Electron","React Native","Native Apps","Cordova","Ionic","NW.js","Expo"]
  },
  "xAxis": {
    "data": [
      "2016",
      "2017",
      "2018",
      "2019"
    ]
  },
  "yAxis": {
    "type": "value",
    "axisLabel": {
            "formatter": "{value} %"
        }
  },
  "color": [
    "rgb(103, 139, 255)",
    "rgb(255, 104, 239)",
    "rgb(255, 151, 151)",
    "rgb(171, 120, 255)",
    "rgb(255, 201, 73)",
     "rgb(127, 226, 80)",
"rgb(43, 229, 255)",
"rgb(255, 255, 109)"
  ],
  "series": [
    {
      "name": "Electron",
      "type": "line",
      "data": [null, 92.8, 87.1, 85.7],
      "smooth": true
    },
    {
      "name": "React Native",
      "type": "line",
      "data": [91.4, 92.9, 83.8, 82.1],
      "smooth": true
    },
    {
      "name": "Native Apps",
      "type": "line",
      "data":[84.6, 85.8, 78.9, 77.4],
      "smooth": true
    },
    {
      "name": "Cordova",
      "type": "line",
      "data":[58.3, 41.9, 34.3, 28],
      "smooth": true
    },
    {
      "name": "Ionic",
      "type": "line",
      "data":[null, 51, 51.5, 40.6],
      "smooth": true
    },
    {
      "name": "NW.js",
      "type": "line",
      "data":[null, null, null, 32.6],
      "smooth": true
    } ,
    {
      "name": "Expo",
      "type": "line",
      "data":[null, null, null, 73.8],
      "smooth": true
    }
  ]
}

分类比对

颜色越亮代表越积极

{
  "color": [
    "rgb(254, 106, 106)",
    "rgb(252, 143, 143)",
    "rgb(65, 199, 199)",
    "rgb(101, 224, 224)",
    "rgb(206, 205, 204)"
  ],
  "legend": {
    "data": [
      "继续使用",
      "不再使用",
      "有兴趣", 
      "没有兴趣",
      "没听过"
    ]
  },
  "tooltip": {},
  "xAxis": {
    "data": ["Electron","React Native","Native Apps","Cordova","Ionic","NW.js","Expo"]
  },
  "yAxis": {
"axisLabel": {
            "formatter": "{value} %"
        }},
  "series": [
    {
      "name": "继续使用",
      "type": "bar",
      "stack": "one",
      "data":[25.6, 27.2, 14.2, 8.7, 9.5, 1.5, 14.7]
    },
    {
      "name": "不再使用",
      "type": "bar",
      "stack": "one",
      "data": [4.3, 5.9, 4.1, 22.3, 13.9, 3.1, 5.2]
    },
    {
      "name": "有兴趣",
      "type": "bar",
      "stack": "one",
      "data":[45.8, 44.3, 36.7, 10.4, 19, 4.5, 8.2]
    },
 {
      "name": "没有兴趣",
      "type": "bar",
      "stack": "one",
      "data":  [16.8, 21.1, 25.2, 40, 38.6, 15.1, 10.5]
    },
 {
      "name": "没听过",
      "type": "bar",
      "stack": "one",
      "data": [7.4, 1.5, 19.8, 18.6, 19.1, 75.7, 61.4]
    }
  ]
}

使用经验年限

<1 1~2 2~5 5~10 10~20 >20
Electron 0.6% 5.9% 30.5% 35.9% 22.3% 4.7%
React Native 1.4% 9.8% 35.2% 32.6% 17.7% 3.3%
Native Apps 0.9% 6.4% 28.9% 34.1% 23.1% 6.5%
Cordova 0.9% 5.6% 25.2% 35.8% 24.2% 8.3%
Ionic 0.8% 6.2% 32% 36.1% 20% 4.9%
NW.js 0% 2.4% 16.7% 41% 35.8% 4.1%
Expo 1.2% 10.3% 38.1% 31.1% 16.9% 2.3%

使用者薪酬范围

$ 0 0~10k 10~30k 30~50k 50~100k 100~200k >200k
Electron 4.8% 5.4% 12.9% 19% 31.7% 22.7% 3.5%
React Native 3.5% 7.3% 15.2% 18.3% 30.5% 22.2% 3.1%
Native Apps 4.3% 5.3% 12% 18.1% 30.4% 25.4% 4.6%
Cordova 3.4% 7.8% 14.1% 20.7% 29.3% 21.6% 3.1%
Ionic 3.2% 8.3% 16.3% 21.7% 28% 19.5% 3%
NW.js 7.1% 6.4% 13.2% 20% 31.1% 20.4% 1.8%
Expo 3.8% 8.2% 13.8% 19.8% 31% 21% 2.5%

使用者公司规模

雇佣人数 1 1~5 5~10 10~20 20~50 50~100 100~1000 1000+
Electron 8.6% 8.6% 8.2% 10.2% 13.8% 10.4% 20.3% 19.9%
React Native 7.4% 8.3% 8.7% 10.5% 14% 11.7% 21.3% 18.1%
Native Apps 7.5% 9% 7.9% 9.4% 13% 11.7% 20.6% 20.8%
Cordova 9% 10.5% 8.9% 11.6% 13.1% 10.5% 18.6% 17.8%
Ionic 7.5% 8.7% 7% 10.5% 12.6% 12.7% 20.5% 20.5%
NW.js 12.7% 9.6% 12% 7.6% 10.7% 14.1% 14.4% 18.9%
Expo 8.2% 8.9% 9.1% 11.3% 13.7% 12% 20.5% 16.3%

满意程度

2016 2017 2018 2019
3.1 3.3 3.6 3.3

其他

其他工具

工具

文本编辑器

浏览器

构建工具

资源

博客和杂志

站点和课程

其他

奖章

最实用的特性

  1. 箭头函数
  2. Promises
  3. 扩展运算符

使用最多的技术

  1. React
  2. Express
  3. Redux

最满意的

  1. Jest
  2. GraphQL
  3. Cypress

最有趣的

  1. GraphQL
  2. Jest
  3. Apollo

最有用的资源

  1. Stack Overflow
  2. MDN
  3. CSS Tricks

预测奖

  1. Svelte
  2. Nest.js
  3. Stencil

往年数据分析

2018 VS 2017 前端使用数据对比
2017 VS 2016 前端使用数据对比
2016 VS 2015 前端大杂烩使用数据对比
2015 前端生态发展回顾

感谢 https://2019.stateofjs.com/ 提供的数据


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

14 评论
ferried • 2019-12-22
回复 删除

V 姐牛皮

ferried • 2019-12-22
回复 删除

整体来看 Google 的 Angular 呈下降趋势。这是令我很失望的一点......

Vanessa • 2019-12-22
回复 删除

可以放弃了

Eddie • 2019-12-22
回复 删除

angular 比较难入门。。一开始的时候有很多概念比较超前。

ferried • 2019-12-22
回复 删除

放弃了就等于承认了自己给公司选型选失败了那包括 cli 和 package 里的东西,转 react/vue 的话又要重新去搞一下
但相对团队(6)人一组为一个团队吧,可能用 Angular 相对于 React 更容易让别人能接手一些

hjljy • 2019-12-23
回复 删除

菜鸡后端,只会 jQuery

Vanessa • 2019-12-23
回复 删除

黑客派也只用了 jQuery 😄

lizhongyue248 • 2019-12-23
回复 删除

感谢 V 姐,不过还有个特别想知道的 flutter 没有。。。。

最近在做毕业设计的技术选型,前端都不知道选啥 T T

2501224066 • 2019-12-23
回复 删除

我 PHP 呢

Vanessa • 2019-12-23
回复 删除

前端使用其他语言排序如下:
Python
C#
.NET
Ruby
PHP
C/C++
Rust
Swift
Java
Dart
Haskell
Scala
Objective-C
OCaml
Go

JssDream • 2019-12-24
回复 删除

看的我热心沸腾的,想转前端了 😂

iTanken • 2019-12-24
回复 删除

TS 无敌了

Rabbitzzc • 2019-12-26
回复 删除

V 姐,我可以拿来团队分享么huaji

zhou-yg • 2020-01-02
回复 删除

Svelte
非常惊艳的一个框架,没想到可以这么简洁优雅