目前开源社区Github涌现出不少优秀的项目,关注和使用这些项目,一方面可以很好的提升开发效率与质量,另一方面研究开源项目的源码,参与其贡献,也是提升技术能力一个不错的方法。
基于自己团队的需求,以后每周会整理一些不错的Github开源项目(每周3-6个),范围主要包括:编程基础,前端开发,客户端开发,图形图像,网络,通用工具等,但不局限于此,一些服务端技术以及前沿技术(如:AI,AR,loT等)也可能会涉及到。相信多开阔眼界,方能看的更远!
所有的项目都会第一时间整理到上面的思维导图中,通过这种形式能够实时的跟踪每个项目的star数,在需要用的时候也可以快点检索和查找。
如果对你的工作或学习有所帮助,请到项目的github star 支持一下哈,不胜感激!
以下是以往各期收集的项目(持续更新中…):
第十八期(2017-12-29)
分类项目名称与地址项目简介推荐理由star数canvasreact-canvas https://github.com/Flipboard/react-canvasReact Canvas增加了React组件渲染到canvas而不是DOM的能力。它带来了Web开发人员熟悉的一些API,并将它们与高性能绘图引擎混合在一起。与本地应用程序相比,移动Web应用程序感觉缓慢的原因是DOM。 CSS动画和过渡是在Web上实现平滑动画的最快途径,但它们有一些限制。 React Canvas利用现代移动浏览器拥有硬件加速画布的能力,更好的构建应用程序用户界面。事实上,它是对渲染到canvas上行为的具体实现。10792UI布局muuri https://github.com/haltu/muuriMuuri 能够创建响应式,可排序,可过滤和可拖动的网格布局。其布局系统允许以多种方式将网格项目定位在容器内。流布局是目前用于图像类布局的常见展示方式之一,Muuri很适合创建这种布局。它的特点是支持响应式、排序、筛选以及拖拽布局元素。能通过鼠标随意拖拽,支持左上、右上,左右两端对齐以及根据标题内容进行筛选,筛选时切换的的动画也非常流畅。6188文件上传处理uppy https://github.com/transloadit/uppy一个全新的模块化的浏览器Web文件上传组件,可以与任何框架无缝集成。它能从本地磁盘,Google Drive,Dropbox,远程URL,摄像机和其他地点获取文件,然后将其上传到最终目的地,支持拖拽和暂停上传。 快速,易于使用,让你能专注于比构建文件上传器更重要的问题。4628
第十七期(2017-12-22)
分类项目名称与地址项目简介推荐理由star数组件开发与测试storybook https://github.com/storybooks/storybookReact和React-Native UI组件的交互式开发和测试环境。这款工具很适合在页面UI快速直观的展示控件的运行效果,测试不同的运行场景。17123可视化分析github-profile-summary https://github.com/tipsy/github-profile-summary对Github主页进行可视化分析的工具。能够分析某个github用户关注项目,历史活跃度,贡献情况。你可以用它来可视化分析自己的github使用数据,也可以了解他人的,但前提是分析的用户需要先关注这个项目。12028文档管理Docusaurus https://github.com/facebook/DocusaurusFacebook开源的一套快速生成开源项目文档站点的项目,它把项目介绍页面,文档,博客,github关注数与跳转及搜索都做好了,如果你有一个开源项目想要做一个主页,它是一个很好的选择。基于React构建,React Native,Prettier,jest等许多大型开源项目都在使用它。2716
第十六期(2017-12-15)
分类项目名称与地址项目简介推荐理由star数前端工程化rollup https://github.com/rollup/rollupRollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。它对代码模块使用新的标准化格式,这些标准都包含在 Js 的 ES6 版本中,而不是以前的特殊解决方案,如 CommonJS 和 AMD。可以使你自由、无缝地使用你最喜爱的 library 中那些最有用的独立函数,而你的项目不必携带其他未使用的代码。它被称为下一代的模块打包工具,采用shaking tree的技术,利用es6模块能静态分析语法树的特性,只将需要的代码提取出来打包,能大大减小代码体积。面对其竞争,webpack也增加了类似的功能。11140学习资源learn-anything https://github.com/learn-anything/learn-anythinglearn-anything是由社区建立的开源网站,它提供学习任何知识技能的交互式地图,通过其提供的学习路径与资源,能够很快的掌握一项技能。学习新技能的好方法,同时项目本身的交互也很值得参考。9400机器学习keras-js https://github.com/transcranial/keras-js本项目可以让你使用 WebGL 在 GPU 驱动的、浏览器上运行训练好的 Keras 模型。它能将深度学习完成的网络放进js。打开机器学习,图像识别大门最简答的方法之一。通过几十行简单的代码,就可以实现文字,图像识别的demo。3313
第十五期(2017-12-8)
分类项目名称与地址项目简介推荐理由star数代码格式化Prettier https://github.com/prettier/prettierPrettier是一个代码格式化程序。支持很多种语言,如:JavaScript、JSX、Flow、TypeScript、CSS、LESS、SCSS等。它的一大特点就是能够支持命令行、API 等多种形式调用,可以让团队保持代码风格一致。使用Prettier有很多益处:几乎不需要做决定,因为 Prettier的配置选项很少;团队成员不需要为规则去争论;开源代码开发者不需要去学习项目的代码风格;不需要去修复ESLint报告的风格问题;保存文件的时候可以自动统一风格。包括 React 和Babel在内的很多著名项目已经开始使用了,所以,你也值得拥有。17779前端工程化Parcel https://github.com/parcel-bundler/parcelParcel 是一款极速、零配置的 Web 应用打包工具,支持:极速打包 - 多核心编译,以及即使在重启后也能快速重建的文件系统缓存。无需安装插件,开箱即用,支持 JS、CSS、HTML、file assets 等。在有需要时自动转换成 Babel、PostCSS 和 PostHTML 模块 - 甚至是 node_modules。代码零配置,使用动态 import()语句分割。内置热模块替换。前端领域已经有了webpack这样一个强大的工具,但它并非就十全十美,Parcel就针对webpack的不足做了很多文章,它的构建速度非常快,使用cache后几乎能比webpack快8倍,同时它支持零配置,在项目中开箱即用,不像webpack那样需要各种配置项。在GitHub开源,一周内就得到了7200多个star,未来绝对不容忽视的前端工程化技术。7268接口模拟json-server https://github.com/typicode/json-serverJson-Server是一个本地数据接口模拟神器,基于REST API,配合使用Proxy,效率极其高。它可以在30s内让你建立一套完整的REST API。它足够简单,写少量数据,即可使用。也足够强大,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等。27310
第十四期(2017-12-1)
分类项目名称与地址项目简介推荐理由star数响应式编程RxJS https://github.com/ReactiveX/RxJSRxJS 是使用 Observables 的响应式编程的库,它使编写异步或基于回调的代码更容易。这个项目是 Reactive-Extensions/RxJS(RxJS 4) 的重写,具有更好的性能、更好的模块性、更好的可调试调用堆栈,同时保持大部分向后兼容,只有一些破坏性的变更(breaking changes)是为了减少外层的 API 。使用RxJS,可以达到以下目的:同步与异步的统一;获取和订阅的统一;现在与未来的统一;可组合的数据变更过程;数据与视图的精确绑定;条件变更之后的自动重新计算9507数据可视化g2 https://github.com/antvis/g2G2 是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各种各样的可交互的统计图表。2017年11月22日,G2 3.0 来了,一个“数据驱动的高交互图形语法”新生绽放,并且从这个版本起,G2 将以 MIT 协议正式对外开源。G2是图形语法在前端工程上的一个实现。它提供了强大的语义化图表生成能力,使得用户(开发者)可以通过简单的语法组合即可搭建出各种各样的图表。3531PWA第一本 PWA 中文书 https://github.com/SangKa/PWA-Book-CN《Progressive Web Apps》是 Manning 出版社发行的一本很不错的PWA 主题的书,到目前为止,市场上关于 PWA 的好书也是屈指可数。这个项目是该书的中文翻译版本,已经在github上开源。目前 PWA 相关的学习资料十分有限,中文的就更少了,给想去了解 PWA 的开发者带来了一定的困扰。作者利用业余时间翻译了此书,对PWA学习很有帮助。1657
第十三期(2017-11-24)
分类项目名称与地址项目简介推荐理由star数JS运行时环境napajs https://github.com/Microsoft/napajsNapa.js是一个基于V8的多线程JavaScript运行时环境,它起初被设计用于在Bing中开发不影响性能的高度迭代服务。随着开发的深入,微软的工程师发现Napa.js能有效补足Node.js在CPU-bound任务上的不足,而且拥有在多个V8隔离中执行JavaScript代码并进行相互通信的能力。虽然Napa.js是Node.js的一个模块,但是它也能嵌入没有Node.js依赖的主机进程中。多线程JavaScript运行时环境;Node.js兼容的模块,支持NPM;JavaScript线程间的对象传递、对象共享和同步接口;可插拔的日志、标准和内存分配接口;作为一个Node.js的模块部署,支持脚本嵌入。7133时间类库date-fns https://github.com/date-fns/date-fns轻量级的 JavaScript 日期库。提供了最全面,简单和一致的工具集,用于在浏览器和 Node.js 中操纵 JavaScript 日期。非常好的解决了纯 JS 操作时间极其复杂的问题。7832PWAreact-pwa https://github.com/Atyantik/react-pwa一个可拓展的、最佳实践的 PWA 基础库(对提升react应用的性能和体验很有帮助)。支持 React & Redux SSR,良好的 SEO 策略与页面加载速度。1001
第十二期(2017-11-17)
分类项目名称与地址项目简介推荐理由star数网络请求axios https://github.com/axios/axios一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。它支持如下特性:从浏览器中创建 XMLHttpRequest;从 node.js 发出 http 请求;支持Promise API;拦截请求和响应;转换请求和响应数据;取消请求;自动转换JSON数据;客户端支持防止 CSRF/XSRF;vuejs 作者尤雨溪之前发布过消息,不再继续维护vue-resource,并推荐大家使用 axios。目前axios 被越来越多的人所了解和使用,它功能强大,api设计的也比较好,代表一种较新的网络请求模式。30650数据图表charts https://github.com/frappe/charts简单,响应式,无任何依赖的现代SVG图标库,纯ES6+CSS写的项目,不依赖任何框架的项目典范。同时图表组件使用简单,样式也很漂亮。零依赖,使用简单且效果美观的图表组件库。8670动画特效lottie-web https://github.com/airbnb/lottie-webAirbnb开源的动画库,它能够同时支持iOS,Android与ReactNative的开发,让美工在AE软件上设计的动画直接用于移动客户端与网页。它的出现极大地解放了客户端/前端工程师编写原生自定义动画的工作。相关的另外两个开源库lottie-android和lottie-ios都已经收获了过万的star。8633
第十一期(2017-11-3)
分类项目名称与地址项目简介推荐理由star数PWAworkbox https://github.com/GoogleChrome/workboxWorkboxjs Chrome官方团队推出的用来降低 PWA 开发成本的技术。2017 Chrome Dev Summit 10月23号在在美国旧金山举行,大会的主题依旧是PWA(Progressive Web APP,渐进式Web应用),从2017年从始至今,在 Google I/O、GDD到各种 Conf上,PWA一直被强调。Workboxjs 作为官方技术,一定程度上代表着未来PWA开发的趋势。中后台应用搭建ant-design-pro https://github.com/ant-design/ant-design-pro由Ant Design出品的开箱即用的中台前端/设计解决方案。优雅美观:基于 Ant Design 体系精心设计;常见设计模式:提炼自中后台应用的典型页面和场景;响应式:针对不同屏幕大小设计;主题:可配置的主题满足多样化的品牌诉求;国际化:内建业界通用的国际化方案;Mock 数据:实用的本地数据调试方案;UI 测试:自动化测试保障前端产品质量;2366离线存储pouchdb https://github.com/pouchdb/pouchdbPouchDB是受 Apache CouchDB启发为Web设计的一款占用空间少的数据库。它尤其适合于需要基于浏览器的可离线使用的存储方案的移动应用。离线或“在云中”工作的应用都将面临可靠的数据同步的问题,它们都可能会用到PouchDB。9653
第十期(2017-10-27)
分类项目名称与地址项目简介推荐理由star数React组件awesome-react-components https://github.com/brillout/awesome-react-components一个React 组件/库集合,awesome系列之一。收集了很多的React组件项目,对开发复杂交互的React项目会很有帮助。10486React组件react-virtualized https://github.com/bvaughn/react-virtualized用于高效地呈现大型的列表(包括瀑布流等)和表格数据的React组件。开发中经常需要实现能无限滚动的长列表,使用这个库将使得长列表加载具有更好的性能,因为它能够动态的渲染需要呈现的部分,并删掉不需要展示的dom。7491数据图表recharts https://github.com/recharts/recharts使用React和D3构建的重新定义的图表库。简单易用的React图表库,原生的SVG支持,声明式的组件。6980
第九期(2017-10-20)
分类项目名称与地址项目简介推荐理由star数js函数式编程ramda https://github.com/ramda/ramda一款实用的 JavaScript 函数式编程库。强调更加纯粹的函数式风格。Ramda的函数本身都是自动柯里化的。其参数的排列顺序更便于柯里化。目前已经存在许多优秀的函数式的库(如underscore,Lodash)。相比而言,Ramda 的目标更为专注:专门为函数式编程风格而设计,更容易创建函数式 pipeline、且从不改变用户已有数据。9758React与electron最佳实践nylas-mail https://github.com/nylas/nylas-mail一款用现代web技术搭建的可扩展的开源电子邮件客户端。是React和electron等技术搭建的大型跨平台桌面客户端项目,无论是从技术还是架构都值得去学习和借鉴。23563前端包管理lerna https://github.com/lerna/lerna用于管理具有多个包的JavaScript项目的工具。将大型代码库拆分为独立的独立版本包对于代码共享非常有用。 然而,在许多存储库中进行更改是麻烦和难以跟踪的事情。lerna就是为了解决这些问题,它能让项目将它们的代码库组织成多包存储库。6324
第八期(2017-10-13)
分类项目名称与地址项目简介推荐理由star数UI框架bulma https://github.com/jgthms/bulma基于Flexbox的现代CSS框架响应式,专门为移动端而设计;组件纯CSS实现,无js依赖;模块化,按需引入。20085动画anime.js https://github.com/juliangarnier/anime一个优秀的JavaScript动画引擎,可以和CSS3属性,SVG,DOM元素和JS对象一起工作,制作出各种高性能,平滑过渡的动画效果。相比于其他的很多动画库,anime要更灵活而轻量一些,无论是从使用还是性能角度。15480图像语言识别tesseract.js https://github.com/naptha/tesseract.js纯Javascript实现的OCR支持62种语言,是流行Tesseract OCR引擎的一个JS移植。能很快的对图像文件进行分析识别处理,获取到语言文字信息,图像转字符数据的利器。12342
第七期(2017-09-30)
分类项目名称与地址项目简介推荐理由star数拖拽效果实现draggable https://github.com/Shopify/draggable一个轻量级,响应式的现代JavaScript拖放(Drag & Drop)库比较新的拖拽效果库,对ES6很友好,同时支持排序,插拔等效果,API比较强大7117Vue最佳实践vue2-elm https://github.com/bailicangdu/vue2-elm基于 vue2 + vuex + vue-router2 + fetch 构建一个具有 45 个页面的大型单页应用(饿了么移动端应用)Vue2构建的大型应用,对Vue开发很有参考价值12080js基础You-Dont-Need-jQuery https://github.com/oneuijs/You-Dont-Need-jQuery前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 如何用原生 js 实现。整理了各种用原生js实现 jQuery API的写法,有助于提生原生js的掌握程度,巩固基础,同时也可以减少项目对jQuery的依赖。12239
第六期(2017-09-22)
分类项目名称与地址项目简介推荐理由star数文件处理js-xlsx https://github.com/SheetJS/js-xlsx纯JS实现读写各种电子表格文件的类库。让开发者能直接在浏览器端处理表格数据,减少对服务端和网络的压力。7401性能优化electron-webpack-dashboard https://github.com/FormidableLabs/electron-webpack-dashboard采用Electron开发的Webpack桌面GUI管理控制台,通过它能够可视化的查看项目中webpack的打包,构建,依赖等相关数据。对性能优化很有帮助,同时它也是Electron技术的最佳实践之一。2226人工智能hubot https://github.com/hubotio/hubotHubot 是 GitHub 团队开源的一款聊天机器人技术,原目的是帮助 GitHub 员工更好的管理他们的软件。直到大家为这个机器人发掘了更多强大和好玩的用途。它能为团队内的任一成员服务,自动处理各种复杂的任务。一种 ChatOps 式的技术,Hubot 可以用来记录和帮助公司所发生的几乎一切。它常被戏称为 GitHub 最勤奋的「员工」,因为它始终尽职尽责勤勤勉勉,并且作为团队的「一员」,如果你愿意,它会永远在线。13227
第五期(2017-09-15)
分类项目名称与地址项目简介推荐理由star数文件处理jsPDF https://github.com/MrRio/jsPDF领先的浏览器端PDF解决方案,支持不同类型的PDF文件格式,包括:文本,数字,图形,图片,同时可以自由的编辑PDF中的标题或其它类型元素。曾经生成PDF是服务端代码的专利,而通过jsPDF则能够用前端脚本生成和控制PDF文件8950服务端技术serverless https://github.com/serverless/serverlessServerless Framework是无服务器应用框架和生态系统,旨在简化开发和部署服务端应用程序的工作。它作为Node.js NPM模块提供,填补了AWS Lambda等服务端技术存在的许多缺口。同时提供多个样本模板,可以迅速启动AWS Lambda,Azure, Google Cloud等服务进行开发。通过这项技术能快速的部署服务端架构,让开发者能更专注于应用本身。比起微服务、DevOps,Serverless的落地可能更快。19098图像识别tracking.js https://github.com/eduardolundgren/tracking.js/tracking.js 是一款js封装的图像处理的库,为浏览器带来丰富的计算视觉相关的算法和技术,通过它可以实现颜色追踪、人脸检测等功能通过它能很容易的在浏览器上使用计算机视觉技术,实现人脸识别等功能5498
第四期(2017-09-08)
分类项目名称与地址项目简介推荐理由star数编程学习free-programming-books-zh_CN https://github.com/justjavac/free-programming-books-zh_CN一份免费的编程书籍(中文版)索引,涵盖了计算机基础,各大编程语言,操作系统,编译,图形学,数据库,项目管理,设计模式,Web等各个领域的优秀书籍资源,并收录了一些读书笔记非常全的一份编程开发的书籍清单,而且都有在线阅读的资源,很值得收藏和学习21760数据查询语言graphql https://github.com/graphql/graphql-jsGraphQL是一套数据查询语言规范,由 Facebook在2012年开发,2015年开源,Facebook 内部已经广泛应用,用于替代 REST。graphql-js是Facebook官方对于js的GraphQL的一种实现与REST相比,GraphQL定义了更严格、可扩展、可维护的数据查询方式,是未来前后端协同的一个方向7767命令行工具开发Inquirer.js https://github.com/SBoudrias/Inquirer.js/常见的交互式命令行接口的集合,它能够很容易的提供错误回调,询问操作者问题,获取并解析用户输入,检测用户回答是否合法,管理多层级的提示等一些有名的命令行脚手架工具,如:vue官方脚手架vue-cli和yeoman脚手架yo都有用到Inquirer.js5016虚拟现实react-vr https://github.com/facebook/react-vr面向 VR 的React开发框架,内部通过包装流行的JS 3D引擎Three.js实现。通过WebGL将VR应用展现到网页上,同时也支持Oculus Rift,三星GearVR等VR设备。相比于其他的VR技术,react-vr 在React的无缝集成上占有优势,为具备React基础的开发者减少了学习成本,同时也能充分的利用React的能力与其繁荣的生态4859
第三期(2017-09-01)
分类项目名称与地址项目简介推荐理由star数数据图表Chart.js https://github.com/chartjs/Chart.jsChart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。使用
第二期(2017-08-25)
分类项目名称与地址项目简介推荐理由star数动画效果产品使用分步引导动画效果库:Intro.js https://github.com/usablica/intro.js为网站和项目提供分步指导新功能介绍的好方法不错的使用分步引导效果实现方案,帮助用户更容易的上手产品新功能15674通用工具可视化html编辑器 ORY Editor https://github.com/ory/editor一个高度可定制的HTML内容编辑器,基于 Slate.js, React和Redux开发可拖拽的编辑操作体验,对移动端很友好5815性能优化PWA相关:Lighthouse https://github.com/GoogleChrome/lighthouse一个自动化工具,用于改进网络应用的质量。提供一个要审查的网址,它将针对此页面运行一连串的测试,生成一个有关页面性能的报告。Lighthouse 目前非常关注 PWA 功能,如“添加到主屏幕”和离线支持,以针对网络应用质量的各个方面提供端到端审查。PWA技术的最佳实践项目之一;对提升页面性能很有帮助。10224客户端开发yoga https://github.com/facebook/yoga一个客户端开发的跨平台布局引擎,由facebook开源。支持 android,ios等平台,允许使用开发者最熟悉的语言进行布局开发,如java,C#,Objective-C,C等。同时也支持React Native开发。客户端布局开发利器,支持多个平台和语言。8207增强现实AR.js https://github.com/jeromeetienne/AR.js基于web提供增强现实的解决方案,它非常快,在手机上运行也可以达到60fps。完整的基于three.js+jsartoolkit5,适用于任何手机上的WebGL和WebRTC技术。WebAR技术的一种实现方案,能很快的实现性能不错的AR交互。4279
第一期 (2017-08-18)
分类项目名称与地址项目简介推荐理由star数性能优化React服务端渲染 next.js https://github.com/zeit/next.js/一个轻量的提供React应用服务器端渲染的框架,支持自动代码拆分等特性。能很好的提升页面加载与渲染速度。16334编程基础learn-regex https://github.com/zeeshanu/learn-regex帮助开发者更容易的学习正则表达式。其中提供了一个快速检测(各种语言)正则表达式匹配的网站:https://regex101.com/ 使用起来很方便10559通用工具RAP https://github.com/thx/RAPWeb接口管理工具,开源免费,接口自动化,MOCK数据自动生成,自动化测试,企业级管理。阿里妈妈MUX团队出品。数据接口模拟,管理,自动化测试神器。5889客户端开发Electron https://github.com/electron/electronGitHub开发的一个开源框架,它使用Node.js和Chromium,能通过html,css,js等技术完成跨平台桌面应用的开发。目前有很多知名的桌面客户端应用都在使用electron进行开发,如:slack,vscode等49258网络安全Awesome-Hacking https://github.com/Hack-with-Github/Awesome-Hacking最近比较火的一个Awesome系列,收集了hack,安全研究方面的一些技术与学习资料,包括 Web,服务端,Android,ios,物联网等各种安全领域的资源。很全的安全攻防资源整理,各个领域的开发者都能从中得到收获。15979人工智能deeplearn.js https://github.com/PAIR-code/deeplearnjs浏览器端机器智能框架,由 Google开发,是一款基于硬件加速的开源 JavaScript 库,可被用在机器智能领域。该库将高性能的机器学习构建模块引入到 web 开发领域。2291