「Angular 4 の最新動向と、2017年再注目のDart、そしてAngular Dart 」Dart の部 3/3 on 2017.3.6

1. 「Angular 4 の最新動向と、2017年再注目のDart、そしてAngular Dart 」
Dart の部 3/3
HRMOS事業部 小林 達
at BizReach on 2017.3.6
サーバーサイド Dart
を試してみる

2. 自己紹介
✓ 小林 達 (こばやしさとし)
✓ HRMOS[ハーモス]プロダクト開発部
✓ こぼれ球拾いが気軽にできると嬉しい昨今
▶ さくっと使えて引き継ぎやすい武器が欲しい

3. なぜ？

4. Googleさんの注力はAngularとFlutter(アプリ)。。
サーバサイドは分野は正直流行っていない。。が、しかし、
✓ 言語仕様の簡潔な静的言語として、サーバでも生産性が期待できるのでは？
✓ 標準ライブラリが充実しているので、リッチなフレームワークがなくてもちょっとした
用途に使えるのでは？
サーバーサイド Dart ？

5. もしつかえるならば、
ちょっとした用途、つまり、
✓ 社内サービスだけどフロントリッチなのがさっと作れたりするのでは？
✓ フロントメインの人にとっても、とっつきやすいのでは？
✓ 2本め、3本めの武器として使い回しが効くのでは？

6. フレームワークを選ぶ

7. Webフレームワークの選択
✓ ALL-IN-ONEなら、Aqueduct の開発はアクティブなのでいいかも
● stablekernelがバックアップ(アトランタのスタートアップ？)
● Dart Developer Summit でも発表あり
● DI, ORM, 認証, テンプレート, テスト, DBマイグレーションなどの機能
✓ シンプルなら、純正のShelfが第一候補
● shelf_xxx など機能ごとにパッケージが分かれている
● フレームワークというより、フレームワークの構成部品という位置づけなので、
初心者にはとっつきづらいかも
✓ 中間的な選択肢として、

8. Redstone をチョイス

9. Redstone をチョイス
Awesome Dart リストから見ていって選んだ。
✓ Shelf を利用したラッパー
✓ ぱっと見分かりやすい
✓ 比較的アクティブ
✓ ALL-IN-ONEではないので、DBアクセスなどは別途チョイスが必要

10. 書いてみる

11. Hello World !
server.dart ファイルに main関数とhelloworld関数
を追加して、dart コマンドで起動すれば立ち上が
る。シンプル。
※ 実際には、以下を先に実施
1. stagehand で server-shelf のテンプレート作成
2. pubspec.yaml の依存を変更
3. pub get
@web.Route("/")
helloWorld() => "Hello, World!";
void main() {
web.setupConsoleLog() ;
web.start();
}
❯❯❯ dart bin/server.dart
⏎
INFO: 2017-03-03 11:23:56.494179: Configured target for / [GET]: .helloWorld
INFO: 2017-03-03 11:23:56.523415: Running on 0.0.0.0:8080

12. Hello World !

13. URLからのパラメータ取得
getUser関数を書く。
@web.Route("/user/find/:id")
getUser(String id) =>
{"userId": id, "name": "User", "login": "user"};
@web.Route("/")
helloWorld() => "Hello, World!";

14. DI、Future、JSON
class HeroService {
Future<List<Hero>> getHeroes() { … }
}
@web.Group("/heroes")
class HeroController {
HeroService _service;
HeroController(this._service);
@web.Route("/list")
service() => _service.getHeroes()
.then((heroes) => { "heroes": heroes});
}
void main() {
web.addModule(new Module()
..bind(HeroService)) ;
web.setupConsoleLog() ;
web.start();
}
✓ DIは、AngularのDIライブラリ
(di.dart)をベースにしたもので、
ルーティングなどで利用。
✓ Futureで返したレスポンスは、そ
のまま返せる。
1
1
1
2
2

15. DI、Future、JSON
✓ /heroes/list へアクセス。
(Hero の toJson() は略)
class HeroService {
Future<List<Hero>> getHeroes() ...
}
@web.Group("/heroes")
class HeroController {
HeroService _service;
HeroController(this._service);
@web.Route("/list")
service() => _service.getHeroes()
.then((heroes) => { "heroes": heroes});
}
void main() {
web.addModule(new Module()
..bind(HeroService)) ;
web.setupConsoleLog() ;
web.start();
}
3
3

16. もっと学べそうなリソースもあった
✓ 公式サイト
● Write HTTP Clients & Servers
✓ 1時間コードラボ？
● https://github.com/dart-lang/one-hour-codelab

17. まとめ

18. まとめ
✓ 奇をてらった感じがない。とっつきやすい ！
✓ 開発していて楽しい ！
✓ スタブサーバとして使うのはありかも
● フロントエンドエンジニア主体でメンテできる感がある
● 少しずつスキルを広げられそう
✓ Redstoneをプロダクションに使うには不安
● 品質とかより、今後の展望的に。ドキュメントもあまりない
✓ 小さなものであれば、自分達で作ってもいいのかもしれない
● 勉強不足ですが、ドキュメントは結構ある。
● ライブラリのコードも読もうと思えば読める