Licensed under Creative Commons Attribution-ShareAlike 4.0 International License

New UI DiscussionOR2016 Dev / DCAT meeting

Tim Donohue, DuraSpaceTech Lead for DSpace

tdonohue@duraspace.org

How we got here

• Tune in on Weds @ 2pm• Also a full demo!

https://www.youtube.com/user/dspacevideoshttps://www.youtube.com/user/dspacevideos

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 exciting to new developers

Why a JavaScript UI?+ More dynamic+ Separation of concerns+ Innovative / exciting+ Better REST API

‒ SEO?‒ Accessibility?‒ Will it meet our needs?

Why try Angular 2?• Benefits of JavaScript UI• Angular = most widely used• SEO support claims• Accessibility claims

https://angular.io/https://angular.io/

++

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”) Weekly status checks

William WellingWilliam WellingJames CreelJames Creel

Art LowelArt LowelDylan MeeusDylan Meeus

Andrea BolliniAndrea Bollini Tim DonohueTim DonohueJonathan MarkowJonathan Markow

Brief Demo

http://ui-prototype.atmire.com/

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!

Not convinced?

(Let’s dig a little deeper)

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/

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/

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)

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"> <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>

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) { … }

}

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

How?

DSpace 7 Architecture*

DBJava

API

REST

SWORD

OAI

RDF

Spring BootSpring BootWebappWebapp

…

Angular2 UI

Assetstore

Other apps or services

* = vastly simplified

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

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

Questions / Discussion