最近几年，随着前后端分离、单页面应用的崛起，网页正变得越来越应用化。移动互联网端的发展更是助长了这个趋势——对于交互、性能不敏感的场景，Web App在开发成本、跨平台兼容上有着明显优势。但在这火爆的行情背后，很多时候从产品经理到设计甚至开发，对Web平台的特性并没有足够的了解与警觉，导致最终产品成了既不App也不Web的四不像，不仅拖累用户体验，开发团队也容易无所适用。Web APP的核心特性是什么？和Native App最大的差异是什么？未来又会如何发展？ 本期【开源访谈】邀请到了ThoughtWorks的前端工程师覃俊文，和大家分享Web APP 的特性与未来。 【本期嘉宾】 覃俊文，ThoughtWorks前端工程师，Javascript程序员，曾火爆一时的《WebApp防坑手册》博文作者。OSC源创会第53期成都站讲师。 【采访实录】 1）先简单介绍下自己 答：大家好，我是来自ThoughtWorks的前端工程师覃俊文，目前在ThoughtWorks工作有一年半左右。之前是在聚美优品，负责购物车相关的前端业务线。 2) 是什么契机想到写《Web APP防坑手册》这样一篇文章？ 答：其实这是由于自己工作当中的一些痛点引申出来的一篇文章，痛定思痛，想把自己遇到过的问题，分享给大家。一方面可以让大家来一起讨论，另外是希望大家不要重复的掉进坑里。我自己从工作到现在，做过的Web APP也有很多，也有很多问题是我重复遇到感触比较深的，所以断断续续整理、记录下来，最终形成了这篇博客。 3）Web APP 的核心特性是什么？ 答：Web APP最容易被忽视，特别是容易被产品和设计忽视的一点是，它实际上还是运行在Web，运行在浏览器上的。我有遇到过有的项目直接把原生Native App的设计稿，在上面P了一个浏览器的地址栏，然后就给到Web APP的团队，说就按这个做吧。这样就导致，一旦设计稿出现这样的偏差，我们就会错误的认为是要做的跟Native App一样，结果自然就跑偏了，因为这两者的特性不一样。 Web APP有个很重要的特性，它是由URL驱动的，每个页面都应该对应到能够被URL所唯一标识的一个展现层资源。在这个原则下，会发现Native APP没有像浏览器地址栏那种前进、后退、刷新的东西，但是在Web APP上有，而且必须要去考虑它们。现在有一些打包的工具，可以帮助你把一个Web APP加一层壳打包成类似原生的。但它们在这方面的控制上个人认为其实也还有一些明显的弱点，不能完全适用，不能完全解决所有的问题。 4）最初是缘于什么开始做Web APP？ 答：因为我本身就是做前端开发的，所以自然而然就会接触到它。现在整个开发的有个大潮流就是Web Application。Web正在越来越复杂，越来越应用化。Web APP有开发成本低、适配平台广等优点，所以有很多场景是非常适合它的。 5）Web APP 有哪些常见的坑？要如何避免？ 答：比如说，用Web APP 做一个企业级应用的时候，会遇到一些模态窗，里面承载着让用户不脱离上下文的内容，当没有意识到里面的某些内容需要唯一定位时，就很容易和Web APP的URL定位冲突。因为当展示模态窗时，网页本身也需要展示出来，一旦出现冲突，问题就来了。另外，我曾在项目中遇到这种情况：需要定位的资源下还有另一个需要定位的东西，模态窗套模态窗，这时候网站UI就会非常难看，而且到后面几乎不可能通过URL恢复这样的层叠关系，因为整个页面上的资源非常的多。 这些问题其实更偏向从设计之初来解决，特别是当前端工程师看到有这样的设计时，应该及时找到相关的关系人，跟他们说明这样设计可能存在和导致的问题。而不是先默默的将它做好。说白了，就是需要提前意识到风险。在Mobile上的话，有一些设计可以通过毛玻璃效果来暗示用户当前所处的页面。当然，这也只是缓兵之计。 6）Web APP和Native App最大的差异是什么？ 答：Web APP和Native App面向的市场是不同的，Web APP的开发成本低一点，开发周期相对快一点，并且更容易上线。但很明显的不足是，Web APP目前在体验上离原生是有一定差距的。这时候首先要考虑你的产品形态，如果是工具类产品，对于交互、效果、流畅度没有特别高的要求，但是希望能在短时间内覆盖大量用户，这时候Web APP是一个比较好的选择。但如果是对交互、性能要求比较高的，那还是应该选择Native App。此外，Native App大家都知道，上线需要通过应用市场的审核，上线周期不完全受自己控制，而Web APP是随时可以上线的。 7）Web APP目前的现状和未来的发展方向是什么？ 答：据我了解，目前toC的厂商，不分行业，几乎都有Web APP。因为现在移动端是非常大的流量来源，甚至已经超过PC端，所以有很多移动端的站点都是用Web APP的形式构建的。 未来，各个浏览器厂商会想办法提供越来越多的API，让Web APP越来越接近Native App的体验。谷歌在社区推行的Progressive Web App，其实就是谷歌对未来更强化、更进一步的Web APP的畅想。 8）最后，对于刚开始尝试或接触Web APP的初学者，有什么建议和经验分享？ 答：Web APP的本质上还是前端开发，它是前端开发的一种形态，只是说可能它的逻辑相对复杂一点，让用户看起来会更接近APP。我自己也有带一些相对于初级一点的同事，包括带毕业生的时候，我很希望他们能先打好基础。因为Web APP对于逻辑的复杂度要求会比传统的页面高，所以作为程序员，你的抽象能力和思维能力明显比较重要，这些就需要平时多去练习。 |
