Licensed under Creative Commons Attribution-ShareAlike 4.0 International License

The New User Interface

Tim Donohue, DuraSpaceTech Lead for DSpace

tdonohue@duraspace.org

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

UI Working Group formed (Aug) UI Prototype Challenge (Dec) 9 prototypes! (8 institutions)

After OR2015

• Jan-Feb 2016: Demos & Feedback• Narrowed options

UI Prototype Challenge

UI Discussions (Feb - Mar)

VSVS

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?

Image borrowed from https://angularclass.com/

Meanwhile… (Dec 2015)

1.x1.x 2.0 beta2.0 beta

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

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

DuraSpace Summit (mid-March)

VSVS

++

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

Proof-of-Concept UIDemonstration

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

SEO (Google Scholar) Accessibility (U of Kansas) Better user experience Easily configurable UI Backend is still Java

++

June 2016

VSVS

Angular 2 in Release CandidateMajor users: Capital One, Weather.com

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/

Sidebar

Sidebar section

Breadcrumb

News

Tree

Where do we go next?

RoadMap to 7Top Priorities•REST API•Single, Angular 2 UI

Timeline Goals•Beta & training at OR17•Final late 2017?

https://wiki.duraspace.org/display/DSPACE/RoadMap

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

Become a member!DSpace is funded / developed / supported by

its community.

Become a member, have a direct say in...GovernanceRoadMap

Financial contributions are critical.

Stay tuned for more…

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

Questions?

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

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/

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

DSpace 7 Architecture*

DBJava

API

REST

SWORD

OAI

RDF

Spring BootSpring BootWebappWebapp

…

Angular2 UI

Assetstore

Other apps or services

* = vastly simplified