前端每周清单第 53 期:Go 与 WebAssembly, React Suspense 演练, CSS 技巧

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

新闻热点

国内国外,前端最新动态

  • Go 语言的 WebAssembly 架构: 本文档描述了 Go 编译器中即将加入的 WebAssembly 架构设计方案,该方案会被合入目前的 Go 1.11 版本。这也意味着我们可以使用 Go 来编写 WebAssembly 模块代码,从而也为 Go 提供了类似于 JavaScript 这样能够编写 Web 端应用的能力。可预见该架构会对软件工程生态体系有一定积极的影响。
  • Flutter beta 1 发布: 作为 Mobile Word Congress 2018 的一部分,近日 Flutter 正式发布了其首个 Beta 版本。Flutter 是 Google 新的移动端界面框架,用来帮助开发者快速构建高质量的跨平台原生界面。Flutter 致力于实现以下目标:原生的无缝集成与性能保障,高效率的开发以及大量跨平台的 UI 工具/组件库。
  • 再见,PhantomJS: 随着 Chrome 与 Firefox 纷纷推出了 Headless 模式,原本许多的 PhantomJS 开发活动都逐渐停滞。近日,PhantomJS 宣布将会归档其项目,并且停止开发操作;PhantomJS 2.1.1 将会是最后一个稳定版本。感谢 PhantomJS 这些年来带给我们的功能特性,它已经很好地完成了最初的目标与历史使命,感谢 & 再见。

开发教程

步步为营,掌握基础技能

  • Google 发布机器学习速成课程: 为了帮助更多的人了解与学习机器学习相关的知识技能,Google 发布了人工智能学习网站 Learn with Google AI。本次课程,一共是 15 小时,其中包括 25 节课程以及 40 多项练习,该课程并不要求任何前置的学习内容,非常适合于各个层次的初学者。非常值得一提的是,本次课程提供了非常完美的中文支持,包括中文配音,中文课程材料以及中文概念讲解。更多相关内容参考 数据科学与机器学习实战手册
  • 深入探究 ES2018 与 ES2019: 本小册是对于 ES2018 与 ES2019 的特性进行全面的介绍与讲解,目前涵盖了 ES2018 中的 Asynchronous iteration,Rest/Spread Properties,RegExp named capture groups,RegExp Unicode property escapes,RegExp lookbehind assertions,s (dotAll) flag for regular expressions,Promise.prototype.finally(),Template Literal Revision 等特性。更多相关内容参考 现代 JavaScript 开发:语法基础与工程实践
  • React Suspense 演练: Dan 在 JSConf Iceland 上演示的 Async React Demo 吸引了大量的关注,并为我们介绍了 Time Slicing 与 React Suspense 这两个特性。本文即是对于 Movie Search 案例的分析与实践,从而了解 React Suspense API 的相关特性,包括了 simple-cache-provider.SimpleCache,simple-cache-provider.createResource,ReactDOM.unstable_deferredUpdates 等。更多相关内容参考现代 Web 开发基础与工程实践--React 篇

工程实践

立足实践,提示实际水平

  • 你或许不知道的 CSS 技巧: 本文是对于 CSS 中的一些特性用法进行介绍,有点类似于 30 Seconds of CSS 这样的 CSS 实用代码片。本文涉及到的技巧譬如基于宽度的垂直排版,多背景动画,字体简写等等。更多相关内容参考 CSS CheatSheet
  • Electron 应用自动更新方案设计: 在发布一个桌面应用之前,必须要考虑的一个问题是:怎么更新(迭代)?作者设计和实现了 Electron 应用的一整套自动更新方案,并且已应用于产品上,所以写下这篇文章和大家分享,可以怎么设计和实现一个 Electron 应用的自动更新,我们对于自动更新需求的考虑可能比你想得稍微复杂一些。本文将首先从需不需要更新开始谈起,接着谈怎么从人肉更新一步步进化到无痛的自动更新。然后,我会向你介绍,一个完善后的自动更新需求可以是怎样的。最后,也是最关键的一部分 —— 我们该采取怎样的更新思路,又该如何设计我们的产品逻辑。更多相关内容参考现代 Web 应用架构与性能调优
  • 前端案例分析: 在前端学习实践的过程中,我们可能会阅读很多类似于构建 Todo List 的文章,他们是不错的入门文章,却无法告诉你如何来解决真实的,大规模应用中的问题。本文则是列举了一系列企业级应用的实践案例,包括了来自 Facebook,Twitter,Google,Airbnb 等公司的演讲或者文章。更多相关内容参考 Awesome Web Reference

深度阅读

深度思考,升华开发智慧

  • Didact Fiber: Incremental reconciliation: 这是一篇非常不错的深入讲解 Fiber 实现的文章。Didact 是作者实现的类 React 教学型框架,而本文则瞩目于如何将 didact 中的部分代码重写以使其适配于最新的 React 16 架构;作者直接使用了来自 React 代码库中的结构、变量以及函数名,从而方便理解。本文依次介绍了为何需要 Fiber,如何调度 MicroTasks,Fiber 的数据结构、流程与实现等内容。更多相关内容参考现代 Web 开发基础与工程实践--React 篇
  • 重构 Redux: 随着 React 发布新的 Context API,又有了许多关于 Redux 的讨论:状态管理是否依然解决?众所周知,状态管理一直是应用开发中的难点之一,本文即是对于状态管理中常见的问题进行重新考量:我们是否需要额外的状态管理库,Redux 是否值得使用,是否有更好地状态管理方案等。更多相关内容参考现代 Web 应用架构与性能调优
  • 从 JS 到 DOM 的双向追踪: Chrome 66 中针对内存泄漏分析进行了优化,从而方便开发者调试内存泄漏相关的问题。现在 Chrome DevTools 能够追踪并且快照 C++ DOM 对象,然后从 JavaScript 对象开始列举出所有的可达对象。该特性是 V8 垃圾收集器中提供的新 C++ 追踪机制的应用之一,更多相关内容参考Web 内存泄漏分析

开源项目

乐于分享,共推前端发展

  • Pandora.js: Pandora.js 是阿里开源的 Node.js 应用管理工具,其基于 TypeScript 开发,提供了管理、衡量、追踪等一系列的特性。Pandora.js 源于多年企业级 Node.js 应用管理实践,致力于提供从管理监控,到调试部署等全流程的支持。
  • filepond: filepond 是灵活有趣的 JavaScript 文件上传控件,它提供了漂亮的过场交互动画以及良好的用户体验,并且利用客户端图片优化技术来保证高性能的上传。
  • just-dashboard: just-dashboard 能够基于 YAML 或者 JSON 配置文件生成数据面板,从而避免了开发者或者数据工程师重复的劳动。just-dashboard 还允许使用 jq 查询,或者指定某个组件的数据抓取地址,just-dashboard 会在运行时动态抓取数据并且渲染为图表。
  • prompts: prompts 是可以在命令行中使用的,轻量级、美观大方、用户友好的交互式提示。与其他框架相比,prompts 没有过多的外部依赖,尽可能地简化内部复杂度。

巅峰人生

  • 过完年跳槽,要考虑哪些要素?: 发完奖金了,过完年了,又到了人心躁动的时节。不少 IT 圈的小伙伴可能在思考,要不要换工作。今天和大家聊聊 IT 人换工作这个话题,楼主也面试过的不少候选人,站在面试官的角度,谈谈什么样的 IT 人会在面试中加分。

前端之巅

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom