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

新闻热点

国内国外，前端最新动态

• 再见，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，注明“前端之巅投稿”。

感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们。