柚木

前端每周清单第 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,注明“前端之巅投稿”。