前端每周清单专注大前端领域内容，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

Vue.js超越React.js？勿以star数论高低！：近日，在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事：Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量，并在不久之后双双破了10W。

纵观过去两年的数据，我们可以看到，与 github 的 star 数形成鲜明对比的是，根据 NPM 软件包的下载量来衡量，React 仍然在实际使用方面占据主导地位。它即将超过每月1000万的巨大下载量，并且还一直保持着高速的增长。

但在过去的两年中，Vue 的增长速度比其他任何主流的 JavaScript 框架都快，最近赶上了 Angular.js，并逐渐缩小了它与 Angular 和 React 之间的差距。

Airbnb 宣布放弃使用 React Native，回归使用原生技术：6月20日，Airbnb 技术团队在 Medium 上宣布，Airbnb 放弃使用 React Native，将回归到使用基于原生技术的自有框架开发 App。

Airbnb 表示，尽管很多团队都依赖 React Native 并计划在可预见的将来使用它，但他们最终还是无法实现最初的目标。Airbnb 放弃使用 React Native 的主要原因是 React Native 未能实现完全的跨平台抽象，有时候仍然需要针对特定平台单独编写代码来解决问题。这就间接要求他们的工程师必须熟悉三个平台才能真正用好 React Native，然而绝大多数开发者只熟悉一两个平台，久而久之便引发了一系列的问题。

Google发布Flutter预览版：6月21日，在北京 GMTC 大前端大会上，Google Flutter 高级工程师于潇宣布 Flutter Release Preview 1发布，并宣布与阿里巴巴闲鱼团队在 Flutter 上合作，这标志着 Flutter 进入了一个新阶段。在Google I/O大会之后，Flutter 生态得到了快速地增长，Flutter 的活跃用户增长了 50%，不仅如此，在 I/O 大会之后的几周内，在全世界范围内，已有超过 150 个与 Flutter 相关的事件发生。

Flutter 团队表示，Flutter 从 beta 版本到现在的Release Preview 1，都体现了他们对稳定性和质量的信心和关注。

开发教程

步步为营，掌握基础技能

大话大前端时代：Vue 与 iOS 的组件化（上）：笔者是一名普通的全职 iOS 开发者，在接触到了前端开发以后，发现了前端有些值得移动端学习的地方，于是便有了这个大前端时代系列的文章，希望两者能相互借鉴优秀的思想。谈及到大前端，常常被提及的话题有：组件化，路由与解耦，工程化（打包工具，脚手架，包管理工具），MVC 和 MVVM 架构，埋点和性能监控。笔者先从组件化方面谈起，以前端和移动端（以 iOS 平台为主）对比为主，看看这两端的不同做法，并讨论有无相互借鉴学习的地方。

服务端与客户端同构 —— Vue.js 应用框架 Nuxt.js：很多现代的JavaScript框架，比如Vue.js, 旨在构建单页应用(SPA)。单页应用的优势在于，改善用户体验，让网页速度更快，像APP一样流畅，即使更新。虽然单页应用优点很多，但是由于依赖多导致首屏渲染慢，无法做seo优化也是让人头疼的问题。

服务端渲染是指，提前将页面在服务器端渲染好，当浏览器请求服务器时，直接返回渲染好的html页面返回。构建服务端渲染的JavaScript程序多少有些无趣，在开始编码之前，需要大量的基础配置。因此，解决vue.js服务端渲染问题的Nuxt.js产生了。

通过本文，你讲学习到如何利用 Nuxt.js 搭配 Vue.js 构建服务端渲染的 JavaScript 应用程序。还学会如何使用其 generate 命令来生成我们页面的静态文件，并且，可以利用 Firebase Hosting 这样的静态托管工具部署。

工程实践

立足实践，提示实际水平

美团外卖Android Crash治理之路：Crash率是衡量一个App好坏的重要指标之一。如果你忽略了它的存在，它就会得寸进尺，愈演愈烈，最后造成大量用户的流失，进而给公司带来无法估量的损失。本文讲述美团外卖Android客户端团队在将App的Crash率从千分之三做到万分之二过程中所做的大量实践工作，抛砖引玉，希望能够为其他团队提供一些经验和启发。

太平洋保险CIMS系统微前端实践：微前端的概念最早由 ThoughtWorks 在 2016 年底提出，是一种将微服务推广到前端的设计理念。（https://micro-frontends.org/），目前的趋势是构建一个功能丰富且功能强大的浏览器应用程序，也就是位于微服务架构之上的单页应用程序（SPA）。

微前端可以有效的降低前端的代码复杂度和更加灵活的解耦，甚至可以很好的组合当前流行的各种前端框架，例如 Vue，React，Angluar。同时, 微前端服务可以有自己的独立生命周期。在本文中，作者将告诉我们太平洋保险是如何利用微前端改造CIMS系统的。

苏宁金融移动端登录优化之道：在登录优化过程中，苏宁金融秉持“图难于其易，为大于其细的思想”，已经达成登录响应时间、成功率及用户体验的提升。本文主要从如下几个方面介绍苏宁金融移动端登录优化的道和术：找到登录优化之道、完善系统的监测和度量、梳理登录的每个环节、优化登录的各个环节。

大型网站的 HTTPS 实践：协议层以外的实践：百度已经上线了全站 HTTPS 的安全搜索，默认会将 HTTP 请求跳转成 HTTPS。百度 HTTPS 性能优化涉及到大量内容，在前端页面、后端架构、协议特性、加密算法、流量调度、架构和运维、安全等方面都做了大量工作。本系列文章将对此一一进行介绍。

深度阅读

深度思考，升华开发智慧

浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层：本文会在主要描述以 Vue 技术栈为技术主体，ToC 端项目业务主体，在构建过程中，遇到或者总结的点（也会提及一些 ToB 项目的场景）。主要包括选择单页面还是多页面，全局配置、插件与拦截器，以及路由配置与懒加载等。

深入理解JavaScript this：要说 JavaScript 这门语言最容易让人困惑的知识点，this 关键词肯定算一个。JavaScript 语言面世多年，一直在进化完善，现在在服务器上还可以通过 node.js 来跑 JavaScript。显然，这门语言还会活很久。

所以说，如果你是一个 JavaScript 开发者或者说 web 开发者，学好 JavaScript 的运作原理以及语言特点肯定对你以后大有好处。不过你首先需要学变量作用域和作用域提升、JavaScript 的函数、闭包这些基础知识才能更好地理解this。

开源项目

乐于分享，共推前端发展

JSUI：JSUI是一个强大的用于管理JavaScript应用程序的UI工具包，无论是前端还是后端应用程序，也不管应用什么框架，如果它有package.json，就能使用这个库。

vue-native-core：vue-native是一个使用JavaScript构建跨平台原生移动应用程序的框架。它用Vue Native CLI生成Vue Native应用程序，这意味着Vue Native可以做任何React Native能做的事。

spritejs：SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，并发布到任何拥有canvas环境的平台上（比如浏览器、小程序和node）。