Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Licensed under Creative Commons Attribution-ShareAlike 4.0 International License
The New User Interface
Tim Donohue, DuraS...
DSpace UI
• Prototype (at least) 2-3 UI platforms
– At least one Java-based
– At least one non-Java
• By end of 2015
– App...
 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 e...
Why a JavaScript UI?
+ More dynamic
+ Separation of concerns
+ Innovative / exciting
+ Better REST API
‒ SEO?
‒ Accessibil...
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
ht...
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”)
...
Proof-of-Concept UI
Demonstration
http://ui-prototype.atmire.com/
 SEO (Google Scholar)
 Accessibility (U of Kansas)
 Better user experience
 Easily configurable UI
 Backend is still ...
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-lik...
Sidebar
Sidebar section
Breadcrumb
News
Tree
Where do we go next?
RoadMap to 7
Top Priorities
•REST API
•Single, Angular 2 UI
Timeline Goals
•Beta & training at OR17
•Final late 2017?
http...
But, we need your help!
Sprint-like, organized developmentSprint-like, organized development
 REST API (Java devs)REST AP...
Become a member!
DSpace is funded / developed / supported
by its community.
Become a member, have a direct say in...
Gove...
Stay tuned for more…
https://www.youtube.com/user/dspacevideoshttps://www.youtube.com/user/dspacevideos
Questions?
Image attribution
[2] Button: https://flic.kr/p/bDMn4
[8] A to A: https://angularclass.com/
[27] Map: https://flic.kr/p/dQ...
TypeScript
• Typed superset of JavaScript
– No more “var”!
– Types : string, number, Item, etc
– Expandable / sharable (Ty...
Components
 Each ‘part’ of webpage is a
Component (module):
 … ‘implements’ Interface
 … ‘extends’ another Component
 ...
Sidebar
Sidebar section
Breadcrumb
News
Tree
Simple Item View
Specialized metadata components
Templates are HTML-like
<h4><label>{{ 'item.metadata.header' | translate }}</label></h4>
<table class="table table-striped...
Dependency Injection (DI)
Inject modules into other modules
// Define DSpaceService as injectable
@Injectable()
export cla...
SEO via Angular Universal
• Same JS on server & client!
– Server side: Node.js or ASP.NET
• Future: Java!
• Serves up HTML...
DSpace 7 Architecture*
DB
J
a
v
a
A
P
I
RESTREST
SWORDSWORD
OAIOAI
RDFRDF
Spring BootSpring Boot
WebappWebapp
…
Angular
2 ...
Introducing the New DSpace User Interface
Introducing the New DSpace User Interface
Introducing the New DSpace User Interface
Introducing the New DSpace User Interface
Introducing the New DSpace User Interface
Introducing the New DSpace User Interface
Introducing the New DSpace User Interface
Introducing the New DSpace User Interface
Introducing the New DSpace User Interface
Upcoming SlideShare
Loading in …5
×

Introducing the New DSpace User Interface

3,349 views

Published on

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.

Published in: Software
  • Be the first to comment

Introducing the New DSpace User Interface

  1. 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. 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. 3.  UI Working Group formed (Aug)  UI Prototype Challenge (Dec)  9 prototypes! (8 institutions) After OR2015
  4. 4. • Jan-Feb 2016: Demos & Feedback • Narrowed options UI Prototype Challenge
  5. 5. UI Discussions (Feb - Mar) VSVS
  6. 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. 7. Why a JavaScript UI? + More dynamic + Separation of concerns + Innovative / exciting + Better REST API ‒ SEO? ‒ Accessibility? ‒ Will it meet our needs?
  8. 8. Image borrowed from https://angularclass.com/ Meanwhile… (Dec 2015) 1.x1.x 2.0 beta2.0 beta
  9. 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. 10. DuraSpace Summit (mid-March) VSVS
  11. 11. ++ https://github.com/DSpace-Labs/angular2-ui-prototypehttps://github.com/DSpace-Labs/angular2-ui-prototype
  12. 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. 13. Proof-of-Concept UI Demonstration http://ui-prototype.atmire.com/
  14. 14.  SEO (Google Scholar)  Accessibility (U of Kansas)  Better user experience  Easily configurable UI  Backend is still Java ++
  15. 15. June 2016 VSVS Angular 2 in Release Candidate Major users: Capital One, Weather.com
  16. 16. 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/
  17. 17. Sidebar Sidebar section Breadcrumb News Tree
  18. 18. Where do we go next?
  19. 19. 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
  20. 20. 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
  21. 21. 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.
  22. 22. Stay tuned for more… https://www.youtube.com/user/dspacevideoshttps://www.youtube.com/user/dspacevideos
  23. 23. Questions?
  24. 24. 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
  25. 25. 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/
  26. 26. 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)
  27. 27. Sidebar Sidebar section Breadcrumb News Tree
  28. 28. Simple Item View Specialized metadata components
  29. 29. 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”> ….
  30. 30. 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) { … } }
  31. 31. 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
  32. 32. 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

×