react-native 开始走向mobile开发

从去年开发接触移动端web开发,做了许多的webapp程序,嵌入原生程序中的表现都不太好,老是会卡顿。也尝试过许多的hybird解决方案, phoneGapH5+ 这两者都是以 webview 为核心的开发。由于andorid系统的原因,变现都不太好(IOS上还是很流畅的)。

去年下半年开始关注 react-native, 一直也没有机会正式拿来开发, 最近公司要开发android版的 环保头条, 决定使用react-native来开发。体验之后性能的确是比webview的方式好太多。 所以决定记录一下react-native 应用开发的一些知识点

html5网络连接

XMLHttpRequest Level 2

XMLHttpRequest Level 2 对于 老版本的XMLHttpRequest对象 功能的一个补全,这里我们先看下老版本的XMLHttpRequest对象的缺点

  • 只支持文本数据的传送,无法用来读取和上传二进制文件。
  • 传送和接收数据时,没有进度信息,只能提示有没有完成。
  • 受到”同域限制”(Same Origin Policy),只能向同一域名的服务器请求数据

而新版的 XMLHttpRequest 增加了更多的功能

  • 可以设置HTTP请求的时限。
  • 可以使用FormData对象管理表单数据。
  • 可以上传文件。
  • 可以请求不同域名下的数据(跨域请求)。
  • 可以获取服务器端的二进制数据。
  • 可以获得数据传输的进度信息。

html5设备api

为了更好地为移动设备服务,HTML 5推出了一系列针对移动设备的API。

Viewport

Viewport指的是网页的显示区域,也就是不借助滚动条的情况下,用户可以看到的部分网页大小,中文译为“视口”。正常情况下,viewport和浏览器的显示窗口是一样大小的。但是,在移动设备上,两者可能不是一样大小。

html5离线存储

HTML5 提供了强大的本地化功能,使 web 应用在离线或者网络情况较差的环境下依然能正常访问,HTML5 的本地化功能主要分为 OFFLINE (离线) 和 STORAGE (存储)。

STORAGE(存储)

在HTML5以前我们会使用 cookie,在浏览器端缓存一些数据,例如:登录用户信息,历史搜索信息等等。但是cookie所支持的容量仅仅只有 4k ,也没有专门的api来操作,只能依赖一些开源的库, 这里使用 cookies.js 存储和获取cookie信息

HTML5 语义化

以往的开发方式

1
2
3
4
5
6
7
<div class="">
<div class="">
<div class="">
.....
</div>
</div>
</div>

我们在使用HTML4.1或是XHTML的开发的时候,基本上每个页面上都只有 divspan 标签, 浏览器并不知道每一个元素属于页面的那个部分。

webapp 性能优化

webapp 不像传统页面,它生命周期更长,在手机端上,硬件环境并没有pc上那么好。所以性能的优化尤为重要。 webapp的性能优化主要分为两个方面 网络请求优化页面渲染优化 , 我们对于性能优化主要通过这连个方面来处理。

关于webapp开发——移动端页面

去年的时候有写过一篇关于移动web开发的文章,经过一年的webapp开发,对于移动端页面的开发又有了一个新的看法。总结一下怎么做好一个webapp,首先我们从移动端页面开始吧。

viewport

简单来说viewport就是浏览器用来显示网页的部分(也可能是一个app中的webview),但是viewport的大小并不局限于浏览器可视区域,一般来说viewport的大小要比浏览器可视区域要大,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

atom这个IDE有点酷

最近老在各大社区上看到讨论atom编辑器,自己就去down下来试了,一下,觉得还真不错,这几天把一些配置和插件包都搞好了,正式从sublime转向atom了,这篇博客就重点介绍一下atom的使用和一些基本的插件和主题.

atom是由github团队基于web开发的,由coffee和less编写,所它的插件也是以 web技术编写,并且自定义less文件修改样式,以后我觉得需要哪些功能大可以自己开发一个插件,这个是我转向atom的一个重大原因,好了不扯淡了,开始介绍atom的基本使用了。

,