Let’s Build |> 使用Elixir,Phoenix和React打造克隆版的Sla
Let’s Build |> 使用Elixir,Phoenix和React打造克隆版的Slack(part 1?—?Project setup)
缘起我是一个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的链接。
技术栈服务器端
前端
由于我的技术经验是使用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,使用参数 mix phoenix.new sling --no-html --no-brunch mv sling api 创建React应用使用 create-react-app初始化React App,这是一个强大的工具,零配置搭建我们的前端应用。 安装 npm i -g create-react-app 创建React App create-react-app sling mv sling web 牛叉吧,我们已经初始化好了后端的Phoenix API和前端的React App。
配置Phoenix项目首先配置数据库,开发环境下默认的数据库配置位于该文件 sling/api/config/dev.secret.exs use Mix.Config config :sling,Sling.Repo,username: "your_postgres_user",password: "your_postgres_password" 在 sling/api/config/dev.exs # contents above import_config "dev.secret.exs" 创建数据库(当前所在路径为 mix ecto.create 数据库创建完成后,启动Phoenix App 。 mix phoenix.server 访问 http://localhost:4000,正常情况会报错,原因在于我们的Phoenix App 只用做API,没有配置网页浏览相关的路由。
Phoenix已经配置完成,接下来我们配置 React App。 配置React项目create-react-app已近初始化了一个可运行的app, 另,我们将使用最新的JavaScript依赖管理工具Yarn,安装指南在此. 在这个前端应用中有许多第三方库我们需要使用,一次性全部将其安装(当前目录是 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的配置完全依赖于个人的喜好,下面是我自己用的 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 } }
配置React/ReduxReact项目有各种各样的目录结构,当然都是基于应用场景权衡的结果。就我们的项目而言,创建containers目录用于存放和redux store 连接相关的组件。创建components目录,存放其他组件。创建actions和reducers目录分别用于存放action和reducer相关的文件。创建store目录存放redux store相关的配置文件。我们着手开始吧。 创建app的入口文件 sling/web/src/index.js,这个文件需要导入redux store配置文件(稍后创建),App容器组件,并挂载到 index.html 的 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的基本配置已经完成。
到目前为止,我们的前端App和后端API还无法通讯,不过也好,本篇博文就此结束。下篇博文我们将实现前端和后端的通讯,并且添加用户账户和用户身份认证。 首发地址:http://blog.zhulinpinyu.com/2017/06/22/lets-build-a-slack-clone-with-elixir-phoenix-and-react-part-1-project-setup/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |