View
1.161
Download
0
Category
Preview:
Citation preview
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
Recommended