Download as PDF, PPTX
![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;
}
}](https://image.slidesharecdn.com/dspace7webinar1-2017-02-28-slides-170228171913/75/2-28-17-Introducing-DSpace-7-Webinar-Slides-21-2048.jpg)
![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>](https://image.slidesharecdn.com/dspace7webinar1-2017-02-28-slides-170228171913/75/2-28-17-Introducing-DSpace-7-Webinar-Slides-22-2048.jpg)
Uploaded byDuraSpace
2.28.17 Introducing DSpace 7 Webinar Slides
The document outlines the DuraSpace Community Webinar Series, particularly focusing on the introduction of DSpace 7 and its next-generation user interface. It discusses the historical context, development process, and technology choices behind the new DSpace UI, including the use of Angular and TypeScript. Additionally, it highlights the goals for the new REST API to enhance functionality and modernize the codebase.
More Related Content
Similar to 2.28.17 Introducing DSpace 7 Webinar Slides
![Governance, Deployment & Methodologies for Agentic Automation [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day2-251112135038-a386476d-thumbnail.jpg?width=640&height=640&fit=bounds)
2.28.17 Introducing DSpace 7 Webinar Slides
- 1. Hot Topics: DuraSpaceCommunity Webinar Series Hot Topics: The DuraSpace Community Webinar Series Series Fifteen: Introducing DSpace 7: Next Generation UI
- 2. Hot Topics: DuraSpaceCommunity Webinar Series Hot Topics: The DuraSpace Community Webinar Series Curated by Claire Knowles, Library Digital Development Manager, The University of Edinburgh
- 3. Hot Topics: DuraSpaceCommunity 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. History: Why anew UI? Claire Knowles
- 5. Background - Vision StrategicPlan 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. Background - TwoUIs - 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. UI Technology SelectionProcess Tim Donohue
- 8. Prototype Challenge Analysis (early2016) 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. 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. March - June2016 (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. OR2016 until Nov2016 DSpace 6 Time Passes...
- 12. DSpace 7 UIWorking 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. DSpace 7 UI(Angular UI) Art Lowel
- 14. Angular 2 • Frameworkby Google for building applications in the browser. • Only data from the server • HTML generated by JavaScript in the browser. https://angular.io
- 15. TypeScript • Extension ofES6 • Adds types and annotations • Compiles to regular JavaScript errors can be detected at compile time. https://www.typescriptlang.org/
- 16. TypeScript • Result looksfamiliar to Java and .NET developers Interfaces, Generics, Decorators, … • Much better IDE integration than JS https://www.typescriptlang.org/
- 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. Angular 2: Mainelements • Components: – render data • Services: – provide components with data
- 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. Angular 2: Components <divclass="wrapper"> <ds-header></ds-header> <main> ... </main> <ds-footer></ds-footer> </div>
- 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. 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. 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. Angular 2: Services @Injectable() exportclass 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. Angular Universal • Sub-projectby 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. Angular Universal • Theuniversal 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. Angular Universal • Thefirst 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. Angular Universal • Dohave 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. Learning more • Learnabout 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. • How To:https://goo.gl/aJ9u4U • Project board: https://waffle.io/DSpace/dspace-angular Contributing
- 31. DSpace 7 (new)REST API Andrea Bollini
- 32. Outcome from theprototype 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. What are thegoals? ● 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.
- 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.
- 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. 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. ALPS At the rootof 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. 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. 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.
- 43. Best practices andconvention ★ Spring Data REST project ○ projection ○ pagination defaults ○ ETAGs ○ Architecture ★ Look to JSON-API Format for unresolved issues
- 44. Technologies ★ JAVA 8,Servlet 3.1 ★ Spring Boot ★ Spring MVC + Spring HATEOAS ★ Spring REST Documentation* ★ Spring Security* * to be confirmed
- 45. Architecture ★ REST Datamodel ★ A single controller for all the REST resources ★ Repository Design Pattern ★ Converter to translate REST model classes to persistence and vice versa
- 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. Learning more • SpringREST & 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. Contributing ★ Rest Contractdefinition & 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. Next Steps &Contributing Tim Donohue
- 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. Collaboration / Updates •Meetings: Every Thursday (16:00 UTC) alternating between text meetings in Slack, and Google Hangouts. • Soon: monthly video updates (to lists)
- 52. How to contribute Claima 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. Hot Topics: DuraSpaceCommunity 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