《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

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

相关文章
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
5月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
5月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
5月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
10月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
489 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子

热门文章

最新文章