The document outlines the development roadmap for the DSpace user interface, detailing the timeline and goals for a new Angular 2-based UI to be finalized by late 2017. It describes the advantages and concerns of utilizing Java versus JavaScript for the UI, including factors such as innovation, performance, and accessibility. Additionally, it emphasizes the need for community involvement in development and the importance of financial contributions to support the project.

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