AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点,前端性能优化与可用性保障

  • 2018-01-09
  • 本文字数:3361 字

    阅读完需:约 11 分钟

看新闻很累?看技术新闻更累?试试下载 InfoQ 手机客户端,每天上下班路上听新闻,有趣还有料!

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

新闻热点

国内国外,前端最新动态

  • Intel CPU 爆重大设计缺陷,浏览器中同样可以越权访问: 近日 Intel CPU 被爆存在设计缺陷,普通的用户程序能够识别受保护区域的内核布局及其中内容;所有能访问虚拟内存的 CPU,都可能被越权访问,而该问题的修复方案可能带来极大的处理器性能下降。同时根据 Mozilla 安全研究人员验证表明,相同的技术能够用于浏览器中读取不同源的隐私内容;各大浏览器厂商在致力于规避该问题,譬如限制 performance.now() 的执行间隔,或者默认禁用 SharedArrayBuffer 等。
  • FuseBox 3.0 发布: FuseBox 是轻量级的打包工具,近日发布的 3.0 版本更是提升了约 20% 的性能表现;其只需要 50~100ms 即可以打包大型项目。新版本中支持零配置代码分割,更新了任务运行器,优化了 TypeScript 包发布流程,并且大幅提升了速度与稳定性。
  • Storybook 3.3 发布: 新年之际, Storybook 发布了 3.3 版本,带来了对 Angular 的支持。该版本支持在 Angular 4+ 的项目中使用 Storybook,并且允许开发者设置不同的 Viewport 以模拟不同分辨率的设备;同时该版本还支持直接在 Storybook 中预览测试结果,更多的特性变化请查看原文。

开发教程

步步为营,掌握基础技能

  • 2017 年发布的优秀 Node.js 开源项目盘点: 2017 年里, Node.js 社区也愈发活跃;本文从 4700 多个去年发布的 Node.js 开源项目中,挑选出 25 个优秀的代表。这些项目涵盖了不同的功能方向,譬如 Headless Chrome Node API Puppeteer, 用于创建模拟数据的 faker.js,用于将 Node.js 项目打包为可执行文件的 Pkg,用于进行图片处理的 Sharp,用于进行 Docker 界面化管理的 Portainer 等等。更多 Node.js 相关资料参考这里
  • 基于 React, Apollo, 以及 GraphQL 构建短链接服务: 本系列文章循序渐进地介绍了如何使用 React、GraphQL 以及 Node.js 构建完整的短链接服务。首篇文章介绍了使用 GraphQL 与 React 搭建短链接展示界面,第二篇介绍了短链接构造服务,然后讨论了如何创建用于计算 Hash 的 Serverless Function,接下来分析了如何记录点击数等统计信息,最后介绍了如何添加用户权限认证。更多 React 教程查阅 React 与前端工程化实践
  • 探究 V8 引擎是如何将 JavaScript 转化为机器码: 本文以扩展 V8 的原生方法为例,介绍了 V8 引擎是如何将 JavaScript 转化为可被 CPU 执行的机器码指令。V8 是由 Google 开源的 JavaScript 引擎,其能够将 JavaScript 代码转化为低级别的机器码;V8 实现了 ECMA-262 标准,其即可以独立运行,也可以嵌套在其他的 C++ 程序中运行。更多 V8 相关资料参考 V8 引擎资料索引

工程实践

立足实践,提示实际水平

  • 来自 Tinder 的 PWA 实践案例: 随着 Safari 开始支持 ServiceWorker,PWA 的前景也愈发光明;本文则是记述了 Tinder 是如何优化 JavaScript 性能表现、使用 Service Worker 来提供网络弹性、使用 Push Notification 来提示会话。同样,本文首先量化对比了改造前后 Tinder 应用在不同网络环境下的性能表现,然后依次讨论了基于 Loadable 的代码分割、资源缓存与预加载、CSS 加载策略、运行时性能优化等内容;更多 PWA 相关资料参考 PWA 学习与实践资料索引
  • 2018 前端性能清单: 性能优化任重道远,随着硬件设备、浏览器以及开发技术的不断演化,优化技巧也在不停地改变,本文即是最新的性能优化总结清单;本文也并不局限于介绍技术本身,还讨论了如何打通优化全流程,构建持续性优化地开发文化。本文依次讨论了调优规划与性能评测、设置合理的目标、构建合适的环境、优化构建流程与图片文本等资源、分发流程优化等内容;更多 Web 性能优化讨论参考现代 Web 应用架构与性能调优
  • 现代浏览器的网络层性能优化之道: 因特网问世已有数十年,本文则是着眼于介绍现代浏览器采用了哪些技术,主要是在网络层上,来自动地进行性能优化。浏览器的性能会受到很多因素的影响,其中网络层往往会是瓶颈,而浏览器为我们屏蔽了很多底层的实现细节;本文依次介绍了 Socket 管理、网络安全与沙盒、资源与客户端状态缓存、应用接口与协议等内容。更多 Web 性能优化讨论参考现代 Web 应用架构与性能调优

深度阅读

深度思考,升华开发智慧

  • 健壮的客户端 JavaScript 代码: JavaScript 已然是现代 Web 开发者必需的工具之一,网站也越来越多的应用 JavaScript 来提高可交互性。不过随着客户端 JavaScript 代码复杂度的增加,用户使用过程中出现错误的概率也就越大;本小书即讨论什么是 JavaScript 代码的健壮性以及如何保证。本书首先讨论了 JavaScript 的特性以及健壮性的通用定义,然后列举了 JavaScript 中可能抛出的异常或者失败的情景,最后陈述了数十条避免或者抑制错误的方法。更多 JavaScript 教程参考现代 JavaScript 开发:语法基础与工程实践
  • 2017 Vue.js 盘点: 本文是对于 Vue.js 的年末盘点,总结了 2017 年中 Vue.js 及其社区发生的变化与取得的成就。在过去一年中 Vue.js 获得了四万多 Star,框架本身的性能与易用性、健壮性也都得到了提升;服务端渲染、异常处理等也都得到了优化。而在内部的变化之外,整个技术栈内的框架,譬如 Element, Framework7, Onsen UI, vuetify, vue-material 以及 quasar 都发布了重大的版本更新,相关的资料也得到了扩充。此外,Weex, nativescript-vue 这样的原生集成扩展也取得了长足的发展,Adobe, GitLab, IBM 等大型团队或公司也都在逐步使用 Vue.js。
  • 2017 GraphQL 盘点: GraphQL 最早开源于 2015 年,随着 Apollo, graphcool 等一系列优秀框架的出现,GraphQL 在 2017 年蓬勃发展,并且可以预见其在 2018 年会继续蒸蒸日上;本文是对去年 GraphQL 及其社区发生的变化与取得的成就的盘点。本文首先介绍了 IBM, Walmart 等巨头对 GraphQL 的看法,然后列举了去年发生的 GraphQL 大事件,最后展望了 2018 年 GraphQL 的规划;
  • 我是如何从网页中窃取信用卡账户密码的: 本文讲述了某些攻击者是如何用 NPM 向一些广泛使用的开源工具,注入渗透代码并搜集各类信息的故事。

开源项目

乐于分享,共推前端发展

  • Majestic : Majestic 是基于 Electron 开发的,界面化查看与控制 Jest 测试用例的应用。Jest CLI 本身已然提供了非常友好的测试体验,不过 Majestic 希望能够通过界面交互地方式进一步优化开发测试的体验。
  • TeaVM : TeaVM 是面向 Java 字节码的 AOT 编译器,其能够将 Java 字节码编译为 JavaScript 与 WebAssembly。不同于著名的 GWT,TeaVM 并不需要源代码支持,而只需要编译之后的字节码文件;这也意味着 TeaVM 天生支持 Scala 与 Kotlin 这样的 JVM 方言。
  • Stimulus : Stimulus 是辅助型的前端框架,它并不介入到具体的 HTML 渲染流程,自然也不会想去接管整个前端应用。它的设计初衷即是在尽可能少地介入的情况下来增强当前的 HTML,与 Turbolinks 协同使用的话能够在最小改动的情况下完成对应用的性能改造。
  • Uppy : Uppy 是新一代的模块化文件上传控件,其能够无缝集成到任何 Web 应用中,并且提供了易用的接口。Uppy 内建支持从本地磁盘、Google Drive、Dropbox、Instagram、Camera 等多个源中抓取数据,并且提供了良好的预览界面,同时支持对上传过程地审视与控制。更多特性介绍请查看原文。

巅峰人生

  • 10 大关键词,10+1 位技术人的全年回顾: 年末的时候,以“记录与时代并行的技术人”为使命的二叉树,问了十位技术人同一个问题:过去一年你经历了什么?有来自百度的 Web 前端高级技术经理,有 Google 开发者平台工程师,有火币网 CTO,他们从不同的角度谈了谈技术的发展,谈了谈明年的期许。

前端之巅

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


感谢徐川对本文的审校。

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

2018-01-09 18:003822
用户头像

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

关注

评论

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

茜纱窗下夜读书(2021年11月)

美月

#读书

基于 RocketMQ 构建阿里云事件驱动引擎EventBridge

阿里巴巴中间件

阿里云 RocketMQ 云原生 中间件 事件总线

并发编程之深入理解CAS

Fox666

CAS 并发’ 11月日更 比较与交换

7张图揭晓RocketMQ存储设计的精髓

阿里巴巴中间件

阿里云 技术 RocketMQ 中间件 存储

如何使用注解优雅的记录操作日志 | 萌新写开源 01

Zhendong

Java GitHub

又碰到一个奇葩的BUG

艾小仙

巩固Java基础,备战来年跳槽——你的薪资自己说了算

Java 编程 程序员 面试 线程

使用 Spring Boot 构建可重用的模拟模块

码语者

Spring Boot Module

科技热点周刊|马斯克卖掉特斯拉 10% 股票;Facebook 停用面部识别系统;微软拥抱 Metaverse;雅虎退出中国

青云技术社区

云计算 facebook

Linux踩过的坑

正向成长

Linux

专业版再增强 | MSE 无缝兼容 Eureka 协议,性能提升50%

阿里巴巴中间件

阿里云 微服务 云原生 中间件 Eureka

如何给企业制定碳排放额度?

石云升

学习笔记 碳中和 11月日更 碳交易

GitHub多次霸榜,两个月拿下10000+Star,不愧是阿里内部开源的SpringCloud Alibaba笔记

Sakura

Java 编程 架构 面试 计算机

RecyclerView使用GridLayoutManager为什么无法均匀分布?

Changing Lin

11月日更

用户案例|告别传统金融消息架构:Apache Pulsar 在平安证券的实践

Apache Pulsar

Apache Pulsar

资产管理系统是管钱的吗?不完全对

低代码小观

企业管理 资产配置 资产管理 管理系统 企业资产

优酷小程序优化实战

阿里巴巴终端技术

小程序 ios android 客户端 包大小

Python代码阅读(第54篇):斐波那契数列

Felix

Python 编程 斐波那契 阅读代码 Python初学者

300M的文件,9秒钟下载完成,这款软件真的太离谱!

懒得勤快

GitHub标星139K的:“嵌入式Linux系统开发教程”

Java Linux 编程 程序员

JWT、JWS与JWE

喵叔

11月日更

AliRTC 开启视频互动 “零计算” 时代

阿里云CloudImagine

阿里云 音视频 RTC 视频云

全面升级 —— Apache RocketMQ 5.0 SDK 的新面貌

阿里巴巴中间件

云计算 阿里云 RocketMQ 云原生 中间件

龙蜥操作系统将捐赠开放原子开源基金会

OpenAnolis小助手

Linux centos 开源社区 开放原子开源基金会

浅谈DNS递归解析和迭代解析之间的区别

喀拉峻

网络安全

客户端稳定性异常检测:函数接口“扫雷”实践

阿里巴巴终端技术

函数式接口 稳定性测试 异常检测 客户端 APP稳定性

如何用 Flutter开发一个直播应用

声网

flutter 人工智能

程序员:我熟悉多线程!面试官:都不敢写精通,还敢要26K?

Java 编程 程序员 面试 多线程

阿里云性能测试服务PTS新面貌 - 压测协议、施压能力全新升级

阿里巴巴中间件

阿里云 中间件 性能测试 SaaS 压测

golang源码学习--context

en

Context

【应用分享】百度超级链助力CFCA建设基于区块链的电子数据存证系统

百度开发者中心

百度 超级链

前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点,前端性能优化与可用性保障_语言 & 开发_王下邀月熊_InfoQ精选文章