ProductManagement / front-endin Sansan( & remote work)

ProductManagement / front-endin Sansan( & remote work)

2016.03.25 Sansan 株式会社岩下弘法

Copyright © Sansan, Inc. All rights reserved.

introduce

- 岩下弘法

- ♂(4) と ♀ (0) の父

- 2013 年 10 月 Sansan 入社

- 前職は SIer で HRM パッケージを作ってた

- Java(Seasar2, Play!)- フロントエンドエンジニアではない

2


introduce


Ice break

4


リモートワーク

- 通勤は人生の無駄づかい

- 9 時 5 時からの解放

- 節約するより価値を生みだそう

- 上司が見張っていないと仕事をサボる？

- 家には邪魔が多すぎる？

- 社内に不公平が生まれる？

- セキュリティを守るにはオフィスが必要？

5

「強いチームはオフィスを捨てる」の目次より



6



7



8



- 昨年は計四ヶ月ほど

- 通勤の満員電車ないだけで世界が変わる

- 怠けより働き過ぎに注意

- 孤独は人を狂わせる

- 信頼関係が大事

9


体制 / プロジェクト

10


体制

Product Owner

Product Manager

Engineer

プロダクト部開発部


プロダクトマップ

12

UX 進化

ビジョンニーズ

ビジネス進化

既存改善

大規模対応新ビジネスモデル対応

API 連携ネイティブアプリ強化新機能


プロダクト

- 唯一無二のシステムを創っている

- 顧客ごとのオーダーメイドシステムではない

- 準拠する明確なルールがあるわけではない

- 世界観を決めるのは我々

13


進め方

Product Owner

Product Manager

Engineer

プロダクト部開発部


進め方 (PM)

- 解決すべき課題を見つけユーザー体験を考える

15


進め方 (PM)


- 既存仕様との整合性検証

16


進め方 (PM)



- PO に設計意図を伝え承認を得る

17


進め方 (PM)




- PM & エンジニアで UI/UX 確認

18


進め方 (Engineer)





- 負の遺産を掻い潜りながら実装する

- 前側 : ASP.NET Web Forms -> ASP.NET MVC- 後側 : DDD

>過去勉強会 ( #Sansan_DDD ) を参照

19


進め方 (PM)






- PM レビュー

20


進め方






- PM レビュー

- PO レビュー

- リリース

21


フロント周りの技術

22


JavaScript framework

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


僕 is


弊社 is

- 使ってない。 jQuery のみ。

- SPA は ( 今のところ ) 合わない

>スイッチコストを掛けれない

- 画面複雑 / 多機能

>画面デザパタが異なる

>MVC と Web Forms の混在

- Vue.js- IE8 サポート NG- Knockout.js で代替

25


弊社 is

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

26


手を入れたこと

- 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

27


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)

28


Auto Version naming of the files (version stamp)

- BundleConfig.cs で全ての js, css を処理

29

<%: Styles.Render("~/Content/commns.css.bundle") %>

Directory.GetFiles(fullPath, "*.css", SearchOption.AllDirectories).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

30


Bootstrap

31

- 使えてない。 js メイン。

- 影響範囲を見ながら少しずつ解放

- あとから grid layout 入れるのむりぽ


css -> less

- grunt-contrib-less で変換

- wiredep で対象一覧を BundleConfing に inject

32


その他

- gif, png -> webfonts- 画像ではなく svg を受け取る

- Nuget -> Bower- A package manager for the web

33


その他

34


Bower.json

35


課題

- CSS is カオス

- OOCSS, SMACSS, BEM, FLOCSS なにそれ美味しいの

>詳細度の考慮

>再利用性

- フロント周りのテスト

- PO レビューで UI /UX 変わる

- 自動化するコスト

- バージョンアップ追随

- 「覚悟」が暗闇の荒野に進むべき道を切り開く

36


課題

- CSSLint, JavaScriptLint かけたい

- js 生で書きたくない

- Vanilla.js が早いのは分かるけど

- IE8- 規約がない

- WEB デザイナー

37


少しでも足掻く

- class は静的用 data-* は動的用

- 同一観点で見れる人間をレビューアとする

- ここから規約やレギュレーションの策定

- デザインチェックの仕組み

- スクショ比較とか

- リビーリングモジュールパターン

38


React(*´ρ`*)

- react-dom を使って PE-SPA- View 層を Razor -> react

- 言語境界を Edge.js で跨ぐ

39

出展 : https://msdn.microsoft.com/ja-jp/magazine/mt632272.aspx

ASP.NET と React によるプログレッシブエンハンスメント

https://msdn.microsoft.com/ja-jp/magazine/mt632272.aspx


発表は以上です。

40


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

41


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

42


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

43

Technology

ProductManagement / front-endin Sansan( & remote work)