私は脱jQuery(脱DOM操作)したい系の者で、 React, Vue.js, Hyperapp については初心者です。サンプルコードは公開しておりますが、正確さは保証いたしません。この記事は参考程度に読んで頂ければと思います。
作ったもの
以前に React, Vue.js で製作したRaspberry Piの無線LANをmicroSDで簡単に設定するためのツールを Hyperapp でも作ってみました
ツールへのリンク: https://mascii.github.io/wpa-supplicant-conf-tool/
このツールはブラウザ上でSSIDとパスフレーズを入力してリストに追加するだけで簡単にRaspberry Piの無線LAN設定ファイル(wpa_supplicant.conf)を作成でき、これをPCでRaspbianの入ったMicroSDに書き込んでおくことでRaspberry Pi起動前から無線LANの設定ができるものです。
(Raspberry Piをお持ちの方には、一応実用的なツールとして使えるものとなっており、「サンプルアプリ」ではないのかもしれませんが、ToDoリストに毛が生えた程度のアプリのため、タイトルに「サンプルアプリ」というキーワードを入れております)
リポジトリ
https://github.com/mascii/hyperapp-wpa-supplicant-conf
https://github.com/mascii/react-wpa-supplicant-conf
https://github.com/mascii/vue-wpa-supplicant-conf
比較対象
- サンプルアプリのソース(JavaScript)をwebpackでバンドルしたJSファイルのファイルサイズ
- プロダクションビルド
- UglifyJS による minify あり
バンドルするnpmパッケージ
- React or Vue.js or Hyperapp
-
crypto-js の
crypto-js/pbkdf2
サイズを比較してみた
| サイズ(Bytes) | |
|---|---|
| React | 110293 |
| Vue.js | 76012 |
| Hyperapp | 12026 |
React と Hyperapp とで98KBも違いが出ました。
Hyperapp を使ってみた感想
- Hyperappで作るとかなりサイズが小さくなることを確認できた
- JSXが使えるため、Reactに慣れている方は苦労しないと思った(
onclickのように camelCase でないといった違いはある) - 情報は少ないので大きな規模のプロダクトには不向きだと思うが、個人で小さなものを作るのには良いと思った
- Flash領域が限られていたり、電池持ちなどの考慮が必要なIoT機器(Wi-Fiアクセスポイントとして機能できるESP32など)をWebサーバーとして機能させるといった使い方とは相性が良いのではないかと思った