阿里跨端技术演进中的实践与思考

2020 年 12 月，QCon 全球软件大会 2020·上海站上阿里巴巴张舒迪（圣司）分享了《阿里跨端技术演进中的实践与思考》，他从跨端技术背景及演进历程、阿里跨端业务现状及思考、跨端技术方向思路演进以及对跨端技术未来展望这四个方面进行了深入的分析，从实践出发为跨端技术开发者带来更多思考方向。本文根据此次分享整理。

元宇宙趋势下的前端现状

“交互娱乐类资本瞄准的互联网未来 - 元宇宙”,作为大家口中的“互联网的最终形态”，需要如今大热的包括 AR、VR、5G、云计算、区块链等软硬件技术的成熟。才能构建出一个去中心化的、不受单一控制的、永续的、不会终止的世界。

上面提到的各项技术，和目前前端关联比较大的，便是 AR、VR。

可折叠Web可能会给我们带来的变化

可折叠Web的说法是可折叠设备带来的。可折叠设备形式多样，从笔记本电脑到手机，再到新奇的双屏幕混合设备。对于这类新发明并没有一个全面的定义，但大多数都可以归为两类。“可折叠”是指屏幕可以折叠的设备（比如华为Mate X，三星Galaxy Z Flip）；而“双屏”设备的屏幕是分开的，但也可以以独特的方式一起工作，以灵活的形式提供生产力（比如，微软的Surface Neo和Surface Duo）。当涉及到Web设计时，这两种类型可能会遵循类似的规则。如果这项技术能大获成功，那么Web设计将面临十年来最大的变革。这对于我们Web开发者而言，也将会开启新的旅程。

跨平台解决方案的技术分析

本文旨在介绍不同跨平台解决方案的技术架构和特点，分析各个解决方案的优势和不足之处，以便对业界当前的跨平台技术方案建立起整体的认知和对团队的技术选型提供一定的参考作用。注意的是，这里的跨平台特指的是针对 iOS 和安卓进行的跨平台开发。

利用机器学习通过网页预提取技术加快网站加载速度

在本篇文章中，我们将展示一种端到端的工作流，涉及从 Google Analytics 获取网站导航数据并加以利用，以及训练一种能预测用户下一步操作的自定义机器学习模型。您可以在 Angular 应用中利用这些预测，预提取候选页面，从而大幅改进网站的用户体验。

万字长文讲透低代码

本文希望对这个当前动荡不安的领域做一点“不草就”的综合说明，想说清楚七大问题：低代码和无代码（也称零代码）是什么关系、怎么判断一个低代码平台是否专业、国内是否有专业的低代码平台、低代码是不是新瓶装旧酒、低代码真的搞不定专业的企业应用吗、低代码不适合开发哪些应用、低代码并非银弹。

How we use Web Components at GitHub

At GitHub, we pride ourselves on delivering a first-class developer experience. A considerable part of our work is on our front end, which we strive to keep as lightweight, fast, and accessible as possible. For a product as large as GitHub, this can be quite the task. Like many front-end codebases, we leverage components, independent, isolated, and reusable pieces of code that allow application teams to deliver high fidelity UI quickly and efficiently while still keeping to our high standards of quality.

Web Components 上手指南

虽然 React、Vue 为我们的组件开发提供了便利，但是这两者在组件的开发思路上，一个是自创的 JSX 语法，一个是特有的单文件模板的语法，两者的目标都是想提供一种组件的封装方法。毕竟都有其原创的东西在里面，和我们刚开始接触的 Web 基础的 HTML、CSS、JS 的方式还是有些出入的。今天介绍的就是，通过 HTML、CSS、JS 的方式来实现自定义的组件，也是目前浏览器原生提供的方案：Web Components。

看懂 Serverless，这一篇就够了

目录如下：

1. 一、无服务器（Serverless）计算是什么
2. 二、理解Serverless技术—FaaS和BaaS
3. 三、无服务器（Serverless）计算如何工作？
4. 四、无服务器（Serverless）适用于哪些场景？
5. 五、Serverless 的问题
6. 六、总结

GraphQL and Relay 浅析

相信大部分人都没听说过 GraphQL 和 Relay 吧，这篇文章就对这两样东西进行了介绍，同时文章结尾还有一些扩展阅读链接

译文：Puppeteer 与 Chrome Headless —— 从入门到爬虫

Puppeteer 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具。正因为这个官方声明，许多业内自动化测试库都已经停止维护，包括 PhantomJS。Selenium IDE for Firefox 项目也因为缺乏维护者而终止。

初探 Headless Chrome

Headless Chrome 是 Chrome 浏览器的无界面形态，可以在不打开浏览器的前提下，使用所有 Chrome 支持的特性运行你的程序。相比于现代浏览器，Headless Chrome 更加方便测试 web 应用，获得网站的截图，做爬虫抓取信息等。相比于出道较早的 PhantomJS，SlimerJS 等，Headless Chrome 则更加贴近浏览器环境。

[译] React Native vs. Cordova、PhoneGap、Ionic，等等

原文链接：https://learnreact.design/2018/02/14/react-native-vs-cordova-phone-gap-ionic-etc，主要解释了以下几个问题：

• 什么是原生应用？
• 什么是 WebView UI ？
• 更原生化的框架的优势和劣势分别是什么？原生化更少的框架呢？
• React Native 与 Cordova 相比如何？