8.1
前端每周清单第25 期:Vue2 响应式原理,RN 运行内置Node ,JS 巧用Proxy 反混淆,GraphQL 优劣思辨,深入React 动画
作者:王下邀月熊
编辑:徐川
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号
新闻热点
国内国外,前端最新动态
-
Storybook 3.2 发布:Storybook 允许我们在现代组件化开发中快速地浏览独立组件;在近日发布的Storybook 3.2 版本中,添加了对于Vue.js 的支持。除此之外,本版本还引入了层次化的Story 布局,允许开发者更加灵活地定义组件的展现层次;同时还允许在移动设备中直接浏览React Native 组件,还修复了之前的部分错误。 -
Webpack 着手为WebAssembly 添加头等支持:目前Webpack 中仅将JavaScript 作为头等公民看待,其他的资源(HTML 、CSS 等) 都需要转化为JavaScript 表达式进行处理;而近日Webpack 渲染与Mozilla 基金会达成合作,获得了来自MOSS 项目的$125,000 资金支持。Webpack 着手为WebAssembly 添加头等支持,我们也可以在 Issue Tracker 中了解最新的进展。 -
Webkit 着手开发PWA 特性支持:Progressive Web Applications(PWAs) 通过创建Service Worker 来使Web 用户能享受到推送、离线支持等原生应用的特性,是现代Web 开发中重要的组成。不过令人遗憾的是Safari 一直未表态支持PWAs 相关特性,这一点让很多开发者也颇为不满,在 Apple’s refusal to support Progressive Web Apps is a detriment to future of the web 此文中就进行了许多的讨论;不过近日有开发者发现,在Webkit 的BugList 与Changelog 上出现了有关PWA 的内容,尽管可能还需要数月乃至于更长的时间,我们相信未来Safari 会给予PWA 更好的支持。 -
TensorFire:基于
WebGL 的浏览器端高性能神经网络框架:深度学习与人工智能技术正在逐步地改变人们的生活,以TensoFlow 为代表的一系列深度学习与神经网络框架也是如日中天,迅猛发展。TensorFire 是基于WebGL 的,运行在浏览器中的神经网络框架。使用TensorFire 编写的应用能够在实现前沿深度学习算法的同时,不需要任何的安装或者配置就直接运行在现代浏览器中。
开发教程
步步为营,掌握基础技能
-
Vue.js 与NativeScript 初窥:NativeScript 框架最值得称道的即是其扩展性,它目前已经支持原生JavaScript 、Angular、Vue.js 等多种框架或者编码方式,同时未来还计划支持Preact 等框架。本文即是介绍如何使用NativeScript 与Vue.js 协同开发,首先介绍了如何使用NativeScript 命令行工具创建项目,然后引入Vue.js 插件以及如何运行该项目;更多Vue.js 相关资料参考 https://parg.co/byL 。 -
Node.js 实践教程:本教程是希望以一些有名的模块/ 功能为基础, 在实现的过程中讲解各项知识点,主要分为控制流、Web、存储等几个部分。目前完成的模块包括async 介绍、Promise 实现、coroutine 实现、co 模块介绍、HTTP Client 实现、HTTP Server 实现等;更多Node.js 相关资料参考 https://parg.co/be0 。 -
Airbnb React VR 实践:Airbnb 自2014 年以来一直使用React 构建用户交互界面,并且为社区贡献了很多优秀的开源项目;而随着React VR 的发布,Airbnb 也利用其来快速原型化与测试VR 相关的创意。本文即是介绍Airbnb 在React VR 实践方面的一些经验总结,本文首先阐述了React 、React Native 与React VR 三者之间的关系与差异,然后介绍了React VR 在布局、基础组件方面的语法,最后还讨论了React VR 、WebVR 以及VR 技术本身的发展可能性。更多WebVR 相关资料参考 https://parg.co/bFR。 -
突破
CSS 前端面试:不同于传统的软件工程师面试比较注重算法,前端面试可能更多的注重综合能力以及领域语言的掌握;本文即着眼于对于面试中常见的CSS 问题的总结与介绍。本文列举的问题譬如Resetting 与Normalizing 区别、floats 工作机制阐述、z-index 与stacking context 比较、BFC 描述等等;更多CSS/SCSS 相关资料参考 https://parg.co/baH 。
工程实践
立足实践,提示实际水平
-
Angular 性能优化:本文介绍了些常见的Angular 开发中可用的性能优化建议,包括了利用ChangeDetectionStrategy.OnPush 来显式声明组件间依赖、利用trackBy 来追踪唯一标识符和避免冗余的增删、避免模板中的计算推导、禁用变化监测、使用懒加载等。 -
Vue.js 2 单元测试指南:本文主要介绍如何利用Jasmine 为Vue.js 2 应用搭建完整的单元测试;这里选用Jasmine 的原因是它本身的性能较好,并且Vue.js 本身也是使用该测试框架。本文首先介绍了环境搭建与待测试的组件构成,然后依次介绍了配置测试环境、如何根据组件的业务功能逻辑选定测试点、如何编写不同目标的测试用例等内容;更多Vue.js 相关资料参考 https://parg.co/byL 。 -
深入
React 动画实践:本文介绍了在React 开发中多种创建动画效果的途径,包括了基于React 组件状态的CSS 动画、基于React 组件状态的JavaScript 样式动画以及第三方依赖的React Motion 、Animated、Velocity-React 等库。本文最后还讨论了如何用GreenSock 等经典强大的动画库来辅助React 组件动画开发;更多React 相关资料参考 https://parg.co/bM1 。 -
Node.js 如何解析Form 上传?:NPM 和GitHub 里的开源组件帮我们解决了很多繁琐的工作,但是也让我们失去了很多深入技术细节的机会。在现有组件无法满足我们需求的时候,就需要我们来自己动手丰衣足食了。作者前段时间遇到了一个需要手动解析Form 表单上传的机会,也借此为各位解析一下Node.js 解析Form 上传的实现细节。更多Node.js 相关资料参考 https://parg.co/be0 。
深度阅读
深度思考,升华开发智慧
-
JavaScript 中有趣而又无语的例子:JavaScript 是一门有趣的语言,它有着简单的语法、庞大的生态系统与社区,不过JavaScript 中也有着很多令人无语的地方。本文即是对JavaScript 中一些有趣的、出乎意料的用法收集,对于初学者是个不错的深入教程,而对于资深开发者也可以拿来作为面试题目。本文中包含的例子譬如[] == ![]
、NaN 的用法注意、try-finally 等等;更多JavaScript 相关资料参考 https://parg.co/bMI 。 -
安息吧
REST APIs ,GraphQL 长存:GraphQL 是Facebook 针对复杂关系的数据获取与操作开源的数据查询语言,本文则是对比了传统的REST APIs 与GraphQL 各自的优劣,讨论了GraphQL 相较于REST APIs 更适合应用的场景;不过本文并非提倡使用GraphQL 完全替代REST APIs ,也陈述了GraphQL 存在的不足与缺陷。本文首先概括性地总结了GraphQL 解决地三个问题,然后介绍了GraphQL 的由来和其内部原理,最后讨论了GraphQL 这种灵活性本身的代价。更多GraphQL 相关资料参考 https://parg.co/b1e 。 -
基于
Proxy 的PopUnder 库反混淆:本视频通过对某个商用的Chrome 59 中PopUnder 库,的执行过程解析,来介绍如何利用ES6 的Proxy 进行,简单的JavaScript 混淆代码逆向破解。视频还是挺有意思的,作者首先分析了经过混淆的源代码,发现无法下手;然后利用Proxy 监听常见的Windows 中createElement 等函数的调用来了解该库的执行流程,最后再根据API 的调用顺序复现出该库。更多JavaScript 设计模式相关参考 https://parg.co/bIO 。 -
深入
Vue.js 响应式原理:本文作者从Java 与C# 中经典的Getters/Setters 引入,讨论了Vue.js 中从组件渲染函数、数据的Getter 、Setter 劫持、监听器的控制以及重渲染触发整个生命流程。更多Vue.js 相关资料参考 https://parg.co/byL 。
开源项目
乐于分享,共推前端发展
-
Hazel
: Hazel 是Zeit 开源的轻量级Electron 应用更新服务器,它支持macOS 与Windows 应用的同步更新。Hazel 基于micro 库构建,能够自动地从Github Releases 抓取数据并且缓存在内存中,并且没十五分钟自动刷新下数据。 -
React Native Node
: React Native Node 能够在基于React Native 开发的Android 应用中启动后台Node.js 进程,从而可以利用Node.js 中的流、文件系统接口等特性来进行功能操作;React Native Node 主要依靠Node.js 7.1.0 版本能够被独立编译为bin_node_v710 可执行文件。另一方面,尽管iOS 并不支持直接运行V8 ,但是该项目正在致力于为ChakraCore 打造类V8 特性支持。 -
react-simple-maps
: react-simple-maps 是基于d3-geo 与topojson 的React 地图组件库,允许开发者快捷方便地构建自定义的SVG 地图;目前的特性包括了缩放、标记、自定义SVG 标记、自定义着色、气泡图、动画支持等等。 -
Vuestic Admin Dashboard
: 基于Vue.js 与BootStrap 4 的响应式管理控制台,包含了36 个元素、18 个页面、18 个自定义图标等内容;其使用Chart.js 构建了响应式图标、利用Leaflet 与amMap 构建可视化地图组件等内容。
巅峰人生
- 股权、期权有哪些坑?从技术创业的角度说开去:本文整理自知道创宇
CTO 兼COO 杨冀龙在GTLC 全球领导力峰会上的演讲,原题为《技术创业那些事儿》 。本文从依赖独特技术领先与依赖业务领先等不同类型的创业公司的股权分配、期权分配、投融资以及创业人自己的坚持等方面分享创业经历过哪些坑、该怎么处理。
前端之巅
前端之巅是