YAPC::Asia Tokyo 2015 1日目 #yapcasia

エンジニアの越川です。
本日は、マネーフォワードのエンジニア数名でYAPC::Asia Tokyo 2015の1日目に参加してきました。

参加したプログラムのうちいくつかのメモをシェアさせて頂きます。

今フロントエンドで何が起こっているのか

今フロントエンドで何が起こっているのか

_IMG_0367

メモ

  • Ajax以降の世界の話
    • Google Mapなど
  • そのころES5(2009)5.1は2011
    • “use strict”;などのサポート
  • CoffeeScript(2010)
    • JavaScript good partsが発売された頃
    • ALT JSの登場
    • CoffeeScriptが普及したのは、Rails3.1で採用されたのが大きい
  • jQuery(2006)
    • ブラウザの差異を吸収するのに有用だった
    • jQuery Pluginのエコシステム
    • $.ajaxでpromiseを意識するキッカケとなった
  • Backbone.js(2010)
    • Frontend MVC
    • コードも小さくて分かりやすい
    • ViewがModelの変更監視、DOMの変更をModelに反映
  • Node.js(2009)
    • platform build on V8
  • Grunt.js(2012)
    • javascript task runner
    • Yeoman, AssembleはGruntの派生
    • 2014で開発止まっている
    • npmのpackage.jsonにscriptをかけるようになったので、あまりGruntである必要性が減った
  • Chrome(2008)
    • V8が乗っているのポイント
    • JIT
  • SPA
  • TypeScript(2012)
    • Microsoft
    • IDE support
  • AST
    • Abstract Syntax Tree
    • JSの構文解析
    • Esprema Espree Acorn babylon
    • Linter ESLint
    • Analyzer istanbul, plato
    • Test power-assert
    • Transpiler browserify, babel
  • Problems of SPA
    • twitterがやめたときのあれ
    • SEOこまるね
    • googleはJavaScript実行してくれるけど、、、
    • Performance微妙じゃね
    • メモリリーク
    • フロントとサーバとのロジック重複問題
  • Isomorphic
    • servser side node.jsで書けばよいのでは?という思想
    • 最初のレスポンスでserver sideでレンダリングする
    • Meteor
    • Rendr(backbone.jsを元に)
  • SPAに必要なもの
    • JSONをDOMにどうやってバインディングする?
    • history APIどうするかなど
  • Angular.js(2009、1.0: 2012〜)
    • HTMLを拡張するアプローチ
    • 2way Data binding
      • jsのmodelかえたらDOM変わる、その逆も
    • Full stack
    • 2.xが開発中とのこと
  • SPAってJavaScriptの結合順序とかつらい
    • ビルドもつらい
  • gulp(2014)
    • Stream baseのbuild システム
    • configarableじゃなくてprogrammableに設定を書く
    • node.jsらしいbuildシステム
    • pipeでtaskつないでいうかんじ
  • browserify(2013)
    • substack
    • モジュール化の仕組み node.jsのcommonJSのブラウザ版
    • node.jsと同じライブラリが使えるのがいいよね!
    • 複数のjsファイルからbundle.jsが作られる感じ
  • Stateless Composable Streamにしよう
    • ステート持たない
    • コンポーネントにしよう
    • Streamでやろうぜ
  • ECMAScript 2015(元ES6のこと)
    • まだブラウザ対応は思わしくない(ALT JSでやろうぜ)
  • Babel(2014)
    • ブラウザが未だサポートしてないES6を使えるようにする
    • JS transpiler
    • Stage option(default: stage2)
      • TC39(ECMAの委員会)のstageのこと(stage2: Draft)
      • githubみると、どれがいまどのstageにいるか分かってよさ気
  • Enviroments
  • Service Workers
    • プロセスがずっと残り続けるワーカー
    • Offline / Cache
    • Background Sync
    • Push Notification
    • Nativeアプリじゃないと出来なかったことがイロイロできるようになる
    • chrome::/serviceworker-internals で状況が見える
  • Extensible Web
    • https://extensiblewebmanifesto.org
    • webをもっと開発者が拡張可能にしようという宣言
    • ブラウザは低レベルの層をサポート、ライブラリで拡張可能とするイメージ
    • 例えば、WebComponentをラップするpolymar
  • React.js(2014)
    • Stateless Component
    • 宣言的なプログラミング(サーバーサイドぽい)
    • VIRTUAL DOMでそれを実現
    • 一番上のコンポーネントだけが持っている
    • イベントは基本一番上まで上げてく
  • Flux
    • facebookの提唱するフレームワーク
    • 1方向のデータの流れを作る
  • Functional Reactive Programming
    • 非同期なイベントをストリーミングとして扱う
    • この入力が来たらこうなる、という宣言で書いていく
  • Redux
    • ↑ぽいことを実装
    • FluxやElmに影響を受けてる
    • Reducerはただの副作用のない関数
    • single source(データのソースはひとつだけ! undo/redoやりやすい)
    • React.jsと一緒に使われるけどに依存しているわけではない

感想

流れの早いフロントエンドの世界の今!をざっくり把握する事が出来て良かったです。近年、.rb系の勉強会でもフロントエンドの話題が多いのでRubyistとしてもこの流れをある程度は把握しておきたいですね。

「とりあえず今どきのJavaScriptを書くときはgulp + broweserify + bableでES6書く。フレームワークはRedux+React.js書けばヨサソウ。」という流れがあるなという印象です。

HTTP/2時代のウェブサイト設計

HTTP/2時代のウェブサイト設計

メモ

  • プロトコルはバイナリだよ
    • h2iってコマンドあるから気軽に試せるらしいよ
  • HTTPSだよ
    • 11/16に無料で証明書もらえるところができるよ
  • ヘッダー圧縮してるよ
    • 同じヘッダーのリクエストだと以前のを参照したりするから、めっちゃ小さいよ
  • 気にすべきところはデータサイズだよ
    • 以下に小さくするかが設計で大事だよ
  • asset pipelineみたいな仕組みはリクエストを減らす目的だけど、リクエストの多重化やレスポンスプライオリティのウェイトとかがあるので、必要なものを小さく送る方がいいっぽい
    • 特定のページで使わないJSの実装とかデータサイズが大きくなるだけだからやらないほうがヨサソウ
    • つまり、sprocket捨てたい人向け(違う

Perlの上にも三年 〜 ずっとイケてるサービスを作り続ける技術 〜

Perlの上にも三年 〜 ずっとイケてるサービスを作り続ける技術 〜

_IMG_0369

メモ

  • はてなブログの人
  • イケてるとは
    • 開発継続
    • 迷わず書ける一貫した指針
  • 社内フレームワーク
    • RailsライクなRidge+MoCo
    • コード全部読まないと使えない
  • 過剰な抽象化を避けるためにはDRYにするためには3回コピペしたら
    • 3人同時にコピペしたら、、、つまり
  • Common::にまとめたらゴミ置き場になりそうなのでServiceにした
  • オブジェクト指向入門がよい(特に11章)
  • 継承なるべくやめる(むずいから)
  • 状態をなるべく持つのを止めよう
  • オブジェクト指向を学んでからシンプル化をすべき
  • 長年やっているとより良い方法を見つけるので、見つけた時に、過去の遺産を直すのが大事
  • ドメイン駆動設計 + 実装ドメイン駆動設計
    • 状態を持つのがエンティティ、持たないのが値オブジェクト
    • サービスは状態を持たないように独立させる
    • ゴミ置き場で始まったものがドメイン駆動設計のサービスだったw
  • 読書会はgithubで章ごとにissueを立てると捗るよ
  • ユビキタス言語
    • チームで同じ言葉を話そう
    • プロジェクト名も大事
    • 用語集を用意する(gitに突っ込んでっこでおく)
    • エンジニア以外にもコード見せろ
    • 普段の会話で使う(つまり別のwikiなどではなくコード内に書く)
  • さわりやすさ
    • インターン生が3週刊で成果出せるようなやりかた
    • 今年のインターン生は一昨日配属されて、もう新機能だいたい動いててリリースできそう

感想

オブジェクト指向入門とドメイン駆動設計はヨサソウだと思いました。

Electron: Building desktop apps with web technologies

Electron: Building desktop apps with web technologies

メモ

  • Atom
    • Webテクノロジーで作られている
    • JavaScript, HTML and CSS
    • Atom は Electronの上に成り立っている
  • Electron
    • io.js
    • Chromium
  • Electron-based Robots
  • Electron-based Chat Client
  • Electron-based Emoji Searcher
    • ウィンドウなしの例
  • Electron-based Curve App
    • https://github.com/benogle/curve-app

感想

ElectronはWebの技術を使ってデスクトップアプリが作れるということで、今後注目していきたいと思います。

最後に

カンファレンスへ参加することで普段の仕事のモチベーションも高まるので、積極的に参加していきたいですね。マネーフォワードではこのように積極的にカンファレンスへの参加を推奨しています。

マネーフォワードでは学習意欲の高いエンジニアを募集しています。
みなさまのご応募お待ちしております!

【採用サイト】
『マネーフォワード採用サイト』 https://recruit.moneyforward.com/
『Wantedly』 https://www.wantedly.com/companies/moneyforward

【プロダクト一覧】
家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』 https://moneyforward.com/
家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』 iPhone,iPad
家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』 Android
クラウド型会計ソフト『MFクラウド会計』 https://biz.moneyforward.com/
クラウド型請求書管理ソフト『MFクラウド請求書』 https://invoice.moneyforward.com/
クラウド型給与計算ソフト『MFクラウド給与』 https://payroll.moneyforward.com/
消込ソフト・システム『MFクラウド消込』 https://biz.moneyforward.com/reconciliation/
マイナンバー管理システム『MFクラウドマイナンバー』 https://biz.moneyforward.com/mynumber

Pocket