Introducing the New DSpace User Interface

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

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

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

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

UI Discussions (Feb - Mar)
VSVS

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

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

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

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

DuraSpace Summit
(mid-March)
VSVS

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

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

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

Introducing the New DSpace User Interface

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

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

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/

Sidebar
Sidebar section
Breadcrumb
News
Tree

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

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
If you want to join the team, email

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.

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

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

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/

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)

Simple Item View
Specialized metadata components

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”>
….

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) { … }
}

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

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

Introducing the New DSpace User Interface

Recommended

More Related Content

What's hot (20)

Similar to Introducing the New DSpace User Interface (20)

More from Tim Donohue (15)

Recently uploaded (20)

Introducing the New DSpace User Interface

Editor's Notes