Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2.28.17 Introducing DSpace 7 Webinar Slides

698 views

Published on

Hot Topics: The DuraSpace Community Webinar Series,
“Introducing DSpace 7: Next Generation UI”

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

Introducing DSpace 7
February 28, 2017 presented by: Claire Knowles - The University of Edinburgh, Art Lowel - Atmire, Andrea Bollini - 4Science, Tim Donohue – DuraSpace

Published in: Technology
  • Be the first to comment

2.28.17 Introducing DSpace 7 Webinar Slides

  1. 1. Hot Topics: DuraSpace Community Webinar Series Hot Topics: The DuraSpace Community Webinar Series Series Fifteen: Introducing DSpace 7: Next Generation UI
  2. 2. 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
  3. 3. 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
  4. 4. History: Why a new UI? Claire Knowles
  5. 5. 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
  6. 6. 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
  7. 7. UI Technology Selection Process Tim Donohue
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. OR2016 until Nov 2016 DSpace 6 Time Passes...
  12. 12. 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
  13. 13. DSpace 7 UI (Angular UI) Art Lowel
  14. 14. 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
  15. 15. TypeScript • Extension of ES6 • Adds types and annotations • Compiles to regular JavaScript errors can be detected at compile time. https://www.typescriptlang.org/
  16. 16. TypeScript • Result looks familiar to Java and .NET developers Interfaces, Generics, Decorators, … • Much better IDE integration than JS https://www.typescriptlang.org/
  17. 17. 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) }); } }
  18. 18. Angular 2: Main elements • Components: – render data • Services: – provide components with data
  19. 19. 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
  20. 20. Angular 2: Components <div class="wrapper"> <ds-header></ds-header> <main> ... </main> <ds-footer></ds-footer> </div>
  21. 21. 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; } }
  22. 22. 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>
  23. 23. 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)
  24. 24. 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); }); } }
  25. 25. 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/
  26. 26. 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/
  27. 27. 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/
  28. 28. 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/
  29. 29. 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
  30. 30. • How To: https://goo.gl/aJ9u4U • Project board: https://waffle.io/DSpace/dspace-angular Contributing
  31. 31. DSpace 7 (new) REST API Andrea Bollini
  32. 32. 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)
  33. 33. 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)
  34. 34. REST Levels https://martinfowler.com/articles/richardsonMaturityModel.html DSpace REST currently sits here
  35. 35. How? Standards! ★ HATEOAS - Hypertext As The Engine Of Application State ★ The HAL format ★ Define a REST contract ★ ALPS - Application-Level profile semantics ★ JSON-Schema
  36. 36. HAL format http://stateless.co/hal_specification.html
  37. 37. 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
  38. 38. 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 }
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. The HAL Browser
  43. 43. Best practices and convention ★ Spring Data REST project ○ projection ○ pagination defaults ○ ETAGs ○ Architecture ★ Look to JSON-API Format for unresolved issues
  44. 44. Technologies ★ JAVA 8, Servlet 3.1 ★ Spring Boot ★ Spring MVC + Spring HATEOAS ★ Spring REST Documentation* ★ Spring Security* * to be confirmed
  45. 45. 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
  46. 46. 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/
  47. 47. 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
  48. 48. 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
  49. 49. Next Steps & Contributing Tim Donohue
  50. 50. Next Steps / Timeline OR2017 in Brisbane ★ Angular UI dev workshop ★ DSpace 7 update talk ★ Alpha demo (search/browse?) 7.0 Final Release - est 2018?
  51. 51. Collaboration / Updates • Meetings: Every Thursday (16:00 UTC) alternating between text meetings in Slack, and Google Hangouts. • Soon: monthly video updates (to lists)
  52. 52. How to contribute Claim a ticket and/or join a meeting https://wiki.duraspace.org/display/DSPACE/DSpace +7+UI+Working+Group Join us on Slack / ask questions https://goo.gl/forms/s70dh26zY2cSqn2K3 DSpace 7 Outreach Group https://wiki.duraspace.org/display/DSPACE/DSpace +7+UI+Outreach+Group
  53. 53. 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

×