《HTML5和JavaScript Web应用开发》——第 1 章 客户端架构 1.1了解HTML5

简介: 在HTML5和移动设备出现之前,前端(或者UI)开发人员不用关心用户界面后面的架构,眼前充满的是破解(Crack)和专利的插件。许多开发人员专注于支持IE6、Firefox、Safari等少数几种浏览器,他们编写清晰的语义标记,担心XHTML的有效性,偶尔也会导入JavaScript程序库,以创建一些漂亮的效果。

本节书摘来自异步社区《HTML5和JavaScript Web应用开发》一书中的第1章,第1.1节,作者:【美】Wesley Hales著,更多章节内容可以访问云栖社区“异步社区”公众号查看

第 1 章 客户端架构

今天,客户端开发显然需要在HTML驱动应用架构中更多地思考和投资。随着Web应用的发展,我们见证了从具有紧耦合模板逻辑以及繁重的后端处理的传统服务器端框架向松耦合的JavaScript的转变,实现任何时候不管是上线还是离线都能运行。

但是,这只是过去的重复吗?在20世纪八九十年代,我们不是已经经历了胖客户端时代(如图1-1所示)吗?

screenshot

和20年前不同,浏览器—如今的客户端平台要强大得多,更不要说移动浏览器了。此外,如今的客户端能够通过浏览器和蜂窝网络报告各种有趣的数据,例如你所在位置的经纬度。

推动浏览器成为客户端平台的另一个因素是许多公司,包括Google、Apple、Mozilla和Microsoft,每周对它们的混合胖客户端技术平台进行数千种改进。

过去,建立严重依赖服务器的应用程序大有益处,这使核心的后端开发人员无须担心DOM操纵和CSS。如果开发人员能够获得与后端代码紧密相关的数据表格或者分页组件,生成兼容IE6到IE8的标记,就很了不起了(见图1-2)。

screenshot

但是,这种自动生成的标记是要付出代价的,特别是在当今快速变化、分裂的浏览器世界。我们一直都需要灵活可控的标记。开放Web的变化比任何时候都快,用户界面不再允许服务器成为过去的陈腐观念和如前高速可伸缩的前端代码之间的瓶颈,开发人员从未像现在这样关心过浏览器的性能。标记的显示和异步资源的加载可能成就你的应用,也可能毁灭它。更轻快的前端等于更多的线索转化、更高的SEO排名和更低的数据中心成本。

1.1 了解HTML5

在HTML5和移动设备出现之前,前端(或者UI)开发人员不用关心用户界面后面的架构,眼前充满的是破解(Crack)和专利的插件。许多开发人员专注于支持IE6、Firefox、Safari等少数几种浏览器,他们编写清晰的语义标记,担心XHTML的有效性,偶尔也会导入JavaScript程序库,以创建一些漂亮的效果。

一旦开发人员处理完浏览器的问题和给定应用程序的缺陷,剩下的事情就几乎一样了。高级Web应用程序的架构主要在服务器上被管理。应用程序依赖于入站HTTP请求的速度以及标记显示到用户Web浏览器的速度。利用服务器端模板和组件框架,服务器解析模板,数据与常规的XHTML或者HTML标记交织在一起;对于Java,则可以使用JSP、Velocity、Tiles、GWT或JSF来实现;对于Ruby,可以使用ERB、HAML或者RedCloth,这样的框架还在不断涌现。每个服务器端Web框架都有一个附属或者可以选择的UI模板引擎,这就是过去十几年的UI开发方法,而现在应该考虑建立新一代Web应用的方法了。

你可能会问“为什么我们需要改变前端的生成方式?”或者“为什么我们要将所有代码移到浏览器中运行,而不是在服务器上运行?”因为Web浏览器正在成为一个平台。我们的应用程序现在存在于比其前辈的能力提高了几个数量级的平台(或者浏览器)上。Web应用程序就是这样。我们不再创建网站,而是用HTML5、CSS和JavaScript创建可靠的应用程序。如图1-3所示是HTML5标志。

screenshot

现在,我们应该回头看看应用程序的构建方法,为客户端编程打下基础。开发人员必须了解,为任何应用程序构建一个可伸缩、稳固的用户界面需要的框架和方法。

相关文章
|
2月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
3月前
|
运维 负载均衡 安全
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
145 0
|
22天前
|
弹性计算 Java 关系型数据库
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
|
22天前
|
弹性计算 Java 数据库
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
51 6
|
2月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
44 5
|
22天前
|
弹性计算 负载均衡 安全
云端问道-Web应用上云经典架构方案教学
本文介绍了企业业务上云的经典架构设计,涵盖用户业务现状及挑战、阿里云业务托管架构设计、方案选型配置及业务初期低门槛使用等内容。通过详细分析现有架构的问题,提出了高可用、安全、可扩展的解决方案,并提供了按量付费的低成本选项,帮助企业在业务初期顺利上云。
|
2月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
2月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
2月前
|
前端开发 JavaScript API
探索JAMstack架构:现代Web开发的新范式
【10月更文挑战第28天】JAMstack架构是一种现代Web开发方法,以其高性能、高安全性和易于维护的特点受到开发者青睐。本文深入探讨了JAMstack的核心概念、优势、工具链及其如何改变Web开发方式,包括静态网站生成、API驱动和预渲染等关键技术。