手机百度前端工程化之路

本文将围绕我半年来在移动前端工程化做的一些工作做的总结,主要从 localstorage缓存和版本号管理模块化静态资源渲染方式 三个方面总结手机百度前端一年内沉淀的解决方案,希望对大家移动开发有所帮助。

一年前存在的问题

可能因为之前项目节奏紧,人力不足原因,一部分phper承担了前端的工作,于是暴漏了一些问题。

粗暴的一刀切

从第一次在厂子写代码开始,就被前辈告诉移动页面,所以的静态资源都要内嵌,即写在scriptstyle内,这样的好处是,网络情况不好的时候,减少http请求。因为2G等网络不稳定的情况下,多开一个http请求,对手机资源消耗是巨大的,比如我们在手机信号不好的地方,访问网络,耗电量会急剧增高。

但是随着3G,甚至4G的普及,实际统计显示,手机百度上2G用户不到30%,所以上面提到的这种一刀切的方案是不妥的。

不成规矩

第二个问题是没有规范和模块化的问题。大家写码都是 意识流 ,除了都是用zepto.js之外,没有沉淀下模块。碰到以前写过的代码,都是ctrl+c + ctrl+v。这种粗放的方式,虽然可以暂时解决问题,但是当出现之前的一段代码不能满足需求的时候(比如新版app发布,之前的代码需要做兼容和升级),需要遍历所有的代码,挨个修改,麻烦!

高度耦合的工作流程

第三个问题是前端角色问题,现在组内的开发是前后端分离的,使用smarty模板,因为产品是hybridAPP,所以较传统前端,增加了客户端RD的联调成本。前端几乎都是在联调和等待的状态,跟后端联调smarty数据接口和客户端联调js接口。有时候必须要等接口出来联调通过了之后,才能继续写码,造成了人力的浪费。如何解放前端人力,解决开发联调耦合的问题迫在眉睫。

前端在开发中被耦合在联调中

引入FIS解决方案

FIS 是厂子用的一套前端集成解决方案,从开发、调试到打包上线各个环节都覆盖了。用成龙大哥的话就是:“抱着试一试的心态,后来发现很黑很亮很柔。。。不管自己用,还推荐给其他团队使用。”

Fex那边很多文章在说FIS,我自己也写过一篇《FIS和FISP的使用心得》,所以这里就不赘余,直接重点说下我基于FIS做的一些解决方案。

解决联调成本

第一部分提到的高度耦合的工作流程,分别使用fis本地联调和chrome扩展来切断phper、crd跟fe的联调线路,达到提前自测,提前跑通整个流程。

FIS本地调试

FIS的本地调试功能可以用于解决phper和FEer的问题,分别有模拟smarty模板数据,模拟Ajax接口等功能。我们将rewrite规则和联调的模拟数据,分别写在了server.conftest文件夹

kindle paperwhite2 越狱后优化

上篇已经说了怎么越狱,因为我的pw2是日版的,发现很耗电,删除了很多书了,还是三四天就开始出没电报警了。通过越狱后可以关掉索引,这样耗电量就小好多了,到现在一周了,电量还没消耗掉50%(最近一天看书2小时左右),这对于我来说已经很满意了。

ssh登录kindle

按照上篇操作,越狱之后 ,在搜索输入框内输入;711 就可以看到自己现在wifi的ip。

生成SSH密钥

为了每次方便,我使用了puttygen.exe生成了ssh密钥。操作跟github的一样,打开puttygen.exe,点击Generate 然后鼠标在key下面来回晃动,生成一个key,将生成的key复制,保存为:authorized_keys。点击save private key,将生成的密钥保存在硬盘上,例如:c:\private-key-for -kpw.ppk

usb连上kindle,放在usbnet/etc文件夹下。

SSH连接kindle

按照上篇中【安装USBNetwork】操作,打开wifi连接ssh。使用;711查询出kindle在现在网络的ip。

打开winscp,新建一个ssh会话,例如:sftp://192.168.xxx.xxx,用户名是root,端口22,用户密钥文件,选择上面保存的ppk地址,例如c:\private-key-for -kpw.ppk

然后点击登录,就可以登录kindle了。

关闭索引

kindle的索引是不停的在后台建立的,当书籍比较多或者书比较大的情况下,一般会碰见卡索引的问题,这时候需要关闭索引了,减少耗电!个人认为索引是比较鸡肋的功能。因人而异哈~

ssh连上kindle之后,执行

kindle paperwhite2 5.4.2越狱

买了kindle有一段时间了,发现电池并没有官方说的那么给力,我的pw2是从日本托朋友代购的,发现充电满了一天就差不多掉1/3的样子,曾经打电话给国内的亚马逊寻求帮助,但是国内亚马逊以国内还没上线为由没给我处理,要我自己到日亚提问?!

上网查了下,听说关掉索引会解决这个问题,于是我就一直琢磨这怎么越狱。

kindle越狱工具

我的越狱工具是从mobileread下载的:http://www.mobileread.com/forums/showthread.php?t=186645

kindle越狱

首先解压上面下载的kindle-jailbreak.zip越狱工具,得到三个文件:

  • bridge.sh
  • jb.sh
  • updatejb$(cd mnt && cd us && sh jb.sh).bin

将这个这三个文件copy到kindle的根目录下,然后断开USB连接,返回kindle[主页],点击[菜单]中的[设置],进入设置页面之后,再点击[菜单]选择[更新设备],这时候会执行bin文件,过一会儿之后,你就会在这个界面下面看到

JAILBREAK

就表示已经越狱成功了

安装启动器KUAL

安装插件之前需要安装KUAL作为启动器。启动器下载地址:http://www.mobileread.com/forums/showthread.php?t=203326

iOS使用schema协议调起APP

在iOS中,需要调起一个app可以使用schema协议,这是iOS原生支持的,并且因为iOS系统中都不能使用自己的浏览器内核,所以所有的浏览器都支持,这跟android生态不一样,android是可以自己搞内核的,但是iOS不行。

在iOS中提供了两种在浏览器中打开APP的方法:Smart App Banner和schema协议。

Smart App Banner

即通过一个meta 标签,在标签上带上app的信息,和打开后的行为,例如:app-id之类的,代码形如:

1
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

具体可以看下开发文档:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

今天Smart APP Banner不是我们的主角,我们说的是schema

使用schema URL来打开iOS APP

schema类似自定义url协议,我们可以通过自定义的协议来打开自己的应用,形如:

1
2
3
4
5
6
7
myapplink://
# 例如 facebook的
fb://
# itunes的
itms-apps://
# 还有短信也是类似的
sms://

如果要打开一个app,最简单的方式是通过一个链接,如我们在html中这样写:

1
<a href="myapplink://">打开我的app</a>

当用户点击链接的时候就可以打开对应的app。

绑定click事件

但是实际中我们更多的情况是绑定事件,比如做个弹层啥的,不能一味的用a标签啊,所以可以通过两种方式来解决:location.hrefiframe

  • location.href,简单,但是容易出现问题,比如没有安装可能会跳转啦。
  • iframe,比较复杂,需要创建一个iframe,然后把schema扔给src

iframe的方式是开发中常用的,但是他也有一些问题:

  • 我们没很好的方式来判断是否打开了app
  • 会引起history变化
  • 因为引起history变化,所以一些webview会有问题,比如:我查查,打开一个页面,如果有iframe,选择在safari中打开,实际打开的是iframe的页面
  • 如果页面暴漏给了android系统,那么也会出现页面打不开,之类的问题
  • 如果没有app,调起不成功,ios的safari会自己弹出一个对话框:打不开网址之类的提示

所以现在的问题是:如何知道iframe已经打开了某个app,即解决iframe打开app回调

vps迁移记录和linux命令

因为之前的乐谷云集找不到老巢了,官网都挂了,网上说是跑路了,虽然之前有人联系过我说是有他们公司接管,但是等出现问题联系的时候,却是找不到人。所以决定更换vps。简单记录下用到的这次vps迁移用到的命令。

新的vps是用的centos 32。

登陆后更换密码

连上ssh之后,第一件事情就是更换root密码,用到的命令是passwd

连续两次输入新的密码就可以。

添加新用户www

passwd www 继续数据www的密码。就可以添加

安装软件包命令Yum

ubuntu的包管理软件是app-get,centos的包管理软件是yum,因为我的vps是centos,所以使用yum

1
2
3
4
# 安装
yum install xxx
# 删除
yum remove httpd

因为我使用的是lnmp,所以对于默认安装的apache可以删除,使用yum remove httpd

使用screen来管理对话

经常就是遇见网络连接不好,ssh中断,那么执行的程序就不知道会不会成功,所以有了screen。如果使用screen --help没有命令,那么需要安装下:

yum install screen

screen常用命令

1
2
3
4
5
6
7
8
# 创建screen对话
screen -S lnmp
# 查看现在运行的screen
screen -ls
# 读取某个screen
screen -r lnmp
# 退出screen,在当前screen中执行exit
exit

五个你必须知道的javascript和web debug技术

在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。

  1. Weinre移动调试
  2. DOM 断点
  3. debugger断点
  4. native方法hook
  5. 远程映射本地调试

Weinre

在移动上面开发调试是很复杂的,所以就有了weinre。安装weinre可以实现pc来调试手机页面,所以对于移动开发调试是很重要的哦~

http://people.apache.org/~pmuellr/weinre/docs/latest/images/weinre-demo.jpg

安装weinre

weinre可以通过npm来安装:

1
npm install -g weinre

安装完之后,可执行下面的命令来启动:

1
weinre --httpPort 8080 --boundHost -all-

利用livestyle和chrome实现双向样式修改

最近看老外的ppt,看到了句话:

Use tools. not rules!

所以今天介绍个利器:liveStyle,liveStyle是Emmet团队开发的,Emmet就是大名鼎鼎的zen coding啊。

其实在订阅的weekly里面早就介绍过livestyle,真正用起来还是看了上面老外的这个ppt,试用了下liveStyle,结果一下子就喜欢上了,如果你开发遇见了下面的问题就可以使用liveStyle了:

  1. 在chrome DevTools中修改了样式,想同步到css文件中
  2. 修改了css文件,不想刷新chrome,就可以实时看到效果

嗯,livestyle解决了这两个问题,提高了开发效率!

livestyle安装

安装sublime text的liveStyle插件

package control搜索livestyle就可以了,或者去官方下载

安装chrome扩展

通过这个网址,安装livestyle,如果打不开,可能需要准备梯子,你懂的~ 感谢裆~

安装后,在chrome中按F12打开DevTools就可以看到在console后面多了个LiveStyle面板。

使用livestyle

  1. 用sublime text 打开一个css文件,例如a.css
  2. 随便打开个网址,然后F12 切换到LiveStyle
  3. 选中Enable LiveStyle for current page,这时会把页面的所有css都列出来
  4. 选择一个需要替换的css,在下拉框中选择要替换掉的sublime打开的css文件,例如:a.css;或者点击add file按钮
  5. 这时候在sublime中修改a.css,就可以在chrome中实时看到效果;在chrome修改样式,也可以将修改同步到a.css文件中

推荐nodeppt:使用markdown语法来写网页ppt

nodePPT@三水清基于nodejs来写的网页PPT,之前的版本仅仅是html语法,现在可以支持通过markdown来写网页ppt了。

nodeppt Demo

查看demo:http://qdemo.sinaapp.com/

安装

nodeppt

1
npm install -g nodeppt

使用nodeppt命令行

启动

1
2
3
nodeppt start -p port
# or
nodeppt start -p port -d path/for/ppts

创建

支持markdown语法快速创建网页幻灯片。

1
nodeppt create ppt-name

谈敏捷开发

这年头不做敏捷开发都不好意思说自己是做软件开发的。很多人都知道敏捷开发或者项目就在敏捷开发中,但是越来越多的人对敏捷开发表示不理解了。我经常听身边的人问:敏捷是什么?究竟什么才是敏捷开发?难道敏捷开发就是这样吗?

这就跟早上正常点上个班,周末加个班就喊“狼性”是一个道理:很多人认为早上开站立会就是敏捷了!

敏捷开发和每日站会的关系

如果要问:敏捷开发和站会是什么关系?我想说:的确有关系,但要知道不是你把敏捷的流程都走一遍就真的敏捷了。

scrum会议可以分为:sprint计划会,每日站会,评审会和回顾会。

博客迁移到github

用了好久wordpress,从开始用别人的主题,到后来自己做wordpress主题,博客也有小半年没更新了。其实很早就有迁移的想法了,但是一直很懒,这次趁着数据库出错,就迁移到github了。

这样一来写博客,写wiki,甚至写ppt都用markdown语法,关于用markdown语法写ppt,可以看下我写的一个nodeppt,可以方便用markdown语法来写网页版的幻灯片,效果还是不错哈。

这次使用的是hexo,hexo是台湾同胞开发的,用起来还是很顺手的。之前wordpress的内容,可以通过xml导入。

本来300多篇的文章,从08年在学校开始,从2fool.cn开始,一直到现在的js8.in,经历了5个多年头了,当然文章也每次迁移少一部分,这次迁移只保留了不到200篇。