6

用HTML5构建移动APP,时机到了

 3 years ago
source link: https://yuguo.us/weblog/building-mobile-app-with-html5/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

用HTML5构建移动APP,时机到了

余果 2013-02-07 front-end

之前我在翻译《移动用户体验设计考虑的因素:“是Web,还是原生?”》时,学习到的一个观点是:

当我们提一个应用是原生的还是Web的时候,我们更多地是从开发者的角度在考虑问题,是一种“由内而外”的思考方法,这种思考方向是错误的。正确的方向是“由外而内”,由用户需求来判定技术方案。

“原生”或者“Web”的选择更多的是平台和文化的选择。

看到一些框架或者demo可以用html/css/js来非常逼真地模拟iOS的各种光影、按钮、动画,这种方向就是错误的,当我们使用Web来编写iOS app的时候,我们的目标不应该是可以多么逼真地模拟iOS组件。因为既然想要模拟iOS组件,为什么不干脆用原生objective-c来写呢?

用原生代码的好处更多:

  • 系统级的性能优化
  • 用户操作习惯,比如毫秒级的动画,Web可能很难模仿得100%一样,那么就会出现跟原生不一致的情况
  • 设计的对比原则:如果两个元素看上去不一样,那就要设计得完全不一样,而不是有一点相似但又不太一样,这会让用户觉得是设计错误

我相信未来趋势是混合应用(原生和Web相结合),并且Web在其中所占的比例可能越来越大。

因为之前看到一篇文章应用开发者不再遵循苹果iOS设计惯例

在苹果自己的平台上,有些最受欢迎的和最美观的应用最近都放弃了iOS的纹理、阴影和3D特效,转向更加平面、干净和简洁的设计风格。但这种设计新主张并不是一种离经叛道,反而有望成为iOS设计的未来。奇怪的是,苹果自己却还没赶上这股潮流。

也就是说,在平台文化上这一点上,未来的App是会呈现一种百花齐放的状态,所以原生SDK不再满足开发者和设计师的需求。

而Web方便定制的特性更容易满足这一需求。

大家对Web App一个很大的担忧就是会有严重的性能问题,比如操作不流畅,频繁崩溃等。

这是因为移动设备机的性能相对PC还有一定差距,而Web开发者不了解这一局限,只是把移动设备当做PC一样在设计和编程,从而导致一些性能问题。但是最近,已经有一些Web App的最佳实践产生。

  • 不要使用CSS3圆角,渐变,盒阴影
  • 尽量减少DOM数量
  • 减少图片数量
  • 使用visibility:hidden;甚至删除节点来清除内存

参考资料:

用HTML5实现iPad应用无限平滑滚动

那些耗费比较的的CSS属性

You’ll never believe how LinkedIn built its new iPad app (exclusive)

结论是:通过最佳实践,以及Web开发者技艺的提高,对这个平台的熟悉,以及对设计的折中,最终Web应用的性能不是问题。

我写字的地方迁移到公众号啦~欢迎关注我的公众号:余果专栏

user

Recommend

  • 21
    • www.huxiu.com 4 years ago
    • Cache

    抄底苹果的时机到了?

    现在的苹果有些焦虑。 一场突如其来的疫情,打乱了所有手机厂商的新品发布计划与出货预期,苹果也不例外。 对苹果而言,影...

  • 8

    互联网一个核心思想就是追求速度快,对移动端App开发更是这样,产品迭代速度在一定程度上也代表了其获取用户的速度。此外,App开发的终端市场碎片化越来越严重,传统App开发效率无法保证,开发及更新维护成本高,这些都使创业团队在布局移动互联网时遇到了不同...

  • 6

    新造车势力们拿钱的时机又到了本文来自微信公众号:出行一客(ID:carcaijing),作者:施智梁团队,原文标题:《新造车们的新融资时代:地方政府争相上马,融资近10年来首次破千亿...

  • 6

    移动互联网越来越热,HTML5也越来越热,经过这些年的发展,HTML5在互联网公司和开发者心目中已经有了很重的分量。这篇文章就带大家领略HTML5世界的生态。 HTML5:移动互联网时代的黑天鹅 在移动互联网时代,...

  • 10

    使用HTML5构建iOS原生APP(3) 余果 2013-03-15 iOS 问题发生的场景是webview中有一些筛选器,当我点击(在手机上实际上是触摸)筛选器的时候,页面内容会发生变化,但完全是本地的,...

  • 6

    使用HTML5构建iOS原生APP(4) 余果 2013-03-17 iOS 今天要解决的问题是,当使用HTML5制作(webview)的时候,如果出现垂直滚动条时,手指滑动页面滚动之后,滚动很快停下来,好像踩...

  • 9

    使用HTML5构建iOS原生APP(5) 余果 2013-04-10 iOS 我的app基本上是由一个原生的navigation controller贯穿全局,然后在每一个scene中都有一个主要的UIWebView作为主要...

  • 6

    使用HTML5构建iOS原生APP(1) 余果 2013-03-08 iOS 读了Exclusive: How LinkedIn used Node.js and HTML5 to build a...

  • 4

    有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为webview的跳转很生硬,而ajax+js模拟则不如原生segue平滑)。 有时候我们希望在页面内consloe.log('log something')的时候在控制台里看...

  • 2
    • www.androidchina.net 3 years ago
    • Cache

    HTML5,7个移动开发框架

    HTML5,7个移动开发框架 – Android开发中文站你的位置:Android开发中文站 > 热点资讯 > HTML5,7个移动开发框架 在...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK