8.1

前端每周清单第25期:Vue2响应式原理,RN运行内置NodeJS巧用Proxy反混淆,GraphQL优劣思辨,深入React动画

作者:王下邀月熊 编辑:徐川

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单。

新闻热点

国内国外,前端最新动态

  • Storybook 3.2发布Storybook允许我们在现代组件化开发中快速地浏览独立组件;在近日发布的Storybook 3.2版本中,添加了对于Vue.js的支持。除此之外,本版本还引入了层次化的Story布局,允许开发者更加灵活地定义组件的展现层次;同时还允许在移动设备中直接浏览React Native组件,还修复了之前的部分错误。

  • Webpack着手为WebAssembly添加头等支持:目前Webpack中仅将JavaScript作为头等公民看待,其他的资源(HTMLCSS)都需要转化为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 此文中就进行了许多的讨论;不过近日有开发者发现,在WebkitBugListChangelog上出现了有关PWA的内容,尽管可能还需要数月乃至于更长的时间,我们相信未来Safari会给予PWA更好的支持。

  • TensorFire:基于WebGL的浏览器端高性能神经网络框架:深度学习与人工智能技术正在逐步地改变人们的生活,以TensoFlow为代表的一系列深度学习与神经网络框架也是如日中天,迅猛发展。TensorFire是基于WebGL的,运行在浏览器中的神经网络框架。使用TensorFire编写的应用能够在实现前沿深度学习算法的同时,不需要任何的安装或者配置就直接运行在现代浏览器中。

开发教程

步步为营,掌握基础技能

  • Vue.jsNativeScript初窥NativeScript框架最值得称道的即是其扩展性,它目前已经支持原生JavaScript、Angular、Vue.js等多种框架或者编码方式,同时未来还计划支持Preact等框架。本文即是介绍如何使用NativeScriptVue.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实践Airbnb2014年以来一直使用React构建用户交互界面,并且为社区贡献了很多优秀的开源项目;而随着React VR的发布,Airbnb也利用其来快速原型化与测试VR相关的创意。本文即是介绍AirbnbReact VR实践方面的一些经验总结,本文首先阐述了ReactReact NativeReact VR三者之间的关系与差异,然后介绍了React VR在布局、基础组件方面的语法,最后还讨论了React VRWebVR以及VR技术本身的发展可能性。更多WebVR相关资料参考 https://parg.co/bFR

  • 突破CSS前端面试:不同于传统的软件工程师面试比较注重算法,前端面试可能更多的注重综合能力以及领域语言的掌握;本文即着眼于对于面试中常见的CSS问题的总结与介绍。本文列举的问题譬如ResettingNormalizing区别、floats工作机制阐述、z-indexstacking context比较、BFC描述等等;更多CSS/SCSS相关资料参考 https://parg.co/baH

工程实践

立足实践,提示实际水平

  • Angular性能优化:本文介绍了些常见的Angular开发中可用的性能优化建议,包括了利用ChangeDetectionStrategy.OnPush来显式声明组件间依赖、利用trackBy来追踪唯一标识符和避免冗余的增删、避免模板中的计算推导、禁用变化监测、使用懒加载等。

  • Vue.js 2单元测试指南:本文主要介绍如何利用JasmineVue.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上传?NPMGitHub里的开源组件帮我们解决了很多繁琐的工作,但是也让我们失去了很多深入技术细节的机会。在现有组件无法满足我们需求的时候,就需要我们来自己动手丰衣足食了。作者前段时间遇到了一个需要手动解析Form表单上传的机会,也借此为各位解析一下Node.js解析Form上传的实现细节。更多Node.js相关资料参考 https://parg.co/be0

深度阅读

深度思考,升华开发智慧

  • JavaScript中有趣而又无语的例子JavaScript是一门有趣的语言,它有着简单的语法、庞大的生态系统与社区,不过JavaScript中也有着很多令人无语的地方。本文即是对JavaScript中一些有趣的、出乎意料的用法收集,对于初学者是个不错的深入教程,而对于资深开发者也可以拿来作为面试题目。本文中包含的例子譬如 [] == ![]NaN的用法注意、try-finally等等;更多JavaScript相关资料参考 https://parg.co/bMI

  • 安息吧REST APIsGraphQL长存GraphQLFacebook针对复杂关系的数据获取与操作开源的数据查询语言,本文则是对比了传统的REST APIsGraphQL各自的优劣,讨论了GraphQL相较于REST APIs更适合应用的场景;不过本文并非提倡使用GraphQL完全替代REST APIs,也陈述了GraphQL存在的不足与缺陷。本文首先概括性地总结了GraphQL解决地三个问题,然后介绍了GraphQL的由来和其内部原理,最后讨论了GraphQL这种灵活性本身的代价。更多GraphQL相关资料参考 https://parg.co/b1e

  • 基于ProxyPopUnder库反混淆:本视频通过对某个商用的Chrome 59PopUnder库,的执行过程解析,来介绍如何利用ES6Proxy进行,简单的JavaScript混淆代码逆向破解。视频还是挺有意思的,作者首先分析了经过混淆的源代码,发现无法下手;然后利用Proxy监听常见的WindowscreateElement等函数的调用来了解该库的执行流程,最后再根据API的调用顺序复现出该库。更多JavaScript设计模式相关参考 https://parg.co/bIO

  • 深入Vue.js响应式原理:本文作者从JavaC#中经典的Getters/Setters引入,讨论了Vue.js中从组件渲染函数、数据的GetterSetter劫持、监听器的控制以及重渲染触发整个生命流程。更多Vue.js相关资料参考 https://parg.co/byL

开源项目

乐于分享,共推前端发展

  • Hazel: HazelZeit开源的轻量级Electron应用更新服务器,它支持macOSWindows应用的同步更新。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-geotopojsonReact地图组件库,允许开发者快捷方便地构建自定义的SVG地图;目前的特性包括了缩放、标记、自定义SVG标记、自定义着色、气泡图、动画支持等等。

  • Vuestic Admin Dashboard:基于Vue.jsBootStrap 4的响应式管理控制台,包含了36个元素、18个页面、18个自定义图标等内容;其使用Chart.js构建了响应式图标、利用LeafletamMap构建可视化地图组件等内容。

巅峰人生

  • 股权、期权有哪些坑?从技术创业的角度说开去:本文整理自知道创宇CTOCOO杨冀龙在GTLC全球领导力峰会上的演讲,原题为《技术创业那些事儿。本文从依赖独特技术领先与依赖业务领先等不同类型的创业公司的股权分配、期权分配、投融资以及创业人自己的坚持等方面分享创业经历过哪些坑、该怎么处理。

前端之巅

前端之巅是InfoQ旗下关注前端技术的垂直社群,加入前端之巅学习群请关注前端之巅公众号后回复“加群”。投稿请发邮件到 editors@cn.infoq.com,注明“前端之巅投稿”;或者可以阅读往期文章:

下一页