Introduction of the DSpace UI Initiative, the process of selecting a new UI platform and the new Angular 2 UI proof-of-concept demo. This presentation was given at the Open Repositories 2016 conference on Wednesday, June 15, 2016 in Dublin, Ireland.

1. Licensed under Creative Commons Attribution-ShareAlike 4.0 International License
The New User Interface
Tim Donohue, DuraSpace
Tech Lead for DSpace
tdonohue@duraspace.org

2. DSpace UI
• Prototype (at least) 2-3 UI platforms
– At least one Java-based
– At least one non-Java
• By end of 2015
– Approve a single platform / prototype
– Finalize developer team / schedule
• Early 2016 : dev sprints begin
• Demos / Early Training at OR16
• Release in 7.0
OR2015OR2015

3.  UI Working Group formed (Aug)
 UI Prototype Challenge (Dec)
 9 prototypes! (8 institutions)
After OR2015

4. • Jan-Feb 2016: Demos & Feedback
• Narrowed options
UI Prototype Challenge

5. UI Discussions (Feb - Mar)
VSVS

6. Why a Java UI?
+ Stable, trusted
+ Same as backend / API
+ More modern Java tech
‒ Less innovative / added value?
‒ Less exciting to new developers

7. Why a JavaScript UI?
+ More dynamic
+ Separation of concerns
+ Innovative / exciting
+ Better REST API
‒ SEO?
‒ Accessibility?
‒ Will it meet our needs?

8. Image borrowed from https://angularclass.com/
Meanwhile… (Dec 2015)
1.x1.x 2.0 beta2.0 beta

9. Why try Angular 2?
• Benefits of JavaScript UI
• Angular = most widely used
• SEO support claims
• Accessibility claims
https://angular.io/https://angular.io/

10. DuraSpace Summit
(mid-March)
VSVS

11. ++
https://github.com/DSpace-Labs/angular2-ui-prototypehttps://github.com/DSpace-Labs/angular2-ui-prototype

12. Proof–of-Concept UI
 Basic Angular 2 UI on DSpace 5.x
 4 (very) part-time developers
 2.5 months (including “ramp up”)
 Weekly status checks
William WellingWilliam Welling
James CreelJames Creel
Art LowelArt Lowel
Dylan MeeusDylan Meeus
Andrea BolliniAndrea Bollini Tim DonohueTim Donohue
Jonathan MarkowJonathan Markow

13. Proof-of-Concept UI
Demonstration
http://ui-prototype.atmire.com/

23.  SEO (Google Scholar)
 Accessibility (U of Kansas)
 Better user experience
 Easily configurable UI
 Backend is still Java
++

24. June 2016
VSVS
Angular 2 in Release Candidate
Major users: Capital One, Weather.com

25. But, why Angular 2?
• Extensive 3rd
party modules
• TypeScript!
• “Java-like” / modular
– Extendable components
– HTML-like templates
• You don’t even need JS!
https://angular.io/https://angular.io/

26. Sidebar
Sidebar section
Breadcrumb
News
Tree

27. Where do we go next?

28. RoadMap to 7
Top Priorities
•REST API
•Single, Angular 2 UI
Timeline Goals
•Beta & training at OR17
•Final late 2017?
https://wiki.duraspace.org/display/DSPACE/RoadMap

29. But, we need your help!
Sprint-like, organized developmentSprint-like, organized development
 REST API (Java devs)REST API (Java devs)
 Angular UI (JS devs)Angular UI (JS devs)
 UI / UX DesignersUI / UX Designers
 Accessibility experts / testersAccessibility experts / testers
 Translators (eventually)Translators (eventually)
If you want to join the team, email
tdonohue@duraspace.org
If you want to join the team, email
tdonohue@duraspace.org

30. Become a member!
DSpace is funded / developed / supported
by its community.
Become a member, have a direct say in...
Governance
RoadMap
Financial contributions are critical.

31. Stay tuned for more…
https://www.youtube.com/user/dspacevideoshttps://www.youtube.com/user/dspacevideos

32. Questions?

33. Image attribution
[2] Button: https://flic.kr/p/bDMn4
[8] A to A: https://angularclass.com/
[27] Map: https://flic.kr/p/dQ32dx
[28] Cat: https://flic.kr/p/aaxHdi
All other images available from referenced
software platforms, institutions or websites

34. TypeScript
• Typed superset of JavaScript
– No more “var”!
– Types : string, number, Item, etc
– Expandable / sharable (Typings registry)
• Compiles to plain JavaScript
• Examples:
private title: string; (String variable)
private myItem: Item; (Item variable)
private myParam: any; (any type)
http://www.typescriptlang.org/http://www.typescriptlang.org/

35. Components
 Each ‘part’ of webpage is a
Component (module):
 … ‘implements’ Interface
 … ‘extends’ another Component
 … has a selector (HTML-like tag)
e.g. <news> = NewsComponent
 … has a constructor (defines its inputs)
 … has a template (view) and/or
methods (actions)

36. Sidebar
Sidebar section
Breadcrumb
News
Tree

37. Simple Item View
Specialized metadata components

38. Templates are HTML-like
<h4><label>{{ 'item.metadata.header' | translate }}</label></h4>
<table class="table table-striped">
<tbody>
<tr *ngFor=“let input of metadatumInputs”>
<td>
<div class=“row”>
<label>{{ input.label }}</label>
</div>
<div class=“row”>
<input *ngIf=“checkboxInput(input)” type=“checkbox” />
<input *ngIf=“textInput(input)” type=“text” />
<form-validation-message [form]=“form” [input]=“input”>
….

39. Dependency Injection (DI)
Inject modules into other modules
// Define DSpaceService as injectable
@Injectable()
export class DSpaceService { … }
// Then, inject DSpaceService as input
export class myComponent {
constructor(private dspaceService:
DSpaceService) { … }
}

40. SEO via Angular Universal
• Same JS on server & client!
– Server side: Node.js or ASP.NET
• Future: Java!
• Serves up HTML to non-JS clients
• Speeds up app initial load
 SEO verification with Google Scholar

41. DSpace 7 Architecture*
DB
J
a
v
a
A
P
I
RESTREST
SWORDSWORD
OAIOAI
RDFRDF
Spring BootSpring Boot
WebappWebapp
…
Angular
2 UI
Angular
2 UI
Assetstore
Other apps
or services
* = vastly simplified