百亿补贴为什么用 H5?H5 未来会如何发展?

百亿补贴为什么用 H5?H5 未来会如何发展?

本人有一些分析预测。当然,这些分析预测只是个人观点,如果你有不同的意见,欢迎在评论区讨论交流。

百亿补贴为什么用 H5

我们先看两张图,在 Android 手机开发者模式下,开启显示布局边界,可以看到「百亿补贴」是一个完整大框,说明「百亿补贴」在 App 内是 H5;拷贝分享链接,在浏览器打开,可以看到资源中有 react 名字的 js 文件,说明「百亿补贴」技术栈大概率是 React。

pdd-stack.png

不只是拼多多,我特地确认了,京东、淘宝的的「百亿补贴」技术栈也是 H5。

pdd-jd-taobao.png

那么,为什么电商巨头会在「百亿补贴」这种重要活动上选择 H5 呢?用 H5 有什么好处呢?

H5 技术已经成熟

第一个原因,也是最基础的原因,就是 H5 技术已经成熟,能够完整地实现功能。具体来说:

浏览器兼容性不断提高

自 2008 年 HTML5 草案发布以来,截止 2024 年,HTML5 已有 16 年历史。16 年间,主流浏览器对 HTML5、CSS3 和 JavaScript 的标准语法兼容性一直持续改进,22 年微软更是亲手盖上了 IE 棺材板。虽然 Safari(iOS 浏览器)的兼容性仍然备受诟病,但总体来说兼容成本已经变得可以接受。

主流框架已经成熟

前端最主流的两大框架 Vue 和 React 已经成熟。它们的成熟体现在多个方面:

  • 从时间的角度看,截止 2024 年,React 已经发布了 11 年,而 Vue 已经发布了 10 年。经过多年的发展,前端开发者已经非常熟悉 React 和 Vue,能熟练地应用它们进行开发。
  • 从语法的角度看,自 React16.8 发布 Hooks,以及 Vue3 发布 Composition API 以来,两大框架语法基本稳定,不再有大的变化。前端开发者可以更加专注于业务逻辑,无需过多担心框架语法的变动。
  • 从未来发展方向看,React 目前致力于推广 React Server Component 1;Vue 则在尝试着无 VDom 的 Vapor 方向,并计划利用 Rust 重写 Vite 2。这表明旧领域不再有大的颠覆,两大框架已经正寻求新的发展领域。
混合开发已经成熟

混合开发是指将原生开发(Android 和 iOS)和 Web 开发结合起来的一种技术。简而言之,它将 H5 嵌入到移动应用内部运行。近些年,业界对混合开发的优势和缺陷已经有清晰的认识,并针对其缺陷进行了相应的优化。具体来说:

  • 混合开发的优势包括开发速度快、一套代码适配 Android 和 iOS,以及实现代码的热更新。这意味着程序员能更快地编写跨平台应用,及时更新应用、修复缺陷;
  • 混合开发的缺陷则是性能较差、加载受限于网络。针对这个缺陷,各大 App、以及云服务商如阿里云 3 和腾讯云 4 都推出了自己的离线包方案。离线包方案可以将网页的静态资源(如 HTML、CSS、JS、图片等)缓存到本地,用户访问 H5 页面时,可以直接读取本地的离线资源,从而提升页面的加载速度。可以说,接入离线包后,H5 不再有致命缺陷。
前端基建工具已经成熟

近些年来,业界最火的技术话题之一,就是用 Rust 替代前端基建,包括:用 Rust 替代 Webpack 的 Rspack;用 Rust 替代 Babel 的 SWC;用 Rust 替代 Eslint 的 OxcLint 等等。

前端开发者对基建工具抱怨,已经从「这工具能不能用」,转变为「这工具好不好用」。这种「甜蜜的烦恼」,只有基建工具成熟后才会出现。

综上所述,浏览器的兼容性提升、主流框架的成熟、混合开发的发展和前端基建工具的完善,使 H5 完全有能力承载「百亿补贴」业务。

H5 开发成本低

前文我们已经了解到,成熟的技术让 H5 可以实现「百亿补贴」的功能。现在我们介绍另一个原因——H5 开发成本低。

「百亿补贴」需要多个 H5

「百亿补贴」的方式,是一个常住的 H5,搭配上多个流动的 H5。(「常住」和「流动」是我借鉴「常住人口」和「流动人口」造的词)

  • 常住 H5 链接保持不变。站外投放的链接基本都是常住 H5 的,站内首页入口链接也是常住 H5 的,这样方便用户二次访问。

  • 流动 H5 链接位于常住 H5 的不同位置,比如头图、侧边栏等。时间不同、用户不同、算法不同,流动 H5 的链接都会不同,流动 H5 可以区分用户,方便分发流量。

    具体来看,拼多多至少有三个流量的分发点,第一个是可点击的头图,第二个是列表上方的活动模块,第三个是右侧浮动的侧边栏,三者可以投放不同的链接。最近就分别投放 3.8 女神节链接、新人链接和品牌链接:

pdd-activity.png

「百亿补贴」需要及时更新

不难想到,每到一个节日、每换一个品牌,「百亿补贴」就需要更新一次。

有时还需要为一些品牌定制化 H5 代码。如果使用其他技术栈,排期跟进通常会比较困难,但是使用 H5 就能够快速迭代并上线。

H5 投放成本低

我们已经「百亿补贴」使用 H5 技术栈的两个原因,现在来看第三个原因——H5 适合投放。

拼多多的崛起过程中,投放到其他 App 的链接功不可没。早期它通过微信等社交平台「砍一刀」的模式,低成本地吸引了大量用户。如今,它通过投放「百亿补贴」策略留住用户。

H5 的独特之处,在于它能够灵活地在多个平台上进行投放,其他技术栈很难有这样的灵活性。即使是今天,抖音、Bilibili 和小红书等其他 App 中,「百亿补贴」的 H5 链接也随处可见。

pdd-advertisement.png

拼多多更是将 H5 这种灵活性发挥到极致,只要你有「百亿补贴」的链接,你甚至可以在微信、飞书、支付宝等地方直接查看「百亿补贴」 H5 页面。

wechat-flybook-alipay.png

综上所述,能开发、能快速开发、且开发完成后能大量投放,是「百亿补贴」青睐 H5 的原因。

H5 未来会如何发展

了解「百亿补贴」选择 H5 的原因后,我们来看看电商巨头对 H5 未来发展的影响。我认为有三个影响:

H5 数量膨胀,定制化要求苛刻

C 端用户黏性相对较低,换一个 App 的成本微不足道。近年 C 端市场增长缓慢,企业重点从获取更多的新客变成留住更多的老客,很难容忍用户丢失。因此其他企业投放活动 H5 时,企业必须也投放活动 H5,电商活动 H5 就变得越来越多。

这个膨胀的趋势不仅仅存在于互联网巨头的 App 中,中小型应用也不例外,甚至像 12306、中国移动、招商银行这种工具性极强的应用也无法幸免。

12306-yidong-zhaoshang.png

随着市场的竞争加剧,定制化要求也变得越来越苛刻,目的是让消费者区分各种活动。用互联网黑话来说,就是「建立用户心智」。在可预见的未来,尽管电商活动 H5 结构基本相同,但是它们的外观将变得千差万别、极具个性。

fluid.png

SSR 比例增加,CSR 占据主流

在各家 H5 数量膨胀、竞争激烈的情况下,一定会有企业为提升 H5 的秒开率接入 SSR,因此 SSR 的比例会增加。

但我认为 CSR 依然会是主流,主要是因为两个原因:

  1. SSR 需要额外的服务器费用,包括服务器的维护、扩容等。这对于中小型公司来说是一个负担。
  2. SSR 对程序员技术水平要求比 CSR 更高。SSR 需要程序员考虑更多的问题,例如内存泄露。使用 CSR 在用户设备上发生内存泄露,影响有限;但是如果在服务器上发生内存泄露,则是会占用公司的服务器内存,增加额外的成本和风险。

因此,收益丰厚、技术雄厚的公司才愿意使用 SSR。

Monorepo 比例会上升,类 Shadcn UI 组件库也许会兴起

如前所述,H5 的数量膨胀,代码复用就会被着重关注。我猜测更多企业会选择 Monorepo 管理方式。所谓 Monorepo,简单来说,就是将原本应该放到多个仓库的代码放入一个仓库,让它们共享相同的版本控制。这样可以降低代码复用成本。

定制化要求苛刻,我猜测社区中类似 Shadcn UI 的 H5 组件库或许会兴起。现有的 H5 组件库样式太单一,即使是 Shadcn UI,也很难满足国内 H5 的定制化需求。然而,Shadcn UI 的基本思路——「把源码下载到项目」,是解决定制化组件难复用的问题的好思路。因此,我认为类似 Shadcn 的 H5 组件库可能会逐渐兴起。

总结

本文介绍了我认为「百亿补贴」会选用 H5 的三大原因:

  • H5 技术已经成熟
  • H5 开发成本低
  • H5 投放成本低

以及电商巨头对 H5 产生的三个影响:

  • 数量膨胀,定制化要求苛刻
  • SSR 比例增加,CSR 占据主流
  • Monorepo 比例增加,类 Shadcn UI 组件库也许会兴起

总而言之,H5 开发会越来越专业,对程序员要求会越来越高。至于这种情况是好是坏,仁者见仁智者见智,欢迎大家在评论区沟通交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/11698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java设计模式 建造者设计模式

建造者模式(Builder Pattern)是一种设计模式,用于将复杂对象的构建与其表示分离,以便同样的构建过程可以创建不同的表示。以下是建造者模式的一个案例分析,以及在Java中的实现。 ### 案例分析 假设我们要设计一个用于…

单元测试与集成测试:软件质量的双重保障

目录 概述 单元测试 集成测试 单元测试的方法 白盒测试 黑盒测试 白盒测试的方法和用例设计 代码审查 集成测试 单元测试工具 结语 在软件开发中,测试是一个不可或缺的环节,它能够帮助我们发现和修复缺陷,确保软件的质量和可靠性。…

基于UDP的网络客户端和服务端模型IO函数

服务器端 udp_server.c #include <stdio.h> // 引入标准输入输出库 #include <sys/types.h> // 引入基本系统数据类型 #include <sys/socket.h> // 引入socket编程相关的库 #include <netinet/in.h> // 引入网络…

2024年3月 青少年等级考试机器人理论真题二级

202403 青少年等级考试机器人理论真题二级 第 1 题 一个机器小车&#xff0c;用左右两个电机分别控制左右车轮&#xff0c;左侧电机转速是100rpm&#xff0c;右侧电机转速是50rpm&#xff0c;则此机器小车&#xff1f;&#xff08; &#xff09; A&#xff1a;原地右转 B&am…

华企盾DSC数据防泄密软件有哪些水印功能?

在企业数据安全领域&#xff0c;水印技术是一种重要的信息保护策略&#xff0c;用于防止数据泄露和确保信息的原始性和完整性。根据回顾的资料&#xff0c;以下是企业中常用的几种水印技术&#xff1a; 屏幕浮水印&#xff1a;这种水印能够在用户的屏幕上显示公司的标志或者其他…

Golang SDK安装

windows环境安装 1.链接: 下载地址 2.安装SDK 检查环境变量&#xff1a; 3.开启go modules,命令行执行一下命令&#xff1a; go env -w GO111MODULEon4.设置国内代理&#xff0c;命令行执行一下命令&#xff1a; go env -w GOPROXYhttps://proxy.golang.com.cn,https:/…

C#之partial关键字

在C#中&#xff0c;partial关键字用于声明一个类、结构体、接口或方法的分部定义。这意味着可以将一个类或其他类型的定义分成多个部分&#xff0c;这些部分可以在同一个命名空间或程序集中的多个源文件中进行定义。当编译器编译这些部分时&#xff0c;会将它们合并成一个单独的…

打印机 ansible配置dhcp和打印机

部署dhcp服务器 主机发送Discover报文 目标为广播地址 同一网段的dhcp收到报文后&#xff0c;dhcp响应一个offer报文 offer报文&#xff1a;dhcp自己的ip地址。和客户端ip以及使用周期&#xff0c;和客户端ip网络参数 最后主机单独发一个request报文 给那个选择的dhcp服务器 &…

JUC下的ThreadLocalRandom详解

ThreadLocalRandom 是Java并发包&#xff08;java.util.concurrent&#xff09;中提供的一个随机数生成器类&#xff0c;它是从Java 7开始引入的。相较于传统的Math.random()或Random类&#xff0c;ThreadLocalRandom更适用于多线程环境&#xff0c;因为它为每个线程维护了一个…

福建医疗器械展/2024厦门国际医疗器械展览会重磅来袭

2024中国&#xff08;厦门&#xff09;国际医疗器械展览会 时 间&#xff1a;2024年11月1-3日 November 1-3, 2024 地 点&#xff1a;厦门国际会展中心 Xiamen International Conference & Exhibition Center ​ ◆组织机构 主办单位&#xff1a; 中国技术市场协会医…

Blazor入门-调用js+例子

参考&#xff1a; Blazor入门笔记&#xff08;3&#xff09;-C#与JS交互 - 半野 - 博客园 https://www.cnblogs.com/zxyao/p/12638233.html Blazor项目如何调用js文件_blazor加载js-CSDN博客 https://blog.csdn.net/bdbox/article/details/135438411 本地环境&#xff1a;win1…

六西格玛绿带培训:企业变革的催化剂,个人成长的助推器!

六西格玛绿带培训不仅是一套系统的管理方法&#xff0c;更是一种追求卓越、持续改进的文化和思维方式。它强调以数据为基础&#xff0c;通过科学的分析和决策&#xff0c;实现质量的飞跃和成本的优化。对于企业来说&#xff0c;六西格玛绿带培训能够帮助企业建立可靠的质量管理…

Spring STOMP-消息代理

简单的消息代理 内置的简单消息代理会处理来自客户端的订阅请求&#xff0c;将请求消息存储在内存中&#xff0c;并广播消息给匹配destination的连接客户端。代理支持路径式destination&#xff0c;包括订阅Ant风格的destinations模式。 应用程序也可以使用点分隔&#xff08;…

【车辆安全管理】风险预测

近期又发生了很多车辆事故&#xff0c; https://news.sina.com.cn/s/2024-05-13/doc-inavapur2236074.shtml 其实都是可以避免的&#xff0c;如果车辆有很好的自动减速系统&#xff0c;如特斯拉的FSD系统&#xff0c; 特斯拉的FSD&#xff08;Full-Self Driving&#xff09;…

11、24年--信息技术发展——新一代信息技术及应用

1、物联网 物联网(The Internet of Things)是指通过信息传感设备,按约定的协议将任何物品与互联网相连接,进行信息交换和通信,以实现智能化识别、定位、跟踪、监控和管理的网络。 1.1 技术基础 物联网架构可分为三层:感知层、网络层和应用层。感知层由各种传感器…

AI翻唱+视频剪辑全流程实战

目录 一、AI翻唱之模型训练 &#xff08;1&#xff09;模型部署 &#xff08;2&#xff09;数据集制作——搜集素材 &#xff08;3&#xff09;数据集制作——提升音频质量 方法一&#xff1a;使用RVC提供的音频处理功能。 方法二&#xff1a;可以使用音频剪辑工具Ad…

我是如何免费抵御一个多月的 DDos/CC 攻击的?

今天明月给大家详细分享一下我的博客是如何免费抵御了长达一个多月的 DDos/CC 攻击的&#xff0c;在【现在 DDos/CC 攻击门槛低的可怕&#xff01;】一文里明月就说过现在 DDos/CC 攻击几乎是没有门槛的&#xff0c;任何一个老鼠屎在群里看到你的博客都可以轻松便捷的发动一次 …

R语言数据分析案例-股票题目分析

Value at Risk&#xff08;VaR&#xff09;是一种统计技术&#xff0c;用于量化投资组合在正常市场条件下可能遭受的最大潜在损失。它是风险管理和金融领域中一个非常重要的概念。VaR通常以货币单位表示&#xff0c;用于估计在给定的置信水平和特定时间范围内&#xff0c;投资组…

宝塔助手v1.4.1/手机操控云服务器的神器软件

宝塔助手是以宝塔Linux面板提供的API开发的一款可以随时随地管理服务器的APP。通过这款APP你可以随时随地的查看一台或多台服务器的运行情况&#xff0c;对服务器网站、FTP、数据库、文件进行管理。内置文件编辑器&#xff0c;可以对网站文件进行修改。 链接&#xff1a;https:…

Java PowerMockito static方法/new对象/public方法/private方法/public属性/private属性

Java PowerMockito static方法/new对象/public方法/private方法/public属性/private属性 1 变量Mock1.1 公有变量1.2 私有变量1.3 公有静态变量1.4 私有静态变量 2 方法Mock2.1 共有方法2.2 私有方法2.3 共有静态方法2.4 共有最终方法 3 new对象Mock3.1 共有方法 1 变量Mock p…