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

下一页

最近更新于 2023-04-16

comments powered by Disqus

© 2017-2022 NGTE all rights reserved