1. AMD
basic & practice
2013.11.11 HTML5 Caravan Tokyo
Bathtimefish 村岡 正和

2. むらおか まさかず
村岡正和
@bathtimefish
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
HTML5-WEST.jp

3. 監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中！！

4. JavaScript

5. Suited to Large-scale dev?

6. JS disable import
| “include” | “require”..

7. JS
Java etc..
moduleA()
main()
moduleB()
.....
main()
import(a)
moduleA()
import(b)
moduleB()

8. Hard to inherit... & OOP

9. AMD
Asynchronous Module Definition

10. https://github.com/amdjs/amdjs-api/wiki/AMD

11. AMD API
•
•
•
ID base module management
loading asynchronously
difining module dependencies

12. implementation..

13. http://requirejs.org/

14. requirejs features
•
•
•
•
AMD
using require API
cross-platform
browser / node.js
includeing optimization tool
r.js

15. Demonstration

16. http://yeoman.io/

17. http://www.slideshare.net/bathtimefish/yeoman-html5-web20130424-2

18. https://github.com/yeoman/generator-webapp

19. main.js
modules location
dependencies
require callback

20. app.js
define callback

21. use jQuery in app.js

22. requirejs for multipage

23. https://github.com/robdodson/requirejs-multipage-shim-tutorial

24. in Yeoman
https://gist.github.com/bathtimefish/7080839

25. Thanks!