HTML5移动应用开发的生态环境简介(2)

前端开发也同样有了很大的改进。我们的JS代码不再是一个巨大的$(document).ready函数。我们开始使用更加标准化的框架(AngularJS, BackboneJS, EmberJS, Polymer, ReactJS)而且我们的debug工具也不再弱于那些原生debug工具。我们也开始使用构建系统,包管理器,以及代码风格。

HTML5移动开发自2009年以后就完全变样了。

所以到最后,HTML5的问题是什么?就是UI

有些读者已经知道,我真的很讨厌jQuery Mobile,然而很不幸的是,大多数开发者都用它来做移动开发。Bootstrap也没法解决这个问题。它确实是响应式的但是并不是针对的移动平台。原生应用开发者用他们的原生组件来和HTML/CSS相比较,这明显是很不公平的。

原生平台提供很多“拖来就用”的组件,而且是经过全面的测试,优化,并已经包含了性能优势。iOS提供的原生长列表组件会自动隐藏那些看不到的元素,但是在HTML/CSS里面并非如此。

Web UI是开发者心中永远的痛因为Apple或Google从未提供过Web UI的框架。想像一下如果有种“Bootstrap”可以拥有所有原生组件的特性(性能,渐变,个性化等等)。他们本来可以做到,但这并不是他们优先考虑的。然而现在情况不同了。

Windows Metro

微软是这方面第一让我有深刻印象的。他们的Metro UI无论是在C++,C# 还是 HTML里都有同样的特性:

HTML5中的ListView的一个例子:

HTML5移动应用开发的生态环境简介

Firefox OS

Firefox OS更加有意思。Mozilla自己同第三方开发者使用同一套CSS。说实话这真是最棒的想法了。你可以直接去GitHub进行贡献

HTML5移动应用开发的生态环境简介

https://github.com/mozilla-b2g/gaia

那么Google呢?

Google是最后一个但也很不错。他们采用了另一种方式。他们给我们带来了AngularJS以及最新的Polymer。Polymer是是一个让你可以轻易创建web组件的框架。

在他们完成开发web应用底层结构之后,他们开始专注于UI。现在的成果就是Material Design(译注 这里是相关介绍),他们的想法是创造完全响应式的设计,而并不是简单的缩放元素大小,这样可以使得应用在每个屏幕尺寸上看起来都很性感。他们使用Polymer来提供这些组件。

HTML5移动应用开发的生态环境简介

#core-toolbar

同时现在还有其他的UI框架!

Ionic Framework

这个是个人最爱。其设计与iOS很相近,但不像某些人,它在Android上看起来也很棒(看什么看我说的就是你jQuery Mobile)。他们带有AngularJS的指令集,现装现用,性能优化,自带动画,等等。简而言之,这货就是春哥附体。下拉刷新,侧边菜单,无限滑 滚,支持超长列表(没错,超过1000条元素),选项夹,等等。

HTML5移动应用开发的生态环境简介

这个截图是我正在开发的一个应用

Drifty,这个开发了Ionic Framework的公司,正在同其他开发者一起研发Angular Material,一个类似于Polymer中Material Design的东西不过是基于AngularJS。

还有其他更多不错选择,不过目前还达不到Ionic那么好。不过大家还是可以关注一下,我相信很快他们都会改进:

那么Apple呢?我觉得他们还是更倾向于迫使人们用Swift或者Obj-C进行原生开发。万幸的是,我之前提到的大多数框架都支持iOS。SB了吧,Tim!

我希望现在你对HTML5移动开发能够有了更多的了解。这个指南还没有完成,我只是想到哪写到哪。如果你发现我有什么地方写的不对,请尽管给我留言或者通过你方便的方式联系我:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/cfcf0b68b67c58a5476ef8cd047adca3.html