使用Rails5构建简单的IM

Rials5带来了很多新的功能,能让我们更加容易地书写web app, json API的接口,但最激动人心的应该是actioncable,长链接websocket变得如此简单,来我们用30分钟来写一个简单的即时通讯的web app,前端用JS,服务端用Ruby。actioncable的外链:(https://github.com/rails/rails/tree/master/actioncable

这个应用的功能是这样的,打开网页,注册,或者已注册用户登录,新建聊天室,或进入已有的聊天室,同一个聊天室容纳多个人,一个聊天室内所有人会收到新的聊天信息的推送。

1. 建立应用,User建模,数据迁移

环境:Ruby Version: 2.3.3,Rails Version: 5.0.2

打开ternimal, cd到相关目录下,建立工程

先不写测试了,所以没有加入自带的测试框架

打开Gemfile

这个Device是用户认证用的,简化注册登录流程,外链:https://github.com/plataformatec/devise

bootstrap主要是样式,scss,面向对象的css,可以嵌套使用,而且默认提供了一部分组件样式。redis内存是数据库,应为instance message需要及时响应,mac上brew install redis,完成以后

增加scss样式表,同时删除原来的css

写入@import “bootstrap”;

User建模

增加约束,进入网站其他页面,必须是认证用户

写入

2. 聊天室

检查chat_room.rb,确认看到belongs_to :user
检查users.rb,确认看到has_many :chat_rooms, dependent: :destroy

聊天室需要一个标题,在用户登录以后,选择聊天室时可见,而且聊天室是由用户创建的,所以和创建他的用户绑定,如果创建他的用户被删除了,那么聊天室的内容也会被删除,类似于SQL中的DELETE CASCADE效果,完了记得映射model到数据库migrate操作。 继续阅读使用Rails5构建简单的IM

Reactive-Native框架的简单尝试(Part I)

从Reactive-Native的名字说起
字面意思,Reactive响应式,Native原生。就如JSPatch下发热更新修复线上问题,本质上还是利用OC的runtime特性,把JS解析并注入运行时,比如在class中加属性就是改变对象模型的offset,加方法就是在method list中增加对应的selector并映射到相关的method,改变方法Method Swizzling等等,总之runtime能做的事情,解析这段JS文件以后也可以执行,和原生的代码一样的性能,而不是在webview中去渲染,体验更佳流畅,这就是Native。经过FB大神们的封装,JS的写法不再是原生的JS,而是和React如出一辙(http://reactjs.cn/react/index.html),这就是Reactive。

接下来我们来试一下官方的几个basic demo
安装,自己看,要哪些东西(https://facebook.github.io/react-native/docs/getting-started.html)注意执行,react-native run-ios的时候,如果闪退,检查下网络配置,因为本地会有node.js的服务,全局代理冲突了会无法访问。
写一个hello world,文档(https://facebook.github.io/react-native/docs/tutorial.html)import, from, class, extends, and the () => 这些语法都是ES2015标准,<Text>Hello world!</Text>就是JSX,XML和嵌入JS的写法,类似于Rails当中的erb文件,嵌入式,<Text>是RN框架封装好的组件,注意RN框架有一些列已经封装好的组件,熟悉他们的特性也就是掌握这个框架的过程。在RN中所有东西都是组件,就算你要新建一个类也必须是extends Component,另外AppRegistry表明是root组件。完成以后cd到项目文件夹下的ios目录,用Xcode打开,看到AppDelegate.m,定位到application:didFinishLaunchingWithOptions:这个方法,在应用打开的时候加载了.js文件,并生成RCTRootView作为root view,看下node.js的server在干什么,浏览器中打开http://localhost:8081/index.ios.bundle,能看到相关的JS代码,由JavaScriptCore framework加载并执行。后来debug中每次cmd+R都是重新加载并执行应用开启时的动作。

再往下看文档你会发现,每一个RN框架中的class其实都继承于Component,而一个组件Component是由props和state控制的,写下这两个概念

Props:大多数组件可以被自定义创建,当然需要不同的初始化参数,这里叫做Props,看到demo(https://facebook.github.io/react-native/docs/props.html#content)<Greeting name=’Rexxar’ />,组件创建需要参数name, 然后在Greeting这个Class中访问这个参数需要从props进入,this.props.name。只在初始化组建的时候使用,不能改变的。

State:Props在组件的生命周期中是固定的,如果组件的状态发生改变,比如输入框输入新的内容,那么我们就要使用state来追踪这些改变。一般情况下,我们在constructor中初始化state,看到https://facebook.github.io/react-native/docs/state.html#content,this.state = {showText: true};,这里的state是个bool值。你可以选择一个状态容器state container比如Redux,但如果之前没有接触过,就会有学习成本,脑中迅速闪过一个个JS大神的名字,哈哈。

界面布局,总体来说,用JS来写,CSS可以嵌套,内容与样式分离和web app一个套路,还有flexbox流式布局等等,用到了就去查看文档和实例吧。简单过一下,TextInput组件,依赖state的改变,每次输入以后自动刷新页面。ScrollView会一次把数据都显示在页面上,没有复用的效果。ListView有点像UITableView可以复用,但也需要Datasource来初始化。网络层使用Mozilla的Fetch框架,你也可以用Ajax,支持WebSocket。有通用的Navigators,也有iOS定制的Navigators,那个页面的堆栈要自己来维护,推入推出操作要手动写,淡然也有现成的东西(https://github.com/react-community/react-navigation)。在iOS10.2的iPhone6上运行官方的demo,我看到那个导航栏在iOS上是看不到的,只是一行text,这种情况也是我担心的风险,OS升级带来的bug,所以RN要更新及时啊~

说了这么多,我们从头到尾写一个业务相关的demo吧,包括login,拿到token,传递token再次发起请求,解析数据,渲染布局等等。开始 继续阅读Reactive-Native框架的简单尝试(Part I)