Instructions to Canary Project

Down arrow

Canary项目详解系列-1/800

Created by Lsong / @song940

Canary的前世今生

Canary项目承载的使命

站在巨人的肩膀上

开源社区, 公司前辈

ECMAScript 6/7*

generator, decorators .

Reactjs

components, server-render.

如何让枯燥的开发工作变得有趣起来?

服务端

  • 路由
  • 控制器
  • 中间件

路由

我们定义了一种简单的路由规则

METHOD REQUEST => CONTROLLER#ACTION

get / => home#index

我们来看看其他路由系统是怎样设计的?

PHP

// app/config/routing.php
use Symfony\Component\Routing\RouteCollection;
use Symfony\Component\Routing\Route;

$collection = new RouteCollection();
$collection->add('blog_show', new Route('/blog/{slug}', array(
    '_controller' => 'AppBundle:Blog:show',
)));

return $collection;
http://symfony.com/doc/current/book/routing.html

Sinatra

require 'sinatra'

get '/hi' do
  "Hello World!"
end
http://sinatrarb.com

Express

app.get('/', function (req, res) {
  res.send('Hello World!');
});
http://expressjs.com/starter/hello-world.html

Ruby on Rails

Rails.application.routes.draw do

  resources :articles

  root 'welcome#index'
end
http://guides.rubyonrails.org/getting_started.html

Canary

//
// App Routes Config
//

// home
get "/"                             => "home#index"

// address
get "/profile/address"              => "address#index"
get "/profile/address/edit"         => "address#detail"

// movie
get "/movie/:id(\d+)"               => "movie#index"
get "/movie/:id(\d+)/stages"        => "movie#stage"

控制器

最大利用OOP优势, 使用继承抽象通用逻辑

https://github.com/lsongorg/mycenter/blob/master/server.coffee
https://github.com/lsongorg/waimai/blob/master/routes/restaurant.js

class HomeController extends require('../controller') {
  *index(id){
    this.send('Hello World!');
  }
}
						

简单就是生产力

我们是如何解决样式依赖关系的?

修饰器


import Component, { style } from 'component';

@style
class Button extends Component {
  render(){
    let { text } = this.props;
    return (
      
{ text }
); } }

页面


import React  from 'react'

import Page   from '../page'
import Button from '../components/Button/Button.jsx'

  @page
  @style(Button)
  export default class TestPage extends Page {
    render() {
      return (
        
); } }

Much more

  • 服务端渲染细节
  • 有趣的组件
  • 运维服务细节

THE END

- Source code & documentation