Hot Topics: DuraSpace Community Webinar Series

Hot Topics: The DuraSpace Community Webinar Series

Series Fifteen: Introducing DSpace 7:

Next Generation UI

Hot Topics: DuraSpace Community Webinar Series

Hot Topics: The DuraSpace Community Webinar Series

Curated by Claire Knowles, Library Digital Development Manager,

The University of Edinburgh

Hot Topics: DuraSpace Community Webinar Series

Webinar 1:

Introducing DSpace 7

Presented by:

Claire Knowles, The University of Edinburgh

Tim Donohue, DuraSpace

Art Lowel, Atmire

Andrea Bollini, 4Science

History: Why a new UI?

Claire Knowles

Background - Vision

Strategic Plan 2015 - 2018- Technology- Community- Sustainability

https://wiki.duraspace.org/display/DSPACE/DSpace+2015-18+Strategic+Plan

Road Map- Priority one: a single user interface - Making DSpace lean and flexible

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

Background - Two UIs

- Two User Interfaces - Duplication of effort- Different features

- New UI Group

- Prototype Challenge (8 entries)- Rails, EmberJS, AngularJS, Spring

MVC, Spring Boothttps://wiki.duraspace.org/display/DSPACE/DSpace+UI+Prototype+Challenge

UI Technology Selection Process

Tim Donohue

Prototype Challenge Analysis (early 2016)

Decision Point: Java vs Javascript UI

● Client Side (JS) benefits○ Dynamic, innovative○ Separation of concerns (REST API)

● Client Side (JS) concerns○ Search Engine Optimization (SEO)?○ Accessibility?

https://wiki.duraspace.org/display/DSPACE/DSpace+UI+Prototype+Challenge

Angular 2 Framework

● First beta in Dec 2015● All benefits of Client Side UI● Angular = most widely used platform● SEO support (via Angular Universal)● Accessibility support

https://angular.io

March - June 2016 (Demo at OR2016)★ SEO (verified, Google Scholar)★ Accessibility (verified, U of Kansas)★ Web archiving (verified, RCAAP,

Portugal)★ More dynamic user experience★ Configurable UI★ Backend still Java (5.x REST API)

DSpace 5 + Angular 2 Prototype

http://www.slideshare.net/tdonohue/introducing-the-new-dspace-user-interface

OR2016 until Nov 2016

DSpace 6

Time Passes...

DSpace 7 UI Working Group (late 2016)

Goal: Build the Angular UI / REST API for DSpace 7

★ Coordination (Tim Donohue, DuraSpace)★ Angular UI Subteam (Art Lowel, Atmire)★ REST API Subteam (Andrea Bollini,

4Science)

https://wiki.duraspace.org/display/DSPACE/DSpace+7+UI+Working+Group

DSpace 7 UI (Angular UI)

Art Lowel

Angular 2

• Framework by Google for building applications in the browser.

• Only data from the server

• HTML generated by JavaScript in the browser.

https://angular.io

TypeScript

• Extension of ES6

• Adds types and annotations

• Compiles to regular JavaScripterrors can be detected at compile time.

https://www.typescriptlang.org/

TypeScript

• Result looks familiar to Java and .NET developersInterfaces, Generics, Decorators, …

• Much better IDE integration than JS

https://www.typescriptlang.org/

TypeScript

import { autoserializeAs } from "cerialize";

...

export abstract class DSpaceObject implements CacheableObject {

...

@autoserializeAs(Metadatum)

metadata: Array<Metadatum>;

...

private findMetadatum(key: string, language?: string): Metadatum {

return this.metadata

.find((metadatum: Metadatum) => {

return metadatum.key === key &&

(isEmpty(language) || metadatum.language === language)

});

}

}

Angular 2: Main elements

• Components:– render data

• Services:– provide components with data

Angular 2: Components

• The building blocks of an angular 2 app

• New HTML tags that come with their own code and styling

• Consist of a view and a controller in the traditional MVC sense

Angular 2: Components

<div class="wrapper"> <ds-header></ds-header>

<main> ... </main>

<ds-footer></ds-footer></div>

Angular 2: Components@Component({

selector: 'ds-header',

styleUrls: ['header.component.css'],

templateUrl: 'header.component.html'

})

export class HeaderComponent implements OnInit {

isNavBarCollapsed: boolean;

constructor() {}

ngOnInit(): void {

this.isNavBarCollapsed = true;

}

toggle(): void {

this.isNavBarCollapsed = !this.isNavBarCollapsed;

}

}

Angular 2: Components

<button (click)="toggle()"> <i class="fa fa-bars fa-fw" aria-hidden="true"></i></button><div [ngbCollapse]="isNavBarCollapsed"> <a class="nav-link" routerLink="/home" routerLinkActive="active">

{{ 'header.home' | translate }} </a></div>

Angular 2: Services

• Singletons

• Provide streams of data for the rest of the appthis.restService.get('/items')

• Provide operations to add or modify datathis.cacheService.add(item)

Angular 2: Services

@Injectable()

export class RESTService {

constructor(public http: Http) {}

get(relativeURL: string, options?: RequestOptionsArgs): Observable<string> {

return this.http.get(new RESTURLCombiner(relativeURL).toString(), options)

.map(res => res.json())

.catch(err => {

console.log('Error: ', err);

return Observable.throw(err);

});

}

}

Angular Universal

• Sub-project by the angular team.

• Goal: support server-side rendering for angular apps

• using the same code that's used by the client

https://universal.angular.io/

Angular Universal

• The universal server imitates a browser using the angular app

• makes calls to the REST API for data

• sends the HTML as a response

https://universal.angular.io/

Angular Universal

• The first page is rendered on the universal server

• Don’t have JavaScript?– The server’s HTML is identical to the

version generated by a client– Clicking a link = requesting a new

page from the server

https://universal.angular.io/

Angular Universal

• Do have JavaScript?– start using the page while JS loads– once loaded, no further requests to

the universal server needed– Clicking a link = fetching new data

from the REST API and rendering it in the browser

https://universal.angular.io/

Learning more

• Learn about Angular 2, Universal, and other related technologies on the wiki:https://wiki.duraspace.org/display/DSPACE/DSpace+7+UI+Technology+Stack

• Questions? ask on Slack#angular-ui on dspace-org.slack.com

• How To: https://goo.gl/aJ9u4U • Project board: https://waffle.io/DSpace/dspace-angular

Contributing

DSpace 7 (new) REST API

Andrea Bollini

Outcome from the prototype challengeWhy do we need a new REST API?

● Only a limited subset of DSpace functionality is currently exposed

● Handcrafted implementation, no standard or convention adopted

● Different technology than the other DSpace code (Jersey)

What are the goals?

● Support the Angular UI development

● Fully documented, tested and stable REST API

● Modernize the code base, adopting best practices

● Rely on frameworks widely used in and outside DSpace (Spring)

REST Levels

https://martinfowler.com/articles/richardsonMaturityModel.html

DSpace REST currently sits here

How? Standards!

★ HATEOAS - Hypertext As The Engine Of Application State

★ The HAL format

★ Define a REST contract

★ ALPS - Application-Level profile semantics

★ JSON-Schema

HAL format

http://stateless.co/hal_specification.html

Example: embeddedBitstream → BitstreamFormat

"name": "license.txt","type": "bitstream","sizeBytes": 1748,"_links": {

"format": { "href": "http://my.dspace.url/api/core/bitstreams/bd30fbfc-.../format"},"self": { "href":"http://my.dspace.url/api/core/bitstreams/bd30fbfc-..." }

},"_embedded": {

"format": { "shortDescription": "License", "description": "Item-specific license agreed upon to submission", "mimetype": "text/plain; charset=utf-8", …

"_links": { "self": {"href":"http://my.dspace.url/api/core/bitstreamformats/2"}

}

Resource attributes

Links

Embedded resource

Example: pagination

"_links": { "first": { "href": “http://my.dspace.url/api/core/bitstreams?page=0&size=5" }, "self": { "href": "http://my.dspace.url/api/core/bitstreams" }, "next": { "href": "http://my.dspace.url/api/core/bitstreams?page=1&size=5" }, "last": { "href": "http://my.dspace.url/api/core/bitstreams?page=2&size=5" } }, "page": { "size": 5, "totalElements": 14, "totalPages": 3, "number": 0 }

ALPSAt the root of the API is a profile document, with a list of all the available endpoints

{ "_links" : { "profile" : { "href" : "http://my.dspace.url/api/profile" }, "items" : { "href" : "http://my.dspace.url/api/core/items" }, "bitstreams" : { "href" : "http://my.dspace.url/api/core/bitstreams" },

… }}

http://docs.spring.io/spring-data/rest/docs/current/reference/html/#metadata.alps

ALPSThe /api/profile endpoint, as defined in RFC 6906, gives access to detailed information about each application resource

{ "_links" : { "self" : { "href" : "http://my.dspace.url/api/profile" }, "items" : { "href" : "http://my.dspace.url/api/profile/items" }, "bitstreams" : { "href" : "http://my.dspace.url/api/profile/bitstreams" },

… }}

Points to a json-schema representation of the resource structure, including allowed methods and returns

The HAL Browser

★ Application agnostic JS UI

★ Available as web-jar from the Spring Data REST project

★ It allows easy exploration and self-documentation of the REST API

http://docs.spring.io/spring-data/rest/docs/current/reference/html/#_the_hal_browser

The HAL Browser

Best practices and convention

★ Spring Data REST project○ projection○ pagination defaults○ ETAGs○ Architecture

★ Look to JSON-API Format for unresolved issues

Technologies

★ JAVA 8, Servlet 3.1

★ Spring Boot

★ Spring MVC + Spring HATEOAS

★ Spring REST Documentation*

★ Spring Security*

* to be confirmed

Architecture

★ REST Data model

★ A single controller for all the REST resources

★ Repository Design Pattern

★ Converter to translate REST model classes to persistence and vice versa

Learning more

• HATEOAShttp://restcookbook.com/Basics/hateoas/

• HAL Specification http://stateless.co/hal_specification.html

• ALPS https://tools.ietf.org/html/draft-amundsen-richardson-foster-alps-01

• JSON-Schemahttp://json-schema.org/

Learning more

• Spring REST & Spring HATEOAShttps://spring.io/guides/gs/rest-hateoas/

• Take inspiration from Spring DATA Resthttp://projects.spring.io/spring-data-rest/

• Questions? ask on Slack#rest-api on dspace-org.slack.com

Contributing

★ Rest Contract definition & discussionhttps://github.com/DSpace-Labs/Rest7Contracthttps://github.com/DSpace-Labs/Rest7Contract/issues

★ Claim a task! “new-REST” componenthttps://jira.duraspace.org/issues/?filter=13920

★ Source code:https://github.com/DSpace/DSpace/tree/rest7

Next Steps & Contributing

Tim Donohue

Next Steps / Timeline

OR2017 in Brisbane

★ Angular UI dev workshop★ DSpace 7 update talk★ Alpha demo (search/browse?)

7.0 Final Release - est 2018?

Collaboration / Updates

• Meetings: Every Thursday (16:00 UTC)alternating between text meetings in Slack, and Google Hangouts.

• Soon: monthly video updates (to lists)

How to contribute

Claim a ticket and/or join a meetinghttps://wiki.duraspace.org/display/DSPACE/DSpace+7+UI+Working+Group

Join us on Slack / ask questionshttps://goo.gl/forms/s70dh26zY2cSqn2K3

DSpace 7 Outreach Grouphttps://wiki.duraspace.org/display/DSPACE/DSpace+7+UI+Outreach+Group

Hot Topics: DuraSpace Community Webinar Series

Hot Topics: The DuraSpace Community Webinar Series

Join us for our 2nd webinar:

DSpace for Data: issues, solutions and challenges

March 7, 2017 at 11:00a.m. ET