《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

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

相关文章
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
108 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
4月前
|
监控 持续交付 API
深入理解微服务架构及其在现代应用开发中的应用
深入理解微服务架构及其在现代应用开发中的应用
57 4
|
4月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
67 5
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
|
4月前
|
监控 Java 持续交付
深入理解微服务架构及其在现代应用开发中的应用
深入理解微服务架构及其在现代应用开发中的应用
105 1
|
4月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
4月前
|
Android开发 Swift iOS开发
深入探索iOS与Android操作系统的架构差异及其对应用开发的影响
在当今数字化时代,移动设备已经成为我们日常生活和工作不可或缺的一部分。其中,iOS和Android作为全球最流行的两大移动操作系统,各自拥有独特的系统架构和设计理念。本文将深入探讨iOS与Android的系统架构差异,并分析这些差异如何影响应用开发者的开发策略和用户体验设计。通过对两者的比较,我们可以更好地理解它们各自的优势和局限性,从而为开发者提供有价值的见解,帮助他们在这两个平台上开发出更高效、更符合用户需求的应用。
|
4月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
4月前
|
前端开发 JavaScript API
探索JAMstack架构:现代Web开发的新范式
【10月更文挑战第28天】JAMstack架构是一种现代Web开发方法,以其高性能、高安全性和易于维护的特点受到开发者青睐。本文深入探讨了JAMstack的核心概念、优势、工具链及其如何改变Web开发方式,包括静态网站生成、API驱动和预渲染等关键技术。

热门文章

最新文章