Introducing the New DSpace User Interface

1,424 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,424
On SlideShare
0
From Embeds
0
Number of Embeds
264
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Four main technologies. I actually built a UI prototype in Java (Spring Boot), so I was firmly in the “Java camp” at the start.
    Ruby was cut out as we didn’t feel there was enough existing Ruby experience in our community, and fewer distinct advantages over Java. Plus, it’d be building DSpace two server-side technologies/platforms.
  • As discussions progressed, I remained in the “Java camp” early on. I could see the benefits of JS frameworks (and there were many), but the risks seemed too great (more in that in a bit).
  • By DuraSpace Summit (and at the Summit) the discussion turned towards one of Java vs Angular 2. I was firmly on the fence at this point.
  • What we set out to prove during this extended prototype / proof-of-concept phase
  • Here we are at OR16, and I’m firmly in the Angular 2 camp. The benefits here are significant, and I feel the risks have all been alleviated as part of this proof-of-concept.
  • Each of these is a components. Components can extend other components (e.g. a generic list extended by a list of items/communities/collections). Components have their own templates (HTML and/or CSS)
  • ngFor and ngIf are Angular (ng) *directives*
    {{ }} are dynamic textual outputs
    <form-validation-message> is an example of calling another *component*
  • 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

    ×