Contribute to the DSpace Development Fund
The newly established DSpace Development Fund supports the development of new features prioritized by DSpace Governance. For a list of planned features see the fund wiki page.
The DSpace UI developer team decided to implement the new user interface with the widely used Angular2 client side framework. In addition to delivering a more responsive user experience, client side frameworks allow for a more rapid development cycle. The UI code is built in TypeScript, a typed super set of JavaScript, that was developed specifically for the implementation of sizable web applications.
The UI works with the DSpace REST Api to access and modify data. RxJS facilitates (asynchronous) communication between the two applications.
The new UI uses Angular Universal to render initial page requests on the server side. Thus search engines requesting pages do not have to deal with client side page rendering. Crawlers working through a list of URLs will always be presented with a page rendered on the server.
Node.js is the server technology used with JavaScript web application and thus with Angular. It serves the same purpose as Tomcat does for Java servlets.
Npm stands for Node Package Manager. In fact installation instruction for the user interface at GitHub essentially consist of the command 'npm install', followed by 'npm start' to start a local server.
Learning Resources
General
- https://angular.io/styleguide - The official Angular2 for TypeScript Style Guide
- https://angular.io/docs/ts/latest/ - The official documentation for Angular 2 (with TypeScript). Includes a "5-min quick start", "step-by-step guide" and official API docs
- https://github.com/angular/angular - The official codebase for Angular 2. Where to submit issues, follow the code progression, etc.
- http://angularjs.blogspot.com/ - The Angular blog, which contains updates and blog posts from the Angular team.
- https://groups.google.com/forum/#!forum/angular - Google Group for Angular 1 or 2 discussions.
- https://angularair.com/ - A live video podcast all about Angular
- https://www.npmjs.com/package/npm-check-updates - A npm package for dependency management
- Scotch.io has a bunch of articles on various angular 2 topics
Typescript
- http://www.typescriptlang.org/ - The official documentation for the TypeScript language. Includes links to sample code, as well as a live in-browser editor/samples.
- See also the TypeScript Guidelines on the Prototype's wiki
RXJS
RxJS is used as part of angular 2 to deal with asynchronous data. A good grasp of RxJS is essential to write robust angular 2 code.
- A general introduction to Reactive Programming
- There are a bunch of resources on RxJS’ github
- Decision trees to find which operator to use when creating new sequences or using existing sequences → these are very useful during development
Universal
Universal is the angular sub-project that allows for angular apps to be rendered server-side
- Here‘s a high level document explaining it
- There are some videos on their github page
- William Welling has a test project to experiment with Angular Universal.
Redux
Redux is a set of design-patterns to manage state in a javascript application.
- The concepts are explained clearly, though independently from angular in the main redux docs
- There is also a great free video course on egghead
- @ngrx is an implementation of Redux for Angular 2 using RxJS
- Ducks is a way to structure redux applications to keep them as modular as possible that works well in practice.
Overview
Content Tools
All content on the LYRASIS Wiki is licensed under the CC BY (Attribution) license
, unless otherwise noted.