精选：2023 年前沿 Web 开发趋势

东山风雨起苍黄

随着2022年的尾声将近，2023年的列车即将出发。作为IT人，我们肯定非常关心，在未来的一年里，行业技术将如何发展。

在1991年，第一个网页诞生起，我们生活变化的进度就像坐了火箭一样。今天，全世界的人，每天花费数小时上网、赚钱、花钱、打游戏、购物、上课、看电影、听音乐、分享生活，等等，这个清单可以一直列，多到数不清。

在技术方面，Web 开发从简单的网页演变为复杂的网站，这些网站可以让用户沉浸在给定的主题中，并创造出各种神奇的体验。

“更快、更高、更强”是奥运会的座右铭。“更动态、更互动、更快速”是 Web 发展的信条。
在本期内容中，我们将分为4个方面，对前沿的Web开发进行分析和趋势预测。深入了解，哪些技术可能让我们的工作或是企业脱颖而出。

1. 新兴数据概览2. 前端发展趋势

3.后端发展趋势

4. 2023 年您需要关注的 Web 开发最新技术趋势

新兴统计数据概述

大家都比较喜欢看趋势报告，包括我也是一样的，因为趋势报告让我们快速跟上发展的脚步，了解这个世界发展的现状，以免自己固步自封。



如果大家喜欢自己看趋势报告的话，这里给大家推荐Adobe 、Google、Blue Corona和SocPOB关于网络发展趋势和趋势的报告。



我们今天分享的内容，便是源于各种趋势报告的分析和汇总。

我们的Web应用一定要美观
面对客户的应用，无论是网站、APP、小程序，还是其他的应用界面，如果它不漂亮、不美观，那么我们的访客大概率都会流失掉。如果没有客户，企业也就会倒闭。
根据Google 的研究，访客大约需要五秒钟的时间，就可以形成对网站的看法。这就是为什么良好的、用户友好的设计如此重要的原因。Blue Corona报告说，如果内容或布局没有吸引力，38% 的访客将不会再与应用互动。
你可能会想，38% 听起来还ok，没有特别差劲。但是，来自Web FX的报告表明，几乎 90% 的消费者会在糟糕的用户体验后，购买竞争对手的产品。
网站设计对企业有多重要？

• 47% 的用户期望普通网站的最长加载时间为两秒。（库拉蒂）
  
• 由于网站加载缓慢，零售商每年损失 26 亿美元。（内部设计）
  
• 2021 年，31% 的零售电子商务是通过移动设备产生的。( Statista )
  
• 75% 的消费者承认，他们会根据网站设计来判断一家公司的可信度。（运动）
  
• 诺森比亚大学的一组科学家发现，研究中有46%的消费者，会根据视觉吸引力和美感，来确定这家网站和企业是否靠谱。
  

我们认识到，出色的设计、UX/UI 和响应能力非常重要，但这仅仅是一个开始。让我们继续来谈谈有关前端、后端、Web 技术和编程语言的最新开发趋势。
前端发展趋势

在以前，前端 Web 开发人员只需要了解 HTML、CSS 和 JavaScript，而这种时代早已一去不复返了。要持续关注最新的前端技术，才能跟得上瞬息万变的环境。
接下来，我们来聊一聊当下，塑造行业的最新 Web 前端开发技术。



JavaScript
JavaScript 仍然是网站创建的通用，最流行的编程语言。Statista报告称，截至 2022 年，JavaScript 在全球最常用的网络技术列表中名列前茅，65% 的受访者表示他们在工作中，都使用过它。是什么让JavaScript能如此有魅力呢？

• 它是一种基于对象的动态语言，可同时用于客户端和服务器端。
  
• 许多浏览器都支持它，例如 Safari、Chrome、Firefox 和 Internet Explorer。
  
• 交互性非常好，因为 JavaScript 是一种赋予网页结构和样式的语言。
  
• 生态完善，许多库和框架都可用。
  

JavaScript 很可能会流行多年。但是，它将进行一些改进和升级。

Jamstack
2015年， JAMstack 出现了。简称JAM，JAM 代表 JavaScript、API 和 Markup，现在“Jamstack”被广泛使用。Netlify 的首席执行官兼联合创始人 Mathias Biilmann 说：“这是一个基于客户端 JavaScript、可重用 API 和预构建标记的 Web 开发基础设施。”
这三个要素之间的协同作用，为开发人员提供了更简单、更快速且成本更低的工作体验。此外，基于 Jamstack 的架构使网站更加安全，因为无需担心数据库或服务器保护。它们也是可扩展的，比如，如果一个项目像病毒一样传播开来，内容分发网络 (CDN) 就会进行调整。

Web 移动开发
由于现在大多数用户，都是在移动APP上进行上网、浏览信息，因此公司不能忽视这种方法的重要性。它不再是，开发一个网站应用，而是需要制作一个在不同屏幕尺寸的移动设备上，都能显示良好的应用。响应式网页设计已成为顶级网页开发趋势之一，具体要如何实现呢？

• 专注于垂直方向而不是横向方向，还需要注意使用触摸屏可以完成的功能
  
• 设置元视口标记，以帮助浏览器更改页面的缩放方式。
  
• 使用不同的布局方法，例如 Grid、Multi-Column 或 Flexbox，使布局适合视口。
  
• 使用 CSS 查询根据设备的功能更改事物的大小。
  

内容管理的无头架构: 前后端分离
无头架构，是一种内容组织方式，在 Netflix 采用后变得流行起来。要了解它的含义，让我们看一下传统的（或耦合的）CMS。
在内容管理中使用传统方法，是将所有内容（图像、视频、文本和代码）放在一个盒子里。这意味着前端和后端耦合在一起，使得处理内容更新非常困难。
人们同时通过许多设备消费信息。因此，假设一位顾客想要购买篮子。他或她开始在手机上搜索它们，然后在桌面上比较评论，最后通过平板电脑进行购买。而所有内容都必须在所有相关设备上看起来都一样，这就是为什么内容管理的无头架构是必经之路。这不会使传统的 CMS 变坏。我们使用网络的方式i已经进化，Web 开发也是如此。
使用前后端分离的CMS 的目的是使内容交付变得快速和容易，这样内容创建者就不需要深入研究代码。在前后端分离的CMS 中，前端和后端没有链接（解耦），因此它们代表两个不同的系统：一个负责内容创建和存储，另一个用于呈现内容。创建内容后，无外设架构使用 API 来交付它并使其在任何设备上看起来都一样。




后端发展趋势

对于后端，安全是首要的，其次，必须对用户的请求做出快速反应，并且在需要时必须易于扩展。




Python
Python 开发人员的需求量很大，目前美国至少有 51,000 个 Python 开发人员职位发布在LinkedIn 上。Indeed报告称，自 2018 年以来，需要 Python 的工作增加了 26275%。谷歌、Facebook 和 Spotify 等大公司都依赖这种编程语言，主要有三方面的原因。

• 与人工智能 (AI)、机器学习 (ML)、数据科学和物联网 (IoT) 的兼容性
  
• 与其他编程语言的集成
  
• 库和框架集合的可用性
  

增强的网络安全作为一种既定的 Web 发展趋势
公司非常重视数据安全并不是什么新闻了。Gartner, Inc.预测到 2022 年市场将一路增长至 170B 美元。谷歌负责全球事务的高级副总裁兼首席法务官 Kent Walker 表示，“我们将在未来五年内投资 100 亿美元来加强网络安全安全性，包括扩大零信任计划、帮助保护软件供应链以及增强开源安全性。”仅在网络安全方面投入数百亿美元仍然不够，它更多地与公司（从初创公司到大型运营商）如何构建安全、可靠的后端架构以防止数据丢失和网络入侵有关。
Web 开发专家必须了解至少 3 种网络安全威胁：

1. 跨站脚本（XSS）
XSS 攻击、存储型 XSS、DOM XSS 和反射型 XSS。所有这些都是骇客们行之有效的方式，对应用程序和服务器非常危险。这些脚本可以帮助黑客扫描网站中的漏洞，并窃取用户的凭据和敏感信息。如何防止这种情况？在一些技术架构中，包含了用于阻止 XSS 的算法和针对 DOM XSS 攻击的上下文敏感编码。

2. 敏感数据暴露
数据泄露是企业最可怕的噩梦之一，会损害声誉、会损失大量的资金。需要做的也很简单，要重视安全问题，增强加密策略。
确保用户个人或敏感信息，例如客户姓名、地址、电话、电子邮件地址、信用卡号码、员工出生日期、社会安全号码等。

3.SQL注入
网络罪犯使用 SQL、NoSQL 和 Path 注入将恶意代码“注入”您的网页以访问数据库、更改信息、窃取数据或将恶意软件添加到您的代码中。在实现架构中，要保证数据清理、输入验证、字符转义、参数化查询和存储过程。
网络攻击变得越来越聪明和复杂，数据安全，成为应用程序和 Web 开发中，必不可少的趋势之一。

数据库选项：更多的选择
传统的 SQL 数据库仍在使用，但云原生数据库已经可用（如谷歌的 BigQuery 或 AWS 的 DynamoDB）。事实上，有很多选择：

• 用于具有结构化数据的事务用例的RDBMS
  
• 用于低延迟分布式数据库的宽列数据库
  
• 分布式缓存的键值存储
  
• 极端关系数据的图形数据库
  
• 用于全文和高级搜索的搜索引擎（例如，基于位置的搜索）
  
• 用于具有事务保证的低延迟分布式数据库的分布式 SQL
  
• 用于数据仓库和分析的OLAP 数据库
  

一系列选项有效地保证了问题与工具之间的匹配，以快速、完全地解决它。

2023 年您需要关注的 Web 开发最新技术趋势

我们已经介绍了前端和后端趋势，那么将在 2023年，将会有哪些新的技术趋势呢？我们主要讨论6个。




深色模式
Facebook、Twitter、Instagram、Google 和 Reddit 已经采用深色模式，95% 的 Polar 用户即使在白天也更喜欢深色模式。为什么呢？深色模式具有以下主要优势：

• 它减少了蓝光。
  
• 它可以节省电池寿命。
  
• 它使每个人都可以访问和阅读 UI 内容。
  
• 即使在光线不足的情况下，它也能限制眼睛疲劳的风险。
  

声音搜索
语音助手应用市场的规模预计将从 2021 年的 28 亿美元增长到 2026 年的 112 亿美元，这要归功于基于语音的 AI 技术的进步、语音设备使用的增加、对客户参与度的更多关注以及用于语音辅助应用程序的低代码平台的出现。此外，语音搜索速度很快：它是比输入请求更容易和更快，不是吗？
语音搜索具有使用户和企业主都受益的优势：

• 这很省时。
  
• 它允许额外的时间在网页上冲浪。
  
• 它收集有关客户行为模式的信息。
  

AI + 聊天机器人

人工智能 (AI) 受到了很多媒体的关注，您可能已经看到或听到过关于该主题的各种报道。当你收到个性化推荐时，就意味着使用了“少量人工智能”。AI 帮助 Deep Blue 在 1997 年，标志性的 Deep Blue 与 Garry Kasparov 国际象棋大战中，击败了国际象棋大师，和有史以来最伟大的棋手之一 Garry Kasparov。

但是，AI 能如何使我们的的企业受益呢？

人工智能在每一天都变得更加聪明，而这种不断增强的能力，使与聊天机器人的互动，成为客户之间的愉快、有趣的体验。人工智能驱动的聊天机器人还通过收集数据和从与客户的互动中学习来为企业服务。他们甚至拥有 24/7 全天候解决问题的能力，这可以为公司节省聘请支持经理的成本。当然，这并不意味着要替换其中的大部分，而只是意味着支持团队可以处理更复杂的问题。

有两种类型的聊天机器人：

• 基于文本的
  
• 支持语音的帮助
  

顾名思义，基于文本的聊天机器人是通过文本消息与用户交互的聊天机器人。他们能够了解客户的需求并为他们提供解决方案，收集反馈并保持客户参与。但是，它们需要打字，这比使用语音需要更多的时间和精力。这就是支持语音的帮助越来越受欢迎的原因。

谈到支持语音的帮助，您可能会想到美国人几乎每天都在移动设备、平板电脑、笔记本电脑、智能手表或汽车中使用的 Siri 或 Alexa。这些聊天机器人可以使用语音输入和输出进行交流。然而，企业也采用使用语音搜索和识别、语音合成和自然语言处理 (NLP) 的语音应用解决方案和服务。为什么？

支持语音的聊天机器人为公司提供的一些好处：

• 他们创造了个性化的品牌体验。
  
• 他们以类似人类的方式与客户沟通，这使公司能够与客户建立情感纽带。理解人类语言是一个复杂而持续的过程，聊天机器人不仅应该理解语言，还应该是好的倾听者。人工智能能够“训练”聊天机器人成为优秀的倾听者。
  
• 他们处理各种难度不等的任务。
  

如果您想了解更多关于聊天机器人的信息，或是想从头为企业构建聊天应用的功能，可以去查找相关资料，或是后台私信我，也可以提供一些技术方案的咨询和支持。


动态UI作为新兴的发展趋势之一
用户界面中动态效果方面的设计工作。如果经过专业设计和实施，这项技术的结果可以提供真正吸引用户注意力的视觉吸引力。更重要的是，运动 UI 有助于传达数字产品的顺序、下一步、过渡或操作，从而使导航更加容易。在此过程中，它将用户的注意力引导到网页上层次结构的确切区域。查看一系列动画元素比阅读文本、说明和其他静态信息更容易、更快捷。
运动 UI 的其他用例包括：

• 欢迎广大用户。您还记得诺基亚手机上两只手加入徽标的标志性动画吗？您可以将类似的集成到您的网站。
  
• 令人耳目一新的内容。运动元素可以让您的用户在短时间内保持参与，让他们知道网站正在加载或处理信息。
  
• 有趣的元素还有助于保持用户的注意力并使您的网站有别于竞争对手。
  

加速移动页面
统计数据显示，相比台式机，人们更喜欢智能手机和平板电脑。2019 年，63.3% 的网站访问来自移动设备——明年预计将接近 70%，而且这一比例将会持续增长。
加速移动页面 (AMP) 是一个由 Google 提供支持的开源项目，旨在为使用智能手机或平板电脑的人加速网页。2016 年，谷歌在一篇博文中写道：“我们希望包含视频、动画和图形等丰富内容的网页与智能广告一起工作，并能即时加载”。
对于“轻量级”移动页面，AMP 使用精简版 HTML 和轻量级 CSS。
值得一提的是，桌面版、手机版、AMP版是一个网站的三个不同版本，不能相互替代。

网站开发中的渐进式 Web 应用程序 (PWA)

PWA全称是 Progressive Web App，渐进式web应用。一个为响应式设计的“保护伞”式的术语，是 Google 在2015年提出，是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。
PWA 基本上是一个看起来像应用程序的网站。示例包括 Tinder、Pinterest、YouTube Music 和 Trivago Hotel Booking。它们是用一组特定的技术构建的（我们稍后会讨论）并通过网络提供。PWA 旨在在使用符合标准的浏览器的任何平台上工作，无论是台式计算机还是平板电脑。渐进式网络应用可以完成原生应用可以做的大部分事情：

• 他们可以离线操作。
  
• 他们可以使用硬件功能，例如访问您的相机和麦克风甚至 GPS。
  
• 它们为所有者可靠地安装，为访客快速加载。
  

那么，渐进式 Web 应用程序是如何构建的？技术堆栈由 HTML、JS 和 CSS 组成。在技术方面，PWA 由 Service Worker、HTTPS、App Shell、Web App Manifest 和 Push notifications 组成。


Service Worker是 PWA 的核心，也是 Web 开发行业的游戏规则改变者。Service Worker 充当网络和后台运行的应用程序之间的代理，使网站能够存储信息，以便用户可以离线访问。
HTTPS保持高水平的渐进式 Web 应用程序安全性，可防止它们受到网络攻击。
App Shell充当应用程序页面的框架。之所以称为 shell，是因为它表示没有内容和动态元素的布局。简而言之，这是一个虚拟框架，稍后在应用程序加载它时会填充内容。
Web App Manifest是一个 JSON 文件，包含应用名称、描述、图标、起始 URL、背景和主题颜色。
推送通知只是用户从网站获得的通知。
谷歌的官方介绍说，PWA 速度快——即使在不确定的网络条件下也能立即加载，可靠——以丝般流畅的动画和无卡顿的滚动快速响应用户交互，并且引人入胜——感觉就像设备上的自然应用程序，具有身临其境的用户体验。

增强用户体验的 AR + VR

Statista 预测，到 2024 年，AR、VR 和 MR 的全球市场将从 307 亿美元增长到 3000 亿美元，毕竟它已经深入我们的生活。想一想您在抖音和微信上，看到的所有滤镜和可爱面具，增强现实 (AR) 使它们成为可能。
制造、旅游、建筑和美容行业的企业主可以从这些技术中受益，这些技术可以增强客户体验并帮助与产品或服务建立情感纽带。以宜家为例：该技术让您可以将真实比例的 3D 模型虚拟地放置在您自己的空间中。或者是在鞋店，它可以让您虚拟地穿上您选择的鞋子。这些是移动应用程序，也可以将该技术可以实施到网站中。
概括

第一个网页是 30 多年前创建的，这在 IT 环境中是一个非常长的时间。到 2022 年，随着越来越多的企业意识到不上网是一个巨大的错误，与网络相关，才能让企业持久发展下去。
每个企业都需要一个网站。在同样的竞争中，独一无二的移动或是网站的应用，将提高企业的品牌和影响力。值得庆幸的是，目前行业内，提供了许多方法来实现这种独特性。从框架和编程语言到设计趋势和语音搜索实施，您可以选择合适的工具来创建吸引用户的应用，让他们沉浸在您的主题中并推动销售。我们希望本期内容，您的开发需求有所帮助。如果您需要专门团队的帮助来为您的企业开发网站，我也很乐意与您探讨这个问题。

雪花飘过