New UI Update - OR16 Developer / DCAT Meeting

100 %
0 %
Information about New UI Update - OR16 Developer / DCAT Meeting

Published on June 21, 2016

Author: tdonohue

Source: slideshare.net

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

Add a comment