1. JSFとJAX-RSで作る
Thin Server Architecture
GlassFish Users Group Japan 勉強会 2013 #1
2013/06/14 Toshiaki Maki (@making)
13年6月14日金曜日

2. 自己紹介
• Toshiaki Maki (@making)
• http://blog.ik.am
• SIer
• 金魚本一部翻訳
• 趣味でJavaEE
13年6月14日金曜日

3. 自己紹介
• Toshiaki Maki (@making)
• http://blog.ik.am
• SIer
• 金魚本一部翻訳
• 趣味でJavaEE
13年6月14日金曜日

4. 自己紹介
• Toshiaki Maki (@making)
• http://blog.ik.am
• SIer
• 金魚本一部翻訳
• 趣味でJavaEE
LT希望
者は何かコメントすれば蓮沼さん
が拾ってくれます！
13年6月14日金曜日

5. INDEX
• Thin Server Architectureとは？
• Java EEで実現するには？
• まとめ
13年6月14日金曜日

6. Thin Server
Architectureとは？
13年6月14日金曜日

7. 従来のServer Architecture
Server
Web
Browser
Form
HTML
Controller
View
Model
13年6月14日金曜日

8. Thin Server Architecture
• 従来のサーバーサイドのアーキテクチャからビュー処理
を除き、クライアントサイド(ブラウザ)でビュー処理
• HTTP(or WebSocket etc)というシンプルなプロトコル
• JavaOne2012 Project Avatarの文脈で登場したが、前から
ある概念
ServerClient JSON/REST
View処理 業務処理
13年6月14日金曜日

9. Java EEで実現するに
は？
13年6月14日金曜日

10. JavaEEによるTSA実装
• JAX-RS + JavaScript MVCフレームワーク
(Backbone.jsなど)
• Example: http://bit.ly/11Cyxpu
JAX-RS
Server
JSON
Web Browser
(Backbone.js)
13年6月14日金曜日

11. JavaEEによるTSA実装
• JAX-RS + JavaScript MVCフレームワーク
(Backbone.jsなど)
• Example: http://bit.ly/11Cyxpu
JAX-RS
Server
JSON
Web Browser
(Backbone.js)
Router
View
Model/
Collection
Template
13年6月14日金曜日

12. JavaEEによるTSA実装
• JAX-RS + JavaScript MVCフレームワーク
(Backbone.jsなど)
• Example: http://bit.ly/11Cyxpu
JAX-RS
Server
JSON
Web Browser
(Backbone.js)
Router
View
Model/
Collection
Template
JavaScript書きたくない…
13年6月14日金曜日

13. JavaScriptを書きたく
ない
13年6月14日金曜日

14. JSF！
13年6月14日金曜日

15. JSFとJAX-RSでどうやって実
現するか？
• JSF2.0のAjaxサポート≠ RESTサポート
• JAX-RSでRESTfullなサーバー処理を実装
してもJSFからアクセスできない！
13年6月14日金曜日

16. JSFとJAX-RSでどうやって実
現するか？
• JSF2.0のAjaxサポート≠ RESTサポート
• JAX-RSでRESTfullなサーバー処理を実装
してもJSFからアクセスできない！
JSFのタグはRESTアクセ
スをサポートしていない
13年6月14日金曜日

17. JSFとJAX-RSでどうやって実
現するか？
• JSF2.0のAjaxサポート≠ RESTサポート
• JAX-RSでRESTfullなサーバー処理を実装
してもJSFからアクセスできない！
JSFのタグはRESTアクセ
スをサポートしていない
だがJSFのリッチなコンポーネントを使ってクライ
アントを実装したい!
13年6月14日金曜日

18. JAX-RS 2.0
JSF
Facel
ets
Man
aged
Bean
Ajax
JAX-RS
Server
EJB
13年6月14日金曜日

19. JAX-RS 2.0
• クライアントAPIサポート
JSF
Facel
ets
Man
aged
Bean
Ajax
JAX-RS
Server
EJB
13年6月14日金曜日

20. JAX-RS 2.0
• クライアントAPIサポート
JSF
Facel
ets
Man
aged
Bean
Ajax
JAX-RS
Client
JAX-RS
Server
JSON EJB
13年6月14日金曜日

21. EJB
JSFによる広義のTSA
• JSFもクライアントとみなす
• Client側のManagedBeanでは業務処理を行わない
• 業務処理はServer側のEJB等で行う
JSF
Facel
ets
Man
aged
Bean
Ajax
JAX-RS
Client
JAX-RS
Server
JSON
13年6月14日金曜日

22. EJB
JSFによる広義のTSA
• JSFもクライアントとみなす
• Client側のManagedBeanでは業務処理を行わない
• 業務処理はServer側のEJB等で行う
JSF
Facel
ets
Man
aged
Bean
Ajax
JAX-RS
Client
JAX-RS
Server
JSON
13年6月14日金曜日

23. EJB
JSFによる広義のTSA
• JSFもクライアントとみなす
• Client側のManagedBeanでは業務処理を行わない
• 業務処理はServer側のEJB等で行う
JSF
Facel
ets
Man
aged
Bean
Ajax
JAX-RS
Client
JAX-RS
Server
JSON
Client
13年6月14日金曜日

24. EJB
JSFによる広義のTSA
• JSFもクライアントとみなす
• Client側のManagedBeanでは業務処理を行わない
• 業務処理はServer側のEJB等で行う
JSF
Facel
ets
Man
aged
Bean
Ajax
JAX-RS
Client
JAX-RS
Server
JSON
Client Server
13年6月14日金曜日

25. Demo
http://bit.ly/jsfjaxrs
13年6月14日金曜日

26. コード例(REST client)
• 詳細は http://bit.ly/jsfjaxrs
@Rest @Singleton public class TodoRestRepository implements TodoRepository {
private static final String TODO_RESOURCE_PATH = "http://localhost:8080/todo-tsa/todo";
private final Client client;
public TodoRestRepository() {
this.client = ClientBuilder.newClient();
}
@Override public Collection<Todo> findAll() {
return
this.client.target(TODO_RESOURCE_PATHTH).request(MediaType.APPLICATION_JSON_TYP
E)
.get(new GenericType<Collection<Todo>>);
}
@Override public Todo create(Todo todo) {
return this.client.target(TODO_RESOURCE_PATH).request()
.post(Entity.entity(todo,
MediaType.APPLICATION_JSON_TYPE)).readEntity(Todo.class);
}
...
13年6月14日金曜日

27. コード例(ManagedBean)
• 詳細は http://bit.ly/jsfjaxrs
@ManagedBean(name = "todoManagedBean") @ViewScoped
public class TodoManagedBean {
protected Collection<Todo> todos;
protected Todo todo = new Todo();
@Inject @Rest
protected TodoRepository todoRepository;
public void findAll() {
this.todos = todoRepository.findAll();
}
public void create() {
todoRepository.create(this.todo);
findAll();
this.todo = new Todo();
}
...
https://github.com/making/todo-tsa
13年6月14日金曜日

28. TSAのメリット
JSF
Facel
ets
Man
aged
Bean
Ajax
JAX-RS
Client
JAX-RS
Server
JSON
13年6月14日金曜日

29. TSAのメリット
JSF JAX-RS
Client
JAX-RS
Server
JSON
13年6月14日金曜日

30. TSAのメリット
JSF JAX-RS
Client
JAX-RS
Server
JSON
13年6月14日金曜日

31. TSAのメリット
JSF JAX-RS
Client
JAX-RS
Server
JSON
Java-FX JAX-RS
Client
JSON
13年6月14日金曜日

32. TSAのメリット
JSF JAX-RS
Client
JAX-RS
Server
JSON
Java-FX
Smart Devices JSON
JAX-RS
Client
JSON
Web Browser JSON
.NET JSON
13年6月14日金曜日

33. TSAのメリット
JSF JAX-RS
Client
JAX-RS
Server
JSON
Java-FX
Smart Devices JSON
JAX-RS
Client
JSON
クライアントが変わっ
てもサーバーサイドは
そ の ま ま 利 用 で き る
Web Browser JSON
.NET JSON
13年6月14日金曜日

34. デメリット
• グルーコード
• HTTPオーバーヘッド
• 安易にコンポーネント詰め過ぎてDOM死
13年6月14日金曜日

35. 今後の展望
• 認証はOAuth2でアクセストークンを発行。
• RESTリソースを自前で管理しているなら
Resource Owner Password
Credentials(grant_type=password)でOK?
• Project Avatar？
• WebSocket
• Server-Sent Events
13年6月14日金曜日

36. まとめ
• JSFとJAX-RSでTSA
• サーバー: JAX-RS Server
• クライアント: JSF+ JAX-RS Client
• TSAはマルチクライアント(Java-FX, Smart
Devices,…)時代に注目のアーキテクチャ
13年6月14日金曜日