10.3

前端每周清单第36 期:深入Vue 2.5 类型增强、Puppeteer 端到端测试、PayPal 跨域套装
作者:王下邀月熊
编辑:徐川
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号
新闻热点
国内国外,前端最新动态
-
MSDN 将7700 余份文档重定向到MDN : 为了更好地协同维护Web 开发相关的文档,微软决定将MSDN 上7700 余份Web 开发相关的文档重定向到MDN ;MDN 是Mozilla 开源共享的核心部分,来保证Internet 资源的开放性与可用性,从而帮助开发者更快地学习与成长;微软也长期致力于维护MDN 上相关地开发文档,包括整个Microsoft Edge 的Web API 接口也是完全构建在MDN 上。 -
Expo SDK v22.0.0 发布:Expo SDK v22.0.0 基于近日发布的React Native 0.49 版本,进行了一系列的功能特性提升与优化。现在,Snacks 可以支持多文件与多资源拖动上传,并且能够将自定义的Snacks 持久化保存到个人文档中;该版本还优化了Android 中使用的JavaScriptCore 以及ARKit ,同时增强了Splash Screen API, WebBrowser.openAuthSessionAsync 等接口。 -
Chrome 62 发布:本周发布的Chrome 62 版本针对调试工具中的Network Information API 进行了重大升级,其提供了更多的性能评测信息,而不再仅仅是统计结果;除此之外,该版本还开始支持OpenType Variable Fonts 以及DOM 元素中进行Media 捕获。另一个有趣的地方在于Chrome 62 的iOS 版本提供了Payment Request API ,尽管iOS Webkit 本身都没有提供这个功能;这也为自定义浏览器中希望添加Payment Request API 的支持提供了思路。
开发教程
步步为营,掌握基础技能
-
基于
Puppeteer 的端到端测试:Chrome 在59 版本时推出了Headless Chrome( 无界面Chrome) ,可用于自动化测试和不需要可视化用户界面的服务器;Puppeteer 就是Chrome 团队推出的基于Headless Chrome 开发的自动化工具,它可以用来做UI 自动化测试。本文即是对如何利用Jest 与Puppeteer 进行界面的端到端测试进行介绍,本文首先讨论了何为端到端测试及其在项目开发流程中的意义、如何使用Puppeteer 编写测试用例、如何在Jest 中运行这些用例,文末还给出了数个编写端到端测试用例的建议。如果有对于Puppeteer 还不了解的同学也可以阅读前端之巅专栏本周推荐文章:使用Puppeteer 玩转Headless Chrome ;更多Puppeteer 相关资料参考这里。 -
Angular JWT 权限验证完整指南: 本文循序渐进地介绍如何设计与实现Angular 应用中基于JWT 的权限验证部分;本文不仅仅聚焦于如何写代码,而是希望能够带领读者一起来考虑如何设计基于JWT 的权限验证,我们应该关心哪些设计要点并且如何将它们应用到具体的开发实践中。本文首先讨论了登录页的设计、JWT 机制原理,然后 利用node-jsonwebtoken 来创建基于JWT 的用户Session ,接下来讨论了如何将JWT 返回给客户端并且选择合适的存放位置,最后分析了如何在客户端中将JWT 返回给服务端并且验证用户是否合规。更多Angular 相关资料参考这里。 -
Vue.js 中高级概念介绍: Vue.js 毫无疑问是简单易上手的框架,本文则 长篇大论地对Vue.js 中一些高级概念的理解与使用进行深入介绍,包括Mixins 、Custom Directives、Filters、Transitions、状态管理、服务端渲染等。本文依次介绍了如何使用Mixins 实现代码复用、如何创建自定义的指令、如何使用Filters 来对展示信息进行过滤、如何使用Transitions 创建动画、如何使用Vuex 进行状态管理等内容。更多Vue.js 相关资料参考这里。 -
Flexbox 与CSS Grid 系列教程: 本系列文章是对于CSS 布局中常用的Flexbox 与CSS Grid 进行深度介绍,首篇文章是对于Flexbox 与CSS Grid 的概念进行详细介绍与对比;Flexbox 是面向一维布局设计,适合于单纯的行布局或者列布局;而CSS Grid 则面向二维布局设计,能够同时在行或列上进行元素排布。更多CSS 布局相关资料参考这里。
工程实践
立足实践,提示实际水平
-
来自
PayPal 的开源跨域JavaScript 套装: PayPal 的工程师们编写了很多运行于不同网页、不同域名下的JavaScript 代码,并且还为很多的第三方网站提供了便捷的代码嵌入方式,不过这样也就导致了PayPal 面临着极为复杂的跨域问题:既需要提供跨浏览器的兼容方案,也不能强制性的让所有的后端接口允许CORS 跨域请求等,本文即是PayPal 对其 日常业务中使用的跨域相关工具进行深度介绍,譬如有基于Listener/Client 模式的客户端跨域通信工具、跨域React 组件、跨域的安全WeakMap 、基于iFrame 的fetch 请求代理等等;更多跨域相关讨论参考这里。 -
访谈:
Bustle 的GraphQL 实践:Facebook 将GraphQL 定义成“一门API 查询语言以及一个支持查询现有数据的运行时”。REST 通过向REST 端点发送请求获取数据,而GraphQL 允许客户端指定它们想要的数据。当Facebook 公司内部开始大规模使用GraphQL 时,社区才刚刚开始使用GraphQL 。InfoQ 采访了来自Bustle 的工程总监Steve Faulkner ,谈论了GraphQL 的相关问题以及Bustle 如何使用GraphQL ,并为想要采用GraphQL 的团队提供了一些建议。更多GraphQL 相关资料参考这里。 -
现代
JavaScript 技术栈: 本文是对于现代JavaScript 技术栈的高屋建瓴的盘点,希望能够为那些还停留在旧时代的开发者提供完整的2017 年JavaScript 技术概念。本文首先阐述了所谓传统开发方式的面貌,然后依次介绍了包管理器npm 、JavaScript 模块打包工具Webpack 、代码语法转换工具Babel 、任务运行工具Npm Scripts 等;更多JavaScript 相关资料参考这里。
深度阅读
深度思考,升华开发智慧
-
深入
Vue.js 2.5 类型支持: Vue.js 2.5 着重提升了TypeScript 的类型支持,使得开发者不仅仅能通过类组件接口来获得正确的类型定义,还能直接从内置的接口中获取类型,本文则是对于Vue.js 2.5 中的类型支持进行详细阐述,展示了TypeScript 中强大的类型系统是如何被用于流行的框架。本文依次讨论了this 对象、Mapping Computed、PropTypes 以及兼容性等内容;更多Vue.js 相关资料参考这里。 -
Napa.js
: Napa.js 是Microsoft 开源的基于V8 的多线程JavaScript 运行时,其最初被用于解决Bing 中高CPU 占用的服务。随着该项目的不断发展,开发团队发现其同样能够被用于解决Node.js 中CPU 密集型的任务,即将JavaScript 代码运行在多个隔离的V8 运行时中,并且为不同运行时之间提供数据通信服务。Napa.js 能够像普通的Node.js Module 一样被引入到项目中,同时也能不依赖于Node.js 而被嵌入到某个宿主进程中。更多JavaScript 相关资料参考这里。 -
Key Reinstallation Attacks
: 本周,所谓的KRACK 攻击占据了新闻头条,其能够突破大部分WiFi 硬件设备上使用的WPA2 加密体系,窃听用户机密;虽然很多的设备商已经更新了他们的系统或者提供了软件更新,这起事件也为我们敲响了警钟。在本次事件中使用HSTS 预加载的网页并没有受到影响,也提醒了我们应该考虑是否将该头部声明添加到网站中。
开源项目
乐于分享,共推前端发展
-
accessibilityjs
: accessibilityjs 是由GitHub 开源的界面可访问性错误扫描工具,其被用于了开发与生产环境下页面中不可访问的元素发现。accessibilityjs 会将那些不可访问的元素添加错误标识,包括了ImageWithoutAltAttributeError, ElementWithoutLabelError,LinkWithoutLabelOrRoleError, LabelMissingControlError, InputMissingLabelError, ButtonWithoutLabelError, ARIAAttributeMissingError 。 -
design-blocks
: 基于Bootstrap 构建的超过170 个设计块,能够帮助设计师快速设计现代网站;design-blocks 主要包括了响应、通讯录、内容、特性、页脚、表单、页头、价格、团队、证明书等等组件。 -
Electron Webpack Dashboard:
Electron Webpack Dashboard 对于Webpack Dashboard 的扩展,为了方便各个平台的用户都能稳定、便捷地使用美观的Webpack 控制台。Electron Webpack Dashboard 1.0 版本能够稳定支持Webpack 2 与Webpack 3 ,同时修复了早前版本存在的一些问题;而下一步Electron Webpack Dashboard 将会专注于提供单机多实例并发的功能,同时针对macOS 提供多Tab 页,针对Linux 与Windows 提供多窗口的支持。 -
Smooth Scrollbar
: Smooth Scrollbar 允许我们自定义跨浏览器的高性能滚动条,它使用CSS3 的translate3d
属性来实现惯性滚动。Smooth Scrollbar 还提供了丰富的插件系统与易用的插件接口,方便开发者根据自身地业务需要灵活定制。
巅峰人生
- 程序员是手艺人,如何让自己的技能变现?
: 本文摘自陈皓( 左耳朵耗子) 在极客时间App 开设的付费专栏“左耳听风”,是他对自身技术成长道路的分享。本文聚焦于如何让自己的技能变现,从千里之行基于跬步、关注有价值的东西、找到能体现价值的地方、动手能力很重要、关注技术付费点、提升自己的能力和经历、找到有价值的信息源等几个方面进行考虑。
前端之巅
前端之巅是
