先了解这些 Web App ,你可以少走很多弯路

  最近几年,随着前后端分离、单页面应用的崛起,网页正变得越来越应用化。移动互联网端的发展更是助长了这个趋势——对于交互、性能不敏感的场景,Web App在开发成本、跨平台兼容上有着明显优势。

  但在这火爆的行情背后,很多时候从产品经理到设计甚至开发,对Web平台的特性并没有足够的了解与警觉,导致最终产品成了既不App也不Web的四不像,不仅拖累用户体验,开发团队也容易无所适用。

  这篇文章希望围绕着Web的特性,探讨Web App与Native App的不同,帮助读者在项目中尽早地识别出可能出现问题的场景。

  Web App is NOT App

  Web App 也要按照基本法

  Web App或者单页面应用(Single Page Application),名字里带个App,听起来颇有鸟枪换炮的味道,无论是工程师还是利益关系人(产品经理、客户),难免会有 和尚摸得我摸不得,App做得我做不得? 的错觉。更有甚者,把原生App的设计稿P上个浏览器地址栏就丢给团队,让照着做个Web App出来。如果这是你遇到的情况,那么恭喜,你已经在被坑的路上了

  俗话说入乡随俗,既然运行在浏览器上,即使Web App能很大程度上提供 接近 App的体验,但有几点,是从根本上不同于App而又必须考虑的:

  1. 应用入口与访问路径

  App对用户的访问路径拥有近乎绝对的控制权:用户从哪些地方进入应用(图标、通知栏、分享链接)有限且可预测。而每一页提供的操作入口之和,都是用户当前可访问的子路径的 全集 。

  而 Web对用户的访问路径控制权近乎为0 :任何页面的URL都是对用户可见的,用户可以添加书签,分享给亲友——任何页面都可能被直接访问, 必须 在设计和架构层面考虑。

  鉴权和被访问并不矛盾:本文中被访问严格来讲是被用户请求,而鉴权或重定向则是对请求的处理

  2. 刷新、后退、前进

  这三个操作是所有Web浏览器工具栏的标准配置,而App多数情况下只需要考虑返回操作。

  最麻烦是刷新:它会清空页面内存、重新发起请求、重新执行脚本。这意味着 Web端跨页面的内存数据是不可靠的 ,如果A页面依赖了B页面放在内存中的数据,下次刷新时得到的只会是 undefined 。

  3. 上下文隔离

  用户可能在应用或站点上进行一系列的、跨页面的操作,这些用户行为称为 上下文 ,而操作产生的数据(比如用户选择或表单输入),本文接下来称作 上下文数据 。

  由于App对路径拥有绝对的控制权且不考虑刷新,某种程度上说App打开新的视图和在网页上打开模态窗的成本是一样的,下游页面可以假定上游页面生成的内存数据一定存在,而这些数据完全通过代码存取,对数据结构没有限制,因此 App端的上下文数据是复杂、可依赖的 。

  反观Web,由于每个页面都可以被直接访问、刷新、甚至是复制链接到另一台设备上访问,存储在内存、LocalStorage中的数据都因此变得不可依赖,唯一能可靠传递的上下文信息 仅限于URL可以表征的数据 , 在没有服务器帮助的情况下,Web端的上下文数据是简单或不可依赖的 。

  现代移动端浏览器提供了一种 应用模式 ,可以屏蔽浏览器工具栏,让页面更像原生App。然而现阶段真实应用的案例并不多见,并且至少有两个问题:

  后退无法完全屏蔽:安卓平台的系统 返回 键等同于浏览器的 后退 。

  移动端随时吃紧的内存可能导致当前不活动的页面被内存回收,下次打开时重新加载——相当于一次刷新。

  为什么URL重要?

  上面三点其实都围绕着核心——URL,某种程度上说, 整个Web世界都是被URL标识并驱动的,每个URL都应该定位到相应的资源

  而现实的情况是:可能你在做一个面向消费者(以下称 2C )的项目,但需求方压根就没提URL和刷新的事;也可能你做的只是一个后台管理系统,不会有人在乎这东西,甚至会有一些和URL的定位特性相悖的需求。

  这是最可怕的事,也是我写这篇文章的初衷:在真正遇到麻烦前,很少有人(甚至包括资深的前端工程师)会全面的思考这类问题,等掉到坑里的时候才发现积重难返。

时间: 2024-10-08 17:48:34

先了解这些 Web App ,你可以少走很多弯路的相关文章

【转】初次创业时,抓住6大要素能让我们少走很多弯路!

前段时间,马云在某次论坛上发言中的一句“8年后最不值钱的是房子”的话,被很多吃瓜群众各种调侃.有人说:对于不缺房子的马云而言,房子当然便宜啦:又有人说:马云又要开荒种菜了,忽悠大家成为韭菜种子,以后好割韭菜等等.其实,马云言论的背后并没有什么“阴谋论”,还真不是“忽悠”,而是以他的视角和感知掏心窝地提示大家:往后创业时钱不是问题.人不是问题,机会才是问题.马云所言不假,的确日后创业的机会会越来越稀缺.越来越难得!只不过,创业机会虽少,但不代表没有,况且世界上也永远不缺机会,而是缺适合自己并能被自

根据实践经验,讲述些学习Java web能少走的弯路,内容摘自java web轻量级开发面试教程

在和不少比较上进的初级程序员打交道的过程中,我们总结出了一些能帮到合格程序员尽快进阶的经验,从总体上来讲,多学.多实践不吃亏.本文来是从 java web轻量级开发面试教程从摘录的. 1  哪些知识点可以延后了解 在Java Core方面,下表中的知识点你可以不学习或者到用的时候再学习. 知识点 学习的时机 界面开发方面的知识,比如Swing等 Java主要用在Web方面,很少有项目会用到这些UI部分的知识点.大家可以等实际用到时再学习 Socket编程方面 可以先了解概念,等有项目需求时再学习

少走些弯路吧,java这么学就废了!一位年薪70万的java大牛告诫

提醒:一定要看完哦! 少走些弯路吧,java这么学就废了!一位年薪70万的java大牛告诫参加工作后的很多java程序员都知道,学java的弯路多得数不完,坑多得踩不完.不到自己真正跌倒,永远不知道自己是错的!如果有名师或者有好的朋友可以提醒,就会走很多弯路,我当时学的时候就是因为没人教,自己随便找点资料就看,资料不系统,不全面,总是这儿看一点,那学一点,最后半瓶醋瞎晃悠,说不会吧,稍微懂点,说会吧,就是个入门.如果这种情况下去找工作,肯定是拿不到offer 的,更别提进什么大厂.最后,如果大家

上大学之前,一定要明白这10大潜规则,你会少走很多人生弯路

等我上完大学才醒悟,觉得已经太晚了,不过可以给准备上大学和正在上大学的同学一个提醒,虽然这个也是其他网友总结的,不过说出了我的心里话. 成绩与老师的印象成正比: 学生会选举只是形式: 学生会内斗成风: 课本只买贵的不买对的: 考前一两周大于等于一个学期. 爱情的花朵多在毕业时枯萎: 文科生是失业主力军: 文凭是学费买来的次品: 党员都是内定的: 校医院开的药都是最便宜的: 欢迎转载,LY客栈-袁建军-博客:上大学之前,一定要明白这10大潜规则,你会少走很多人生弯路,转载请注明原文网址:http:

越早明白这些道理,越能少走一些弯路

前言:两年前看到这篇文章,受益匪浅,现在重读,仍然觉得很有道理,共勉.感谢这篇文章的作者,帮助当时那个迷惘中的小青年. 这篇谈论25岁前可以做的事,实际上是我自己认为今天25岁前的新人可以做,而我当年没有或没有条件去做的事,包含着对自己错失人生机会的一分遗憾. 言归正传.我这里指的25岁年轻人,不包括官二代.富二代,而是指没有家世背景.没有家族资源支持.好不容易读完大学或在职业学校学校2年就进入社会的草根族:没钱.没富爸爸.没关系.没社会经验.甚至没有专业技能的人. 你面临的是要自己给自己找饭碗

前期做第一个小项目的一些问题总结+解决+解释,希望新手少走点弯路

1.改变按钮字体大小:(其实是按钮里面的文字是加在label上的) button.titleLabel.font = [UIFont systemFontOfSize:20]; label的改变方法: label.font = [UIFont systemFontOfSize:20]; 2.改变一个控件的point(包括frame.bounds.center等有point的)不可以直接赋值如下,要声明一个临时变量存下来,改临时变量的点再赋值整个frame回去.因为,一个View用了点语法(即".

web app变革之rem(转载)

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一

web app变革之rem

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一

web app 变革之rem

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一