ProductManagement / front-endin Sansan( & remote work)

ProductManagement / front-end
in Sansan( & remote work)
2016.03.25 Sansan株式会社岩下弘法

Copyright © Sansan, Inc. All rights reserved.
introduce
- 岩下弘法
- ♂(4) と ♀(0) の父
- 2013 年 10 月 Sansan 入社
- 前職は SIer で HRM パッケージを作ってた
- Java(Seasar2, Play!)
- フロントエンドエンジニアではない
1

introduce

Ice break
3

リモートワーク
- 通勤は人生の無駄づかい
- 9時5時からの解放
- 節約するより価値を生みだそう
- 上司が見張っていないと仕事をサボる？
- 家には邪魔が多すぎる？
- 社内に不公平が生まれる？
- セキュリティを守るにはオフィスが必要？
4
「強いチームはオフィスを捨てる」の目次より

5

6

7

- 昨年は計四ヶ月ほど
- 通勤の満員電車ないだけで世界が変わる
- 怠けより働き過ぎに注意
- 孤独は人を狂わせる
- 信頼関係が大事
8

体制 / プロジェクト
9

体制
Product Owner Product Manager Engineer
プロダクト部開発部

プロダクトマップ
11
UX 進化
ビジョンニーズ
ビジネス進化
既存改善
大規模対応新ビジネスモデル対応
API 連携
ネイティブアプリ強化
新機能

プロダクト
- 唯一無二のシステムを創っている
- 顧客ごとのオーダーメイドシステムではない
- 準拠する明確なルールがあるわけではない
- 世界観を決めるのは我々
12

進め方
Product Owner Product Manager Engineer
プロダクト部開発部

進め方(PM)
- 解決すべき課題を見つけユーザー体験を考える
14

進め方(PM)
- 既存仕様との整合性検証
15

進め方(PM)
- POに設計意図を伝え承認を得る
16

進め方(PM)
- PM & エンジニアで UI/UX 確認
17

進め方(Engineer)
- 負の遺産を掻い潜りながら実装する
- 前側 : ASP.NET Web Forms -> ASP.NET MVC
- 後側 : DDD
> 過去勉強会( #Sansan_DDD )を参照
18

進め方(PM)
- PM レビュー
19

進め方
- PM レビュー
- PO レビュー
- リリース
20

フロント周りの技術
21

JavaScript framework
出展 : http://engineering.paiza.io/entry/2015/03/12/145216

僕 is

弊社 is
- 使ってない。 jQuery のみ。
- SPA は(今のところ)合わない
> スイッチコストを掛けれない
- 画面複雑 / 多機能
> 画面デザパタが異なる
> MVC と Web Forms の混在
- Vue.js
- IE8 サポートNG
- Knockout.js で代替
24

弊社 is
- Graceful Degradation
- 最近の環境を基準にし、古い環境にはレベルを落とす
25

手を入れたこと
- ASP.NET MVC3 -> ASP.NET MVC5
- WebGrease
- jQuery1.2, 1.5, 1.6 -> jQuery1.11
- jQueryUI -> Bootstrap
- css -> less
- Grunt (-> Gulp)
- gif, png -> web fonts
- Nuget -> Bower
26

WebGrease
- WebGrease is a suite of tools for optimizing javascript,
css files and images.
- Minification of JavaScript files
- Validation of JavaScript files
- Minification of CSS files
- Bundling of JavaScript and CSS files
- Image sprites
- Auto Version naming of the files (version stamp)
27

Auto Version naming of the files (version stamp)
- BundleConfig.cs で全ての js, css を処理
28
<%: Styles.Render("~/Content/commns.css.bundle") %>
Directory.GetFiles(fullPath, "*.css", SearchOption.AllDir
ectories).ForEach(fileFullName => {
var relativePath = …;
var bundleName = relativePath + "*.bundle";
var bundle = (Bundle) Activator.CreateInstance(typeof (
T), bundleName);
bundles.Add(bundle.Include(relativePath));
});

jQuery1.11
- 1.8 以前と 1.9 以後の壁が大きい
- 早めにクリアしておきたかった
- IE8 を切れない…ので 1 系
- 合わせて各種 plugin も version up
- $hoge.on( events [, selector ] [, data ], handler )
- As of jQuery 1.8, the use of async: false with jqXHR
($.Deferred) is deprecated
29

Bootstrap
30
- 使えてない。 js メイン。
- 影響範囲を見ながら少しずつ解放
- あとから grid layout 入れるのむりぽ

css -> less
- grunt-contrib-less で変換
- wiredep で対象一覧を BundleConfing に inject
31

その他
- gif, png -> webfonts
- 画像ではなく svg を受け取る
- Nuget -> Bower
- A package manager for the web
32

その他
33

Bower.json
34

課題
- CSS is カオス
- OOCSS, SMACSS, BEM, FLOCSS なにそれ美味しいの
> 詳細度の考慮
> 再利用性
- フロント周りのテスト
- PO レビューで UI /UX 変わる
- 自動化するコスト
- バージョンアップ追随
- 「覚悟」が暗闇の荒野に進むべき道を切り開く
35

課題
- CSSLint, JavaScriptLint かけたい
- js 生で書きたくない
- Vanilla.js が早いのは分かるけど
- IE8
- 規約がない
- WEB デザイナー
36

少しでも足掻く
- class は静的用 data-* は動的用
- 同一観点で見れる人間をレビューアとする
- ここから規約やレギュレーションの策定
- デザインチェックの仕組み
- スクショ比較とか
- リビーリングモジュールパターン
37

React(*´ρ`*)
- react-dom を使ってPE-SPA
- View 層を Razor -> react
- 言語境界を Edge.js で跨ぐ
38
出展 : https://msdn.microsoft.com/ja-jp/magazine/mt632272.aspx
ASP.NET と React によるプログレッシブエンハンスメント

発表は以上です。
39

僕は今、限界集落の山奥でリモート発表して、
40

この後業務と自炊に戻るけど、
41

皆様この後も楽しんでください(ﾟДﾟ)
42

ProductManagement / front-endin Sansan( & remote work)

ProductManagement / front-endin Sansan( & remote work)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to ProductManagement / front-endin Sansan( & remote work)

Similar to ProductManagement / front-endin Sansan( & remote work) (20)