当前位置: 首页 > 科技观察

单页应用程序如何打破Web设计

时间:2023-03-15 14:37:46 科技观察

他们说“试试Ember”,“它会很有趣”。你知道万维网最初的设计理念吗?使用超链接连接文档。总体思路相当简单:Web浏览器从服务器请求文档,下载其内容并将其显示在屏幕上(通过CSS增强视觉效果)。给定文档中的超链接指向具有新内容的另一个文档,形成一个信息网络。Web浏览器、机器人、社交媒体和整个Web基础设施都围绕着这个简单的想法展开。单页应用程序(SPA)单页应用程序是通过在JavaScript的帮助下重写网页内容来与用户交互的Web应用程序。单页应用程序不是为每次用户交互加载一个全新的文档,而是从外部API下载必要的数据,通过减少加载时间来改善用户体验。这些应用程序对用户来说感觉更自然,因为它们的行为更像普通的桌面应用程序,而不是网站。“单页应用”一词最早出现于2002年。三年后,AJAX的引入为Ember或Angular等SPA框架提供了基础。每个框架都旨在解决一个定义明确的问题。Angular针对的是已经熟悉HTML的网页设计师,而Ember使用其“约定优先原则”和2011年推出的ReactJS来简化样板代码并采用基于组件的方法,代码重用和速度,脱离和阻止BrokenWeb底层技术是过时的框架,如React使开发人员能够轻松构建复杂的用户界面,这在使用传统方法时几乎是不可能的。但是,浏览器运行的环境在某种程度上是基于静态网站的。例如,URL的概念对于基于文档的网站是有意义的,但需要从SPA的角度重新考虑。URL通常通过浏览器的历史记录API手动注入;这看起来像是某种混合状态,而不是长期解决方案。如果处理不当,某些SPA可能会破坏简单的浏览器功能,例如前进和后退,从而导致用户体验欠佳。即使像SPA的标题元素这样简单的东西也需要使用JavaScript或服务器端呈现方法进行特殊处理。另一个问题是网络爬虫。谷歌已经采取了一些措施来索引单页应用程序,但谷歌员工JohnMueller表示仍有改进的余地:它并不总是完美的,当然,这并不容易。但是对于一些网站,即使是依赖客户端渲染(只用JS,没有服务端渲染)仍然可以很好的工作。因人而异:)-JohnMueller虽然Facebook创建了ReactJS,但令人惊讶的是,他们的爬虫对JavaScript的let和var混合完全视而不见,在通常不可见的平台上渲染SPA(考虑到应用程序缺少服务器端渲染代码)。状态管理很棘手采用单页方法通常是有益的,但必须注意保留应用程序状态的额外困难,这在传统的无状态方法中是不存在的。以下场景虽然易于调试,但说明了此问题的最简单形式:用户(Richard)访问了您刚刚制作的React单页应用程序,并且对您过去一个月挥汗如雨的快速选项卡切换控件印象深刻出来很震惊。Richard切换到“注册”选项卡并快速填写必填字段,成为应用程序的荣誉会员作为会员,Richard现在可以看到两个额外的选项卡:“故事”和“阅读列表”。理查德兴奋地打开了“故事”选项卡,并迅速将两个故事添加到他的阅读列表中。然而,它仍然在已读选项卡中显示0个故事,这让理查德感到困惑,因此他删除了他的帐户。在“过去”,实现技术方面将涉及两个不同的文件:stories.php和reading-list.php。这两者都有一个明确定义的生命周期——理查德在浏览器中打开一个链接,程序运行几秒钟,并以HTML源代码响应,甚至Facebook的爬虫都可以读取。在单页应用程序的上下文中,通常只有一个程序-app.js-在执行之前传输到Richard的浏览器。然后浏览器将逻辑操作转换为DOM元素。对于理查德来说,他遇到的问题是由于状态管理不当造成的。程序员更新了按钮的状态(现在似乎已添加到阅读列表中),但忘记更新列表中的项目数。这个问题很容易解决,但是随着应用程序规模的增大,这个问题会变得更加困难。JavaScript社区并不是唯一一个必须处理状态管理的人——大多数移动开发人员也熟悉这个问题。像Redux这样的工具在某种程度上减少了由这个问题引起的麻烦,但往往会在项目中引入样板和复杂性。Web开发人员正迅速从一种技术堆栈转移到另一种技术堆栈。单页应用程序正在成为一种趋势,因为与更传统的方法相比,它们在屏幕转换方面提供了卓越的用户体验。来源:Pexels几乎每天都会发布新的框架和库,但只是为了解决孤立的问题。真正的进步是调整浏览器和万维网,使其更适合单页应用程序。在那之前,人们只会炒作下一个“大事件”。