Roppongi.js #5
https://gyazo.com/f862b053fbaf9e73cd7c0d0eaa6f695c
https://roppongi-js.connpass.com/event/95936/
会場:株式会社アイスタイル
概要
六本木らへんのJSer集合
らへんの定義はご自由に
スポンサーLT
FirebaseとNuxt.jsでSSRやってみた Kenjiro kubota
https://study.istyle.co.jp/#/
Firebase
Nuxt.js
Vuetify
SSRしたかったけどCloud Functionsが動いてくれなかった
nuxt generateで静的ファイル書き出し
Firebase Function最近node v8でうごくようになったのでNuxt最新が動くように
HostingでIP制限 or Basic認証がしたかった
ExpressでRoutingできる
index.htmlにアクセスすると見れてしまう
ajaxでパスワード対応
httpsアクセスがめっちゃ遅い
Functionsのコンテナはあまりつかってないと止まるので、復帰に時間がかかる
01. TBD by boiyaa
02. stencilが良さそうな話 by adwd118
メリカリ・メルペイ
https://slides.com/adwd/stencil_is_yosasou#/
https://stenciljs.com/
ionicチームによるWeb Components/PWAコンパイラ
Custom Elements
PWA
AngularとReact.jsを混ぜたようなシンタックス
TypeScript
code:start
# npm 6 or higher
# create component library
$ npm init stencil component my-components
# create stencil application
$ npm init stencil app my-app
# 2018/8/22時点ではこれがないとbuildでこける :innocent:
$ npm i -D request
$ npm start
$ npm test
$ npm build
標準のCustom Elementsでできないこと
属性に関数をわたせない
Stencilは属性に関数を渡せる
属性にオブジェクトを渡せない
Stencilは属性にオブジェクトも渡せる
Prerenderingがよさそう
lit-htmlでもいいんじゃないか
03. Conditional Types I/O by takepepe
株式会社ディー・エヌ・エー
https://speakerdeck.com/takefumiyoshii/o-1
Redux
Actionを中心に動く
MutaitionはActionに順応する
Mutation = Stateに情報を加えるもの
Action 選定 / State変更の債務が混在している?
Actionは最初から複・Reducerの関心事なのか?
Actionを除くとどうなる?
redux-aggregate
https://qiita.com/Takepepe/items/a79e767b38981c910c3f
npm.icon https://www.npmjs.com/package/redux-aggregate
Conditional Types I/O
同じ定義でも使い所で振る舞いが変わる
合成派生型の自動導出テクニック
04. ServiceWorkerをproductionで使ってる話 by shokai
Nota Inc.
/shokai/ServiceWorkerをproductionで使ってる話
ScrapboxにService Workerを使って爆速になった
https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
オフライン表示だけじゃない
Requestを途中で書き換えたり
勝手にRequestを発行してcacheをあっためる
Sentryを入れよう
http://npmjs.com/package/raven-js
Service Workerまわりのエラーを全部補足できる
prefetchでリクエストバリ増える
/shokai/WebWorkerをproductionで使ってる話
遅い配信のときではprefetchさせない
https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType
Service Workerのライフサイクル
http://slides.com/laco/2017-09-14_sw-lifecycle#/
まとめ
ただのオフライン表示システムではない
プログラマブルなproxyです
下手すると24時間サービスが開けなくなる恐怖
わからない事だらけだ
怖いのでSentry入れよう
05. WebPagetestから始める継続的パフォーマンス改善 by azu
http://azu.github.io/slide/2018/roppongijs/webpagetest-performance.html
06. Local State Management with Apollo Client by Kodai Nakamura
Wantedly
https://speakerdeck.com/kdnk/local-state-management-with-apollo
GraphQLでのState Management
ApolloをつかうときStateをどう使うか?
Stateが2つになっちゃう
Stateの整合を取りづらくなる
データの更新方法がちがう
apollo-link-state
07. 続・貢献できるOSSの探し方 by ohbarye
https://speakerdeck.com/ohbarye/how-to-find-good-first-issues-part-2
前回:https://speakerdeck.com/ohbarye/how-to-find-good-first-issues
good first issue
#勉強会 #JavaScript