Update and discussion on the new Angular 2 UI proof-of-concept, presented during the OR16 Developer / DCAT meeting on Monday, June 13, 2016. Notes from that meeting are also available at: https://wiki.duraspace.org/display/DSPACE/DevMtg+2016-06-13+-+OR16+Meeting

1. Licensed under Creative Commons Attribution-ShareAlike 4.0 International License
New UI Discussion
OR2016 Dev / DCAT meeting
Tim Donohue, DuraSpace
Tech Lead for DSpace
tdonohue@duraspace.org

2. How we got here
• Tune in on Weds @ 2pm
• Also a full demo!
https://www.youtube.com/user/dspacevideoshttps://www.youtube.com/user/dspacevideos

3. Picking up in Mid-March
(DuraSpace Summit)
VSVS
(Angular 2 was in Beta)

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

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

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

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

8. 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

9. Brief Demo
http://ui-prototype.atmire.com/

10.  SEO (Google Scholar)
 Accessibility (U of Kansas)
 Better user experience
 Easily configurable UI (JSON)
 Backend is still Java (5.x)
++
Angular 2 in Release Candidate!

11. Not convinced?
(Let’s dig a little deeper)

12. Why Angular 2?
• Extensive 3rd
party modules
• TypeScript!
• “Java-like” / modular
– Extendable components
– HTML-like templates
• SEO (Angular Universal)
• Accessibility
• You don’t even need JS!
https://angular.io/https://angular.io/

13. 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/

14. 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)

15. Sidebar
Sidebar section
Breadcrumb
News
Tree

16. Simple Item View
Specialized metadata components

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

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

19. 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

20. How?

21. 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

22. RoadMap to 7
Top Priorities
•REST API++
•Angular 2 User Interface
Timeline Goals
•Beta & training at OR2017
•Final by late 2017 / early 2018
https://wiki.duraspace.org/display/DSPACE/RoadMap

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

24. Questions / Discussion