pairsでのAngularJS x TypeScript x e2e ＠めぐすた#1
•
11 j'aime•3,588 vues
2015年5月13日 目黒スタートアップ勉強会#1 での発表資料となります。
Recommandé
Contenu connexe
Tendances
Tendances (16)
Similaire à pairsでのAngularJS x TypeScript x e2e ＠めぐすた#1
Similaire à pairsでのAngularJS x TypeScript x e2e ＠めぐすた#1 (20)
pairsでのAngularJS x TypeScript x e2e ＠めぐすた#1
- 1. 第一回 目黒スタートアップ勉強会 Takuma Morikawa / eureka, inc. Copyright © 2009-2015 eureka, inc. All rights reserved.
- 3. Copyright © 2009-2015 eureka, inc. All rights reserved. なまえ Takuma Morikawa しょぞく たんとう （Go, JS, たまにインフラ） じこしょうかい
- 5. 株式会社エウレカ 専門分野以外の領域 でも活躍できる エンジニア! 50人 非エンジニア! 25人 事業内容 自社サービスの企画・開発・運営 ・ オンライン・デーティング・サービス「pairs」 ・ カップル専用アプリ「Couples」 海外拠点 ・ 唯麗家股份有限公司（台湾） ・ EUREKA SG Pte. Ltd.（シンガポール） 社員数: 75名 インターン・業務委託含む
- 7. オンライン・デーティング・サービス「pairs」 12年9月 13年3月 13年9月 14年3月 14年9月 15年3月 225万 ｡ﾟ+＼200万会員突破/／+.ﾟ リリース 2012年 10月 会員数 210万人 プラットフォーム PC/SP/iOS/Android 135万 45万 90万 190万 2年で 200万人
- 9. カップル専用アプリ「Couples」 ｡ﾟ+＼200万DL突破/／+.ﾟ リリース 2014年 5月 DL数 210万DL プラットフォーム iOS/Android 14年5月 14年10月 15年3月 215万 170万 130万 85万 45万 国内 No.1
- 10. Today's Talk
- 11. pairs golang development from scratch Go言語でいかにして新しいpairsを作っているのか
- 12. pairs golang development from scratch Go言語でいかにして新しいpairsを作っているのか
- 15. Why AngularJS?
- 16. ・おそらく採用の第一候補に上がるJS FW ・元々pairsでも使っていた - メンバーはみんな書ける（はず） ・状態遷移が非常に楽 - pairsと相性が良い ・SPAにしたい - アクション増加 => マッチング数増加 Why AngularJS?
- 18. Why TypeScript?
- 20. あるよく晴れた日の午後… one day, very sunny day afternoon…
- 24. Why TypeScript?
- 32. $ jshint hoge.js: line 17, col 187, Line is too long. hoge.js: line 25, col 174, Line is too long. hoge.js: line 27, col 126, Line is too long. hoge.js: line 31, col 126, Line is too long. hoge.js: line 145, col 124, Line is too long. hoge.js: line 22, col 42, Expected '===' and instead saw '=='. hoge.js: line 24, col 44, Expected '===' and instead saw '=='. hoge.js: line 306, col 11, Missing semicolon. … Why TypeScript?
- 33. $ jshint | wc -l Why TypeScript?
- 39. ʕº̫͡ºʔ（私=森川） （ボス）ʕ̡̢̡ʘ̅͟͜͡ʘ̲̅ʔ̢̡̢ Why TypeScript?
- 62. TypeScript
- 64. 「でも、お高いんでしょ？」
- 71. ・ディレクトリ構成 ↓を参考にしています Best Practice Recommendations for Angular App Structure AngularJS
- 72. app/ - 機能群/ - ログイン/ - 検索/ - controller/ - service/ - directive/ - routing.ts - 共通ライブラリ/ - e2eテスト/ AngularJS directory structure
- 73. AngularJS route module pairs.search {! !angular.module('pairs.search', [! ! !'ui.router',! ! !'ipCookie',! !]).config([! ! !'$stateProvider', ! ! !'$urlRouterProvider', ! ! !'$locationProvider', ! ! !states! !]).service('SearchService', [! ! !'HttpService', ! ! !'$q', ! ! !'ipCookie', ! ! !SearchService! !]).controller(controller)! !.directive(directive);!
- 74. AngularJS route !function states(! ! !$stateProvider: ng.ui.IStateProvider,! ! !$urlRouterProvider: ng.ui.IUrlRouterProvider,! ! !$locationProvider: ng.ILocationProvider! !) {! ! !$stateProvider! ! ! !.state('search', {! ! ! ! !url: '^/search/:type/{page:int}',! ! ! ! !controllerAs: 'ctrl',! ! ! ! !controller: controller.SearchController,! ! ! ! !templateUrl: '/search/hoge'! ! ! !});! !}
- 75. ・ロジックは、ほぼ書かない前提 ・ディレクティブ用のshared controllerな感じ => RIP controller in Angular2 AngularJS controller
- 79. ・ベーシックにKarma & Jasmine AngularJS unit testing
- 80. ・ベーシックにKarma & Jasmine（の予定） AngularJS unit testing
- 81. ・ベーシックにKarma & Jasmine（の予定） => 実はまだ整っていない… AngularJS unit testing
- 82. ・ベーシックにKarma & Jasmine（の予定） => 実はまだ整っていない… ・TSコンパイルは通るけど、karma実行時にTSエラーになる ・駄目だったらJSで書く予定 AngularJS unit testing
- 83. ・ベーシックにKarma & Jasmine（の予定） => 実はまだ整っていない… ・TSコンパイルは通るけど、karma実行時にTSエラーになる ・駄目だったらJSで書く予定（来週のタスク） AngularJS unit testing
- 86. ・Protractor - AngularJS用のe2eテストFW - 非同期処理をいい感じで待ってくれる AngularJS e2e testing
- 87. 【ディレクトリ構成】 - 機能テスト/ // 単体テスト - シナリオテスト/ // 結合テスト - ページオブジェクト/ - ログインページ/ - 検索ページ/ - helper.js - config.js AngularJS protractor directory
- 88. 【ディレクトリ構成】 - 機能テスト/ // 単体テスト - シナリオテスト/ // 結合テスト - ページオブジェクト/ - ログインページ/ - 検索ページ/ - helper.js - config.js AngularJS protractor directory
- 90. AngularJS page object var LoginPage = function() {! !// ログインボタンのエレメント! this.loginButton = element(by.id('login'))! ! !// ログインページを開く! this.open = function(){! browser.get('/#/login');! }! ! !// ログインボタンを押下する! this.clickLoginButton = function(){! var loginButton = new LoginPage().loginButton;! return browser.wait(function(){! return loginButton.isPresent();! }).then(function(){! return loginButton.click();! });! };! };! module.exports = new LoginPage();
- 91. 【ディレクトリ構成】 - 機能テスト/ // 単体テスト - シナリオテスト/ // 結合テスト - ページオブジェクト/ - ログインページ/ - 検索ページ/ - helper.js - config.js AngularJS protractor directory
- 92. AngularJS helper // time_helper.js! ! var TimeHelper = function(){! !// 現在のUNIXTIMEを取得する! !this.getCurrentUnixtime = function(){! ! !return Math.floor(new Date/1000);! !};! !! };! ! module.exports = TimeHelper;
- 93. AngularJS helper // helper.js! ! var Helper = function(){};! ! // 外部で定義したヘルパー関数をHelperへ詰め込む（mixin的な？）! require('./time_helper').call(Helper.prototype);! require('./selectbox_helper').call(Helper.prototype);! require('./hoge_helper').call(Helper.prototype);! ! module.exports = new Helper();
- 94. AngularJS page object w/ helper // login.po.js! ! var LoginPage = function() {! // load helper! !var helper = require('../helper');! !// 都道府県のセレクトボックス ! this.stateSelect = element(by.model('vm.state_id'));! ! !// セレクトボックスから指定した都道府県を選択する! this.selectStateByName = function(name){! var el = new LoginPage().stateSelect;! helper.selectDropdownByText(el, name);! }! };! ! module.exports = new LoginPage();
- 97. ・CircleCIの失敗 - Slackに通知行く - エラーに慣れる - 非常に困る AngularJS e2e w/ CI
- 98. ・CircleCIの失敗 - Slackに通知行く - エラーに慣れる - 非常に困る ・なんで失敗するのか AngularJS e2e w/ CI
- 99. ・CircleCIの失敗 - Slackに通知行く - エラーに慣れる - 非常に困る ・なんで失敗するのか - e2eがタイムアウトしてる - Angular以外のページ AngularJS e2e w/ CI
- 100. ・CircleCIの失敗 - Slackに通知行く - エラーに慣れる - 非常に困る ・なんで失敗するのか - e2eがタイムアウトしてる - Angular以外のページ => Facebookのログインポップアップ AngularJS e2e w/ CI
- 103. 5時間後… 5 hours later…
- 104. ʕº̫͡ºʔ＜「無理」 AngularJS e2e w/ CI
- 108. 3時間後… 3 hours later…
- 109. ʕº̫͡ºʔoo0（…） AngularJS e2e w/ CI
- 112. 解決策 q.e.d.
- 113. ・複数のテストタスクをgulpに登録する => 違うテストタスクとして起動させる - ブラウザが起動し直される - ちゃんとCookie削除されます AngularJS e2e w/ CI
- 114. AngularJS e2e w/ CI // circle.yml! ! test:! override:! !# Goのテスト! - gvm use stable; ginkgo -tags=tests -r . -cover! !# メインのe2e! - gulp e2e! - sleep 2! !# ログインページ その1! - gulp e2e:login_success! - sleep 2! !# ログインページ その2! - gulp e2e:login_error1! - sleep 2! !# ログインページ その3! - gulp e2e:login_error2
- 115. AngularJS e2e w/ CI （e2e失敗のデモ）
- 116. tl;dr
- 118. 第一部 完 fin.
- 119. 「世界で愛されるサービス」を一緒に作りませんか？ セグメントNo1 サービス グローバルビジネス Business! pairs Goフルスクラッチ Engineering! マッチングアルゴリズム Big Data! ✕ ハイブリッドエンジニア 大規模行動データ解析
- 120. CONFIDENTIAL! Thank you :)! Thank you :)!