9月7日-8日,相约 2023 腾讯全球数字生态大会!聚焦产业未来发展新趋势! 了解详情
写点什么

前端每周清单第 3 期:Instant App 将至,WebAssembly 将获默认支持,PWA 实践渐增

  • 2017-03-14
  • 本文字数:3870 字

    阅读完需:约 13 分钟

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

新闻热点

国内国外,前端最新动态

开发教程

步步为营,掌握基础技能

  • 《CSS Grid 指南》: 网格系统是布局设计的核心之一,在 Web 开发中我们经常需要借助第三方库来创建合适的网格系统。而 CSS Grid 则是一个二维布局系统,能够辅助开发者创建基于网格的用户界面,此文则是详细地介绍 CSS Grid 的语法细节以及调试实例
  • 《基于 Vue.js 开发一个 Pokemon Battle 指南》: 此文是非常详细的如何利用 Vue.js 开发一个宠物小精灵的战斗场景的教程,还是挺有意思的。
  • 《Web 常见权限认证技术详解》:此文详细阐述了 Web 开发中常用的权限认证技术,首先介绍了 Web 开发中与权限相关的常见名词,而后介绍了 HTTP Basic Authentication、基于 Session 的认知、基于 Token 的认证、JWT、OAuth 以及 OpenID。
  • 《ECMAScript 4 背后的故事》: 此文是对于 1999 ~ 2008 年之间 JavaScript 世界发生的大事件的详细介绍,阐述了 ECMAScript 4 从提出到角力到流产的前世今生。
  • 《React Native 与 Swift 性能对比》:作为混合式开发框架,React Native 在运行时仍然会实际调用 Objective-C 或者 Java。此文作者同时用 Swift 与 React Native 构建了相同的应用,并且从 CPU、GPU、内存使用、电池耗费等多个角度对这二者进行性能分析。结果表明二者性能相差无几,Swift 在 CPU 占用略占优势,二者的 GPU 占用不相伯仲,而 React Native 在内存上则有一定长处。
  • 《React 与 MobX 开发中的测试驱动开发》: 此文对于 React 与 MobX 的基本使用进行了介绍,阐述了为何作者认为 MobX 是个不错的 Redux 的替代以及如何对 MobX 进行单元测试。
  • 《基于 React 与 GraphQL 的全栈开发指南》:GraphQL 最早由 Facebook 提出以解决复杂多变的查询问题,弥补 REST 中的不足。它允许界面组件以声明式获取数据而忽略后端实现细节。本系列文章是由 Apollo 团队提供,讲解如何基于 React 与 GraphQL 开发应用。

工程实践

立足实践,提示实际水平

  • PWA《百度搜索对 PWA 的探索和初步实践》: 此文是百度搜索资深 Web 前端工程师沈洲在前端之巅微信群中的分享整理总结而成,介绍了百度天气 PWA 应用的开发实践。
  • PWA饿了么大前端团队 PWA 内容专栏:《PWA 实践:从一个简单的页面开始》与 [《PWA 实践:理解和创建 Service Worker 脚本》]。
  • PWA《工程实践中的 PWA 利器清单》: 此文是 Google Chrome 团队的 Addy Osmani 所写,介绍了这两年来他们团队开发或者推荐的一系列能够用于生产环境的 PWA 开发工具或者辅助库。此文作者同时来列举了目前在很多主流站点应用 PWA 之后带来的一系列包括离线优先、首屏加载优化等提升用户体验的实践案例。
  • 《React 开发中的 10 个微模式》:此文是 Gilbertson 在工作中总结而来的 React 开发中常见的设计模式总结,譬如输入域的唯一标识分配、CSS 控制等。
  • 《美团点评前端无痕埋点实践》:构建一个数据平台大体上包括数据采集、数据上报、数据存储、数据计算,以及数据的可视化展示等几个重要的环节。前端数据采集与上报是整个流程中最重要的一环,只有确保前端数据生产的全面、准确、及时,最终产生的数据结果才是可靠的、有价值的。为了解决前端埋点的准确性、及时性、开发效率等问题,业内各家公司从不同角度,提出了多种技术方案,此文则是美团点评前端无痕埋点实践。
  • 《深入了解 JavaScript 中错误对象与堆栈跟踪》:JavaScript 中 Error 对象的堆栈跟踪信息包含了从异常抛出点到构造函数的所有栈帧信息,而手动地去捕获与操作堆栈跟踪信息有助于我们在开发测试或者异常处理相关的框架时有更好地实践。
  • 《Airbnb 使用 React 重构搜索功能的实践》:早在 2015 年,Airbnb 的工程团队就决定将 React 作为主要的前端开发栈,不过因为其搜索页面过于复杂因此直到 2016 年初才开始迁移工作。此文就是 Airbnb 进行代码重构的经验介绍。

深度阅读

深度思考,升华开发智慧

  • 《对比探秘 WebAssembly 性能优越之谜》: 本系列文章通过有趣的漫画介绍了 WebAssembly 的前世今生,并且与 JavaScript 就加载、解析、编译、执行等浏览进行了详细对比,从而介绍 WebAssembly 的性能缘何相较于 JavaScript 会好上很多。同时作者也强调,WebAssembly 与 JavaScript 各有所长,未来并不会存在太多的竞争,更多的是相辅相成,各司其职。
  • 《对于在浏览器中使用 UDP 协议的一系列考虑》: 现代浏览器与网站大多构建于 HTTP 协议之上,而对于类似 agar.io 这样的实时游戏往往会选择 WebSockets 协议。此文作者首先介绍了下这些基于 TCP 的应用层协议面对的所谓对头阻塞问题,然后又讨论了 QUIC 以及 WebRTC 在构建专用服务器时的不足。最后,作者分析了使用 UDP 作为传输协议存在的问题,并且提出了 netcode.io 这个轻量级的传输加密的基于 UDP 封装的网络协议。
  • 《为何使用 Node.js ?》:此文来自于 Node.js 的技术专家 Tomislav Capan,此文最早发布于 2013 年,详细介绍了 Node.js 的内部原理,并且论述了 Node.js 适用的业务场景与典型的范模式。
  • 《槽糕的 JavaScript 框架们》:此文作者 Matt Burgess 严肃地吐槽批评了几乎所有的现今流行的 JavaScript 框架,与他上一篇文章伟大的 JavaScript 框架一起阅读效果更佳。当然,作者并不是想让大家回到茹毛饮血的岁月,而是希望能以辩证地态度去认识与使用框架。
  • 《当我们在谈大前端的时候,我们谈的是什么》:大前端到底指的是什么?事实上大前端并没有明确的定义,它由国内业界发明,甚至没有对应的英文词汇。在客户端开发上,Native 与 HTML5 之争持续快十年,吵了人们都失去兴趣了,从现在来看,并没有谁取代谁,而是有融合的趋势,融合之后的产物就是大前端。此文则是对于大前端的一些探讨,还可以参考《大前端年终总结与展望:大前端时代即将来临?》
  • 《来自 Google 的 API 设计指南》:这是来自于 Google 的网络 API 设计指南,最早于 2014 在 Google 内部推行,指导了包括 Cloud APIs 等在内的一系列对外服务。该指南同时适用于 REST API 与 RPC API,特别是 gRPC API。

开源项目

乐于分享,共推前端发展

  • 《notie》:这是一个轻量级的、零依赖的面向 JavaScript 的通知、输入以及选择套件库。它允许弹出警示信息、确认输入框、允许用户输入信息、允许用户进行选择以及进行日期选择等。
  • 《跨浏览器通用存储接口 Store.js》:Store.js 能够根据浏览器情况自动选择合适的底层存储,并且提供了统一的 API 接口。Store.js 始于 2010 年,目前已经被运用到数以千计的站点中。而近日 Store.js 发布了 2.0 版本,其提供了完整的可插拔式的存储支持以及大量的附加功能。
  • 《Rapscallion》:React 服务端渲染的性能一直是广为诟病,相较于其他前端框架会满上很多,笔者在此文中也进行过简要探讨。而 Rapscallion 则是新的支持 React 服务端渲染的开源包体,它支持异步非阻塞渲染,相较于 renderToString其能达到将近 50% 的性能提升。同时 Rapscallion 官方还为我们准备了基于 Redis 的缓存实例。
  • 《在浏览器中实现自动驾驶汽车》:人工智能与深度学习的浪潮滚滚而来,也给我们带来了很多有趣的应用。该项目利用 JavaScript 创建了一个完整的自我学习的代理,能够在一个 2D 环境下控制某个车辆自动规避各种障碍 。用户还可以通过鼠标绘制出新的障碍,而小车可以通过强化学习不断进行自我更新,值得一试。
  • 《Caporal.js》:特性全面的可用于创建 Node.js 命令行工具的框架,包括了帮助信息生成、自动补全等。
  • 《Gutenberg》:网页打印时的格式错乱一直是个头痛的问题,而 Gutenberg,css 提供了一系列基本的仅在打印时才会加载的样式,优化专用于打印的格式显示。

巅峰人生

一览众山,聆听巅峰故事

  • 《程序员该如何过好他的整个职业生涯?》:此文是池建强在大咖说的分享总结整理而成。池建强为什么要离开锤子科技加入极客邦科技?程序员职业生涯的关键点是哪些?程序员如何做出好产品?专业性很重要吗?怎么看程序员的跳槽?如果你对这些问题感兴趣,那么此文值得一看。


感谢韩婷对本文的审校。

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

活动推荐:

2023年9月3-5日,「QCon全球软件开发大会·北京站」 将在北京•富力万丽酒店举办。此次大会以「启航·AIGC软件工程变革」为主题,策划了大前端融合提效、大模型应用落地、面向 AI 的存储、AIGC 浪潮下的研发效能提升、LLMOps、异构算力、微服务架构治理、业务安全技术、构建未来软件的编程语言、FinOps 等近30个精彩专题。咨询购票可联系票务经理 18514549229(微信同手机号)。

2017-03-14 19:001424
用户头像

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

关注

评论

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

Android--关闭某个指定activity,android游戏开发实战

android 程序员 移动开发

Android-OkHttp-史上最优雅的设置baseUrl,安卓binder

android 程序员 移动开发

Android 点九图机制讲解及在聊天气泡中的应用,android音视频开发何俊林pdf

android 程序员 移动开发

Android 进阶解密 - 系统启动,面试阿里P7岗

android 程序员 移动开发

Android 面试主题集合整理,血与泪的总结

android 程序员 移动开发

Android-悬浮窗功能的实现(附Java、KT实现源码,Android黑科技实现原理揭秘

android 程序员 移动开发

Android 适配 64 位架构,掌握这十个搜索技巧让你的工作效率至上提高十倍

android 程序员 移动开发

Android-Framework学习笔记(二)Zygote进程启动过程,移动互联网app开发

android 程序员 移动开发

Android-Navigation的四大要点你都知道吗?,深入理解JVM

android 程序员 移动开发

Android-_巧_仿蚂蚁森林水滴动效,Android开发技巧

android 程序员 移动开发

Android 组件化,从入门到不可自拔,2021必看

android 程序员 移动开发

Android 面经:我是如何进入大厂腾讯的?,kotlinui封装

android 程序员 移动开发

Android 组件化实战,企业微信移动应用

android 程序员 移动开发

Android 记一次解决问题的过程:从源码中分析永远是解决问题的最有效方法

android 程序员 移动开发

Android-APK防止二次签名妙招:为何你的应用老是被破解,该如何有效地做签名校验

android 程序员 移动开发

Android 相关源码分析,一种非常简单的Android屏幕适配方案

android 程序员 移动开发

Android 知识简记 快速回顾各种知识,android开发技术周报

android 程序员 移动开发

Android 自定义View之随机数验证码(仿写鸿洋),那些被大厂优化的程序员们

android 程序员 移动开发

Android-Studio-教程:入门开发第一个程序,真牛皮

android 程序员 移动开发

Android-是不是要跪了-我几乎是一个废安卓了!,kotlin开发框架

android 程序员 移动开发

Android 进阶性能优化,面试必问篇,掌握这些Android开发热门前沿知识

android 程序员 移动开发

Android 进阶解密 - 系统启动(1),kotlin数组排序

android 程序员 移动开发

Android---性能优化方案分享,快来收藏

android 程序员 移动开发

Android-11标配的新技术,再也不怕死机了!,androidapp保活

android 程序员 移动开发

Android-Framework学习笔记(三)SystemServer进程启动过程

android 程序员 移动开发

Android-怎么就不卡了呢之Choreographer,怒斩腾讯和阿里的Offer

android 程序员 移动开发

Android-架构组件的最新进展,安卓工程师面试题及答案

android 程序员 移动开发

Android 面试总结 - LiveData,2021大厂Android知识点总结

程序员 移动开发

Android---教你如何用三十分钟在安卓上开发一个微笑抓拍神器

android 程序员 移动开发

Android-OkHttp-史上最优雅的设置baseUrl(1),android开发视频播放代码

android 程序员 移动开发

Android-样式系统---主题背景属性,最新金九银十Android面试合集

android 程序员 移动开发

  • 扫码添加小助手
    领取最新资料包
前端每周清单第3期:Instant App将至,WebAssembly将获默认支持,PWA实践渐增_语言 & 开发_王下邀月熊_InfoQ精选文章