Let’s Build |> 使用Elixir，Phoenix和React打造克隆版的Slack(part 1)

Let’s Build |> 使用Elixir，Phoenix和React打造克隆版的Slack(part 1 — Project setup)

Live Demo---GitHub Repo

缘起

我是一个Ruby程序员，最近开始学习Elixir。我惊叹于Elixir和Phoenix展示的技术魅力，并很快喜欢上了这个新东西。就像Rails之于Ruby同样，Phoenix使得Elixir变得流行起来，缘由就在于Elixir使得开发人员可以高效的编写出性能优秀，稳定性好的应用程序，而且很容易使用这些应用处理实时数据。

写这篇博文时，我只有大约一周的Phoenix使用经验。我写这篇博文的目的就是趋势本身从不一样的角度思考正在解决的问题，以期得到对这门语言和框架更深刻的理解。若是你在代码中发现任何错误或有改进的建议，欢迎给我来信或者提交pull request!

若是你和我同样也是个Elixir新手，我推荐你阅读 Programming Elixir 和 Programming Phoenix ,这两本书全面的阐述了Elixir和Phoenix的基本要点。

咱们要作什么

为了向我喜好的聊天应用Slack致敬，我将打造一个高仿版的Slack,我叫它Sling。为了让这篇博文简洁、完整、可读，我只实现Slack的部分功能，可是要实现的这部分功能足够咱们习得Phoenix的基本原理。

Slack有team的概念，而且每一个team有若干个channel。team成员可以加入到channel，channel就是聊天的地方。简化起见，咱们就不建立team这个功能了，取而代之的是咱们将建立room，每一个注册用户都能加入到room中，而且在room中聊天。

咱们会使用牛x的Phoenix Presence Module展现当前room中的在线用户。

我将尽量详尽的展现出我是如何构建这个应用的，为此我会保持小增量的git commit。而且在每次提交后留下git diff的连接。

查看当前代码

技术栈

服务器端

• Elixir 1.2

• Phoenix 1.2.1

• PostgreSQL

• Guardian

前端

• React

• React-router

• Redux

• Redux-thunk

• Redux-form

• Aphrodite

因为个人技术经验是使用Ruby构建web应用，因此熟悉Rails的读者对于我写的东西会更易于理解。我假定你熟悉JavaScript和ES6。因为这不是React 教程，因此我会尽可能解释React组件相关的逻辑，可是不会深究。

若是你尚未安装Elixir或者Phoenix，请看这里

项目结构

对于咱们要构建的应用而言，真实项目通常会建立两个独立的代码仓库，一个用于放置Phoenix API,另外一个用于放置React App。可是为了使咱们的博文清楚明了，我将代码放置在同一个仓库中。目录结构以下：

sling/
    |--- api/
        (phoenix app)
    |--- web/
        (react app)

开始吧！少年。

建立Phoenix应用

建立一个新的文件夹做为咱们的代码仓库

mkdir sling
cd sling

生成新的Phoenix应用，咱们使用Phoenix直接做为JSON API。因此不须要默认安装的asset manager, 使用参数--no-brunch；也不须要html模板和浏览器端的路由，使用参数--no-html

mix phoenix.new sling --no-html --no-brunch
mv sling api

建立React应用

使用 create-react-app初始化React App，这是一个强大的工具，零配置搭建咱们的前端应用。

安装 create-react-app命令行工具

npm i -g create-react-app

建立React App

create-react-app sling
mv sling web

牛叉吧，咱们已经初始化好了后端的Phoenix API和前端的React App。

咱们第一个正式的提交 init commit

配置Phoenix项目

首先配置数据库，开发环境下默认的数据库配置位于该文件sling/api/config/dev.exs, PostgreSQL默认用户密码均为 postgres 。安全起见咱们新建一个文件dev.secret.exs,用于存放私人的数据库配置信息，覆盖掉默认的数据库链接配置。这样一来也便于别人使用咱们的代码。将dev.secret.exs加入到.gitignore中(因为新建的配置文件是私有信息因此没必要提交)，内容以下：

sling/api/config/dev.secret.exs

use Mix.Config

config :sling, Sling.Repo,
  username: "your_postgres_user",
  password: "your_postgres_password"

在dev.exs的末尾添加 import "dev.secret.exs",这样咱们的私有配置才能生效。

sling/api/config/dev.exs

# contents above

import_config "dev.secret.exs"

建立数据库（当前所在路径为sling/api）

mix ecto.create

数据库建立完成后，启动Phoenix App 。

mix phoenix.server

访问 http://localhost:4000, 正常状况会报错，缘由在于咱们的Phoenix App 只用作API,没有配置网页浏览相关的路由。

Git Commit

Phoenix已经配置完成，接下来咱们配置 React App。

配置React项目

create-react-app已近初始化了一个可运行的app, npm start, 访问 http://localhost:3000，就能看到初始化的react app。咱们要配置本身的redux react-router, 因此删除掉web/src目录下的全部文件。

另，咱们将使用最新的JavaScript依赖管理工具Yarn, 安装指南在此.

在这个前端应用中有许多第三方库咱们须要使用，一次性所有将其安装（当前目录是sling/web）

yarn add aphrodite lodash md5 moment phoenix react-redux react-router@4.0.0-alpha.5 redux redux-form redux-thunk

你应该注意到咱们使用v4-alpha版本的react-router, 其相较于v2版本的react-router有不少重大的改变。借这个机会咱们一并学一学v4-alpha版react-router, 期待v4正式版尽快发布，若有变化到时我会更新博文。

我将使用Airbnb's styleguide,其中用到了eslint和flow，因此接下来咱们安装开发环境下用到的第三方库。

yarn add babel-eslint eslint eslint-config-airbnb eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --dev

Linting rules的配置彻底依赖于我的的喜爱，下面是我本身用的.eslintrc文件。（react/no-unused-prop-types 规则被disable掉了，缘由是和flowtype有冲突）

sling/web/.eslintrc

{
  "parser": "babel-eslint",
  "plugins": ["react", "flowtype"],
  "extends": ["airbnb", "plugin:flowtype/recommended"],
  "rules": {
    "react/jsx-filename-extension": 0,
    "import/prefer-default-export": 0,
    "react/no-unused-prop-types": 0,
    "camelcase": 0
  },
  "globals": {
    "fetch": true,
    "window": true,
    "document": true,
    "localStorage": true
  }
}

提交代码 show installed packages

配置React/Redux

React项目有各类各样的目录结构，固然都是基于应用场景权衡的结果。就咱们的项目而言，建立containers目录用于存放和redux store 链接相关的组件。建立components目录，存放其余组件。建立actions和reducers目录分别用于存放action和reducer相关的文件。建立store目录存放redux store相关的配置文件。咱们着手开始吧。

建立app的入口文件 sling/web/src/index.js, 这个文件须要导入redux store配置文件（稍后建立）, App容器组件，并挂载到 index.html 的<div id="root" />节点下。

sling/web/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './containers/App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.getElementById('root')
);

建立上面提到的redux store配置文件，引入reducers文件（稍后建立），使用redux-thunk 处理异步操做和Promises。

sling/web/src/store/index.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers';

const middleWare = [thunk];

const createStoreWithMiddleware = applyMiddleware(...middleWare)(createStore);

const store = createStoreWithMiddleware(reducers);

export default store;

建立reducer根文件sling/web/src/reducers/index.js，这个文件用于汇总其余的reducer文件,可是如今咱们只须要用redux-form使reducer 能正常工做便可。咱们不直接返回配置参数的combineReducers函数，相反，当logout时咱们强制返回带undefined参数的appReducer,这样就会强制初始化全部reducer的state（也就是强制清理登出用户的redux state,不会让其污染下一个login用户的state）

sling/web/src/reducers/index.js

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';

const appReducer = combineReducers({
  form,
});

export default function (state, action) {
  if (action.type === 'LOGOUT') {
    return appReducer(undefined, action);
  }
  return appReducer(state, action);
}

如今咱们来建立App组件，在这个组件中咱们要到了v4版的react-router 来配置页面路由。目前咱们只有两个路由，一个是Home路由,另外一个是404页面。

sling/web/src/containers/App/index.js

// @flow
import React, { Component } from 'react';
import { BrowserRouter, Match, Miss } from 'react-router';
import Home from '../Home';
import NotFound from '../../components/NotFound';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Match exactly pattern="/" component={Home} />
          <Miss component={NotFound} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

目前咱们的Home页面只是简单的组件

sling/web/src/containers/Home/index.js

// @flow
import React from 'react';

const Home = () => (<div>Home</div>);

export default Home;

NotFound组件

sling/web/src/components/NotFound/index.js

// @flow
import React from 'react';
import { Link } from 'react-router';

const NotFound = () =>
  <div style={{ margin: '2rem auto', textAlign: 'center' }}>
    <p>Page not found</p>
    <p><Link to="/">Go to the home page →</Link></p>
  </div>;

export default NotFound;

好，redux的基本配置已经完成。

查看commit的代码

到目前为止，咱们的前端App和后端API还没法通信，不过也好，本篇博文就此结束。下篇博文咱们将实现前端和后端的通信，而且添加用户帐户和用户身份认证。

首发地址：http://blog.zhulinpinyu.com/2017/06/22/lets-build-a-slack-clone-with-elixir-phoenix-and-react-part-1-project-setup/