Hot Topics: The DuraSpace Community Webinar Series, “Introducing DSpace 7: Next Generation UI” Curated by Claire Knowles, Library Digital Development Manager, The University of Edinburgh. Introducing DSpace 7 February 28, 2017 presented by: Claire Knowles - The University of Edinburgh, Art Lowel - Atmire, Andrea Bollini - 4Science, Tim Donohue – DuraSpace

1. Hot Topics: DuraSpace Community Webinar Series
Hot Topics: The DuraSpace
Community Webinar Series
Series Fifteen:
Introducing DSpace 7:
Next Generation UI

2. Hot Topics: DuraSpace Community Webinar Series
Hot Topics: The DuraSpace
Community Webinar Series
Curated by Claire Knowles,
Library Digital Development Manager,
The University of Edinburgh

3. Hot Topics: DuraSpace Community Webinar Series
Webinar 1:
Introducing DSpace 7
Presented by:
Claire Knowles, The University of Edinburgh
Tim Donohue, DuraSpace
Art Lowel, Atmire
Andrea Bollini, 4Science

4. History: Why a new UI?
Claire Knowles

5. Background - Vision
Strategic Plan 2015 - 2018
- Technology
- Community
- Sustainability
https://wiki.duraspace.org/display/DSPACE/DSpace+2015-18+Strategic+Plan
Road Map
- Priority one: a single user interface
- Making DSpace lean and flexible
https://wiki.duraspace.org/display/DSPACE/RoadMap

6. Background - Two UIs
- Two User Interfaces
- Duplication of effort
- Different features
- New UI Group
- Prototype Challenge (8 entries)
- Rails, EmberJS, AngularJS, Spring
MVC, Spring Boot
https://wiki.duraspace.org/display/DSPACE/DSpace+UI+Prototype
+Challenge

7. UI Technology Selection Process
Tim Donohue

8. Prototype Challenge Analysis
(early 2016)
Decision Point: Java vs Javascript UI
● Client Side (JS) benefits
○ Dynamic, innovative
○ Separation of concerns (REST API)
● Client Side (JS) concerns
○ Search Engine Optimization (SEO)?
○ Accessibility?
https://wiki.duraspace.org/display/DSPACE/DSpace+UI+Prototype
+Challenge

9. Angular 2 Framework
● First beta in Dec 2015
● All benefits of Client Side UI
● Angular = most widely used platform
● SEO support (via Angular Universal)
● Accessibility support
https://angular.io

10. March - June 2016 (Demo at OR2016)
★ SEO (verified, Google Scholar)
★ Accessibility (verified, U of Kansas)
★ Web archiving (verified, RCAAP,
Portugal)
★ More dynamic user experience
★ Configurable UI
★ Backend still Java (5.x REST API)
DSpace 5 + Angular 2 Prototype
http://www.slideshare.net/tdonohue/introducing-the-
new-dspace-user-interface

11. OR2016 until Nov 2016
DSpace 6
Time Passes...

12. DSpace 7 UI Working Group
(late 2016)
Goal: Build the Angular UI / REST API for
DSpace 7
★ Coordination (Tim Donohue, DuraSpace)
★ Angular UI Subteam (Art Lowel, Atmire)
★ REST API Subteam (Andrea Bollini,
4Science)
https://wiki.duraspace.org/display/DSPACE/DSpace
+7+UI+Working+Group

13. DSpace 7 UI (Angular UI)
Art Lowel

14. Angular 2
• Framework by Google for building
applications in the browser.
• Only data from the server
• HTML generated by JavaScript in the
browser.
https://angular.io

15. TypeScript
• Extension of ES6
• Adds types and annotations
• Compiles to regular JavaScript
errors can be detected at compile time.
https://www.typescriptlang.org/

16. TypeScript
• Result looks familiar to Java and .NET
developers
Interfaces, Generics, Decorators, …
• Much better IDE integration than JS
https://www.typescriptlang.org/

17. TypeScript
import { autoserializeAs } from "cerialize";
...
export abstract class DSpaceObject implements CacheableObject {
...
@autoserializeAs(Metadatum)
metadata: Array<Metadatum>;
...
private findMetadatum(key: string, language?: string): Metadatum {
return this.metadata
.find((metadatum: Metadatum) => {
return metadatum.key === key &&
(isEmpty(language) || metadatum.language === language)
});
}
}

18. Angular 2: Main elements
• Components:
– render data
• Services:
– provide components with data

19. Angular 2: Components
• The building blocks of an angular 2 app
• New HTML tags that come with their
own code and styling
• Consist of a view and a controller in the
traditional MVC sense

20. Angular 2: Components
<div class="wrapper">
<ds-header></ds-header>
<main>
...
</main>
<ds-footer></ds-footer>
</div>

21. Angular 2: Components
@Component({
selector: 'ds-header',
styleUrls: ['header.component.css'],
templateUrl: 'header.component.html'
})
export class HeaderComponent implements OnInit {
isNavBarCollapsed: boolean;
constructor() {}
ngOnInit(): void {
this.isNavBarCollapsed = true;
}
toggle(): void {
this.isNavBarCollapsed = !this.isNavBarCollapsed;
}
}

22. Angular 2: Components
<button (click)="toggle()">
<i class="fa fa-bars fa-fw" aria-hidden="true"></i>
</button>
<div [ngbCollapse]="isNavBarCollapsed">
<a class="nav-link" routerLink="/home"
routerLinkActive="active">
{{ 'header.home' | translate }}
</a>
</div>

23. Angular 2: Services
• Singletons
• Provide streams of data for the rest of
the app
this.restService.get('/items')
• Provide operations to add or modify
data
this.cacheService.add(item)

24. Angular 2: Services
@Injectable()
export class RESTService {
constructor(public http: Http) {}
get(relativeURL: string, options?: RequestOptionsArgs): Observable<string> {
return this.http.get(new RESTURLCombiner(relativeURL).toString(), options)
.map(res => res.json())
.catch(err => {
console.log('Error: ', err);
return Observable.throw(err);
});
}
}

25. Angular Universal
• Sub-project by the angular team.
• Goal: support server-side rendering for
angular apps
• using the same code that's used by the
client
https://universal.angular.io/

26. Angular Universal
• The universal server imitates a browser
using the angular app
• makes calls to the REST API for data
• sends the HTML as a response
https://universal.angular.io/

27. Angular Universal
• The first page is rendered on the
universal server
• Don’t have JavaScript?
– The server’s HTML is identical to the
version generated by a client
– Clicking a link = requesting a new
page from the server
https://universal.angular.io/

28. Angular Universal
• Do have JavaScript?
– start using the page while JS loads
– once loaded, no further requests to
the universal server needed
– Clicking a link = fetching new data
from the REST API and rendering it
in the browser
https://universal.angular.io/

29. Learning more
• Learn about Angular 2, Universal, and
other related technologies on the wiki:
https://wiki.duraspace.org/display/DSPACE/D
Space+7+UI+Technology+Stack
• Questions? ask on Slack
#angular-ui on dspace-org.slack.com

30. • How To: https://goo.gl/aJ9u4U
• Project board: https://waffle.io/DSpace/dspace-angular
Contributing

31. DSpace 7 (new) REST API
Andrea Bollini

32. Outcome from the prototype challenge
Why do we need a new REST API?
● Only a limited subset of DSpace
functionality is currently exposed
● Handcrafted implementation, no
standard or convention adopted
● Different technology than the other
DSpace code (Jersey)

33. What are the goals?
● Support the Angular UI development
● Fully documented, tested and stable
REST API
● Modernize the code base, adopting best
practices
● Rely on frameworks widely used in and
outside DSpace (Spring)

34. REST Levels
https://martinfowler.com/articles/richardsonMaturityModel.html
DSpace REST currently sits here

35. How? Standards!
★ HATEOAS - Hypertext As The Engine Of
Application State
★ The HAL format
★ Define a REST contract
★ ALPS - Application-Level profile
semantics
★ JSON-Schema

36. HAL format
http://stateless.co/hal_specification.html

37. Example: embedded
Bitstream → BitstreamFormat
"name": "license.txt",
"type": "bitstream",
"sizeBytes": 1748,
"_links": {
"format": {
"href": "http://my.dspace.url/api/core/bitstreams/bd30fbfc-.../format"
},
"self": {
"href":"http://my.dspace.url/api/core/bitstreams/bd30fbfc-..."
}
},
"_embedded": {
"format": {
"shortDescription": "License",
"description": "Item-specific license agreed upon to submission",
"mimetype": "text/plain; charset=utf-8",
…
"_links": {
"self": {"href":"http://my.dspace.url/api/core/bitstreamformats/2"}
}
Resource attributes
Links
Embedded resource

38. Example: pagination
"_links": {
"first": {
"href": “http://my.dspace.url/api/core/bitstreams?page=0&size=5"
},
"self": {
"href": "http://my.dspace.url/api/core/bitstreams"
},
"next": {
"href": "http://my.dspace.url/api/core/bitstreams?page=1&size=5"
},
"last": {
"href": "http://my.dspace.url/api/core/bitstreams?page=2&size=5"
}
},
"page": {
"size": 5,
"totalElements": 14,
"totalPages": 3,
"number": 0
}

39. ALPS
At the root of the API is a profile document, with a list of all the
available endpoints
{
"_links" : {
"profile" : {
"href" : "http://my.dspace.url/api/profile"
},
"items" : {
"href" : "http://my.dspace.url/api/core/items"
},
"bitstreams" : {
"href" : "http://my.dspace.url/api/core/bitstreams"
},
…
}
}
http://docs.spring.io/spring-data/rest/docs/current/reference/html/#metadata.alps

40. ALPS
The /api/profile endpoint, as defined in RFC 6906, gives access
to detailed information about each application resource
{
"_links" : {
"self" : {
"href" : "http://my.dspace.url/api/profile"
},
"items" : {
"href" : "http://my.dspace.url/api/profile/items"
},
"bitstreams" : {
"href" : "http://my.dspace.url/api/profile/bitstreams"
},
…
}
}
Points to a json-schema
representation of the
resource structure,
including allowed
methods and returns

41. The HAL Browser
★ Application agnostic JS UI
★ Available as web-jar from the Spring
Data REST project
★ It allows easy exploration and
self-documentation of the REST API
http://docs.spring.io/spring-data/rest/docs/current/reference/html/#_the_hal_browser

42. The HAL Browser

43. Best practices and convention
★ Spring Data REST project
○ projection
○ pagination defaults
○ ETAGs
○ Architecture
★ Look to JSON-API Format for
unresolved issues

44. Technologies
★ JAVA 8, Servlet 3.1
★ Spring Boot
★ Spring MVC + Spring HATEOAS
★ Spring REST Documentation*
★ Spring Security*
* to be confirmed

45. Architecture
★ REST Data model
★ A single controller for all the REST
resources
★ Repository Design Pattern
★ Converter to translate REST model
classes to persistence and vice versa

46. Learning more
• HATEOAS
http://restcookbook.com/Basics/hateoas/
• HAL Specification
http://stateless.co/hal_specification.html
• ALPS
https://tools.ietf.org/html/draft-amundsen-richardson-foster-alps-01
• JSON-Schema
http://json-schema.org/

47. Learning more
• Spring REST & Spring HATEOAS
https://spring.io/guides/gs/rest-hateoas/
• Take inspiration from Spring DATA Rest
http://projects.spring.io/spring-data-rest/
• Questions? ask on Slack
#rest-api on dspace-org.slack.com

48. Contributing
★ Rest Contract definition & discussion
https://github.com/DSpace-Labs/Rest7Contract
https://github.com/DSpace-Labs/Rest7Contract/issues
★ Claim a task! “new-REST” component
https://jira.duraspace.org/issues/?filter=13920
★ Source code:
https://github.com/DSpace/DSpace/tree/rest7

49. Next Steps & Contributing
Tim Donohue

50. Next Steps / Timeline
OR2017 in Brisbane
★ Angular UI dev workshop
★ DSpace 7 update talk
★ Alpha demo (search/browse?)
7.0 Final Release - est 2018?

51. Collaboration / Updates
• Meetings: Every Thursday (16:00 UTC)
alternating between text meetings in
Slack, and Google Hangouts.
• Soon: monthly video updates (to lists)

52. How to contribute
Claim a ticket and/or join a meeting
https://wiki.duraspace.org/display/DSPACE/DSpace
+7+UI+Working+Group
Join us on Slack / ask questions
https://goo.gl/forms/s70dh26zY2cSqn2K3
DSpace 7 Outreach Group
https://wiki.duraspace.org/display/DSPACE/DSpace
+7+UI+Outreach+Group

53. Hot Topics: DuraSpace Community Webinar Series
Hot Topics: The DuraSpace
Community Webinar Series
Join us for our 2nd webinar:
DSpace for Data:
issues, solutions and challenges
March 7, 2017 at 11:00a.m. ET