俺、サービス売って家買うんだ

Swift, Kotlin, Vue.js, 統計, GCP / このペースで作ってればいつか2-3億で売れるのがポっと出来るんじゃなかろうか

東京Node学園祭2015に行ってきたよ

イベントレポート JavaScript Programing
f:id:ie-kau:20151108044710j:plain:w400


nodefest.jp

Node周りの最近の動向をキャッチアップするため、東京Node学園祭2015に行ってきました。
実は初参加です。

夏に参加したYAPCに引き続き、学んだことや話を聞いて思ったことを備忘のため箇条書き程度にまとめます。

今回参加したセッション

  • The State of JavaScript
  • Node.js in the Enterprise
  • 大規模Node.jsを支えるロードバランスとオートスケールの独自実装
  • Electroknit! - Pixel to sweater with Node.js
  • Hardware Hacking for JavaScript Developers
  • フロントエンドに秩序を取り戻す方法 〜はてなブログ編集画面をリニューアルするためにやったこと〜

The State of JavaScript

JavaScriptの今とこれからの話

www.slideshare.net

ES2015

  • Proxy
    • Proxy使ったらgetter/setterすらいらなくなる
  • Subclassable Built-ins
    • これ知らなかったんだけど、ビルトインの機能がサブクラスとして扱えるっぽい。like Array, Date and Dom Elements
  • お試しで書かれてるコードをみての所感
    • const or letしか使わない方向
    • 非同期はyieldでやる
  • Babel
    • FacebookのJSXもBabelで開発しているらしい

new platform innovation

Webの仕様策定者とWebの開発者の間で「しっかりとフィードバックループを回していこうぜっ」っていうマニフェストがある。 The Extensible Web Manifesto

  • custom elements
    • C++からJavaScriptへ。C++で書かれているブラウザのコアな部分に触れるようにしたいねって話
      • そのほうがフルでブラウザのちからを使える。
    • HTMLElementが拡張出るだって〜
  • service worker
    • 実態はWebサーバー見たいなもの
    • 何がフロントで何がサーバでわかりにくくなるのでいい(何故?
  • custom paint(code name)
    • cssのプロパティを自分でつくれる

where we’er going

このスペックをよんで描いてあることがstableだと思っていい。 ECMAScript® 2016 Language Specification

  • SIMD.js
    • hardwareのためにコード
    • 書くの難しい
    • CPUに近いメソッド呼べる

watch out for - コンセプトだよ

  • Value Type
  • decorator
    • ES7に載ってる奴、ランタイムでコードをかきかえる
    • メソッドを別のメソッドでラップできるやつ
  • cancelable proises
  • async iterator
  • module loading

こういうふうになるかも・・・かも・・・

<script type type=“module">
import a from “./a.js"
</script>

web assembly??

github.com
よくわからんけどGoogleもAppleも頑張ってる

所感

最近ようやくES2015の勉強始めたけど、遥かに世の中が進んでいました。はい。
moduleの話とか、decoratorとかは嬉しいんだけどそれ以上のことcustom elementとかまで来ると現状のWeb開発から一歩抜けちゃって、自分だと利用シーン見えないなと思っちゃいました。OSと密になってくるとか、ブラウザで3Dゲームガシガシつくっちゃおとかになると別になるんだろうけどね。

Node.js in the Enterprise

EnterpriseでNodeを導入した話。

speakerdeck.com

Enterprise とは

今回の話で出てきのはこんなところ

ほんと、「えっここがNode使ってんのっ！？」てところばかりだった。

NETFLIX

  • リッチなUIとサーバーサイドが同じ言語を使うため生産性が上がる
  • 動画以外はJavaScript

PayPal

  • 世界で一番大きいNodeのシステム
  • 800人のNode開発者がいる (すごッ
  • 長い間働いても飽きが来ない！

CONDE NAST

  • END -to-END Node shop
  • Call Me Cailin artilce

INTUIT

  • 会計ソフト屋
  • 20年同じシステムだったけど、徐々にNodeに乗り換えてる
  • Front-end engineer are much more productive
  • Compile/deployモデルのでJAVAのサービスのときと比べてフロントエンドの生産性が上がる(既視感が......
  • 4倍のuser experience featureを公開できるようになった

NASA

  • ミッションコントロールに使うミッションクリティカルなものをNodeで書いている

なんでNodeつかうのよ?

  • 今まではMonoliths(一枚岩)なサービスだった
    • Web、携帯、時計、様々なプラットフォームが出るなか小分けにして開発できない

  • Nodeを使うことによりユーザーに分けてサービスを展開する

    • マイクロサービス化

  • silosサイロ

    • それぞれの機能を分けること
    • 一枚岩だとエンジニアを分けることもできない
    • 小さいモジュールに分けることそれぞれの開発者が色々なものに手を出すことができるようになった。
    • 小さいモジュールだからビジネス要件を受け入れやすくなった。ロギングだけとか、会計だけとか。

How？どうやって

  • Support NodeSourceが開発中もサポートしてる

大規模Node.jsを支えるロードバランスとオートスケールの独自実装

Socket.ioとELBの相性がXXXだからどうしたかって話。

www.slideshare.net

  • API:Rails
  • 同時接続部分:Node

  • 想定接続数:同時接続 最大1万/ 常時 100

  • Redisで負荷監視

    • 監視内容はCPUとかメモリじゃなくてSokect.ioサーバーに何人が同時接続中か
  • Rails apiでロビーサーバーの負荷状況をRedisい見に行ってnodeサーバーに接続する
  • StickySessionが支えない
    • 用語がわからなかったので後で調べる
  • LBを使わなかったのでLBが単一障害点になるリスクが低い

Electroknit! - Pixel to sweater with Node.js

プレゼンが面白くて何もメモ取ってなかった。
JavaScriptで編み機を使って編み物をしてたら、画像解析までやっちゃってた話。

http://kosamari.com/presentation/nodefest-2015/

所感

なんというか、すごいの一言に尽きた。編み物の趣味が高じて、80年代に流行った自動編み機を利用してJavaScriptで画像解析したデータを編み機に送って模様を編んじゃうんお話でした。趣味とプログラミングの掛け算で画像解析やらコンピュータの深淵に迫れるって、一線を越えた執念みたいなものを感じました　笑。あとは話を聞いててJavaScriptさえ書ければもう世の中の大概のことできるのではって気分になりました。そして、ここ数年で実際そうなってるよね。

Hardware Hacking for JavaScript Developer

www.slideshare.net

Iotとは

  • Ciscoが考えた
  • 人間よりものがネットにつながってるほうが多くなるって考えに基づいてる
  • JSのエンジニア関係ない？
  • いやいや
  • Tessel
    • 使う言語の第一言語がJavaScriptのマイコンボード
    • npmインストールでモジュールができる
  • Johnny-Five
    • JSでかけるロボティクス・フレームワーク

PubNub

www.pubnub.com

モバイルアプリ用BaaS。Iotと組み合わせて使われることが多いらしい。

所感

電子工作やIotは完全に専門外なんだけど、Tessel面白そうだし。Philips Hueを先輩からもらってるのでまたちょっとその辺と戯れてみようかなって思い始めた。

フロントエンドに秩序を取り戻す方法

speakerdeck.com

VanillaのJSで秩序を与える！

  • 最初はjQuery + underscore only

分割の話

  • 5524行のJS
  • 最初global名前空間でうまい具合に分割しようとした
    • 依存関係の問題で断念
  • 次broserify
    • 5月から徐々にCommonJS形式にした
  • 5524 -> 233行になった

設計の話

  • EventEmitterを継承
  • componet同士は $window.trigger

ここまでやって気づく

  • 結構だるい
  • 2015年にDOM操作！？

Vue or React

  • 1ヶ月ほど議論
    • 1ヶ月議論できる環境がはてなっぽい
  • React採用!
    • シンプルに書ける
    • React -> Vueは簡単そう
    • Vueは自由すぎる
  • デザイナーが触れなくない？
    • JSXかけるでしょ
    • でもかけないなら設計がダメでしょ
  • Babel導入
    • stage2以外は使用禁止
  • Fluxフレームワークは使いたくない
  • コーディングスタイル統一はESLint

Test

  • 最初はCasper JSのE2Eのみ
  • まずは単体テストから
    • Karma
      • 新しいモジュールを書くときは
      • いろんなところで使われてるUtil系はテスト書く
  • E2E -webdriver 採用
    • selenium系なので他のライブラリに乗り換えやすい

所感

結構成熟してきたというかどのFW使おうと思想はだいたい似てきている。だからってFW無しで実装するとオレオレ実装だらけになるので、何だかんだで一枚薄めのFWを敷いたほうがいいと思う。それに加えFWを引くことでDOMのAPIを触る機会が減るからサーバーサイドのエンジニアにいきなりフロントを書いてもらってもすんなり実装してくれるケースが多い。

ReactのJSXに関してはデザイナー(コーダー)さんに嫌がられるかなーって思い導入を避けた記憶があるけど、次何か作るときはフロント側の設計を頑張ることでなんとか触ってもらえるようにしたい。

まとめ

今回の東京Node学園祭に参加して、編み物の話でも書いたのですが、本当にJavaScriptだけで何でも作れる時代になってきていると思いました。(いよいよNodeの話じゃなくなりますが。)

自分が書いたコードでマウスに星を追従させて大喜びしていたのがたった5,6年前と考えると、あのJavaScriptがLED光らせるところからロケットを飛ばすところまでやってくれるとはえらく遠くまで来てしまったものだと感じます。 マウスに星を追従させて大喜びしていた話は、よくある喩え話だけど、簡単に数行コードを書いたら動くものができるっていうのはCSのバックグラウンドがない自分が、プログラミングが好きになるきっかけだったし、それは紛いもなくJavaScriptだからこそできる芸当でした。

結局何か作りたいって欲求が根底にありはしたものの、その時点でめっちゃプログラミングができるとか絵がかけるとか、そういう表現スキルが一つもなかった自分にとって、手持ちのWindowsとメモ帳と適当なサイトから引っ張ってきたコピペのコードで星が動かせるって素敵なことだったんだと思います。おそらく、なんか作るぞってなかった時に、やれメモリがとか、やれint型がとか言われて必死で勉強した結果白黒の画面に表示されるのが"Hellow world"だけで、作りたいものへの道のりが全くみえない状況なんか絶対耐えられなかったでしょう。勉強続かない。

そんなJavaScriptですが、いよいよマウスに追従する星だけではなくて、センサー、カメラ、ロケット(言い過ぎかもですが)、なんでも動かせるようになってきいます。おそらく何か作りたいって欲求を持ってるけどその脳内にある物を表現する方法を持たない人って結構いるはずで、自分を含むその手の人達にとって割りと習得しやすい言語であり、多くの知識を有せずとも最初の一歩を簡単に踏み出させてくれ、そして一線を超えれば深遠に連れて行ってくれるJavaScriptは大きな助けになるんじゃないでしょうか。それで、どこかの誰かが拙いながらも形にしたものが世界を良い方向に導いてくれうかもしれない。そいう機会を増やす力があると考えると、JavaScriptの進む方向ってかなり明るい気がしています。

ん、なんか話がずれてるな。。まぁいいや。
とにかくいい学園祭でした！運営の皆さんありがとうございます！！