QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

前端每周清单第 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:003798
用户头像

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

关注

评论

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

沙龙:如何使信息系统更加稳定

博睿数据

数千万次下载、百万行开源代码贡献,优麒麟如何打造中国开源操作系统新名片? | 卓越技术团队访谈录

优麒麟

Linux 开源 内核 优麒麟 多端融合

解决方案体现的是一个公司的深度思考能力

基调听云

APM 智能运维 业务运维 基调听云

大数据洞察画像自动化实践

网易云信

大数据

ElasticSearch写入流程详解

IT巅峰技术

elasticsearch

持续精进,性能突破,openGauss 3.0社区版正式发布

Geek_32c4d0

GaussDB(for openGauss) 社区版

信通院牵头数列科技参与主编的《信息系统稳定性保障能力建设指南》正式发布

TakinTalks稳定性社区

首个!青藤蜂巢荣获网络安全卓越验证中心&泰尔实验室双认证

青藤云安全

网络安全 青藤

基调听云直播回顾 | 让业务系统不再深不可测

基调听云

APM 可观测性 智能运维 基调听云

Redis 布隆(Bloom Filter)过滤器原理与实战讲解

码哥字节

布隆过滤器 4月日更 Redis 数据结构 4月月更

TDengine 荣获 CSDN IT 技术影响力之星 “年度开源项目” 、 “年度IT领军人物”奖项

TDengine

数据库 tdengine 开源

“中国牛”、“天生要强”翻新,2022蒙牛继续大满贯

科技新消息

WhiteSource 是否容易受到“Spring4Shell”漏洞 CVE-2022-22965 的影响?

龙智—DevSecOps解决方案

Spring4Shell WhiteSource

东方园林应邀参加人民网《人民会客厅——两会时刻》栏目访谈

科技大数据

安装配置GPU训练环境

十三

蒙牛:以新营销和“更好”的年轻一代共鸣

科技新消息

你的产品越来越难卖?是时候关注价值流了

基调听云

DevOps APM 智能运维 基调听云

AI 加持实时互动|ZegoAvatar ⾯部表情随动技术解析

ZEGO即构

计算机视觉 即构科技 Avatar

快速摆脱在线扩容难的噩梦,华为云数据库有妙计!企业级Redis 包年18元~

华为云数据库小助手

GaussDB GaussDB ( for Redis )

RISC-V开发板关机流程浅析

优麒麟

Linux 技术 risc-v开发板 优麒麟

精彩回顾 | 金融服务数字化生态的开放与安全

FinClip

金融 数据安全

“天生要强”的迭代和蒙牛体育IP大满贯

科技新消息

AIOps(智能运维)中的指标算法场景分享 | 内附视频&ppt资料

云智慧AIOps社区

人工智能 AI 算法 运维 告警

2022第十四届南京国际人工智能产品展会

InfoQ_caf7dbb9aa8a

Tapdata Cloud 2.1.2 来啦:大波细节已就绪!字段类型可批量修改、支持微信扫码登录、新增支持 Vika 为目标

tapdata

WEB安全:深入反射式dll注入技术

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 漏洞挖掘

传统数据库改造难?华为云GaussDB“五心”解决

华为云数据库小助手

GaussDB

音视频开发—时间戳相关整理(时间基tbr,tbn,tbc)

Linux服务器开发

WebRTC ffmpeg SRS 音视频开发 流媒体服务器开发

蒙牛中国乳业产业园牧场建设项目全面复工

科技新消息

启动报名2022南京智博会 第十四届南京国际智慧城市、物联网、大数据博览会

InfoQ_caf7dbb9aa8a

物联网

Postman中文版客户端

Liam

Jmeter Postman API swagger Mock

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