Let Links Be Links
Let Links Be Links
笔者:ROSE 于2015年3月31日
发表代码,应用程序开发,浏览器,CSS,HTML、JavaScript、设计、用户体验·16评论
网络的概念，作为一个应用平台从未更受欢迎,但这些工具用于创建这些所谓的“web应用程序”仍充满了陷阱,往往忽略或误解。单页web应用程序框架也吸引了,因为他们可以很容易地用于创建快速、复杂的应用程序,感觉比传统更坚实和互动网站。但这好处,心态的变化和发展实践,陪它,付出的成本基本的浏览器功能,web开发人员有时认为是理所当然的。
JavaScript可以脆弱
与供应商使其越来越难以禁用,我们可以得到误以为,我们不需要为用户提供一个后备的浏览器不执行JavaScript。但明确选择禁用JavaScript的唯一原因是用户的浏览器可能无法运行它。政府电子服务(GDS),团队,维护英国政府网站,发现,每500名游客GOV.UK,五没有收到JavaScript,但只有一个JavaScript显式禁用。其他四个也许会错过一些JavaScript的几个原因:过分公司代理服务器;请求JavaScript超时由于高延迟;甚至是注意语法错误。
此外,JavaScript-unlike CSS和html是不完全降低。这意味着,如果开发人员使用一个ES6语法功能,甚至使一个标准库函数调用没有首先检查函数被定义,执行JavaScript可以中途停止运行或不运行。当JavaScript用于提高网站,这个不重要所以much-visitors仍然可以链接并提交形式和一般使用web。但当JavaScript是一种要求,任何人使用甚至稍微年长的浏览器可能会得到一个空白,就没有解释如何处理它。
语义结构仍然是重要的
由Tim Berners-Lee于1993年设计HTML定义了一个公共结构互连网的文件现在我们知道随着网络。语义含义里充满了这种常见的结构提供机器可读的上下文信息包含在一个web页面。实际上,这些额外的信息使浏览器能够增强用户体验。例如,一个web浏览器可以实现一种事件定义随着时间的元素添加到用户的日历,屏幕阅读器可以通读列表不同于将一个段落。列表和一个段落之间的区别是人类观众清楚的文档,HTML提供的公共结构使它清楚电脑,。
背后的语义HTML设置web除了本机应用程序环境(如可可、WindowsPresentation Foundation,Qt。结构化信息网络更为重要,因为不同的方法可以访问。当我创建一个iPhone应用程序,我可以安全地假定每个人使用该应用程序将以类似的方式使用它。我的应用程序提供的信息永远是一样,我总是会有完全控制,演讲。即使有人使用我的程序与通过画外音(苹果的辅助技术有视觉障碍的人),他们仍然以类似的方式与应用程序交互的用户:通过在屏幕上。他们只是碰巧听到的文本,而不是看到它。
网络不工作。网站并不认为仅仅通过web浏览器。人们消费网站通过应用如口袋或Instapaper,尝试使用结构化信息的网页中提取其相关内容。一个浏览器smartwatch可能忽略你的布局和展示你的信息的方式更适合一个一英寸的屏幕。谁知道呢?你的网站可能使用一些未来的装置,将信息转换成思想直接传送到用户的大脑。甚至网络屏幕阅读器工作不喜欢画外音在iPhone,阅读的文本的顺序是根据用户的手指。Web屏幕阅读器阅读整个文档,忽略布局,和推断意义标准化语义定义的HTML标记。这样一个简单的例子,当语义问题是最近推出的主要元素,用于定义文档的主要部分。发现用户通过Google Chrome浏览你的网站,你是否使用<main>或< div id = "main" >都没有区别。有人使用另一个web客户机,如屏幕阅读器或Instapaper,隐含的意义主要元素是非常重要的软件在帮助他们浏览你的文档。
开发一个web应用程序,因此,不能简单地认为本地平台的发展。确保它工作的方式我们希望它在五大浏览器和推动它不够好。我们需要测试工作在屏幕阅读器。我们需要检查标记,以确保它提供尽可能多的语义元数据—不仅是今天的web客户机,但是对于明天的。
单页web应用程序框架
当使用“单页web应用程序框架角和灰烬,这种趋势是把网站和本地应用一样,很少考虑使网络独特的细微差别。开发人员对用户做出假设,会严重损害人的经验不符合这些假设。作为一个例子这种心态会导致什么,考虑为一个登录按钮标记(因为改变了),我最近发现Patreon网站:
<span class="patreon-button sub-section navigation-active"data-ng-click="triggerChangeWindow(navigation.login_url)">Log In</span>
Patreon相当标准的登录按钮的行为就像一个链接。这里不需要特殊的JavaScript。
在Safari这种联系对我来说很不错,但在任何环境中除了当前主流浏览器,这个按钮是完全无用的。假设我们有一个假想的称为WatchBrowse smartwatch浏览器。也许显示一个用户浏览的链接列表,因为这个特殊的smartwatch没有光标能够与页面交互。因为HTML定义了一个标准的方法来创建web页面上的链接(元素),WatchBrowse理论上可以只列出每一个页面上的一个标记的href属性和content-until网站Patreon出现和决定避开web标准支持从头重新实现基本的浏览器功能。
如果Patreon使用一个标记,而不是跨越,WatchBrowse也许能找到链接并将其显示在列表中。当用户选择的链接,它可以模拟一个单击事件,而不是仅仅使用href属性。但是功能要求浏览器知道该链接将导致提前?浏览器扩展可能允许您搜索页面上的链接的href值,这将是有用的,如果你想快速找到,有人链接他们的Twitter帐户,例如。Firefox显示一个链接在哪里需要我徘徊。当链接href属性不再是静态值,但是,相反,决定在点击任意JavaScript处理程序,这些有用的功能不再是可能的。
Patreon网站的构建与角,角不是错误本身,心理治疗的HTML视图层,使用这些框架可能导致Patreon糟糕的决定。
如果我们创建相同的链接文档的框架开发人员推荐的路吗?更标准的方式做一个想angular这样的：
<ang-href="/login">Log In</a>
当呈现由客户端JavaScript DOM,片段变成这样:
<a ng-href="/login" class="ng-binding"href="/login">Log In</a>
Ember处理这种类似。一个Ember链接的模板中定义如下:
{{#link-to sessions.new}}Log In{{/link-to}}
当呈现到DOM,它变成这样:
<aid="ember-563"class="ember-view"href="/sessions/new">Log In</a>
Ember和Angular然后拦截链接的点击事件呈现新内容,而不用重新加载页面。至关重要的是,然而,如果没有触发单击事件,浏览器加载href的价值,用户就不会有明显的差异除了额外的页面重新加载,因为Ember和Angular默认情况下不需要重新定义他们的路由的url。
然而在他们当前的形式,灰烬和角仍然需要JavaScript来呈现他们的模板和创建这些链接放在第一位。4每500人访问一个网站建立角或灰烬会遇到一个完全空白的页面。
一个解决方案吗?
当服务器动态web页面内容呈现,呈现代码只有能够运行在一个服务器上。呈现在客户端时,代码已经与每个客户合作可能访问的网站。开发人员现在远离server-rendered网站因为他们不提供的那种丰富的应用经验client-rendered网站可以提供。但是我认为还有一个角色服务器呈现在客户端应用程序的新的世界。
目前,JavaScript是一种权衡,开发人员需要使用单页面的web应用程序框架,但在我看来,这完全是种的问题,应该由一个框架。我们很幸运作为web开发人员编写web应用程序代码在一个曾经存在的最普遍的编程语言。如果框架开发者能够付出努力(诚然,这似乎大)应用程序运行在节点就像他们运行在浏览器中,初始页面渲染可以由服务器处理,所有后续活动由浏览器。至关重要的是,如果一个服务器可以呈现链接到一个标签,就像灰烬目前确实在客户机上,它可能没有收到JavaScript的用户(无论什么原因)在网站导航。有可能得到形式工作,通过运行服务器上的所有验证和提交的逻辑,而不是在客户端。如果这项工作可以在一开始就由一个框架维护者,然后每个开发人员使用该框架可以立即改变一个应用程序,只有在最新的web浏览器到逐步增强的兼容任何web client-past经验、现在、还是未来。
渐进增强web开发人员是重要的现在。它承认web体验内容的重要组成部分,和任何额外的改进用户体验不应该破坏的普遍可用性提供的web内容。目前单页网页应用方法倾向于放弃这一原则,但渐进增强和单页面的web应用程序并不从根本上不相容的。
事实上,在这个舞台上正在取得进展。改善灰烬的兼容性与搜索引擎,例如,一个内部团队正致力于实现服务器端呈现。但解决问题引起的单页web应用程序不是纯技术:有一个日益严重的问题在人们的思考方式。将网络视为已经成为一种普遍现象只是另一个应用程序platform-but网络是比这更多。网络是世界信息平台。没关系如果有人在2000美元的iMac,访问一个网站或一个50美元的Android平板电脑,或未来的5美元web客户端,我们甚至不能想象在理论,至少。在实践中,重要的是要确保我们不牺牲一小部分用户的经验,我们可以稍微提高其余的经历,破坏网络的普遍性质。