Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.js x Firebase で非同期に開発する

D0cbc297e483306fb188649ea56f0c8d?s=47 mikakane
January 19, 2019
Technology
0
1.7k

Nuxt.js x Firebase で非同期に開発する

D0cbc297e483306fb188649ea56f0c8d?s=128

mikakane

January 19, 2019
Tweet

More Decks by mikakane

See All by mikakane
コーディングがわからない
D0cbc297e483306fb188649ea56f0c8d?s=48 mikakane
0
92
Web制作現場のディレクションを支えるGitHub
D0cbc297e483306fb188649ea56f0c8d?s=48 mikakane
0
280
nuxt.js で plugins を作る
D0cbc297e483306fb188649ea56f0c8d?s=48 mikakane
0
400
@ionic/vue で Web アプリを作ってみる
D0cbc297e483306fb188649ea56f0c8d?s=48 mikakane
0
2.3k
Laravel Package Development
D0cbc297e483306fb188649ea56f0c8d?s=48 mikakane
16
4.6k
フロントエンドで作る理由
D0cbc297e483306fb188649ea56f0c8d?s=48 mikakane
1
890
Firebase で作る Web アプリケーション
D0cbc297e483306fb188649ea56f0c8d?s=48 mikakane
1
120
技術顧問の現場から - 制作と教育、学習と生産
D0cbc297e483306fb188649ea56f0c8d?s=48 mikakane
0
650

Other Decks in Technology

See All in Technology
EC／CRMの自社サービス開発をマネジメントするようになって1年でやってきたこととこれから / devio2022-takano-sho-road-to-good-development-team-management
Fee058832252e72722b8b03073ff6324?s=48 masaru_b_cl
0
430
ぼくらが選んだ次のMySQL 8.0 / MySQL80 Which We Choose
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
7
3k
20220803投資先CXO候補者向け 会社紹介資料_合同会社BLUEPRINT
08b07f5e5f554c4f4a6a30ef1cca28ad?s=48 hik
0
380
聊聊 Cgo 的二三事
B3a7c0d5c590642dbce68bce8929a2df?s=48 david74chou
0
330
psql, my favorite tool!
18749909c147a9ee98f6b112911943cc?s=48 nuko_yokohama
1
180
Step-by-Step MLOps and Microsoft Products
0fa6038e477031fcca028bab0efe07e3?s=48 shisyu_gaku
1
570
Sysdig Secure/Falcoの活用術! ~Kubernetes基盤の脅威モデリングとランタイムセキュリティの強化~
41202c03511a51064abb970da0ca9fad?s=48 owlinux1000
0
270
COSCUP x KCD Taiwan 2020 - 那些年我們在開源社群的日子 - Cloud Native Taiwan
E2dd1857f6fc1ff69adb2af80b56e9fc?s=48 pohsien
0
120
LINSTOR — это как Kubernetes, но для блочных устройств
93aef1d166a8a3536538eff713f80307?s=48 flant
0
3.6k
[Journal club] Vision Transformer with Deformable Attention
6f7b7931d8ce4dc1349767c8b086f355?s=48 keio_smilab
PRO
0
110
ECS on EC2 で Auto Scaling やってみる！
5a6e159c3f74fb7bd85e62efe5f34e2b?s=48 sayjoy
1
260
第22回 MLOps 勉強会：みてねのMLOps事情
25aaaf4419caea6083d18c4116e8faef?s=48 tonouchi510
1
1k

Featured

See All Featured
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
213
11k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
127
5.5k
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
226
16k
Producing Creativity
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
334
37k
Build your cross-platform service in a week with App Engine
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
17k
Teambox: Starting and Learning
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
123
7.7k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
Large-scale JavaScript Application Architecture
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
297
140k

Transcript

  1. chatbox.inc 後藤 知宏 Firebase で非同期に開発する

  2. chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter :

    @_mikakane エンジニア / 技術顧問

  3. chatbox.inc Firebase Google の提供する BaaS Service めっちゃ便利

  4. chatbox.inc Firebase Authentication Firebase を利用した 認証機構 Web GUI 操作で 簡単な認証機構を用意することが可能

    Mail 認証のほか、Google / Github などのサービス認証、 匿名認証にも対応で Oauth2 の 設定も簡単 認証のためのフローは JS を数行記述するだけ ポップアップ認証で、画面遷移も不要の Promise ベース認証

  5. chatbox.inc Firebase Database Realtime DatabaseとCloud Firestore どちらも NoSQL ベースで柔軟な利用が可能 Realtime

    Database は 大きなJSON ツリーに データを追加していく形式 Cloud Firestore は コレクションと呼ばれる単位で、 JSON ライクにデータを管理する形式

  6. chatbox.inc vuexfire Vue.js の ストア Vuex と Firebase Database を

    同期させるツール vuexfire Realtime Database 上の任意のパスと、 任意の state を紐付ける事ができる。 もちろん、 node の firebase モジュールを利用した、 任意の Read / Write 操作も可能

  7. chatbox.inc Firebase で バックエンド構築 コードを記述すること無く、 柔軟に利用可能なバックエンド基盤を構築できる フロントエンジニアに力を！

  8. chatbox.inc Web アプリケーション開発 frontend backend swagger Swagger を利用した REST API

    Schema の共有 フロントとバックエンド開発は 二人三脚

  9. chatbox.inc フロント開発の課題 バックエンドと二人三脚 API 仕様書をともにメンテしていく必要性 些細なデータでも、永続化のために バックエンドに 都度 API を作成・管理していかなければならない

    API の開発スケジュールにフロントが引きずられる 統合テスト、API のバグなど

  10. chatbox.inc Firebase を使った開発 frontend firebase Web GUI Firebase の管理画面を利用して Backend

    基板を構築 フロントエンドの実装担当者が、 アプリケーションの全機能を実装できる。

  11. chatbox.inc Really? システム利用データの集計、出力、管理機能など…

  12. chatbox.inc Firebase Admin 管理者権限で Realtime Database の 読み書きを実行したり、認 証のための ID

    トークンを確認したりできる。 Node.js / Java / Python / Go / C# で提供されている他、 REST API の実装で非公式に PHP や Ruby などの実装も 管理者権限で Database 全体を操作したり、 ユーザの認証を行ったりするのに便利

  13. chatbox.inc Firebase Admin frontend firebase backend REST API as Event

    auth with uid touch whole database uid as token

  14. chatbox.inc Firebase Anywhere フロントで完結させたい 業務ロジック関心外のデータを すべて Firebase で巻き取る。 DB 構成を「本当に必要な業務データ」のみに

    小規模向けのイメージが強いが、 大規模向けの REST API + SPA の開発でも、 REST API 開発規模を 削減するために…など利用場面は多い 後々、Firebase 上のデータを 管理部門で活用したくなったら Firebase Admin で簡単に巻き取れる。

  15. chatbox.inc Firebase で 変わる開発フロー バックエンドは より シンプルに 開発はより独立して、分割された責務を全うする形に

  16. chatbox.inc Firebase を使った開発依頼 お待ちしております。

  17. chatbox.inc FJUG Osaka

  18. chatbox.inc Lec Cafe

  19. chatbox.inc Lec Cafe

  20. chatbox.inc Thanks!