写点什么

前端每周清单第 43 期:2017 JavaScript 回顾、Rust 与 WebAssembly 开发游戏、Node.js 架构模式

  • 2017-12-12
  • 本文字数:3874 字

    阅读完需:约 13 分钟

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

新闻热点

国内国外,前端最新动态

  • Angular 5.1 发布: 本文介绍了 Angular 5.1.0, Angular CLI 1.6 以及 Angular Material 的首个稳定版本的特性变化。Angular 5.1.0 中包含了多个小的特性变化与错误修复,此次系列更新主要包括了 Angular Material & CDK 稳定版发布、CLI 工具支持 Service Worker、对于 Universal 以及 AppShell 支持的提升、装饰器错误信息优化、支持 TypeScript 2.5 等等。

  • Ant Design 3.0 发布: Ant Design 是面向企业级桌面应用的设计方案与实现,在 2.0 版本发布的 14 个月之后,3.0 版本正式发布,包含了来自 200 多位贡献者的超过 4000 次提交。Ant Design 3.0 版本中引入了新的色彩系统,其受到天空的启发,包含了薄暮、日出、拂晓蓝等一系列优美的色彩搭配;该版本还引入了新的组件设计,包括了对于大量组件的复写,完全支持 React 16 与 ES Module,并且优化了对于 TypeScript 的支持。

  • Font Awesome 5 发布: 本周,Font Awesome 5.0.0 正式发布,为我们带来了全新的主页,包含了九百多个免费图标与一千多的商业图标。5.0 中提供了多种整合方式,最为推荐的是利用 JavaScript 与 SVG 图标协同使用,以替代原有的字体图标,从而提升性能与易用性。

  • TensorFlow Lite 支持 Core ML : TensorFlow Lite 是面向移动设备与嵌入式设备的轻量级 TensorFlow 版本,近日其宣布开始支持 Core ML,通过工具能够将 TensorFlow 模型转化为 .mlmode 这样的 Core ML 模型格式。Core ML 是 iOS 内置的机器学习框架,这意味着 iOS 开发者能够在 Core ML 上部署 TensorFlow 模块,也是 TensorFlow Lite 在跨平台支持上的重要一步;另一方面,Apple 也开源了自定义机器学习模型框架 Turi Create ,来帮助开发者快速开发机器学习模块并且集成到 iOS 应用中。

开发教程

步步为营,掌握基础技能

  • 使用 Rust 开发基于 WebAssembly 的游戏: 数周前,Alex Crichton 的 PR 使得 Rust 能够直接被编译为 WebAssembly 格式,本文作者也尝试将基于 Rust 与 Piston 编写的桌面游戏 Rocket , 转化为能够在浏览器中运行的 WebAssembly 格式的应用。作者使用 JavaScript 来处理用户的输入输出,并且进行界面渲染,使用 Rust 来处理游戏逻辑;作者依次介绍了自己在迁移过程中碰到的多个 Link 错误以及处理方案,然后讨论了 Rust 与 JavaScript 如何相互调用,以进行画面渲染与接收用户输入输出等内容。更多 WebAssembly 相关资料参考这里

  • <img> 的变迁:非 GIF 的动图实现: 图片是现代网页应用中不可或缺的部分,GIFs 是动图实现的选择之一,但其质量与性能一直差强人意;如果直接使用 video 标签,又是无法发挥 preloaded 的作用,还必须分段请求。在 Safari Technology Preview 中,允许开发者使用 <img src=".mp4"> 的形式来实现简单的动图需求,相较于原本的 GIF 的解决方案能带来将近二十倍的性能提升,并且支持 CSS 方式背景播放,其体积也有大幅度的降低。更多的图片处理与性能优化资料参考这里

  • 使用 Electron 与 React 创建 Markdown 应用: 本文循序渐进地介绍了如何使用 Electron 与 React 构建简单的 MarkDown 应用,作者将其命名为 Mook 。本文依次介绍了技术栈的选择与考量,开发环境、构建流程与模板应用搭建,主功能开发等内容;更多 Electron 学习资料参考这里

工程实践

立足实践,提示实际水平

  • Airbnb 列表页的 React 性能问题浅析: Airbnb 已经使用 React Router 与 Hypernova 将核心订购流程转化为了服务端渲染的单页应用,本文则是介绍其如何将列表详情页进行单页应用话改造,并且综合提高其性能。本文首先讨论了如何进行性能评测,这篇文章也介绍了如何使用 Chrome DevTools 来调试 React 的性能问题;然后介绍了其在初始化渲染、滚动优化、点击反馈、输入输出方面的优化技巧。更多 React 相关教程参阅 React 与前端工程化实践

  • Node.js 的可扩展应用模式:CQRS, ES, Onion : 本文介绍如何使用 CQRS 与 Event Sourcing 模式来开发 Node.js 应用,使用 Onion 架构来组织这些模式,并且使用 TypeScript 来进行静态类型校验。本文首先讨论了何谓灵活架构:业务逻辑与实现分离、独立于数据库,框架,服务等等;然后介绍了 Event Sourcing 与 CQRS 的含义,以及它们是如何组织在洋葱圈模型中的,最后以典型的认证逻辑为例讨论了如何实现 CQRS 模式。更多 Node.js 的知识可以阅读深入浅出 Node.js 全栈架构

  • 基于 Intersection Observer 与 SQIP 的渐进式图片加载: 当我们浏览 Facebook、Pinterest 、 Medium 等内容类网站时,会发现图片是渐进式加载,即首先出现低质量的、模糊的图片,然后再出现真正的图片,本文即是介绍如何使用 Intersection Observer 与 SQIP 实现渐进式加载。之前的清单中我们有介绍过 SQIP 这种图片替代(Image PlaceHolder )的生成方式,其能够生成不足 1KB 的 SVG 格式的低质量图片;而 Intersection Observer 则能够判断某个图片元素是否在视口内,从而实现按需加载。更多的图片处理与性能优化资料参考这里

深度阅读

深度思考,升华开发智慧

  • Orinoco: V8 中的年轻代垃圾回收: V8 引擎中的 JavaScript 对象被分配在了堆上,并且由 V8 的垃圾回收器进行生命周期的管理;本文即是介绍 Parallel Scavenger,Orinoco 的最新特性之一,是如何针对年轻代进行垃圾回收的。本文首先介绍了分代垃圾回收模型,然后讨论了单线程的 Cheney’s Semispace Copy 算法,最后讨论了 Parallel Mark-Evacuate 以及 Parallel Scavenge 回收器的设计;更多 V8 相关资料索引参考这里

  • 2017 JavaScript 发展回顾: 在 2017 年 JS 状态调查结果出炉之前,Sacha Greif 先和几位专家聊了聊他们对于 2017 年 JavaScript 发展的看法与回顾,并整理成了这篇文章。本文从测试工具、构建工具、状态管理、全栈架构等几个不同的方面进行了讨论,对 2017 年中令人印象深刻的技术进行了分享;除此之外, A recap of front-end development in 2017 也是一篇不错的总结,更多 JavaScript 相关资料参考这里

  • Web 内容可用性提升指南: World Wide Web Consortium (W3C) 发布的 Web Content Accessibility Guidelines 2.0 是网页内容可用性的绝佳指南,能够帮助设计者与开发者来提升网页的整体可用性;本文则是对这份指南的简要总结,以帮助那些没有时间阅读原指南的开发者快速了解网页可用性方面的知识。本文依次讨论了如何判断用户能否有效地接受网页内信息、如何判断用户能否有效地使用网页中的控制按钮与跳转链接、用户是否能够理解网页内容、是否针对复杂的用户环境进行了适配等内容;更多 Web 开发相关内容阅读现代 Web 开发工程化实践

  • 卡通图解 JavaScript 引擎: 本系列文章着眼于从运行机制的角度来介绍 JavaScript,首篇文章介绍了 Callback Queue、Event Loop 等异步执行相关的概念,本文则是从引擎的角度,以漫画的方式来介绍 JavaScript 的编译、解析与执行的过程。上周的清单中我们推荐了 V8 引擎的推测优化,本文则是提纲挈领地介绍 JIT 编译器的原理,给读者一个宏观的概念展示;更多 JavaScript 引擎相关资料参考这里

开源项目

乐于分享,共推前端发展

  • Parcel : Parcel 是高速、零配置的 Web 应用打包工具;其面向现代操作系统设计,能够进行多核并发编译,并且提供了文件系统的缓存以优化重构建或者增量构建的性能。Parcel 还提供了开箱即用的 JS, CSS, HTML, 资源文件等支持,能够自动地使用 Babel, PostCSS,PostHTML 来进行代码转换,同时内建支持 import() 动态导入与热替换。

  • electron-toolkit : electron-toolkit 是轻量级的、强大的 Electron 应用的启动辅助工具,它能够以 NPM 脚本的方式启动,为开发者提供一系列开发过程中需要的辅助工具。这些工具包括了图标生成、截图工具、安装器、二进制文件生成、网站生成、实时更新等等。

  • Muuri : Muuri 是强大的 JavaScript 布局引擎,吸纳了来自 Packery, Masonry, Isotope, 以及 Sortable 的优秀特性,辅助开发者快速构建响应式、可排序、可过滤、可拖拽、可动画控制的可扩展表格系统。

  • Vuetron : Vuetron 是基于 Electron 开发的,帮助 Vue.js 项目测试以及错误检测的工具,同时支持 Vuex 以及 Vue-Router。类似于 Developer Tools,Vuetron 能够查看事件、应用状态以及进行时间回溯的调试;同时还能够实现监听指定状态变量的变化,查看 API 请求与响应,可视化查看组件结构树等等功能。

巅峰人生

  • 从黑客到创业,他说技术创业该这么做!: 本文是知道创宇 CTO & COO 杨冀龙在极客 Live 中分享的创业感悟和踩过的那些坑。杨冀龙是安全焦点民间白帽黑客组织核心成员,被《浪潮之巅》评为中国新一代黑客领军人物之一;他在本文中依次分享了对于黑客的定义、如何从黑客成为一名安全创业者、技术创业踩过的坑、给技术创业者建议等内容。

前端之巅

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


感谢徐川对本文的审校。

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

2017-12-12 18:002894
用户头像

发布了 60 篇内容, 共 15.6 次阅读, 收获喜欢 9 次。

关注

评论

发布
暂无评论
发现更多内容

CSDN Meetup 回顾 丨从数据湖到指标中台,提升数据分析 ROI

Kyligence

数据分析 指标中台

7月《中国数据库行业分析报告》发布!居安思危,安全先行

墨天轮

数据库 腾讯云 阿里云 国产数据库 数据库安全

自助洗车加盟要满足什么条件

自助洗车加盟

自助洗车加盟 车白兔自助洗车

TMECH发表优必选运控技术最新进展:实现人形机器人高鲁棒性行走

优必选科技

商城异地多活架构设计

泋清

#架构训练营

如何有效规避代码被“投毒”?

安势信息

许可证 代码安全 开源软件 安全合规检测 开源软件供应链

让软件开发民主化的低代码

力软低代码开发平台

openGauss内核分析:查询重写

华为云开发者联盟

数据库 后端 查询 SQL语言 openGauss内核

业务出海,灵感乍现前要先「把手弄脏」

融云 RongCloud

自助洗车费用居然比雪糕还便宜?

自助洗车加盟

自助洗车加盟 车白兔自助洗车 自助洗车费用 自助洗车价格

适合新手的12个Mybatis-Plus常用注解

华为云开发者联盟

后端 开发

如何学习好web前端开发技术知识

小谷哥

国产操作系统生态建设,小程序技术来帮忙

Speedoooo

小程序 国产操作系统 小程序容器 桌面应用

21条最佳实践,全面保障 GitHub 使用安全

SEAL安全

GitHub 安全

自助洗车为洗车行业注入新活力

自助洗车加盟

自助洗车 自助洗车加盟 车白兔自助洗车 洗车行业市场

结合pyqt5开发办公文档一键转换软件,以后再也不用开会员转文件了

迷彩

打包 7月月更 自动化办公

不懂点儿统计学,《星球大战》白看了

图灵教育

统计学 贝叶斯定理

LP流动性质押挖矿系统开发详细程序

开发微hkkf5566

SpringBoot到底是什么

华为云开发者联盟

开发 springboot parent

ICASSP 2022 | 用于多模态情感识别的KS-Transformer

优必选科技

人工智能 多模态机器学习

直播预告 | 7月22日《开源安全治理模型和工具》线上研讨会

安势信息

开源安全 SCA工具 开源软件供应链 SBOM SLSA

单元测试,写起来到底有多痛?你会了吗

C++后台开发

网络编程 单元测试 后端开发 Linux服务器开发 C++开发

带你认识一下数仓的分区自动管理

华为云开发者联盟

数据库 后端 分区

龙蜥社区发布首个 Anolis OS 安全指南 为用户业务系统保驾护航

OpenAnolis小助手

阿里云 操作系统 龙蜥社区 sig 统信软件

华为云:一切皆服务,共建全场景智慧金融

Geek_2d6073

视频聊天源码——一对一直播系统源码

开源直播系统源码

软件开发 直播系统源码 开源源码

执行ls /dev/pts为什么这么慢?

BUG侦探

内核 ebpf devpts

到底什么是自助洗车?来科普下

自助洗车加盟

自助洗车加盟 车白兔自助洗车 什么是自助洗车

尚硅谷SSM新版视频教程发布

小谷哥

ES6 类聊 JavaScript 设计模式之创建型模式

devpoint

JavaScript 设计模式 工厂模式 7月月更 创造性模式

自助洗车或许要比自动洗车更干净

自助洗车加盟

自助洗车 自助洗车加盟 车白兔自助洗车 自动洗车

前端每周清单第 43 期:2017 JavaScript 回顾、Rust 与 WebAssembly 开发游戏、Node.js 架构模式_语言 & 开发_王下邀月熊_InfoQ精选文章