原生app开发与h5开发体验对比

从移动客户端转h5开发这一个月左右以来，给我最大的感触就是两者之间本质没有任何区别，为了证明我说的这一点，我将用移动客户端来类比h5，来"证明"我说的两者没有任何本质区别。

直观上面的感受

看到下面这样一个页面，你能够直接肯定这是一个h5还是一个app原生页吗？答案肯定是你不能，我之前在做移动端app的时候，也用原生做过这样的页面。

技术层面的类比

从登陆说起

当然登录页不是一个简单的事，这里只想说第三方登录，比如QQ或者微信登录，两端所做的事情是及其类似，比如，我们某一接口出发了登录态校验，发现用户没有登录态：

1. app的做法是：弹出登录页进行登录，登录之后，将登录信息存储到sharepreference中，在次请求的时候，通过程序的做法携带这些信息去请求，后台server就认识你是一个有身份的人啦。
2. h5端的做法是：后台发现你没有登录太，会在返回body中，一般来说是json中，告知你redirect_url和jump_url,redirect_url告知你去请求这个地址已获取登录太，这个实际上会触发你拉起微信登录或者手Q登录，微信或者手Q那边就会给你中cookie,然后jump_url会回到你刚刚发生请求的那个页(一般来说会是这样的，不过因为refer不能回略去一些params会略有不同)，此时你再次发送请求的时候，就可以携带cookie中的信息去后台请求，此时你也是一个有身份的人了。

可以看到大同小异，都是要拿到身份校验信息存储在本地，然后去服务端请求，所不同的是，cookie是别人帮我们写的，而客户端是我们自己写的pref。

另外补充一下，请求的时候，cookie信息带给服务器那边，如果使用axios,

withCredentials: true // 允许携带cookie】

加上以上代码可以自动为我们带cookie请求，原生ajax请求方式请查阅资料了解。

从编写ui上来说

原生界面上的实现通常来说是要我们手撸代码的，然后在h5这边就略有不同了，不知道是因为我们团队的原因还是业界都是如此，我们这边有重构设计师，因此拿到我们手上的html已经配备了css了，反正还原度这方面我们完全不同担心，所做的工作自然就是在里面填充各种数据了，那么如果没有重构设计师怎么办，那就有点头疼了，但是套路依然是哪个套路，html+css来实现sketch输出的那个效果即可，本质上和我们在原生上撸界面没有任何区别。

当然从动效上来看的话：

1. 原生app：原生需要写一个动效函数，然后应用到这个view上。
2. h5：用css写一个动画，使用class丢该这个dom节点，但本质上还是对这个view做了一些什么。

从界面跳转上来看

原生中拿Android来说是使用intent这种方式来跳转，后面出现了一些路由框架之后，貌似这个又顺利的回到了web上来了，但从本质上来看，依旧是找到某个资源，然后定位到资源上去。

当然，从数据的传递上来看：

1. 原生app：在intent中放一些参数可以传递过去，回来的时候也可以通过intent携带，参考startActivityForResult....
2. h5：h5传递参数到下一个页，就非常直观，直接使用 ?a=xxx&b=xx的方式，然后回传结果这个似乎没有看到类似的场景。

从页面栈上来看：

1. 原生app：有自己的activity栈，通过activityManger来管理，甚至有多种不同的模式，比如singleInstance,singelTop等等，这里可以发现，原生体验上和h5出现的差距，确实原生可以将页面切换做得更加炫。
2. h5：h5也有自己的页面栈，通过history来管理回退或者前进。

从修复线上问题来看

原生APP显然要尴尬的多，出现了问题，一般来说有两种方式，1、发布版本，需要等待审核，App Store最快也要1-2天吧，2、热补丁修复，App Store好像政策上不太允许。而h5似乎就没有这方面的限制了，随改随修，立马上线。

从编写业务逻辑来看

透过本质来看，界面是由数据渲染的，而数据是由界面事件驱动的这一本质在两端没有改变，当然，这句话是我自己总结的，不知道对不对，但我可以肯定是，以我目前的理解，这句话是对的。

从耗时操作需要异步封装说起：

1. 原生app：原生中，Android高效实践中就有这么一条，耗时操作都应该放到异步中执行，本质原因是因为ui的刷新是在主线程中去做的，如果因耗时操作而占用了过多实践，界面就会卡顿，给用户造成了不好的体验，这个是绝对不允许发生的事情。
2. h5：似乎也没有摆脱这个限制，网络请求似乎也被大家一致的遵守，放在了异步中去处理，然而，要说的是，js，css，图片的加载似乎并没有放到异步线程中处理，于是乎有一些懒加载库就出现了，针对图片的处理，也出现了一些雪碧图，css，js也出现了压缩，合并等工具，无一不是为了减少网络请求，减少页面加载时间。