Hyper → Highspeed → Development

2,508 views

Published on

2013/3/25 http://atnd.org/events/37175 の資料です。

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,508
On SlideShare
0
From Embeds
0
Number of Embeds
391
Actions
Shares
0
Downloads
13
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Hyper → Highspeed → Development

  1. 1. Hyper→ Highspeed→ Development @yoppiblog Akatsuki.inc13年3月25日月曜日
  2. 2. @yoppiblog • エンジニア(フロントエンド/バックエ ンド/インフラ) • • ソーシャルゲーム開発 • Ruby(Rails)/js13年3月25日月曜日
  3. 3. About Social Game • 莫大な量のトラフィック • が、許されない遅延 • しかも、短期間にトレンドが変化 • その中でもコンスタントに質の高いプロダクト を作らなければならない13年3月25日月曜日
  4. 4. 開発速度を上げクリエイティブに専念したい13年3月25日月曜日
  5. 5. How?13年3月25日月曜日
  6. 6. 1. チームで実践できるアジャイル • 「アジャイルプラクティス」 2. Case Study • GitHubコードレビュー 3. RailsでHighSpeedで開発する • フロント/バックエンド/インフラ • 便利gemを使いこなす • Rails4を見据えた構成13年3月25日月曜日
  7. 7. 1. チームで実践できるアジャイル • 「アジャイルプラクティス」 2. Case Study • GitHubコードレビュー 3. RailsでHighSpeedで開発するには • フロント/バックエンド/インフラ • 便利gemを使いこなす • Rails4を見据えた構成13年3月25日月曜日
  8. 8. 1. チームで実践できるアジャイル • まずはチームの戦闘力を測る • いますぐできること • 習熟していけること • 機能しないもの13年3月25日月曜日
  9. 9. 1. チームで実践できるアジャイル13年3月25日月曜日
  10. 10. 1. チームで実践できるアジャイル • 「成果を上げるのが仕事」 • 「変化に付いていく」 • 「いつでもリリース」 • 「作る前から使う」 • 「コードで伝える」 • 「メンターになる」 • 「コードをレビューする」 • ...13年3月25日月曜日
  11. 11. 1. チームで実践できるアジャイル • 「成果を上げるのが仕事」 • 「変化に付いていく」 • 「いつでもリリース」 • 「作る前から使う」 • 「コードで伝える」 • 「メンターになる」 • 「コードをレビューする」 • ...13年3月25日月曜日
  12. 12. 1. チームで実践できるアジャイル • 「アジャイルプラクティス」 2. Case Study • GitHubコードレビュー 3. RailsでHighSpeedで開発する • フロント/バックエンド/インフラ • 便利gemを使いこなす • Rails4を見据えた構成13年3月25日月曜日
  13. 13. 1. チームで実践できるアジャイル • 「アジャイルプラクティス」 2. Case Study • GitHubコードレビュー 3. RailsでHighSpeedで開発する • フロント/バックエンド/インフラ • 便利gemを使いこなす • Rails4を見据えた構成13年3月25日月曜日
  14. 14. 2. Case Study • Team • エンジニア: 2人 • ディレクター: 1人 • デザイナ: 1人 • チーム戦闘力 • エンジニア両名ともRails歴2年以上、ソシ ャゲ開発経験1年以上 • フリーザ様くらいは...13年3月25日月曜日
  15. 15. 2. Case Study • 朝会(standup meeting) • 進捗確認/共有 • Redmine • タスク管理/Product Backlog • gitflow • コードレビューの下地 • GitHub business plans • コードレビュー場13年3月25日月曜日
  16. 16. Why not GitHub Enterprise(GHE)? • GHE • サーバの面倒見なければならない • お高い...(最低20人からスタート$5000) • GitHub Business • Githubの新機能をすぐに使える • 社内にgitサーバをミラーリングしている13年3月25日月曜日
  17. 17. 閑話休題13年3月25日月曜日
  18. 18. 2. Case Study • コードレビュー • 複数人で開発する上で一番重要 • よりプロダクトの質を上げようという 意識付 • git-flow • 必ずfeatureブランチを切ってpull request • そのタイミングでコードレビュー13年3月25日月曜日
  19. 19. 2. Case Study - git flow feature develop feature13年3月25日月曜日
  20. 20. 2. Case Study - git flow pull request develop code review pull request13年3月25日月曜日
  21. 21. 2. Case Study - GitHub • 口頭でレビュー • 明らかなバグがある場合「バグがあるから直し て」は言いやすい • ただ、読みにくいコードを書いていて直してほ しい場合だとどうしても感情が入りがち13年3月25日月曜日
  22. 22. 2. Case Study - Code Review on GitHub • GitHub上でコードレビューする • コミット一つ一つやコードの特定の行にコメン トを残せる • 「この行はこのモジュールと整合性がとれてい なから修正お願いします」 • コーディング規約違反/悪い変数名etc... • 「コードを憎んで人を憎まず」を実践できる13年3月25日月曜日
  23. 23. 2. Case Study - GitHub13年3月25日月曜日
  24. 24. 2. Case Study - GitHub13年3月25日月曜日
  25. 25. 1. チームで実践できるアジャイル • 「アジャイルプラクティス」 2. Case Study • GitHubコードレビュー 3. RailsでHighSpeedで開発する • フロント/バックエンド/インフラ • 便利gemを使いこなす • Rails4を見据えた構成13年3月25日月曜日
  26. 26. 1. チームで実践できるアジャイル • 「アジャイルプラクティス」 2. Case Study • GitHubコードレビュー 3. RailsでHighSpeedで開発する • フロント/バックエンド • 便利gemを使いこなす • Rails4を見据えた構成13年3月25日月曜日
  27. 27. 開発速度を上げるには? • リファクタリング可能である • CIを回す • モダンな開発を徹底する • モダンなコーディング方法 • モダンなライブラリ(gem)を取り入れる • 本番環境で動かしてプロダクトと呼べる。早期に本番 環境を構築する13年3月25日月曜日
  28. 28. リファクタリング可能なプロダクト • ユニットテスト(spec)が存在する • pendingをコミットしない • 常にgreen • ローカルで常にユニットテストが実行される状況 を作っておく • redになることをすぐに検出13年3月25日月曜日
  29. 29. リファクタリング可能なプロダクト • Railsでテスト環境を構築するgem • rpec, rspec-rails • factory_girl_rails • guard, guard-rspec • webmock • timecop • capybara • rr • spring13年3月25日月曜日
  30. 30. 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 end13年3月25日月曜日
  31. 31. CIを回す • プロジェクト初日からJenkinsを導入 • 自動テスト/自動カバレッジ計測 • クリーンな環境でテストするので開発環境と の違いにより漏れたバグ発見 • カバレッジは自己満 テストされていない箇所 を発見 • staging環境に自動デプロイ • 本番環境で、必ず動かない何かがある • それを早期に発見することが目的13年3月25日月曜日
  32. 32. モダン開発 - フロントエンド • ソシャゲもリッチ化しておりjsを書く量が増加 • 頑張って生js書く... • 凄腕JSerがいればメンテも可能か • 平凡なjs使いは...13年3月25日月曜日
  33. 33. S CoffeeScript +13年3月25日月曜日
  34. 34. モダン開発 - フロントエンド • CoffeeScript • チーム内でそこそこのRuby力なら誰が書いて もそれなりのコードになる • メンテンナス/リファクタリングもより簡単に • Backbone.js • コード量を削減するのではなく、コーディング 規約のように書き方を統一的に • Viewでのイベントの貼り方 • Modelでのデータの定義の仕方13年3月25日月曜日
  35. 35. 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]13年3月25日月曜日
  36. 36. モダン開発 - フロントエンド • jsライブラリが増加 • jquery • backbone • underscore • ... • 有名どころのjsライブラリは、rails-xxxという gemが用意されている • 自分で書いたjquery-plugin等も管理したい場合 できない13年3月25日月曜日
  37. 37. モダン開発 - フロントエンド • bowerで管理する • Twitter社が作成しているパッケージ管理ツール • Node製 • gemに依存しないので、自由に更新したり、追 加可能 • GitHubのリポジトリや、gistに貼ったスクリプ トからなんでも管理可能13年3月25日月曜日
  38. 38. $ 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” } }13年3月25日月曜日
  39. 39. $ 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/index13年3月25日月曜日
  40. 40. モダン開発 - フロントエンド • デザインもリッチに... • アイコン数増えて手動でsprite作る...? • 似たようなCSS使いまわしたいけどコピペ改 変...?13年3月25日月曜日
  41. 41. 13年3月25日月曜日
  42. 42. モダン開発 - フロントエンド • compassで楽をする • 自動でsprite画像を生成 • mixinを簡単化13年3月25日月曜日
  43. 43. # 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>13年3月25日月曜日
  44. 44. モダン開発 - バックエンド • Controllerをよりスッキリと書く • 揮発性データ/重要ではないが参照されることが 多いデータを扱う • アクションをtriggerにバックグラウンドで動く非 同期処理13年3月25日月曜日
  45. 45. モダン開発 - バックエンド(Controller) • action_args • アクションに必要なパラメータを仮引数で定義 する • そのアクションが必要なパラメータが一目でわ かる • params[:key]を書かなくてすむようになる • デメリット • filterでは書けないので、filterを多様すると統 一性がなくなる • とはいえ全体的にすっきりするので使ったほう が楽になる13年3月25日月曜日
  46. 46. # 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 end13年3月25日月曜日
  47. 47. モダン開発 - バックエンド(NoSQL) • 揮発性データ • ユーザデータ • イベント • エンカウント情報 • お知らせ • etc... • 参照される頻度が高く集計が必要 • ランキングデータ • イベントデータ13年3月25日月曜日
  48. 48. 13年3月25日月曜日
  49. 49. モダン開発 - バックエンド(redis) • memcahcedと違いデータ構造を保持できる • List • 未読お知らせ • Hash • 友達間でのボスエンカウント情報 • Sorted Hash • イベントランキングデータ13年3月25日月曜日
  50. 50. モダン開発 - バックエンド(redis) • Railsで使うには • redis-objects(https://github.com/ nateware/redis-objects) • ohm(https://github.com/soveran/ohm) • 多機能で、少し使いにくかったのでredisだけ使 用して独自の薄いmoduleを作成して使用してい る(https://gist.github.com/yoppi/ b3b911977c0b1a3b8f6d)13年3月25日月曜日
  51. 51. # 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 ... end13年3月25日月曜日
  52. 52. モダン開発 - 裏方で支えてくれるgem達 • annotate • モデルに自動でカラム、index情報を挿入 • schema.rbを見ることなくmodelでの作業が実 現 • bullet • N+1問題をアラート • turbo-sprockets • asset precompileを高速化 • pry-nav, pry-rails • rails-erd ER図を自動生成13年3月25日月曜日
  53. 53. モダン開発 - バックエンド(非同期処理) • ユーザのアクションに応じて発生 • その場で処理していると応答時間が長くなるので バックグラウンドでタスクを実行させる • job queueを使う13年3月25日月曜日
  54. 54. Sidekiq13年3月25日月曜日
  55. 55. モダン開発 - バックエンド(非同期処理) • sidekiq • resqueと同じjob queueライブラリ • 良いところ • Resque互換API • Thread model • 大量のスレッドをたちあげてマルチコアを 活かせる • 悪いところ • メモリリーク等によるプロセス肥大化に弱い • スレッドセーフじゃないコードは向かない13年3月25日月曜日
  56. 56. # Gemfile gem sidekiq class RaidBossCleaner include Sidekiq::Worker def perform(raid_boss_id) #... end end RaidBossCleaner.perform_async(raid_boss.id)13年3月25日月曜日
  57. 57. まとめ • 積極的にコードレビューする • 何は無くともCI • その時にプロジェクトにあったモダンな技術を取り入 れていく13年3月25日月曜日

×