前端每周清单第 37 期：Bootstrap 4 必知必会、2017 Vue.js 报告、Graphcool 开源框架

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

新闻热点

国内国外，前端最新动态

• 再见，Firebug: Firebug 是曾经最为流行与强大的 Web 开发调试工具，无数的 Web 开发者都曾经使用过 Firebug。在 2005 年 Firebug 面世之初，它是首个可以容许开发者审查、编辑以及直接在 Firefox 浏览器中直接调试代码的工具；一年以后 Firebug 宣布开源，也吸引了更多的开发者协同维护这个工具。直到 2016 年，Firefox 宣布将会统一 Firebug 与 Firefox 的内置调试工具；近日发布的新版的 Firefox 的内置开发工具也是基于 React/Redux/Webpack 等流行的 Web 开发技术栈，为开发者们提供了更多酷炫的功能。

• Apollo Client 2.0 发布: Apollo Client 是灵活易用的、彻底由社区驱动的，可以与 React、Vue.js、Angular 等常见的 JavaScript 框架无缝集成的 GraphQL 客户端。目前 KLM、IBM、Intuit 等公司都已经在他们的项目中使用了 Apollo Client。 2.0 版本也是更来了一系列的功能更新与特性加强。在新版本中，咱们可使用 Apollo Link 来做为网络层以优化数据交互的性能，经过 apollo-link-state 与 apollo-link-rest 则可以平滑地兼容原有的内部状态与 REST 接口；更详细的版本说明请参考原文。

• React Studio 1.2 发布：React Studio 是基于 React 的可视化 Web 开发工具，近日其发布了 1.2 版本；该版本中主要包含如下特性更新：内置集成了 Git 版本管理工具、集成了插件编辑器、添加了 Create Plugin 等命令、容许基于 Canvas 的 3D 预览。此外，项目的结构图功能也获得了加强，可以帮助开发者自动优化显示的组件树结构，而且优化了 Plugin Store 中插件的提交与安装方式。

开发教程

步步为营，掌握基础技能

• Graphcool Framework 介绍: 近日 Graphcool 宣布开源包括 GraphQL 数据库、权限认证系统、实时订阅、Cloud Native 运行时等在内的完整的 Graphcool 开发框架；本文便是介绍如何利用 Graphcool Framework 快速构建与部署生产环境下的 GraphQL 服务端。GraphQL 数据库容许使用者经过 GraphQL CRUD 接口来对数据进行增删改查与流式获取,Permission 系统则提供了基于角色的权限校验功能，Subscription API 则提供了实时的数据推送功能。更多 GraphQL 相关资料参考这里。

• 基于 JavaScript 的浏览器自动化与网页抓取: 本文的核心内容是介绍如何使用 Headless Chrome、Puppeteer 以及 Node.js 进行网页抓取，咱们在过去的清单中也屡次推荐过 Puppeteer 相关的内容。本文首先介绍了 Puppeteer 中基础的截图接口的调用与代码运行，而后按部就班地介绍了如何针对性地抓取数据，最后讨论了如何使用对外发布的服务；更多浏览器自动化详细教程参考这里。

• 使用 WebStorm 高效率开发 Angular 的建议: 本系列文章是由 Google 技术专家 Jurgen 以及 Motto 分享的，使用 WebStorm 开发 Angular 应用过程当中，如何提升开发效率的实践思考。本文首先介绍了协同使用 WebStorm 与 Angular CLI，而后讨论了如何在 WebStorm 中快速切换与定位组件，接下来讨论了如何利用 Angular Language Service 以及如何自动化补全代码，最后介绍了如何优化 Imports。更多 Angular 相关资料参考这里。

• 使用 TypeScript 编写 React 与 Redux 应用: 随着应用复杂度与工程中代码数目的增长，咱们不可避免地须要引入静态检测工具以提升代码质量，本文便是介绍如何在 React 与 Redux 开发中使用 TypeScript。本文依次介绍了在类组件、函数式组件、Redux 的 Action 与 Action Creator、Reducer、Store 中使用类型校验；更多 React 教程参考这里。

• HTML 文档中 head 内标签详解: 本仓库是对于 HTML 文档中 head 相关的属性进行详细介绍，包括 head 中可以使用的标签枚举、元标签、Link、图标、社交分享、浏览器与平台加强等；更多 HTML 头标签教程查看这里。

工程实践

立足实践，提示实际水平

• 为何 Decisiv 选择使用 Styled Components: 本文是来自 Decisiv 的工程师分享的他们对于 CSS-in-JS 的见解，以及为什么在众多的 CSS-in-JS 框架中选择 Styled Components 的缘由。做者首先阐述了本身的见解，CSS-in-JS 并不是适用于全部的团队或者全部的场景，而后做者讨论了 React 中常见的样式管理模式以及 CSS-in-JS 的基本概念。接下来做者根据 Decisiv 的业务特殊性以及自身的架构设计分析了为什么须要使用 CSS-in-JS，而且讨论了 Styled Components 相较于其余框架的优点：庞大而快速发展的社区、模板字符串以及对于 Sass 的支持、原生的移动端支持等。更多 CSS-in-JS 教程查看这里。

• 小米直达服务介绍与开发实战: 本文为 10 月 24 日前端之巅社群群分享整理而成，分享人小米 MIUI 系统框架负责人董红光，主要会围绕项目的背景和理念、平台的技术架构、以及一个简单的开发示例，来介绍小米的直达服务。本文首先介绍了直达服务平台的背景理念，即可以结合移动端网页和应用的优势，既不须要下载安装，功能服务又完整，还能达到原生般的流畅，服务间还能无缝打通和互相索引。直达服务平台上的各个服务采用前端技术栈开发，可是并不跑在浏览器或 WebView 中，它舍弃了浏览器内核渲染，转而采用 Android 的原生渲染机制，也就是说，其实是使用前端技术栈开发了一个原生应用，不管是渲染效率，仍是系统能力的 API 丰富程度，都远远超出传统网页。

• 前端清单: 做者根据自身多年的前端开发经验与其余的开源清单，总结出了此份将站点或者网页发布到生产环境以前的自检清单。本文依次介绍了必备的视口、语言等头部标签，HTML 的最佳实践与测试，Webfonts 的使用，CSS 中响应式设计、预处理器、惟一 ID、Reset CSS 等内容，图片的优化，JavaScript 的链接、压缩、测试等，网络安全、性能、可用性的提高，SEO 等内容。更多 Web 实践教程参考这里。

深度阅读

深度思考，升华开发智慧

• 深刻了解 Bootstrap 4: 本文涵盖了如何使用 Bootstrap 4 构建响应式网站的关键技巧，特别是在浏览器逐步全面支持 Flexbox 与 Grid 的状况下，应该如何解决常见的响应式 Web 设计难题。本文首先对于 Bootstrap 4 的特性进行介绍，包括默认的 CSS Resets 等关键变化；接下来本文讨论了 Bootstrap 的工做原理以及它可以在 Web 项目中起到的做用与如何引入到项目中，最后做者以上万字的篇幅详细介绍了如何使用 Bootstrap 4 来构建经常使用的布局与组件。更多 Web 布局相关内容参考这里。

• 2017 Vue.js 现状报告: 本文做者将 2017 年中重要的 Vue.js 相关的信息与商业使用案例浓缩在了一份 80 页的报告中。该报告主要包含了如下内容：Vue.js 的建立者 Evan You 对于 Vue.js 的将来有何规划，Adobe、Behance、Codeship 以及 Gitlab 这些公司是如何使用 Vue.js 的，为何大部分软件开发者会愿意在下一个项目中使用 Vue.js，Vue.js 的主要学习资源包含哪些，Vue.js 这些年经历了怎样的变化；更多 Vue.js 相关资料参考这里。

• JavaScript 与 ECMAScript: 做者在本文中阐述了其对于 JavaScript 与 ECMAScript 之间的异同点的认知，同时也讨论了 ECMAScript 与浏览器、Babel 等概念之间的关联。Ecma International 是负责建立技术标准的组织，ECMA-262 是由 Ecma International 发布的描述通用脚本语言的标准，而所谓的脚本语言便是指在某个现存系统或者实体上运行的语言。ECMAScript 并非一种语言，而是一种规范（Specification），即 ECMA-262 中定义的规范；JavaScript 则是遵循 ECMAScript 规范的具体的脚本语言的实现，根据 ECMAScript 规范咱们能建立新的脚本语言，而学习 JavaScript 则可以使咱们了解如何去使用它。更多 JavaScript 教程参考这里。

开源项目

乐于分享，共推前端发展

• React-Virgin: React-Virgin 是由 Trixie 公司开源的针对 React Native 项目的 UI 模板与工具库，其致力于帮助开发者快速开发美观的应用。React-Virgin 目前包含了基于 react-navigation 的模板，以及基础组件、水平列表、垂直列表、按钮、头、网格、气泡、加载器等组件。

• HEML：HEML 是开源的用于构建响应式邮件的标记语言，能够将其看作邮件模板的开发利器；开发者使用正常的 HTML 写好邮件，HEML 则会处理全部邮件客户端的兼容性。HEML 官方宣称的特性包括 Native Feel，即便用 HTML、CSS 这样熟悉的语言进行开发；Forward Thinking，即可以为全部的客户端提供一致的体验；Extendable，即提供了丰富的接口以建立自定义的元素与样式规则。

• SQIP: SQIP 是基于 SVG 的 LQIO 方案，其可以用于生成可用的 SVG 格式的图片替代（Image PlaceHolder）；所谓的 Image PlaceHolder 即指那些可以从图片中捕获图片的主要色彩，而且在图片加载完成以前先占用相同尺寸的资源。而于 2012 年提出的 LQIP 则是主流的 Image PlaceHolder 解决方案，Facebook、Pinterest、Medium 等公司皆有其相应的开源库；SQIP 但愿可以在替代图的质量与文件大小之间达成较好地平衡。

• Webpack Monitor : Webpack Monitor 是一个高可配置的 Webpack 插件，其可以捕获构建生成的，生产环境中包体关键统计指标；而且 Webpack Monitor 提供了交互式地分析工具，来帮助开发者更好地审视包体的构成，以此来识别与选择可用的优化策略。

巅峰人生

• 网安专家养成记：勤动手，多交流，善思考: 做为一名从事信息安全工做 10 年之久的沙场老将，谷野从传统安全公司安全服务开始，历经大型传统企业、互联网公司安全管理实践。一路走来，谷野在安全方面的探索，对业界从业者可能都有更好的借鉴做用。做者在本文中依次讨论了以管窥豹，互联网行业的安全如何作、如何从专业的角度审视和规划安全产品选型等内容。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到 editors@cn.infoq.com，注明“前端之巅投稿”。

前端之巅微信底图－5.jpg