Hyper → Highspeed → Development

Hyper→
Highspeed→
Development
@yoppiblog
Akatsuki.inc

13年3月25日月曜日

@yoppiblog

• エンジニア(フロントエンド/バックエ
ンド/インフラ)

•
• ソーシャルゲーム開発
• Ruby(Rails)/js


About Social Game

• 莫大な量のトラフィック
• が、許されない遅延
• しかも、短期間にトレンドが変化
• その中でもコンスタントに質の高いプロダクト
を作らなければならない


開発速度を上げクリエイティブに専念したい


How?


1. チームで実践できるアジャイル

• 「アジャイルプラクティス」
2. Case Study

• GitHubコードレビュー
3. RailsでHighSpeedで開発する

• フロント/バックエンド/インフラ
• 便利gemを使いこなす
• Rails4を見据えた構成


2. Case Study

3. RailsでHighSpeedで開発するには

• フロント/バックエンド/インフラ


• まずはチームの戦闘力を測る
• いますぐできること
• 習熟していけること
• 機能しないもの



• 「成果を上げるのが仕事」
• 「変化に付いていく」
• 「いつでもリリース」
• 「作る前から使う」
• 「コードで伝える」
• 「メンターになる」
• 「コードをレビューする」
• ...

2. Case Study

• Team
• エンジニア: 2人
• ディレクター: 1人
• デザイナ: 1人
• チーム戦闘力
• エンジニア両名ともRails歴2年以上、ソシ
ャゲ開発経験1年以上

• フリーザ様くらいは...

2. Case Study

• 朝会(standup meeting)
• 進捗確認/共有
• Redmine
• タスク管理/Product Backlog
• gitﬂow
• コードレビューの下地
• GitHub business plans
• コードレビュー場

Why not
GitHub Enterprise(GHE)?
• GHE
• サーバの面倒見なければならない
• お高い...(最低20人からスタート$5000)
• GitHub Business
• Githubの新機能をすぐに使える
• 社内にgitサーバをミラーリングしている

閑話休題


2. Case Study

• コードレビュー
• 複数人で開発する上で一番重要
• よりプロダクトの質を上げようという
意識付
• git-ﬂow
• 必ずfeatureブランチを切ってpull
request
• そのタイミングでコードレビュー

2. Case Study - git ﬂow

feature

develop

feature


2. Case Study - git ﬂow

pull request

develop
code review
pull request


2. Case Study - GitHub

• 口頭でレビュー
• 明らかなバグがある場合「バグがあるから直し
て」は言いやすい

• ただ、読みにくいコードを書いていて直してほ
しい場合だとどうしても感情が入りがち


2. Case Study - Code Review on GitHub

• GitHub上でコードレビューする
• コミット一つ一つやコードの特定の行にコメン
トを残せる

• 「この行はこのモジュールと整合性がとれてい
なから修正お願いします」

• コーディング規約違反/悪い変数名etc...
• 「コードを憎んで人を憎まず」を実践できる


2. Case Study - GitHub



2. Case Study

3. RailsでHighSpeedで開発する

• フロント/バックエンド

開発速度を上げるには?

• リファクタリング可能である
• CIを回す
• モダンな開発を徹底する
• モダンなコーディング方法
• モダンなライブラリ(gem)を取り入れる
• 本番環境で動かしてプロダクトと呼べる。早期に本番
環境を構築する


リファクタリング可能なプロダクト

• ユニットテスト(spec)が存在する
• pendingをコミットしない
• 常にgreen
• ローカルで常にユニットテストが実行される状況
を作っておく

• redになることをすぐに検出


リファクタリング可能なプロダクト

• Railsでテスト環境を構築するgem
• rpec, rspec-rails
• factory_girl_rails
• guard, guard-rspec
• webmock
• timecop
• capybara
• rr
• spring

guard 'rspec', spring: true do
...
end
ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
#require 'rspec/autorun'
require 'factory_girl_rails'
require 'simplecov'
require 'simplecov-rcov'

SimpleCov.formatter = SimpleCov::Formatter::RcovFormatter
SimpleCov.start

if defined?(Spring)
Spring.after_fork do
FactoryGirl.reload
end
end


CIを回す

• プロジェクト初日からJenkinsを導入
• 自動テスト/自動カバレッジ計測
• クリーンな環境でテストするので開発環境と
の違いにより漏れたバグ発見

• カバレッジは自己満テストされていない箇所
を発見

• staging環境に自動デプロイ
• 本番環境で、必ず動かない何かがある
• それを早期に発見することが目的

モダン開発 - フロントエンド

• ソシャゲもリッチ化しておりjsを書く量が増加
• 頑張って生js書く...
• 凄腕JSerがいればメンテも可能か
• 平凡なjs使いは...


S CoﬀeeScript
+



• CoﬀeeScript
• チーム内でそこそこのRuby力なら誰が書いて
もそれなりのコードになる

• メンテンナス/リファクタリングもより簡単に
• Backbone.js
• コード量を削減するのではなく、コーディング
規約のように書き方を統一的に

• Viewでのイベントの貼り方
• Modelでのデータの定義の仕方

resetBpgage: function(bp) {
var n, i, ref, results;
_results = [];
for (n = i = ref = 1 + bp; ref <= 3 ? i <= 3 : i >= 3; n
= ref <= 3 ? ++i : --i) {
results.push($("#bp-gage-" + n).attr("disabled",
true));
}
return results;
}

resetBpgage: (bp) ->
$("#bp-gage-#{n}").attr("disabled", true) for n
in [1+bp..3]



• jsライブラリが増加
• jquery
• backbone
• underscore
• ...
• 有名どころのjsライブラリは、rails-xxxという
gemが用意されている

• 自分で書いたjquery-plugin等も管理したい場合
できない



• bowerで管理する
• Twitter社が作成しているパッケージ管理ツール
• Node製
• gemに依存しないので、自由に更新したり、追
加可能

• GitHubのリポジトリや、gistに貼ったスクリプ
トからなんでも管理可能


$ npm install -g bower

// .bowerrc
{
“directory”:“vender/assets/components”
}

// component.json
{
“name”:“Project Name”,
“dependencies”: {
“underscore”: “~1.4.4”,
“backbone”: “~0.9.10”,
“jquery.clickex”: “https://gist.github.com/yoppi/
4942811/raw/3b235944b9d9abf82199c437af0170745c45d4cc/
jquery.clickex.js”
}
}


$ bower install

# Asset Pathを通す(config/application.rb)
config.assets.paths << Rails.root.join('vendor', 'assets',
'components')

# assets/javascripts/application.js
//= require underscore/underscore-min
//= require backbone/backbone-min
//= require jquery.clickex/index



• デザインもリッチに...
• アイコン数増えて手動でsprite作る...?
• 似たようなCSS使いまわしたいけどコピペ改
変...?



• compassで楽をする
• 自動でsprite画像を生成
• mixinを簡単化


# Gemfile
group :assets do
gem 'compass-rails'
end

# app/assets/application.css.scss
@import "sprites/*.png";
@include all-sprites-sprites;
$sprites: sprite-map("sprites/*.png");

<span class="icon-rare-n"></span>


モダン開発 - バックエンド

• Controllerをよりスッキリと書く
• 揮発性データ/重要ではないが参照されることが
多いデータを扱う

• アクションをtriggerにバックグラウンドで動く非
同期処理


モダン開発 - バックエンド(Controller)

• action_args
• アクションに必要なパラメータを仮引数で定義
する

• そのアクションが必要なパラメータが一目でわ
かる

• params[:key]を書かなくてすむようになる
• デメリット
• ﬁlterでは書けないので、ﬁlterを多様すると統
一性がなくなる

• とはいえ全体的にすっきりするので使ったほう
が楽になる

# Gemfile
gem 'action_args'

class WeaponsController < GameController
def index(page=nil)
@weapons = current_user.weapons.page(page)
end

def show(id)
@weapon = current_user.weapons.find id
end
end


モダン開発 - バックエンド(NoSQL)

• 揮発性データ
• ユーザデータ
• イベント
• エンカウント情報
• お知らせ
• etc...
• 参照される頻度が高く集計が必要
• ランキングデータ
• イベントデータ

モダン開発 - バックエンド(redis)

• memcahcedと違いデータ構造を保持できる
• List
• 未読お知らせ
• Hash
• 友達間でのボスエンカウント情報
• Sorted Hash
• イベントランキングデータ


モダン開発 - バックエンド(redis)

• Railsで使うには
• redis-objects(https://github.com/
nateware/redis-objects)

• ohm(https://github.com/soveran/ohm)
• 多機能で、少し使いにくかったのでredisだけ使
用して独自の薄いmoduleを作成して使用してい
る(https://gist.github.com/yoppi/
b3b911977c0b1a3b8f6d)


# app/models/user_status.rb
class UserStatus
include Redisable
...
end
module Redisable
def self.included(base)
base.extend ClassMethods
base.send :include, InstanceMethods
base.send :include, KVSKey
end

module ClassMethods
attr_accessor :redis_server
def redis
n = redis_server.presence || :game
RedisConf.conn(n.to_s)
end
end
module InstanceMethods
...
end


モダン開発 - 裏方で支えてくれるgem達

• annotate
• モデルに自動でカラム、index情報を挿入
• schema.rbを見ることなくmodelでの作業が実
現
• bullet
• N+1問題をアラート
• turbo-sprockets
• asset precompileを高速化
• pry-nav, pry-rails
• rails-erd ER図を自動生成

モダン開発 - バックエンド(非同期処理)

• ユーザのアクションに応じて発生
• その場で処理していると応答時間が長くなるので
バックグラウンドでタスクを実行させる

• job queueを使う


Sidekiq


モダン開発 - バックエンド(非同期処理)

• sidekiq
• resqueと同じjob queueライブラリ
• 良いところ
• Resque互換API
• Thread model
• 大量のスレッドをたちあげてマルチコアを
活かせる

• 悪いところ
• メモリリーク等によるプロセス肥大化に弱い
• スレッドセーフじゃないコードは向かない

# Gemfile
gem 'sidekiq'
class RaidBossCleaner
include Sidekiq::Worker

def perform(raid_boss_id)
#...
end
end

RaidBossCleaner.perform_async(raid_boss.id)


まとめ

• 積極的にコードレビューする
• 何は無くともCI
• その時にプロジェクトにあったモダンな技術を取り入
れていく


Hyper → Highspeed → Development

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Viewers also liked

Viewers also liked (9)

Similar to Hyper → Highspeed → Development

Similar to Hyper → Highspeed → Development (20)

Hyper → Highspeed → Development