In this session you will discover to use the Nuxeo Platform to build an HTML5 application on top of a JavaScript framework. After a quick introduction to AngularJS and its ecosystem, we will review the new Nuxeo REST API and then explain how to use it to build a sample application.

1. Nuxeo & AngularJS
10/09/2013 Damien METZLER
Thursday, October 17, 13

2. Schedule
• What’s AngularJS?
• Nuxeo’s New REST API
• Studio + Nuxeo + AngularJS demo
2
Thursday, October 17, 13

3. What’s AngularJS?
3
Thursday, October 17, 13

4. What’s AngularJS?
• JS Framework
• Made to build dynamic HTML pages
• Bi-directional data binding
4
Thursday, October 17, 13

5. What’s AngularJS?
• JS Framework
• Made to build dynamic HTML pages
• Bi-directional data binding
5
Thursday, October 17, 13

6. What’s AngularJS?
Let’s start
with a
simple
HTML page
6
Thursday, October 17, 13

7. What’s AngularJS
7
Thursday, October 17, 13

8. What’s AngularJS?
Make our page an
AngularJS application
8
Thursday, October 17, 13

9. 9
Thursday, October 17, 13

10. What’s AngularJS?
We have a problem
10
Thursday, October 17, 13

11. What’s AngularJS?
We have a problem
10
Thursday, October 17, 13

12. What’s AngularJS?
We have a problem
We need a
serialization
mechanism that
works on the
web
10
Thursday, October 17, 13

13. Nuxeo’s New REST API
11
Thursday, October 17, 13

14. Nuxeo’s New REST API
HTTP is a 23-year-old protocol
Exposes resources
Through commands
12
Thursday, October 17, 13

15. Nuxeo’s New REST API
GET
CONNECT
OPTIONS
Resource
HEAD
PUT
POST
TRACE
PATCH
CONNECT
DELETE
13
Thursday, October 17, 13

16. Nuxeo’s New REST API
GET
CONNECT
OPTIONS
Resource
HEAD
PUT
POST
TRACE
PATCH
CONNECT
DELETE
14
Thursday, October 17, 13

17. Nuxeo’s New REST API
GET
POST
Resource
PUT
DELETE
14
Thursday, October 17, 13

18. Nuxeo’s New REST API
Resource
http://...:8080/nuxeo/api/path/default-domain/workspaces/myWorkspace
GET
Retrieves the document
PUT
Updates the document
POST
Creates a document
DELETE
Deletes the document
15
Thursday, October 17, 13

19. Nuxeo’s New REST API
Documents are
rendered in JSON
Perfect for the web
16
Thursday, October 17, 13

20. Nuxeo’s New REST API
Other API endpoints / adapters
• GET .../myWorkspace/@children
• POST .../myWorkspace/@op/zipFiles
• GET /nuxeo/api/user/Administrator
http://doc.nuxeo.com/x/WIvZ
17
Thursday, October 17, 13

21. Studio + Nuxeo + AngularJS
18
Thursday, October 17, 13

22. Studio + Nuxeo + AngularJS
Let’s use Nuxeo Studio to define a new Book type
19
Thursday, October 17, 13

23. Studio + Nuxeo + AngularJS
... and create our Books in Nuxeo
20
Thursday, October 17, 13

24. Studio + Nuxeo + AngularJS
• Before starting our application will need some
enhancements:
•
2 views: List and Detail
•
Several controllers: List, Edit, Create
•
Needs a routing table
21
Thursday, October 17, 13

25. Studio + Nuxeo + AngularJS
#/
ListCtrl
#/edit/{docId}
EditCtrl
#/new
CreateCtrl
22
Thursday, October 17, 13

26. Studio + Nuxeo + AngularJS
23
Thursday, October 17, 13

27. Studio + Nuxeo + AngularJS
Let’s start by
Retrieving documents from Nuxeo ...
24
Thursday, October 17, 13

28. Studio + Nuxeo + Angular
25
Thursday, October 17, 13

29. Studio + Nuxeo + AngularJS
Creating documents ...
26
Thursday, October 17, 13

30. Studio + Nuxeo + Angular
27
Thursday, October 17, 13

31. Studio + Nuxeo + AngularJS
Editing documents ...
28
Thursday, October 17, 13

32. Studio + Nuxeo + Angular
29
Thursday, October 17, 13

33. Studio + Nuxeo + AngularJS
Deleting documents ...
30
Thursday, October 17, 13

34. Studio + Nuxeo + Angular
31
Thursday, October 17, 13

35. Studio + Nuxeo + AngularJS
• AngularJS nxSession service wraps call to the REST
API
• Allows GET, PUT, POST & DELETE commands
• Integrates seamlessly with AngularJS
32
Thursday, October 17, 13

36. Studio + Nuxeo + AngularJS
33
Thursday, October 17, 13

37. And now?
34
Thursday, October 17, 13

38. Future Evolutions
• Add a generator with tooling like Yeoman
•
$ yo nuxeo
• Provide Nuxeo AngularJS library as a Bower
component
• Add some Nuxeo directives
•
<nuxeo-form doc="doc" view="create">
•
<nuxeo-content-view doc="doc" name="libraryCV">
•
...
35
Thursday, October 17, 13

39. Best nuxeo.io Companion
• nuxeo.io provides a repository with the REST API
• Nuxeo Studio provides the customization
• AngularJS provides the front-end
• No Java needed
36
Thursday, October 17, 13

40. References
• Code : http://github.com/dmetzler/nuxeo-book/
• Follow me : @damienmetzler
37
Thursday, October 17, 13

41. 13
ld
or
xW
#N
Questions
Thursday, October 17, 13
?

42. 13
ld
or
xW
#N
Thank you
Thursday, October 17, 13
!