Eisen's Blog

© 2023. All rights reserved.

webapps

June 15, 2013

htmlnativewebwebapp

其实我一直都很看好 web。但是,我自我感觉自己并没有盲目的看好。当然,在大家纷纷打压 webapps 的时候,我也没有很果断的说还是 native 靠谱。同时画过界面并做过 web 开发的人知道 html css javascript 三个层次分离的重大优势。界面的元素与样式分离,那么修改样式这种 +1 -1 的动作也不会那么的令人讨厌了。js 的事件驱动看起来也是相当的优雅。面对多屏幕适配的问题,responsive design 天生就是来处理这个问题的。总体来说,我很满意 html css js 的这种协作方式。不过,我还是觉得应该尽量避免拿了锤子就把什么都当钉子的2b观点。我一直在观望 web 到底是不是我需要的功能齐全的瑞士军刀。

语义标签是浮云

首先 html5 包含了很多的东西。最基本的,也是最可用的,就是各种新兴的语义标签:article header footer。这些东西没什么可说的。浏览器其实对于不认识的标签也早就有考虑。

canvas 也是浮云

然后呢,就是 canvas 这个可以独立讲的东西。其实吧,它就是一个 javascript 可以控制的像素级别的画图板。对于一些应用场景,比如图表,图片的处理,图像的拼接这些是一个大大的增强。web 可以直接在前端做那些 flash 甚至是后端才可以做的事情了。这里有一个 canvas 做滤镜的 demo https://xiebiji.com/works/QST/examples_new/imgCutMod/。对于 canvas 做游戏这方面我确实是没有什么了解。我就不瞎说了。

css3 很给力

还有就是新兴的 css3 里面的一些效果。css transition css animation css tranlation 这些虽说老的桌面浏览器并不支持。但对于移动端来说,这些功能大部分都是可用的了。尤其是像 iphone 其内置的 safari 在这方面的支持非常的好。在没有这些之前,页面的动画效果是靠 javascript 做出来的。靠 cpu 跑的话,似乎还是差一些。这就是很多人声称的

Native apps perform better than Web apps.

然而 transition 与 tranlation 在有些浏览器已经支持硬件加速,很多 native 的动画效果就差不多可以实现了。更详细的东西可以移步这里 https://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

最后,很多 web 固有的,不如 native 的体验并不是不可避免的。比如 html 刷新的闪屏,我们是可以将内容通过 ajax 拿到之后通过一个动画效果展现出的。这些东西可能比较细致,听起来很麻烦,但是随着这方面的基础设施的越发齐全。我想,慢慢是可以解决的。

哦,当然,还有一个不可避免的问题。webapps 拿不到系统的一些资源。比如 地理位置,拍照,推送。这些问题可以通过 phonegap 这种的工具去解决。毕竟,目前来看,很多移动端的浏览器对于全屏浏览这样的效果支持的并不好。如果说这方面有进一步提升的话,webapps 完全可以不走 app store 而只是一个链接的快捷方式。

接下来我会花一段时间自己去尝试做一个 webapp 试水。看看是否可以做的让我满意。当然,这个 app 一开始应该不会用到那些不好获取的系统资源。先从动画以及体验着手。