new ui update - or16 developer / dcat meeting
TRANSCRIPT
![Page 1: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/1.jpg)
Licensed under Creative Commons Attribution-ShareAlike 4.0 International License
New UI DiscussionOR2016 Dev / DCAT meeting
Tim Donohue, DuraSpaceTech Lead for DSpace
![Page 2: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/2.jpg)
How we got here
• Tune in on Weds @ 2pm• Also a full demo!
https://www.youtube.com/user/dspacevideoshttps://www.youtube.com/user/dspacevideos
![Page 3: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/3.jpg)
Picking up in Mid-March(DuraSpace Summit)
VSVS
(Angular 2 was in Beta)
![Page 4: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/4.jpg)
Why a Java UI?+ Stable, trusted+ Same as backend / API+ More modern Java tech
‒ Less innovative / added value?‒ Less exciting to new developers
![Page 5: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/5.jpg)
Why a JavaScript UI?+ More dynamic+ Separation of concerns+ Innovative / exciting+ Better REST API
‒ SEO?‒ Accessibility?‒ Will it meet our needs?
![Page 6: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/6.jpg)
Why try Angular 2?• Benefits of JavaScript UI• Angular = most widely used• SEO support claims• Accessibility claims
https://angular.io/https://angular.io/
![Page 7: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/7.jpg)
++
https://github.com/DSpace-Labs/angular2-ui-prototypehttps://github.com/DSpace-Labs/angular2-ui-prototype
![Page 8: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/8.jpg)
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 WellingJames CreelJames Creel
Art LowelArt LowelDylan MeeusDylan Meeus
Andrea BolliniAndrea Bollini Tim DonohueTim DonohueJonathan MarkowJonathan Markow
![Page 10: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/10.jpg)
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!
![Page 11: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/11.jpg)
Not convinced?
(Let’s dig a little deeper)
![Page 12: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/12.jpg)
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/
![Page 13: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/13.jpg)
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/
![Page 14: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/14.jpg)
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)
![Page 15: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/15.jpg)
Sidebar
Sidebar section
Breadcrumb
News
Tree
![Page 16: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/16.jpg)
Simple Item View
Specialized metadata components
![Page 17: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/17.jpg)
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”>
….
</div>
![Page 18: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/18.jpg)
Dependency Injection (DI)Inject modules into other modules
// Define DSpaceService as injectable@Injectable()export class DSpaceService { … }
// Then, inject DSpaceService as inputexport class myComponent {
constructor(private dspaceService: DSpaceService) { … }
}
![Page 19: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/19.jpg)
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
![Page 20: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/20.jpg)
How?
![Page 21: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/21.jpg)
DSpace 7 Architecture*
DBJava
API
REST
SWORD
OAI
RDF
Spring BootSpring BootWebappWebapp
…
Angular2 UI
Assetstore
Other apps or services
* = vastly simplified
![Page 22: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/22.jpg)
RoadMap to 7Top 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
![Page 23: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/23.jpg)
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 [email protected]
![Page 24: New UI Update - OR16 Developer / DCAT Meeting](https://reader035.vdocuments.site/reader035/viewer/2022062412/58819d791a28ab1a398b483d/html5/thumbnails/24.jpg)
Questions / Discussion