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. In facts Angular2 itself is developed in TypeScript.
The UI works with the DSpace REST Api to access and modify data. RxJS implements the ReactiveX observably design pattern to facilitates (asynchronous) communication between the two applications and the related Redux package helps maintain object state.
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.
Typescript
- The Prototype Wiki explains the rational for using typescript in ore detail
- The Official documentation for the TypeScript language includes links to sample code, as well as a live in-browser editor/samples.
Angular2
- Official Angular2 site - with documentation, quick start, and API references, and a style guide
- Angular @ GitHub - code base and place to submit issues
- Getting Started Video Tutorial by Deborah Kurata
- Angular Blog - updates and blog posts from the Angular team.
- Angular Forum - Google Discussion Group
- Scotch.io - article collection and HowTos
Other Packages
- RxJS - JavaScript implementation of ReactiveX; the RxJS GitHub repo contains Resources and Links to Tutorials.; André Staltz wrote a good introduction to Reactive Programming
Node.js and Npm
- node.js - official site
- npm - official site
- npm-check-updates - npm package dependency management
Angular Universal
- Official Angular Universal Site
- Universal GitHub - with documentation and a few videos
- Here‘s a high level document explaining it
- 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
- Another Redux/Angular HowTo - https://medium.com/google-developer-experts/angular-2-introduction-to-redux-1cf18af27e6e#.41lxp5y69 is it any good ?
- 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.