5.1-Frontend

# 前端每周清单第 11 期:Angular 4.1 支持 TypeScript 2.3,Vue 2.3 优化服务端渲染,优秀 React 界面框架合集

前端 前端每周清单

前端每周清单专注前端领域内容,分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单。

新闻热点

国内国外,前端最新动态

开发教程

步步为营,掌握基础技能

  • 《在 Node.js 应用中如何使用 ESLint》:ESLint 是开源的 JavaScript Linting 工具,它能够帮助开发者解决 JavaScript 无类型语言本身带来的一些错误。ESLint 遵循组件化的设计思想,它允许开发者动态地设置使用的规则,而本文即是介绍基础的 ESLint 环境搭建与使用方法的文章。( https://parg.co/bN4 )

  • 《8 小时内学习 Node.js》:Node.js 是基于 Google Chrome V8 引擎的 JavaScript 框架,其能够用于开发类似于视频直播、单页应用等 IO 密集型的 Web 项目。而本文则是提供了完整的从零到一的 Node.js 学习路线图,包含了基础的环境构建、Console 使用、核心模块使用、基本的 Web 服务器搭建等等内容。( https://parg.co/bNy )

  • 《SSH 背后的故事》:SSH 是最常用的协议之一,而本文则是记录了 SSH 获得其默认端口号 22 的背后的故事。除此之外,本文还记录了 SSH 的基本搭建与使用,以及如何与 iptables 协同使用等内容。( https://www.ssh.com/ssh/port )

  • 《CSS-in-JavaScript:基于组件的样式组织》:通过使用内联样式,我们能够利用 JavaScript 带来的可编程性的便利来组织样式代码。它能够为我们提供类似于 CSS 预处理器、命名空间等多方面的辅助。本文则是介绍了几个常见的适用于 CSS-in-JS 技术的场景,譬如排版、空格等。( https://parg.co/bNe )

  • 《你应该掌握的关于调试 Angular 应用的知识》:调试是 Web 开发中不可或缺的部分,特别是对于那些接管已存在代码库的开发者,他们往往需要经过大量的调试才能了解代码的架构与逻辑。不过貌似 Angular 官方文档中尚缺专门对于 Angular 中调试的讲解,本文则是深度浅出地讲解 Angular 应用开发过程中的调试技巧。本文首先介绍了作者调试源代码的技巧,然后介绍了如何使用框架内置的调试 API 来进行应用调试。( https://parg.co/bN1)

  • 《CSS Grid 布局初体验》:最近 CSS Grid 布局大红大紫,吸引了很多开发者的目光。而最新版的 Firefox、Chrome、Opera、Safari 都添加了对于 CSS Grid 的支持。本文则是聚焦于何谓 CSS Grid 布局、它可以做些什么以及如何投放到生产环境等内容。( https://parg.co/bNW )

工程实践

立足实践,提示实际水平

  • 《一系列优秀的 React 界面框架》:本文列举了多个优秀的 React 界面框架,分析了其特性、适用场景以及潜在的缺陷。本文涉及的框架包括 Material UI、React Desktop、Semantic-UI-React、Ant-Design、Blueprint、React Bootstrap、React Toolbox、Grommet、Fabric 等等。( https://parg.co/bNh )

  • 《使用 gRPC-Web 从 Restful JSON API 迁移到类型安全的 Web API》:目前 Web 开发中,REST + JSON 是标准的 Web 应用于 API 服务器之间的交互方式。不过这种缺少强类型限制的、更多倾向于约定的通信方式往往会使得网络调试相对复杂。本文即介绍了如何扩展 gRPC 以及使用 TypeScript 设计新的系统中多个微服务之间的交互协议。( https://parg.co/bNf )

  • 《实测 Vue SSR 的渲染性能:避开 20 倍耗时》:Vue SSR 是 Vue.js 2.0 引入的直出渲染方案,本文将全面解析 virtual-dom-based 及 string-based 的原理并对其进行对比。Vue SSR 的模板是 virtual-dom-based,所以 QQ 空间 Hybrid 业务做 Vue 2.0 的改造的同时,模板类型也从之前的 a 类转换成 b 类。本文是在实际业务场景中对 Vue SSR 的渲染性能做测试,并解析渲染步骤,给出尝试优化的方案和最终结论。( https://parg.co/bNv )

  • 《从零开始基于 JavaScript 构建简单神经网络》:本文不是纯粹的前端开发文章,对于听说过人工智能与神经网络并且有兴趣的开发者不妨一读。而本文则是渐进地介绍神经网络与深度学习理论基础、如何使用 JavaScript 实现简单的数学公式、如何实现简单的神经网络等内容。( https://parg.co/bNa )

  • 《来自 Vixlet 的 React 优化建议》:近年来 Vixlet 的 Web 团队逐步将其 Web 框架迁移到了 React + Redux 技术架构,本文是来自于 Vixlet 的 React 优化实践总结与建议。( https://parg.co/bNF )

深度阅读

深度思考,升华开发智慧

  • 《在 Web 开发中谨慎使用 CSS in JavaScript》:CSS 是有缺陷的,不过很多项目在选择使用 CSS-in-JavaScript 来组织样式的时候,却是对于 CSS 与 CSS-in-JS 很多的误解。本文以 Styled-Component 为例,列举出了常见的 9 个误解,譬如使用 CSS-in-JS 才能解决命名空间冲突、保证样式的可扩展性、带来了性能提升与样式文件的可组织性等等。( https://parg.co/bNR )

  • 《d3.express:集成交互式编码环境》:本文介绍了尚在开发中的 d3.express,一个类似于 Python Juypter Notebook 的交互式编码环境。d3.express 允许开发者使用大量 d3 内置的功能函数,譬如加载远程的 CSV 文件;并且允许开发者交互地实时预览 SVG、Canvas 等绘制结果,有人认为 d3.express 会是一种基于 JavaScript 的更好的数据可视化解决方案。( https://parg.co/bNi )

  • 《V8 不再使用基准测试引擎 Octane》:JavaScript 基准测试引擎是一段不断进化的历史。随着网页从原始静态页面到现在富客户端应用,都需要基准测试引擎能够与时俱进。SunSpider 是其中比较早的基准测试引擎,它为快速优化 JavaScript 提供了基础。但是,随着虚拟机开发者意识到微基准测试的局限性,基准测试引擎随之更新,针对 SunSpider 的短板进行优化,同时浏览器社区也将 SunSpider 从推荐基准测试引擎中剔除。Octane 基准测试套件最早发布于 2012 年,旨在减轻早期微基准测试引擎的一些缺陷。它源于 V8 的早期简单测试用例,最终成为通用网页性能的基准测试。Octane 包含 17 个不同的测试集,以覆盖各种不同的工作场景。Octane 的内容代表它创建时度量 JavaScript 性能的主流方式。( https://parg.co/bN9 )

  • 《探秘 Google SEO 算法背后的秘密》:SEO 是网站推广过程中不可忽视的一个部分,其全称为搜索引擎优化。本文则是面向 SEO 新手或者老鸟的有关 Google 推荐算法的解构阐述,详细分析了 Google 推荐算法的考量因素,并且给出了如何对网站进行 SEO 优化的实践建议。( https://parg.co/bNI )

  • 《从实用主义视角来看现代前端应用开发》:现代 Web 开发技术变革迅速,而我也经历了从纯 JS、jQuery、Vaadin、Angular JS、React 等等一系列的变迁。本文则首先思考何谓现代 Web 应用,然后考虑现代 Web 应用常用的项目架构与构建方式,譬如 TypeScript、Webpack、Linting 等内容,然后讨论现代常用的技术架构,譬如 React.j、MobX、依赖注入等相关知识。( http://dimafeng.com/2017/04/23/modern-frontend/ )

    开源项目

乐于分享,共推前端发展

  • 《Sizzy》:Sizzy 是辅助开发者预览网页在不同屏幕分辨率下显示效果的工具,它能够在同一页上列举出目标网页在多个设备上的显示效果,从而加速响应式开发的速度。( https://github.com/kitze/sizzy )

  • 《create-next-app》:基于 Next.js 的类似于 create-react-app 的快速创建支持服务端渲染的 React 应用的命令行辅助工具。( https://open.segment.com/create-next-app )

  • 《Fathom》:Fathom 是 Firefox 开源的用于提取网页中有意义内容的 JavaScript 框架,其能够有效识别页面中的前进/后退按钮、地址表单以及主文本内容等等。( https://github.com/mozilla/fathom )

  • 《tamperchrome》:Tamper Chrome 是一个允许你实时截获与修改 HTTP 请求的 Chrome 扩展,其能够用于 Web 安全测试等多个方面,并且它能够运行在包括 Chrome OS 在内的多种操作系统中。( https://github.com/google/tamperchrome )

  • 《pkg》:pkg 能够将 Node.js 项目打包为单个可执行文件,其允许开发者发布商业级应用而不用担心源代码泄露的风险。pkg 会自动扫描你的 node_modules,然后将需要用到的本地内容打包到可执行文件中。( https://github.com/zeit/pkg )

巅峰人生

前端之巅

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

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

下一页