ratchet

30 December 2014

前言

我在搜“微信消息加密Ruby版的实现”时，在http://www.jb51.net/article/49869.htm上，看到几个微信相关的Ruby开源项目:

weixin_authorize, 微信高级API实现
twitter_ratchet_rails, 集成了ratchet的实现
weixin_rails_middleware, weixin的rails中间件

在这里，我第一次看到ratchet，很好奇，就去搜索了一下，以下是探索结果。

ratchet简介

Ratchet是Bootstrap官方出品的，使用HTML‚ CSS‚ 与Javascript组件快速开发混合型(Hybrid)手机应用。其Github地址为: https://github.com/twbs/ratchet , 官方网站为: http://goratchet.com/, 中文网站: http://cnratchet.com/。

注: 一看到这个，我就知道，我大概能将自己的技术栈统一在web技术上了，无论是手机APP，还是网站，能够使用一致的、标准化的技术进行构建。从而，降低应用的复杂性，提高架构的简单性和可理解性，减少重复。总而言之，一个字，好东西。

Note: 有机会，将ratchet添加到百度cdn中, 算了，看到http://www.bootcdn.cn/包含这个库了。

实践

首先，第一件事是，引入ratchet。这里，为了和Rails后台结合，使用别人打包的资源gem包: twitter_ratchet_rails。并在Gemfile中，添加gem 'twitter_ratchet_rails'。

然后，构建基本的模板，参考已有项目中的实现，以及twitter_ratchet_rails提供的模板:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-itunes-app" content="app-id=xxx" />
    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" href="/assets/logo_appicon.png">
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
    <!-- 引入bootstrap的css的cdn源 -->
    <!-- <link href="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="http://apps.bdimg.com/libs/bootstrap-glyphicons/1.0/css/bootstrap-glyphicons.css" rel="stylesheet">
    <%= yield :head %>
    <%= csrf_meta_tags %>
    <title><%= yield :title %></title>
  </head>
  <body>
    <!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <%= yield :header %>
    </header>

    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">
      <%= yield %>
    </div>

    <footer>
      <nav class="bar bar-tab">
        <a class="tab-item <%= 'active' if controller_name =~ /articles/ %>" href="<%= root_path %>">
          <span class="icon icon-bars"></span>
          <span class="tab-label">资讯</span>
        </a>
        <a class="tab-item <%= 'active' if controller_name =~ /stocks/ %>" href="<%= asset_class_stocks_path %>">
          <span class="icon icon-info"></span>
          <span class="tab-label">行情</span>
        </a>
        <a class="tab-item <%= 'active' if controller_name =~ /calendars/ %>" href="<%= calendars_path %>">
          <span class="icon icon-list"></span>
          <span class="tab-label">日历</span>
        </a>
        <a class="tab-item <%= 'active' if controller_name =~ /sessions/ %> " href="<%= new_user_session_path %>">
          <span class="icon icon-person"></span>
          <span class="tab-label">登录</span>
        </a>
      </nav>
    </footer>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= yield :page_javascript %>
  </body>
</html>

最后，迁移或创建新的页面。这里的主要工作就是，熟悉Ratchet中提供的组件。照着样子，边测边试。搞了两天多，然后，就初步搞定了，地址为: http://m.tophold.com/

构建页面时，存在三个原则:

优先固定bar标签
将其余事物放置在.content中
设置META，seo，页面语义等，非常的重要

作为一个非前端工程师，我使用UI框架之路，就只能充分的利用框架所提供的能力。所以，从使用其提供的组件开始。组件的使用，具体可以参考http://cnratchet.com/components/。

深入研究

ratchet其实就是一些js，css，以及字体相关的文件的组合。web的基础，也就是一些js，css，和html。所以，相对而言，还是比较简单的。

分发包的结构如下:

ratchet/
├── css/
│   ├── ratchet.css
│   ├── ratchet.min.css
│   ├── ratchet-theme-android.css
│   ├── ratchet-theme-android.min.css
│   ├── ratchet-theme-ios.css
│   └── ratchet-theme-ios.min.css
├── js/
│   ├── ratchet.js
│   └── ratchet.min.js
└── fonts/
    ├── ratchicons.eot
    ├── ratchicons.svg
    ├── ratchicons.ttf
    └── ratchicons.woff

注: 这里可以看到IOS和Android的样式是分开放置的。如要分设备使用，就要考虑检查设备类型。

css

ratchet中css是使用scss编写，按功能分为如下的文件:

badges.scss : 数字标志
bars.scss : 上端的横条
base.scss : 框架的基本样式
buttons.scss : 按钮
cards.scss : 卡片样式
docs.scss : 文档样式
forms.scss : 表单样式
mixins.scss : 共享的功能模块
modals.scss : 模态框的样式
normalize.scss : 著名的重置浏览器css项目
popovers.scss : 弹出层样式
push.scss :
ratchet.scss : 组合所有scss样式的文件
ratchicons.scss : 图标样式
segmented-controls.scss :
sliders.scss : 滑动插件样式
table-views.scss :
theme-android.scss : android主题
theme-ios.scss : ios主题
toggles.scss : 开关按钮样式
type.scss :
variables.scss : 共用变量

注：稍微查阅了一下其中的代码，发现，代码行数都不是特别的长。

ratchet本身提供的图标有限，更多可以参考Font Awewome, Foundation Icon Fonts 2 , Icon Font

js

ratchet提供的js插件列表如下，相比 bootstrap中提供的12个js插件，这里提供的插件较少:

modals.js : 模态窗口
popovers.js : 弹出效果
push.js : 利用了HTML5的histroy的API和ajax，更接近原生的效果，从而实现更好的用户体验
segmented-controllers.js
sliders.js : 滑动窗口插件
toggles.js : 按钮触发相关的js

js插件的使用很简单，设置相关的属性即可，具体还是参考http://cnratchet.com/components/。

备注: 近来深入学习和了解web相关的技术，看到一个效果，大体上，也能猜出其的实现。

Troubleshooting

关于Ratchet的一些陷阱，列出如下:

Ratchet被设计成用来响应移动设备的触摸事件。为了使用鼠标触摸时间(桌面浏览和测试)，可以使用如下的选项:
- 在chrome或firefox中，启动触摸模拟(web inspector)
- 使用诸如fingerblast.js这样的js类库，只对桌面用户有用
使用push.js加载页面时，包含js的script标签并不被执行。如果想将事件处理程序附加到其他页面元素，文档级事件委托是一种常见的解决方案。
Ratchet使用XHR获取页面。出于安全性考虑，现代浏览器会在获取本地页面(即使用file://文件协议)时，阻止XHR请求。结果，Ratchet在目录当作文件打开时，就不工作了
- 通用的解决方案就是，使用本地服务器提供这些文件。至于这里的本地服务器可以是各种编程语言提供的。在ruby中，可以使用ruby -run -ehttpd . -p3000当前目录用作本地服务器内容。

备注: 这里所说的第三个问题，我一开始还没能明白，什么读取本地文件，为毛要读取本地文件？？。后来，在查看其提供的Demo时，发现字体文件不能读取，显示出来的都是些乱七八糟的东西。这里，我用了另一种方法，公共的cdn(比如)提供静态资源，就很好的处理了这个问题。

后记

等我，有空了，我要重构很多东西，删掉一些无用的东西，统一技术栈。现在，还不是很有空，手头还有工作要处理。等我有空。。。

傲娇的使用Disqus