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
New UI Discussion
OR2016 Dev / DCAT meeti...
How we got here
• Tune in on Weds @ 2pm
• Also a full demo!
https://www.youtube.com/user/dspacevideoshttps://www.youtube.c...
Picking up in Mid-March
(DuraSpace Summit)
VSVS
(Angular 2 was in Beta)
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...
Why try Angular 2?
• Benefits of JavaScript UI
• Angular = most widely used
• SEO support claims
• Accessibility claims
ht...
++
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”)
...
Brief Demo
http://ui-prototype.atmire.com/
 SEO (Google Scholar)
 Accessibility (U of Kansas)
 Better user experience
 Easily configurable UI (JSON)
 Backend is...
Not convinced?
(Let’s dig a little deeper)
Why Angular 2?
• Extensive 3rd
party modules
• TypeScript!
• “Java-like” / modular
– Extendable components
– HTML-like tem...
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...
How?
DSpace 7 Architecture*
DB
J
a
v
a
A
P
I
RESTREST
SWORDSWORD
OAIOAI
RDFRDF
Spring BootSpring Boot
WebappWebapp
…
Angular
2 ...
RoadMap to 7
Top Priorities
•REST API++
•Angular 2 User Interface
Timeline Goals
•Beta & training at OR2017
•Final by late...
But, we need your help!
Sprint-like, organized development
 REST API needs Java devs
 Angular 2 UI needs JS devs
 UI / ...
Questions / Discussion
Upcoming SlideShare
Loading in …5
×

New UI Update - OR16 Developer / DCAT Meeting

717 views

Published on

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

Published in: Software
  • I love the improvements you are doing into dspace. There is a lot of configuration needed to be made in the back-end on the actual versions, I hope Dspace 7 to be more configurable using resouces from the front-end. It could increase productivity a lot. Thanks for your work!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

New UI Update - OR16 Developer / DCAT Meeting

  1. 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. 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. 3. Picking up in Mid-March (DuraSpace Summit) VSVS (Angular 2 was in Beta)
  4. 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. 5. Why a JavaScript UI? + More dynamic + Separation of concerns + Innovative / exciting + Better REST API ‒ SEO? ‒ Accessibility? ‒ Will it meet our needs?
  6. 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. 7. ++ https://github.com/DSpace-Labs/angular2-ui-prototypehttps://github.com/DSpace-Labs/angular2-ui-prototype
  8. 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. 9. Brief Demo http://ui-prototype.atmire.com/
  10. 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. 11. Not convinced? (Let’s dig a little deeper)
  12. 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. 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. 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. 15. Sidebar Sidebar section Breadcrumb News Tree
  16. 16. Simple Item View Specialized metadata components
  17. 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. 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. 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. 20. How?
  21. 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. 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. 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. 24. Questions / Discussion

×