blog

[mithril.js] [polythene]
rails, ES6, mithril.js, Polythene で SPA(シングルページアプリケーション)

はじめに

正月が開けてからほとんど記事がかけてない vimtaku です。
今回はずっと気になっていた Polythene を趣味や業務でちょっと触ったので、それについて書きます。

Polythene とは

ポリエチレンですね。 mithriljs で実装された、 マテリアルデザインのライブラリです。
動的にスタイルを読みこんだりするので、 SPA を作るのにかなり良さそうです。

こちらが Polythene のデモです。

version 0.2.0 で checkbox や textfield などの input 系が追加されました。
まだ発展途上なのでその辺の覚悟は必要かと思います。

vue.js とかでもこういうのがあるみたいです。

ちょっとつくってみました

https://gyazo.com/a691720ce48cccccbe7e96dc0105ef95.png 前回に引き続き特に何もない、ボタンを押すとカツオを足していくという謎のアプリなのですが、
これもサクッと作れて良かったです(いろんなもの込で1時間くらい、アプリ部分だと5-10分程度だと思う)。

ソースはこちらにあるので、気になる方は見てみてください。
実際慣れてくるとこんな感じの view は本当にサクッと作れるので楽しいです。
https://github.com/vimtaku/railswithwebpack

ちなみに webpack を rails で使う方法を書いてた方がいたので、そちらを fork してつくってます。

Polythene のここがすごいと思う

基本的に組み合わせていくだけで、それっぽい UI や動きができます。
しかも、web エンジニアには馴染みがある js で書くことができます。

デモサイトを見るとわかりますが、ページの遷移がかなり早いです。
これは SPA の強みだと思いますし、基本コンポーネントを見ているだけで、大抵のものは作れる気がしてきませんか?

所感

mithril + Polythene

デザイナリソースが無い状態で、なんとなくおしゃれ、かつ高速なwebサイトを作れるので便利です。
js が得意なエンジニアが趣味で何かを作る場合などは持って来いだと思っています。

また、Polythene のソースコードを読むと、mithril の使い方がわかってとても良いと思います。
僕の観測範囲内では、じわじわとスターが増えているので、注目している方も多いんだと思います。
(そもそも mithril.js の人口が少ないんじゃないかっていうのは置いといて。)

実際、慣れてくればかなり簡単にかけると思います。
クライアントサイド開発によくある Pub/Sub のライブラリも豊富に存在しますし、
API client で取ってきたjson の変換などもシンプルですし、
promise などもあるし、 DB もあるし、たいていのことはできるでしょう。

ネイティブアプリ VS Web アプリ 問題

僕自身が考える iOS, Android の一番のメリット(価値)は UI/UX とプッシュ通知だと思っています。
これは以前から変わりません。
SPA 単体ではもちろん web ブラウザからアクセスですし、プッシュ通知もありません。
しかし、とりあえず SPA をつくって、やっぱいい感じで、これならいけそうだ!となったあとに、
「push通知したい」、「アプリとして使いたい」、などの要求に応えるため Android などに展開することなどもできると思います。

私たちの業界でいえば、業務系のアプリなら android タブレット配る、などのことが可能だったりするので、
Android と web で使えると便利、みたいなことが良くあります。
このような要求のとき、SPA で開発しておいてマルチパブリッシュできると良いのかもしれません。
ここについては apache cordova というソリューションもあるんじゃないかと思っており、調査中です。

開発しやすさについて(私感)

筆者比ですが、iOS や Android よりも素早くそれっぽいアプリをつくれるんじゃないかなと思います。

  • もちろん js に慣れているというのもあります
  • 筆者は簡単なアプリですが iOS を趣味で1本、 Android の業務アプリを1本業務で書いたことがある程度です

蛇足

React.js を触ってみたい気持ちがあるけどまだたどり着けてない…

参考

終わりに

今年になって、エンジニアも少しずつ増えてきました。
しかし、まだまだやることがたくさんある状態なので、エンジニアのみなさんの力が必要です!
水産といういままとは全く違う業界で、チャレンジしてみませんか?

採用関連に関してもっと知りたい方は こちらの wantedly を参照してください。