开发

开发discourse插件, 依赖的知识: ES6/SCSS/Ember.js/Rails/handlebars.
Ember是前端MVVM框架, 支持数据双向绑定/虚拟DOM, 模板引擎使用handlebars, 依赖jQuery(处理DOM兼容性操作), 遵循约定优于配置原则(类似Rails).

discourse 本地环境搭建

依赖: ruby, postgres, redis 需要提前安装好.

• macOS 安装Ruby2.6

  brew install rbenv; rbenv init; rbenv install 2.6.2; # discourse依赖 Ruby 2.5+

• (推荐) 用docker搭建本地 postgres, redis

  # code db.yml
  version: '3.1'
  services:
    redis:
      container_name: redis
      image: redis:alpine
      ports:
        - "6379:6379"
    postgres:
      container_name: postgres
      image: postgres:9-alpine
      ports:
        - "5432:5432"
      environment:
        - POSTGRES_USER=postgres
        - POSTGRES_PASSWORD=postgres
  # docker-compose -f db.yml up -d # 启动 postgresql/redis
  # docker restart postgres redis # 重启 postgresql/redis

git clone https://github.com/discourse/discourse.git;
# git checkout tags/v2.2.4; # 指定某个稳定的版本
code config/database.yml # 设定 postgres 数据库信息
development: # 设定正确用户名/密码
  username: name
  password: pass
  host: localhost
  host_names: # 本地论坛域名(不添加: 影响 hot reload)
    - leon.lvh.me
bundle install; # 安装依赖
rake db:create db:migrate; # 创建数据库
# rails r "SiteSetting.min_password_length=8;SiteSetting.min_admin_password_length=8;" # 设定密码最少8位
rake admin:create # 创建用户, 输入Email/password/是否管理员
# rails r "u=User.find_by_email('test@test.com'); u.password='11112222'; u.save!;" # 修改用户密码
rails s -p 8000 # 启动论坛, 访问 localhost:8000

查看全文 »

原文: Comparing Redux and Relay, 作者: Mikhail Novikov (reindex CTO & Co-founder)

注: 译文内容根据个人对Redux和Relay的使用经验而翻译, 如发现任何问题, 望指正(可留言或Email: kairyou@qq.com).

开发React应用, 有时必须要解决管理客户端state的问题. 现代应用程序不应总是等服务器的响应, 切换页面就要重新请求, 而应该让页面展现尽可能地快. 应用的状态管理层(也可称为缓存层或模型层)正是负责处理这些逻辑.

Redux和Relay在应用中就是负责这一层. 本文会用一些常见的示例代码来比较这两个库。

架构概述

Redux和Relay的灵感都源于Flux(一种架构模式用来设计应用程序, 和MVC属同类). Flux的基本思路是让数据从应用的数据存储中心(Stores)到组件(Components)始终单向流动(单向数据流). 组件调用Action创建函数(Action Creators), 将Actions发送给Store. Flux最初由Facebook提出, 但是他们并没有提供一个已集成好Flux的现成库. 之后, 开源社区很快出现了许多Flux实现, 还有更多自定义实现在闭源代码库中 :). Flux很适合作为React的数据模型, 因为它禁止数据从子组件向上传递到store, 数据的修改必须通过dispatch(action)完成.

Redux

Redux简化了Flux架构. 把Flux中多个Store的概念简化成只有一个Store.
Store的数据可以通过转换方法传给组件(provider把store的数据传给connect, 让它把这些数据传给组件).
Store可以通过reducers处理action. 最大的区别是, reducer是纯函数, 接收2个参数, 现有的state(previousState)和action, 并返回新的state.
Action, 在Flux中通常是改变state的操作, 在Redux中是函数式转换(Flux里的action是函数的形式，但在redux里是普通的js对象). 任何数据都可以储存在Redux store.

Redux是一个很小的库. Action可以通过中间件来拦截或改变, 开源社区中也有很多中间件可用. 通过中间件, 编写功能完善的Redux应用会更容易.

Relay

Relay在很多方面也受到Flux启发. 只有一个store，通过action去改变(在Relay中称为Mutations). 然而, Relay禁止开发人员直接控制Store的内容. 相反, Relay根据GraphQL查询语句去自动处理, 储存或修改服务端数据.
组件通过编写GraphQL查询片段(fragments)来描述依赖的数据, Relay会根据当前组件树中所有组件的依赖数据描述去自动优化查询(把多个组件的请求合并为1次GraphQL请求).
对Store的修改(写操作)可以通过mutation(变更)来实现, mutations在客户端和服务器端都修改数据, 保持数据一致. 不同于Redux, 在Relay中只能变更在服务端声明过的数据, 并且服务器必须有一个GraphQL服务.

Relay提供了许多很赞的功能. Relay负责所有数据的获取, 并确保所需数据无异常. Relay有完善的分页支持, 很适合类瀑布流类的场景(无限滚动). Relay mutations可以做到乐观更新(Optimistic Update), 即: 页面UI先改变, 再以服务器返回结果为准更改页面UI, 如果出错会回滚.

查看全文 »

新版npm install的时候, 可能会看到类似这样的特殊字符:
loadDep:glob-base ▌ ╢█████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟

应该是新版针对可显示特殊字符的环境故意为之, 如果希望看到下面这样的效果:
loadDep:glob-base / |#############-------------------|

OSX系统选了语言为英文: LC_CTYPE=en_US.UTF-8 npm install

OSX系统选了语言为中文: LANG= npm install

所以通用的解决办法: 在~/.zshrc或~/.bashrc里增加一行
alias npm="LC_CTYPE=en_US.UTF-8 LANG= npm"

重新加载配置, 或者重启Terminal后, 发现npm install变正常了~

选择正常, 还是非主流, 看个人喜好吧~

资源多, 比较靠谱的CDN:

• www.bootcdn.cn:
  更新快, 用的又拍云

例子: //cdn.bootcss.com/react/15.1.0/react.min.js

• www.jsdelivr.com:
  支持请求合并, 貌似有中国节点: http://git.io/vrfDQ

例子: //cdn.jsdelivr.net/g/react@15.1.0(react.min.js+react-dom.min.js)
或: //cdn.jsdelivr.net/combine/url1,url2,url3

• cdnjs.com:
  国内访问较慢, 例子: //cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js
• unpkg.com:
  也使用的cloudflare的cnd, 更新快, react官方文档cdn部分也写的这个.

资源少或更新慢大厂cdn:

• google: https://developers.google.com/speed/libraries/ (国内项目没法用)
• microsoft: http://www.asp.net/ajax/cdn
• baidu: http://cdn.code.baidu.com/
• sina: http://lib.sinaapp.com/
• 360: libs.useso.com已经停止服务, 奇舞团增加了: https://cdn.baomitu.com
• upai: http://jscdn.upai.com/
• qiniu: http://www.staticfile.org/ (不支持https, 更新/处理问题都比较慢)

如何选择靠谱的

• 国内项目: 貌似只能选bootcdn了(未使用较新js库的项目也可以选择大厂cdn). 非常可悲, 同步更新cdnjs的国内CDN, 没一个大厂能提供
  国外项目: jsdelivr/unpkg.com/cdnjs.com

测试靠谱程度, 可以用下面几个地址测试下:
http://ce.cloud.360.cn/
http://www.17ce.com/
http://tool.chinaz.com/speedtest.aspx

• 使用多个CDN(防止某个CND挂掉):

// 拿jQuery举例(cdn1挂掉, 使用cdn2)
<script src="//cdn1.com/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src=//cdn2.com/jquery.min.js><\/script>')</script>

这里主要针对node-webkit和atom-shell, nodejs下开发桌面应用也有其他可以选择(大体都是基于Chromium + nodejs), 主要这两个相对比较流行, 源码也一直保持更新. 目前node-webkit文档/例子可能多一些, atom-shell相对少一些.
详细区别什么的自己去搜吧, 自己使用中体验到的:

• node-webkit入口是html, atom-shell入口是JS;
• node-webkit功能相对多一些, 两者都可以把代码打包(一个是.nw,一个是.asar)放到应用里面;
• 即使自己写了几KB的代码, 但最终生成的程序都至少几十MB, node-webkit生成的应用比atom-shell相对小一些;
• 他们一些概念比较类似(可能方法不同), 熟悉一个后, 对熟悉另一个应该是有帮助的;

性能什么肯定没有原生的好了, 但是用一种语言就可以生成cross-platform的软件, 这好处也是显而易见的; 总之开发一些简单的小应用, 还是非常适合的, 至少不需要再去学2-3门编程语言了.

自己写了简单的例子, 源码放在: github.com/kairyou/create-desktop-app-with-nodejs
里面的脚本, 在Mac下面可以直接运行程序, 或者可以直接生成/OSX/windows/Linux三个平台的程序.

自己偏向atom-shell多一些, 不过目前两个还是都要熟悉下, 可能有些特殊的功能, 必须要使用其中一个才能满足~

这两个的源码和官方文档:
github.com/rogerwang/node-webkit
github.com/atom/atom-shell