2.28.17 Introducing DSpace 7 Webinar Slides

Hot Topics: DuraSpace Community Webinar Series
Hot Topics: The DuraSpace
Community Webinar Series
Series Fifteen:
Introducing DSpace 7:
Next Generation UI

Curated by Claire Knowles,
Library Digital Development Manager,
The University of Edinburgh

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 Boot
https://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 JavaScript
errors can be detected at compile time.
https://www.typescriptlang.org/

TypeScript
• Result looks familiar to Java and .NET
developers
Interfaces, 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

@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;
}
}

<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 app
this.restService.get('/items')
• Provide operations to add or modify
data
this.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

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

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

Learning more
• Learn about Angular 2, Universal, and
other related technologies on the wiki:
https://wiki.duraspace.org/display/DSPACE/D
Space+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 challenge
Why 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: embedded
Bitstream → 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
}

ALPS
At 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

ALPS
The /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

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
• HATEOAS
http://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-Schema
http://json-schema.org/

Learning more
• Spring REST & Spring HATEOAS
https://spring.io/guides/gs/rest-hateoas/
• Take inspiration from Spring DATA Rest
http://projects.spring.io/spring-data-rest/
• Questions? ask on Slack
#rest-api on dspace-org.slack.com

Contributing
★ Rest Contract definition & discussion
https://github.com/DSpace-Labs/Rest7Contract
https://github.com/DSpace-Labs/Rest7Contract/issues
★ Claim a task! “new-REST” component
https://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 meeting
+7+UI+Working+Group
Join us on Slack / ask questions
https://goo.gl/forms/s70dh26zY2cSqn2K3
DSpace 7 Outreach Group
+7+UI+Outreach+Group

Join us for our 2nd webinar:
DSpace for Data:
issues, solutions and challenges
March 7, 2017 at 11:00a.m. ET

2.28.17 Introducing DSpace 7 Webinar Slides

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 2.28.17 Introducing DSpace 7 Webinar Slides (20)

More from DuraSpace (20)

Recently uploaded (20)

2.28.17 Introducing DSpace 7 Webinar Slides