前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单。
新闻热点
国内国外,前端最新动态
React 16.1.0 发布: 本周 React 16.1.0 版本发布,自该版本开始 React 不再发布到 Bower,而是采用 unpkg 来镜像存放 UMD 构建版本;那些依赖于 Bower 进行依赖管理的开发者只能选择使用老的版本。此外该版本中还修复了 UMD 构建中,异常全局变量的错误;并且为实验性的 React Call Return 模块添加了父子通信的接口。
Node.js 9.1.0 发布: 本周 Node.js 9.1.0 版本发布,整合了一系列的提交;值得注意的变化包括 NODE_OPTIONS 环境变量开始支持 --stack-trace-limit 选项,OpenSSL 更新到了 1.0.2m,对于 http 模块开始支持 103 Early Hints 状态码,并且修复了 connect 事件处理器溢出的漏洞。
开发教程
步步为营,掌握基础技能
OpenAPI 与 gRPC 横向比较: OpenAPI(原 Swagger) 是构建网络 API 的两种不同方式,不过如果你了解过这两种技术方案,你会发现二者也有很多的共通之处,本文即是对 OpenAPI 与 gRPC 进行了详细的阐述与对比。OpenAPI 是用于描述 REST API 的语言,其提供了规范的 API 描述格式,默认基于 HTTP 进行数据交互并且使用 JSON 格式来表示数据;这种规范性也就使得基于 Schema 的代码生成更容易实现。而 gRPC 则源自 Google,同样提供了接口描述格式,其默认使用 HTTP/2 进行数据交互,并且使用 Protocol Buffer 作为数据格式,其相较于 OpenAPI 会更为严格。更多 API 相关资料参考这里。
HTML 实战系列教程: 本系列作者曾写过多篇 HTML 教程,为了更好地帮助初学者掌握 HTML 相关知识,作者在将之前的知识总结为了本系列中的数篇文章。本系列教程包含了 HTML 的基础语法、HTML 文档结构、HTML 标签基础类型、链接,图片与文档路径、HTML 元素的封装、HTML 中的列表与导航等内容,如果希望有更深入的了解还可以查看文档中推荐阅读的内容;更多 Web 基础教程查看这里。
Angular 5 特性概述: Angular 5(代号为 Pentagonal-Donut) 近日正式发布,其不仅带来了新的功能特性,还包含了很多致力于提升 Angular 应用体积与运行性能的内部改变;本文即是对其特性进行详细介绍。性能方面的提升包括了 Angular CLI v1.5 中默认启用优化器、Angular 编译器优化、不再需要 intl 与 Reflect Polyfill 等,功能特性方面的提升包括了 updateOn 表单域、Router Events、Service Worker 等;更多 Angular 相关资料参考这里。
渗透测试之子域名枚举详解: 掌握常见的网络安全与渗透测试相关知识,也是前端开发者的进阶要求之一;本文即是介绍渗透测试中的子域名枚举的实战技巧。所谓的子域名枚举,顾名思义,即是在给定某个域名的情况下获取到其所有的关联子域名,从而为下一步的渗透测试提供信息支撑;本文主要介绍了通过 Google 等搜索引擎、通过第三方 DNS 数据库、通过证书服务器、通过字典爆破、通过排列置换等等方式来枚举子域名。更多渗透测试相关资料参考这里。
工程实践
立足实践,提示实际水平
基于 Realm 的 Electron 高性能跨进程数据交互: Realm 在 iOS、Android、React Native 等原生应用或者混合应用开发中提供了,便捷强大的数据存储解决方案,而现在 Realm 也针对 Electron 中的跨进程(主进程与渲染进程)数据交互给出了自己的方案。与 Slack 选择的 electron-redux 这种 Redux 模式的跨进程数据交互不同的是,Realm 使用了 Multi-Version Concurrency Control 架构,来保证多线程的并发控制。这种架构相较于 electron-redux 能够带来接近原生的性能表现,此外 Realm 还提供了响应式的能力,允许开发者监听某个对象并且在对象发生变化时进行响应式操作;更多 Electron 相关资料参考这里。
Gitlab 使用 Vue.js 的年度总结: 时光易逝,岁月如梭,不觉之间 Gitlab 已经使用了一年多的 Vue.js,其对于 Vue.js 应用开发也有了更深刻的认识,本文即是 Gitlab 对于这一年的使用感悟的分享。就像 Scala,Vue.js 并非一锤子买卖,当我们正确使用它时,它能够给予优秀地体验反馈;这一年来 Gitlab 也遇到了,并且尝试去解决了很多的问题。作者在接下来的章节中讨论了使用 VueX 进行状态管理、编写高质量的代码、如何提升应用性能等内容;更多 Vue.js 相关资料参考这里。
BBC 是如何进行网页发布的: 本文是 BBC 在线技术委员会的首席架构师 Neil Craig 分享的,BBC 是如何将它们大部分的网页发布到因特网上。BBC 服务于全世界超过 230 个国家和地区,为了保证全世界用户的使用体验,BBC 在其发布流程上采用了一系列的优化策略。其对于资源的请求总量与并发请求数进行了分析,并且将下属的栏目划分到了不同的目录下以进行不同的峰值应对;对于不同国家和地区的用户,负载均衡会将其转发到不同的 CDN 或者应用服务器中,并且对于不同类型的资源也进行了区分对待。更多 Web 工程实践相关资料参考这里。
阿里云 11·11:DataV的数据可视化之道: 从 2012 年起,阿里每年的双 11 大促都会推出一个大屏,以多种生动的展示方式实时地显示交易情况。实时数据大屏,它的特点是各种大:屏幕大、数据量大、展示信息量大,可以说是数据可视化的圣杯。作为双 11 数据大屏的幕后功臣,DataV 在经历数个大型项目后几乎试遍技术沉淀的所有路径:开源代码、产品化、打包解决方案、平台化……应用场景也从双 11 电商作战,扩展到智慧城市、智慧交通等诸多领域。他们一路走来的历程和思索,值得后来者借鉴参考。更多数据可视化资料参考这里。
深度阅读
深度思考,升华开发智慧
React Native 与原生应用的量化比较: 现在,从事移动应用开发的程序员可能都会听过 React Native,这个由 Facebook 开源的优秀的跨平台开发解决方案;不过很多公司在进行技术选型时可能还较难在 Swift 原生开发与 React Native 做恰当的抉择。本文即是从理论到实践,多方位、立体地、量化地对 React Native 与 Swift 原生应用进行比较。作者分别使用 Swift 与 React Native 实现了一个简单的应用,包含了常见的登录、列表、地图等功能,而后又分别针对各个页面,从 CPU、GPU、内存使用等多个角度进行了量化比较。最后作者又从各方面比较了 React Native 的优势与不足;更多 React Native 相关资料参考这里。
GraphQL 技术栈漫游: GraphQL 开源已两年有余,其相关的生态圈也呈现指数级的增长,成百上千的公司在生产环境中使用了 GraphQL;本文即是对于 GraphQL Summit 2017 中的演讲的总结。本文首先概述了 GraphQL 的特别之处,然后分析了 GraphQL 开发中缓存、追踪、模式拼接等方面地实践技巧与相关开源项目;更多 GraphQL 相关资料参考这里。
揭秘 V8 Web 工具性能评测: JavaScript 的性能表现,一直是 V8 团队关注的核心问题之一;本文中 V8 团队讨论了它们工作中用于定位与修复性能瓶颈的, JavaScript Web 工具性能评测方法。所谓的 Web 工具性能评测套装,源自对于日常开发中常用的基于 Node.js 的工具使用场景的归纳,其着重关注 JavaScript 核心性能,忽略 Node.js 相关的 IO 或者其他额外的交互。其典型的测试用例包括了使用 es2015 的 Babel 转化器性能、对于 Lodash 等常见输入源的 Babylon 的性能、Webpack 使用的 acorn 解释器性能、基于 TypeScript-Angular 项目的 TypeScript 编辑器性能等。更多 V8 相关资料参考这里。
为什么我还在使用 jQuery: 现代 Web 开发中,jQuery 一直是传统开发的代名词,开发者喜欢谈论 TypeScript、ECMAScript 2015+、React、Vue.js 等等时髦的名词;作者则是在本文中讨论了为何他现在还是会继续使用着 jQuery。很多对于 jQuery 的诟病在于其增加了网站的体积,不过目前 jQuery 仅有 27KB,并且在通过 CDN 方式分发并不会增加站点压力;而 jQuery 的辅助方法还是能够帮我们提升代码的编写效率与性能。接下来作者还讨论了如何避免错误的代码、编写可扩展的 jQuery 代码、如何将 jQuery 集成到其他框架、在什么情况下要避免使用 jQuery 等内容。
开源项目
乐于分享,共推前端发展
cube-ui: cube-ui 是由滴滴开源的,基于 Vue.js 实现的精致移动端组件库,由滴滴内部组件库精简提炼而来,历经考验,并且每个组件都有充分单元测试,为后续集成提供保障。它以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致;遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效,并且支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。
js2flowchart: js2flowchart 能够将 JavaScript 代码表示为 SVG 格式的流程图,能够同时在浏览器于 Node.js 环境中执行;js2flowchart 允许我们随时根据代码的变化生成关联的逻辑流程图,从而方便展现与陈述代码逻辑。
Chimee: Chimee 是组件化的 H5 播放器框架,支持 mp4、m3u8、flv 等多种格式,由奇舞团视频云前端组研发。它帮我们解决大部分的兼容性问题,能够解决包括全屏、自动播放、内联播放、直播解码等常见视频需求;通过组件化开发,能满足业务方快速迭代、灰度发布等要求,让开发者能够轻松快捷地完成视频场景的开发。
NBA Go: NBA Go 是面向 NBA 粉丝的命令行工具,能够在命令行中查看比赛安排、比赛结果、选手信息等内容,方便程序员们随时掌握比赛信息。
巅峰人生
谷歌大脑负责人 Jeff Dean :让机器学会学习,专用硬件很有前景: 提到谷歌大脑,一定要提到它背后的“大脑” —— Jeff Dean ,他于 1999 年加入 Google ,带领团队完成了一系列令人瞩目的工作,如支持谷歌运行的超大规模计算框架 MapReduce ,以及你正在使用的 TensorFlow 等等。作为谷歌大脑的负责人,他仍在进行一系列开创性的研究工作。近日,Jeff Dean 接受了 Gigaom 的访问,谈及了这些工作和未来的主攻方向,也分享了他个人对于通用人工智能、机器学习以及人工智能应用的一些见解。
前端之巅
「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群,加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到 editors@cn.infoq.com,注明“前端之巅投稿”。