ng-sake#2 で Cafe Pitch の紹介とAngular2のComponentについてのLTをさせてもらいました
今週あった ng-sake#2 でLTさせてもらいました。
Cafe PitchはElectron + Angular2を使って最近作っているプレゼンテーションツールです。
発表資料はこちら
資料に書いてある通りだけど、普通にReactでコンポーネント指向に慣れていればAngular2においてコンポーネントを作る際にも同じ感覚で作れる。
加えてAngular2のコンポーネント間通信には様々な方法があるので、それぞれ良き場面で取捨選択すると良さそう。
例は公式に用意してあるので、参考にすると良い。
慣れないうちはとりあえず@output、@inputが使えるようになればどうにかなる。
後半はディスカッション形式で、エキサイトし過ぎてめっちゃ飲んだ。
終わった後にも飲みに行って終電を逃し、最終的に同じ方面の @Quramy さんとタクシーで一緒に帰宅しつつ、タクシー代を借りるという失態を犯した。
@Quramy さんにおかね返す
— じょう (@joe_re) 2016年4月20日
まとめるとめっちゃ楽しくて、かつガチ勢がひしめき合っている割にはフレンドリーでいいコミュニティだなーと思いました。
是非また参加したい！
Electron + Angular2でMarkdownでスライドを作れるプレゼンテーションツールを作っている
Angular2を学ぶ目的から、最近はElectron + Angular2でプレゼンテーションツールを作っている。
とりあえず一通り動くところまでできたのでpublishした。
使い方はこんな感じ。
エレベーターの中の30秒でちゃんと相手に伝わるプレゼンをすることを意味するElevator Pitchという言葉があるんだけど、Cafe Pitchという名前はそこからきている。
素早くプレゼンを作るためのツールだけど、現実30秒でプレゼン作れないだろじゃあcafeかな、みたいな感じで、まとめるとそんなに深い意味はないです。
ちゃんと実行できるバイナリを用意しようとは思ってるけど、その辺の準備に必要なことがまだわかっていないのでnpmでglobalにinstallすれば使える、という感じ。
このあたりの記事を見ると分かりそうなので、追って対応していこうかなと思う。
あとMacでしか動かしてないので、WindowsとLinuxにも対応したい。
Electron + Travis で楽々ビルド・リリースする最強のデスクトップアプリ開発 - Qiita
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと - ヌーラボ [Nulab Inc.]
何ができるの？？
とりあえず必要な機能として、
- markdown書いてる時にHTMLへの変換結果をlive previewで確認できる
- presentation機能
- PDFでのエキスポート
を実装している。
参考として↓のスライドはこれを利用して作っている。
Angular2どうだった？
Angularは1のときに熱狂していたことがあった。けれど色々あって疲弊して今はReactおじさんをやっている。
なのだけど、Angular2はその時の疲弊する感じはかなり軽減されてていい感じ。
具体的にはAngular1このDIどう考えてもキモいだろ、というのがtyped-base DIになっていたり、このdirty-checkingいつ走るんですか？？なんで走らないんですか？？明示的に$applyしなきゃいけないんですか？？みたいなことに頭を使わなくて済むのが良いところ(これについてはそもそも双方向バインディングがつらいという話ではある)。
Angular2のChange Detectionについてはこの記事がわかりやすい。
細かい実装についてはまた改めて書こうと思う。
あとAngular2をやっているのはRxJSを学ぶ目的もあるんだけど、このアプリでは非同期処理がほとんど要らなかったので試せなかった。
gistとsyncできたり、indexed.dbに前回開いていた情報を保存しておいたりできると便利っぽい感じがするので、そのあたりを実装するときに試していきたい。
decksetでよくね？
使ったことないのでよくわかりません。
良いところは取り入れたいので使ったことある方便利なポイント教えてください。
さいごに
興味を持ってくださった方はぜひ使ってみてください！
フィードバックくださるととても嬉しいです！(使いにくいところは改善します)
みんなのウェディングさんと共同で勉強会を開催しました #fr_mw_lt
大学の先輩の @azipon_zzz と一緒に、フロントエンドの知見交換を目的に勉強会を開催しました。
来場者、登壇者の皆さんありがとうございました！
全体的な進行
前半はLT大会で、後半はそれぞれの会社からの代表者に前に出てもらって、座談会形式で意見交換する会を設けた。
LT
Introduction to flux-util by @joe_re
flux-utilsをざっくりと紹介。
Reduxとの共通点が多くあるので、その比較とか。
社内CSSフレームワークを作ったった by @azipon_zzz
チーム開発において、cssの書き方を統一させ、似たような定義の氾濫を抑えていきたい。
そのための社内cssフレームワークを整備した話。
統一的な定義をしていくことで、デザイナーの工数の削減にもつながり、この画面とあの画面似た色使ってるけど微妙に違うような？？みたいな事故が起きなくなる。
Vue.js New Team by @kazu_pon
Vue.js の開発体制や、contributionのrule、これからのRoadMapのお話し。
また、大きなOSSにおける開発方法や、悩みなど。
ネイティブアプリでもFluxしたい by @yonekawa
SwiftFlux の開発者による、iOSアプリケーションでのFluxアーキテクチャ構築のお話し。
iOSにおいてMVVMを構築した時のつらみ、Fluxにすることで解決できる問題など。
how can I make frontend engineer training @kawaguti
フロントエンドの教育体制をいかにして構築するかというお話し。
大企業にお勤めの方で、含蓄に富んだお話しでした。
気の利いた入力コンポーネント by @ymrl
ユーザが使っていて気持ちのよい入力コンポーネントにするために考えるべきこと。
また、Reactにおける具体的な実装の紹介。
チーム産、やさしさが香るフロントエンドコード〜jshintとscss-lintのソースをかけて〜 by @takuhito_hihara
www.slideshare.net
コード品質を保ち、かつ書き手の教育のためにlintを活用するお話し。
lintをかけるべきタイミングや、そのために活用しているpluginの紹介。
requireの循環参照 by @yo_waka
CommonJSのrequireで循環参照していると、2度目以降のrequireで空のobjectが返ってきてしまうというつらい問題。
それに対しどう対処するかというお話し。
サービス改善のために エンジニアがすること、 しないこと by @kamonegi1977
RailsにおいてABテストの構築する方法の紹介。
また、その作業においてサーバサイドエンジニアとフロントエンドエンジニアの作業分担、意識するべきこと。
座談会
@kuy さんが飛び入りで参加してくださって、より議論の幅を広げることができました！ ありがとうございました 🙇
弊社からは @kambieldenと@ymrlが。
みんなのウェディングさんからは @azipon_zzz と @kamonegi1977さんが前に出てくれました。
また、E2Eテストの話題が出た時には、弊社QAエンジニアの@tmasuharaに前に出てもらって語ってもらいました。(無茶振りすみませんでした！)
主には
- 各社のjsフレームワークの変遷
- cssの標準化への取り組み
- APIの構築で気をつけるべきこと
- Viewのテスト、E2Eのテストをどうしているか
- チームで開発する上での情報共有の大切さ。活用しているツールなど
というお話しをしました。
加えてslackで騒いで拾ってもらう文化を作るの大事とか。
レガシーなイメージあるけど実はメール便利！とか。
webエンジニアならでは話も出て盛り上がった。
感謝
LT大会では @xga に司会をしてもらったり、
準備の時にも社内の有志メンバーが自発的に会場設営をはじめてくれてたり、
みんなのウェディングさんも受け付けしてくれたり(当日丸投げですみませんでした！)、
結構忙しくてテンパっていたのですごく助かった。
当日手伝ってくれた方々ありがとうございました！ 🙇🙇🙇
ちゃんと開催できたのはみなさんのおかげです。
(実際のところ、自分は飲み物が来たのが開場10分前で焦ってたり、直前に会場説明資料作ってたり準備不足乙奴だったのでほとんど使いものになってませんでした。。すみません。。)
感想
割と雑な感じであんまり深く考えずに開催してみた感じだったけど、レベルも高いちゃんとした勉強会になってよかった！
こんな感じで、いろんな方と交流できる会をどんどん開催していきたい！
