javascript教程现有Web App模式的问题以及挑战-白红宇

javascript教程现有Web App模式的问题以及挑战

阅读量：5105 次

发布时间：2019-06-13

本文共 5105 字，大约阅读时间需要 17 分钟。

　　文/刘铁锋

　　在计算机的发展过程中，目前移动设备的时代可谓是潜力最大，发展最为迅猛，也是竞争最为激烈的一个时代。硬件的发展速度令所有的消费者惊叹，如果2008年给你一部主频528MHz，内存192M，屏幕3.2寸，分辨率320480的手机，你可能会觉得非常前卫，因为CPU和分辨率足够高。而放到三年之后的今天，这部机器已经到无人问津，成为古董机型的地步。不错，这就是G1的配置。而现在双核1.5G的CPU，4寸，甚至5寸的超大屏手机已开始成为用户心中的主流手机。毫无疑问，这种手机的处理能力已经开始能够赶上PC的处理能力。而传说中的模块四核的Pad，更有赶超PC发展速度的势头。

　　在硬件处理能力不断强大的同时，移动设备的操作系统的竞争也开始越来越激烈，不仅仅是iOS，Android还有不知道市场反响如何的WindowsPhone。而仅仅是这三种平台，就已经开始让传统PC转向移动的开发者以及企业开始头疼。与此同时，HTML5能力的不断强大，使得WebApp和NativeApp之争不断升温，在移动设备上的讨论尤为突出。但无论如何，当硬件能力的进一步强大，性能问题得到改善之后，快速开发程序的能力以及构建程序的成本会成为影响和推动技术选择的一个重要原因。

　　MobileWebApp的现在

　　作为一个坚定的WebApp的支持者，笔者认为，开发难度和跨平台的需求会在技术和商业两个方面都会推动WebApp得到越来越广泛的应用。市场对WebApp的接受程度也在不断地得到印证，大家所熟知的MobileWebApp先行者FinanceTime，在短短的三个月的时间内已经获得超过100万的下载量。相比起很多原生的程序，这个下载量不算太高，但其几乎匹敌原生应用的体验，已经让很多人留下了深刻的印象。

　　不仅仅如此，还有很多其他的数据可以用来分析Web的趋势。如大家所熟知，Facebook也一直在推进Web的发展。Facebook不仅收购了HTML5的移动应用开发商Strobe，同时Facebook也正式推出了名为Spartan的HTML5移动开发平台，其目标就在于更好地帮助开发者开发WebApp。不仅如此，最近有消息传出，作为在WebApp开发的最火的工具/框架之一Sencha的技术推广经理跳巢去了Facebook。足以见得Facebook在这个方面在不断积蓄力量以求更大的突破以及发展。而另一则Adobe放弃在移动设备上支持Flash的消息，更让人看到了HTML5在同一技术标准以及能力上的突破。

　　与此同时，国内对WebApp的技术的关注也非常活跃。一个致力于探讨和分析业界对WebApp的最新进展和发展趋势的博客WebAppTrend的已经出现，并且质量相当之高。不仅仅如此，PhoneGap中文站也已经浮出水面，为国内的开发者带来了全中文的教程以及学习资料。

　　这一切都在说明业界对WebApp不仅仅停留在口号，而是有更多的实质性的推动。

　　WebApp开发现状

　　回到一个实质性的问题，什么才是WebApp?引用WebAppTrend博客里面的一篇博文的内容，有着如下的定义：

　　“要给出完整的WebApp的定义是一件很复杂的事情，因此我们在此只给出一个简单的定义：WebApplication是指通过使用Web和Web浏览器技术，跨越网络完成一个或多个任务的应用程序，通常需要使用Web浏览器。“

　　简单来说，就是利用Web技术，能够做出超越传统理解网站的功能，让它更具有交互体验，让这个App看起来和用起来更像NativeApp。这样就非常清楚WebApp和NativeApp的差别具体在哪里了。之前的文章笔者探讨过，在目前的技术储备上WebApp同样也开始用户Cache，DragDrop等等NativeApp所必备的功能。

　　那么从开发层面来看，WebApp的开发和NativeApp的开发又有怎样的差距和距离呢？

　　让我们回想一下一个NativeApp的开发过程：

　　界面开发。一般来说，NativeApp的界面开发拥有非常强大的控件库。不管是对用户交互的Button、Checkbox，还是用户输入的textbox、RichTextbox，或是用户展示的ListView或者GridView之类的控件(不同的开发平控件的名称未必一致)，控件库里面已经为这些控件的展现方式。为属性设置、事件响应等基本的开发需求做好的充分了准备。绝大部分的开发者只需要拖拽控件，然后就可以实现自己的逻辑代码，而无需做太多的准备工作。

　　事件响应/数据绑定。在绝大部份的场合下，对于数据的处理成为了NativeApp开发中间的重要工作。这部分的工作的本质就是把从网络上传输的一组数据(不管是从数据库，还是从WebServices)转换成为业务逻辑中所定义的对象，然后绑定到相应的数据控件中。而事件响应的过程则是相反的过程，根据用户的响应，修改相应数据控件里面的值或者状态，然后通过数据处理逻辑回传到数据库或者WebServices中。在这个过程中一般来说NativeApp的开发过程中，同样有逻辑处理非常完善的库来帮助实现这个工作。比如说Android里面的ContentProvider或者Adapter。

　　数据状态管理。数据的状态管理是指根据实习的开发需求所带来的本地缓存，配置文件读取等等操作。比如聊天应用，文本编辑应用或者基本的信息管理系统都有能力直接从本地的磁盘中读取之前的操作记录或者缓存信息。从而让程序能够有能力很快地启动并且展示。比如聊天程序中的联系人列表，比如邮件客户端里的本地邮件等等。这些都依赖于有本地的存储和缓存，来让用户更快地获取信息。

　　这里没有强调具体和网络操作，具体和业务相关的逻辑处理等具体需求。对比在WebApp开发的过程来说，情况则不太一样。

　　由于传统的Web展示能力有限，传统的Web开发过程中，由于位于前端。因此界面的开发本质上让位于了CSS所创造的效果以及Javascript所包装出来了各种各样交互效果。这部分的工作更多地集中在样式的调整以及和动画效果制作上。

　　对于所谓的事件响应，数据绑定等等方面，在早期的开发过程中基本上不存在这个概念，完全跳转回服务器，然后重新刷新页面。在AJAX引入之后，利用Javascript+XMLHttpRequest，使得HTML的页面逻辑可以转移到Javascript中实现和完成。

　　对于数据的状态管理部分。本质上来说，早前的Web基本不存在这个概念，仅有的Cookie能力有限，仅能部分保存状态。直到WebStorage开始实现，甚至是WebDatabase的出现，才增强了Web在这个方面的编程能力。

　　那么，回过头来看WebApp和NativeApp之争的本质是什么？无非就是WebApp是否能够完整实现NativeApp所能作的事情。这样WebApp在开发简单，跨平台方面的能力才能充分凸显出来。但对现阶段的状况来说，当期望把NativeApp所拥有的功能转向到WebApp时，不可避免地因为工具的缺失，甚至是开发的缺失，导致了在开发中始终存在不够的状况。可以坦率地说，现在WebApp的开发中，还处于构建不同的开发工具和开发库，甚至是在摸索开发模式的过程中，还尚未成熟。

　　当然，这不是不能解决的问题。WebApp开发，尤其是MobileWebApp的很多工具和框架已经开始组建建立。

　　界面开发。如前面所说，非常强的NativeApp界面控件成为了提高效率的有效。在MobileWebApp开发中，Sencha以及jQTouch已经提供了非常强大的界面开发支持。同时在界面库方面，jQueryMobile可以认为是一种增强型的javascript库，能够有效地帮助用户来解决和提升开发效率。

　　事件响应/数据绑定。如果和NativeApp相比，这块本来就不是Web开发的强项，但是也许根据开发的需要，未来会衍生出包装的非常完善的一站式解决方案。比如可以直接把一组RSS里面的内容，更加方便地变成具有交互能力的List或者功能。

　　数据逻辑/缓存处理。WebStorage已经提供的技术的支持，需要的就是最佳的开发实践，甚至是利用缓存的模式。对于简化开发的工作来说，应该会出现专门的Storage的管理模式，甚至是封装的非常完善的库。

　　现有WebApp开发模式的问题以及挑战

　　从工具层面来说，WebApp在工具方面的演化正在不断地进步。但是在现有的WebApp开发过程中，依然存在非常多的问题和挑战。

　　性能问题。性能问题依旧常大的挑战。由于WebApp的开发几乎完全构建在Webview的基础之上，因此在Webview上对事件的处理以及响应的能力就直接决定了用户的体验。在这里有两方面的性能，一个性能是对事件响应javascript教程现有Web App模式的问题以及挑战的速度。在Web上控件的响应速度比原生的控件响应速度要慢；另外一个是直接在渲染和执行速度的速度。

　　分辨率的问题和适配的问题。和NativeApp的开发方式一样，不同的分辨率，横竖屏切换，以及对于不同机型的识别，甚至与对不同的web浏览器内核的适配，同样存在一样的问题。同样需要比较多的调试和适配的工作。

　　离线的问题。和NativeApp相比，可能这是最应突破的一件事情。一是这是一个0或者1的问题，实质上是突破了原有的Web开发的，二是界面和逻辑数据的分离。对于Web的页面来说，这可以认为是界面，中间涉及到分离的js，css文件以及没有更新的img等静态元素的缓存问题，同时也存在把动态数据元素(比如某个控件里的状态，比如离线邮件中的邮件信息)缓存以及载入的问题。这需要重新建立起一套解决方案来实现。

　　跨平台问题。WebApp和NativeApp另一个不同在于访问硬件资源上的不同。由于受限于浏览器的功能，有很多的硬件资源不能直接访问。所幸的是PhoneGap为在多个平台上开发提供了非常的好的解决方案，使得WebApp拥有了能够在多个平台上执行的能力。有理由相信这个问题能够被解决的越来越顺畅。

　　总结

　　如果从开发的工具以及各种支持来说，MobileWebApp开发现在尚处于比较早期的原始阶段，甚至也会出现很多因为性能问题导致不够实用的情况。但是，从技术的角度来看，并没有太多的致命门槛，而是出于构建框架，重建游戏规则的过程中。不仅仅是Facebook，Google这样在互联网上的巨头，连IBM这样的老牌公司也已经在开始搭建Mobile上的工具以及解决方案，这完全有理由详细，在Mobile上WebApp的开发会越来越火热，让我们拭目以待。

　　作者刘铁锋，百纳信息技术有限公司CTO，W3C标准化组织。

　　(本文来源：程序员)