PWAの技術スタック


Googleが提唱しているPWAは様々なフレームワークやツールを使って開発することができます。

天野は以下のフレームワークやツールを使ってPWAを開発することが多いです。それらを紹介します。

Ionic

Ionicはオープンソースのモバイルアプリ開発フレームワークです。

もともとはwebview上で動くiOSとAndroidのアプリをいっぺんに作れるハイブリッドアプリ開発フレームワークとして 開発されていましたが、去年あたりからPWAもコンパイルできるようになりました。

Ionicで開発することで、iOS、Android、PWA対応のアプリを一度のコーディングで終える事が可能になります。

UIの殆どは<ion-xxx>といったIonic独自のタグで記述され、コンパイル時にiOS, Android, PWAにあったコードを生成します。

Angular

AngularはGoogle謹製のJavascriptのフレームワークです。

IonicはモバイルアプリのUIを提供していてサーバーなどの連携の部分はAngularを使って書きます。

HTMLテンプレートを分離したコンポーネントモデルを採用していて、データバインディングを使ってMVVMで開発可能です。

最近はvue.jsやReactJSに押され気味なAngularですがコミュニティーも大きくツールなども多く用意されていて開発には困らないです。

Firebase

Firebaseは2011年に創業されたリアルタイムデータベースのサービスです。

2014年にGoogleに買収された後はGoogleがアプリ開発のバックエンドに必要な様々な機能を追加しています。

現在天野がPWA開発で使っているのは

  • Authentication 認証周りのライブラリ、SMS認証も使える
  • Hosting PWAのJSファイルなどを置いて公開できる。Herokuみたいなもの
  • Cloud Functions これまでサーバー内で動かしていたNodeJSの関数をクラウドで実行できる

Databaseも以前は使っていたのですが、relationを持ったデータが扱えないとかいろいろ使いにくいので最近はGraphQLを使っています。

GraphQL

アプリなどのクライアントとサーバーが交信する仕組みのRESTの後に来ると言われている次世代のAPIの仕様。

もともとFacebookが2012年くらいから内部的に使っていて2015年に外部公開してから少しずつ使われるようになってきている。

これまでデータ構造を決めてデータベースを構築してそれと交信するための仕組みとしてあったRESTという2層の仕組みではなく、relationを持ったデータを定義するだけでクライアント側からデータを操作できるようになる。

MySQLのスキーマを定義するだけでアプリ側からスキーマに対して読んだり書いたりするAPIが用意されるようなイメージ。

以前の天野のGraphQLの記事でもう少し詳しく説明しています。

Algolia

Algoliaは2012年にパリで創業されたリアルタイム検索を実現するデータベースのプラットフォーム。

リアルタイム検索と言われても分からないと思うのでこのデモを見てもらえれば分かります。

これはECサイトにAlgoliaのリアルタイム検索を入れた例ですが、検索条件を入れるだけですぐ検索結果が返って来ます。

いろんな検索条件を入れて検索ボタンを押してくるくる待って検索結果が出てくる検索とは決定的に違うのが分かりますね。

AlgoliaはPWAの開発とは直接は関係ないのですが最近天野が作るPWAに良く入れてるので一緒に紹介してみました。

By Takeshi Amano on August 21, 2017.

Canonical link

Exported from Medium on June 9, 2019.