中国开源生态系列图谱——前端领域

中国开源⽣态系列图谱 ——前端领域 1 ⽬录 01⽣态图谱解读 02⽣态图谱项⽬洞察 ⽣态图谱解读 开源基⾦会 开发者社区 开源产业联盟 代码托管平台 解决⽅案 制作平台&系统 框架 组件库&组件 插件&功能⼯具 解决⽅案 框架 定义&分类：前端开源项⽬主要分为底层项⽬和上层项⽬，底层项⽬包括解决⽅案、框架。 板块特征： 宽松的开源许可证为主 主要为Apache、MIT、BSD开源许可证，其中MIT开源许可证占全部项⽬的70.83%，占底层项⽬的66.7%。 三⼤技术⽀撑 标记语⾔HTML：内容的编辑与呈现；层叠样式表CSS3：⽤于HTML标签的视觉效果装饰； 轻量级编程语⾔JavaScript：⽤于⻚⾯的动态效果与交互的处理。 应⽤场景多样 解决⽅案：通常⽤于满⾜中后台设计与应⽤、统⼀前端表单、数据可视化、跨端统⼀、前端⼯作流和规范等需求。 框架：分为后台UI框架、跨端框架、低代码框架、同构框架等。5 解决⽅案 框架 ⼚商分布：前端底层开源项⽬主要由软件供应商、个⼈开发者与 ⼤型互联⽹企业贡献，并且项⽬数量呈⾦字塔型。 具体分布如下： 低⻔槛低维护成本 10.3% ⾏云创新、众学慧、开发者科技等软件供应商 降低⽤户使⽤该项⽬的难度和学习成本 通过规范化、⽂档化等 ⽅法，尽可能降低项⽬的维护成本 28.2% 个⼈开发者 阿⾥、腾讯、百度等 轻量化敏捷开发 61.5% ⼤型互联⽹企业 专注核⼼功能，减⼩项 ⽬的体积和复杂性 以快速、灵活、持续迭代的⽅式推进项⽬ 定义&分类：前端开源上层项⽬主要分为组件库&组件、制作平台&系统、插件&功能⼯具等。 发展特征：前端从承担单⼀的展示功能的静态⻚⾯过渡到⽣动的与⽤户交互。⽬前，组件库&组件项⽬数量最多，占前端上层开源项⽬数量的48.1%。同时主要围绕底层开源项⽬进⾏补充，近⼀半组件及组件库围绕底层开源项⽬vue框架开发。低代码平台、⼩程序⽣态逐渐丰富，从底层到上层都有开源项⽬分布。 组件库&组件应⽤场景：各种⻛格的组件以满⾜不同界⾯需求，包括但不限于视频、图表、⽇历、地理信息可视化、跨端渲染等。 制作平台&系统应⽤场景：制作平台集中在低代码平台与可视化编辑。系统主要为中后台管理系统、企业级设计系统、跨平台的⾼性能图形系统。 插件&功能⼯具应⽤场景：为应⽤提供持续交付、任务管理、⾃动化测试、仿真数据⽣成等功能。 ⼚商分布：前端上层开源项⽬贡献者主要为软件供应商、个⼈开发者和互联⽹企业。互联⽹企业贡献了近三分之⼆的组件库&组件。 具体分布如下： 价值追求: ⻛格美观功能多样 13.5% 有赞、满运等软件供应商 吸引⼈的视觉效果和友好的⽤户交互 注重提供丰富多样的功能和特性 35.1% 个⼈开发者 性能强劲多端运⾏ 51.4% 阿⾥、腾讯、字节跳动、京东、饿了么等互联⽹企业 更快速、流畅的⽤户界 ⾯和更⾼效的数据处理 能在多种不同的平台和设备上运⾏，例如 Web、移动端等8 使⽤层⾯ •⽤户多：⽤户市场⾜够 ⼤能够尽可能吸引更多活跃的、愿意加⼊开源的开发者 开发者⻆度 •需要更多情绪价值：开源项⽬需要更和谐友好的氛围为开发者带来正反馈 •难以持续维护项⽬：没有公司或社区⽀ 持，单靠开发者很难持续维护 •更基础：能够解决共性问题的项⽬更容易成⻓为优秀的项⽬ 优秀前端开源项⽬三⼤特征 12 3 开发者层⾯ 内容层⾯ •解决实际问题：能够解决实际问题并具有可维护性与易于扩展，是项 ⽬发展的根基 •⽂档质量⾼：友好易读的⽂档能够帮助开发者顺利上⼿项⽬，帮助扩 ⼤⽤户数量 前端开源⾯临挑战 企业⻆度 •商业化路径不清晰：需要企业慢慢摸索如何通过开源项⽬得到商业回馈 •投⼊意愿低：企业对⼈⼒投⼊与周期的 认知与实际不匹配，低投⼊使得开源项 ⽬维护阻⼒较⼤ ⽤户⻆度 •开源意识与社区意识⽋缺：⽤户的讨论氛围与友善程度有较⼤提升空间 •经验丰富：有⻓期开源经验并且对项⽬有较好理解的开发者思考开源问题更全⾯ •快速响应：及时处理问题能够让开源项⽬有效启动 技术牵动 •新技术⼯具：新的AI等新技术的⼯具属性较强，并有较⼤发展空间，将牵动前端开源发展并重塑形态 技术⽣态丰富的开源发展趋势，驱动前端领域进⼀步由技术牵动发展 ⾼附易于 加值使⽤ 技术牵动 易于使⽤ •便捷开发：AI等技术会作为辅助⼿段降低开发⻔槛 •低耦合：更组件化、模块化 ⾼附加值 前端开源发展趋势 商业技术⽣态更多 ⽣态丰富合作 中国开源发展趋势 •⾼附加值⼯作⽐例增 ⾼：低附加值的⼯作会逐渐由⼯具替代， ⼯程师更多关注于解决复杂问题等⾼附加值⼯作 ⽣态图谱项⽬洞察 Gitee指数 TOP5 Gitee指数 75 Gitee指数 19 Gitee指数 16 Gitee平台托管的开源项⽬ Gitee指数 35 Gitee指数 27 12 ·数据来源：Gitee官⽹各项⽬2023年6⽉数据。 “ InfoQ开源项⽬指数数据说明 InfoQ开源项⽬指数说明 一级指标 二级指标 权重 代码健康（40%） 代码复制（Fork） 10% 已修复代码不足（ClosedIssue） 10% 项目更新申请（PullRequest） 5% 已完成项目更新申请 (ClosedPullRequest) 15% 社区活跃（60%） 协作影响力 10% 项目荣誉星（Star） 10% 社区贡献量 20% 社区贡献者 20% •对于开源项⽬的评价，代码和社区是两项最直接评价指标。 •代码的健康度体现为社区成员不断地修复和更新代码，形成研发价值的指数级增⻓；代码健康指标中选取的数据维度来⾃开源项⽬在GitHub中的公开数据。 •社区活跃是保证开源价值最⼤化的根本，被开源世界公认的社区价值是评价开源项⽬最主要的要素，本次研究将其权重赋值超过代码健康；InfoQ研究中⼼认为，社区活跃价值整体评估⾼于代码健康价值。 •社区活跃中主要数据也来⾃于GitHub的公开数据；其中协作影响⼒数据来⾃于X-lab研发的openleaderboard中的协作影响⼒数据。 •所有数据的采集时间均为2023年1⽉，在未来，随着时间的推移，数据也会呈现变化。 13 InfoQ指数 69.14 InfoQ指数 27.59 InfoQ指数 22.13 InfoQ指数 21.07 InfoQ指数 19.06 InfoQ指数 18.03 InfoQ指数 12.06 InfoQ指数 10.17 InfoQ指数 9.79 InfoQ指数 7.87 InfoQ开源项⽬指数TOP10 14 ·数据来源：Github与openleaderboard各项⽬2023年6⽉数据。 序号 企业名称 注册地 1 阿⾥巴巴集团控股有限公司 杭州 2 北京百度⽹讯科技有限公司 北京 3 北京⾦⼭云⽹络技术有限公司 北京 4 北京京东世纪贸易有限公司 北京 5 北京奇⻁科技有限公司 北京 6 北京三快在线科技有限公司 北京 7 北京腾云天下科技有限公司 北京 8 北京⼩桔科技有限公司 北京 9 北京星搭科技有限公司 北京 10 北京字节跳动科技有限公司 北京 序号 企业名称 注册地 11 杭州有赞科技有限公司 杭州 12 华为技术有限公司 深圳 13 江苏满运软件科技有限公司 江苏 14 拉扎斯⽹络科技（上海）有限公司 上海 15 上海华炎软件科技有限公司 上海 16 深圳⾏云创新科技有限公司 深圳 17 深圳市腾讯计算机系统有限公司 深圳 18 武汉众学慧科技有限公司 武汉 19 ⻓沙开发者科技有限公司 ⻓沙 20 珠海市新德汇信息技术有限公司 珠海 序号 项⽬名称 托管代码 1 ant-design/ant-design https://github.com/ant-design/ant-design 2 ElemeFE/element https://github.com/ElemeFE/element 3 baidu/amis https://github.com/baidu/amis 4 chartjs/Chart.js https://github.com/chartjs/Chart.js 5 vuejs/core https://github.com/vuejs/core 6 umijs/umi https://github.com/umijs/umi 7 youzan/vant https://github.com/youzan/vant 8 iamkun/dayjs https://github.com/iamkun/dayjs 9 steedos/steedos-platform https://github.com/steedos/steedos-platform 10 alibaba/ice https://github.com/alibaba/ice 11 eggjs/egg https://github.com/eggjs/egg 12 cloudtogo/pageplug https://github.com/cloudtogo/pageplug 13 vbenjs/vue-vben-admin https://github.com/vbenjs/vue-vben-admin 14 modern-js-dev/modern.js https://github.com/modern-js-dev/modern.js 15 alibaba/hooks https://github.com/alibaba/hooks 16 alibaba/formily https://github.com/alibaba/formily 17 alibaba/rax https://github.com/alibaba/rax 18 airyland/vux https://github.com/airyland/vux 19 Meituan-Dianping/mpvue https://github.com/Meituan-Dianping/mpvue 20 alibaba-fusion/next https://github.com/alibaba-fusion/next 序号 项⽬名称 托管代码 21 Tencent/tdesign-react https://github.com/Tencent/tdesign-react 22 midwayjs/midway https://github.com/midwayjs/midway 23 jdf2e/nutui https://github.com/jdf2e/nutui 24 antvis/g2 https://github.com/antvis/g2 25 Tencent/Hippy https://github.com/Tencent/Hippy 26 layui/layui https://github.com/layui/layui 27 DouyinFE/semi-design https://github.com/DouyinFE/semi-design 28 Tencent/weui https://github.com/Tencent/weui 29 DevCloudFE/vue-devui https://github.com/DevCloudFE/vue-devui 30 varletjs/varlet https://github.com/varletjs/varlet 31 ElemeFE/mint-ui https://github.com/ElemeFE/mint-ui 32 amazeui/amazeui https://github.com/amazeui/amazeui 33 didi/cu