Page History
Info | ||
---|---|---|
| ||
Update June 2017: A DSpace Angular UI workshop was held at OR2017. This workshop provided an basic overview of the Angular framework, along with hands-on exercises for all attendees. All workshop materials are available online at: OR2017 DSpace Angular Workshop. |
The new DSpace UI developer team decided to implement the new user interface with the widely used Angular2 is being implemented on the widely used Angular 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 fact Angular itself is developed in TypeScript.
The UI works with the DSpace REST Api API to access and modify data. RxJS facilitates It relies on RxJS to manage control flow which is driven by the (asynchronous) communication between the two applications The @ngrx package helps maintain a predictable state representation.
The new UI uses Angular Universal to render initial page requests on the server side. Thus , which greatly improves the initial page load time. As a nice benefit, 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 As an asynchronous event driven JavaScript runtime, Node is designed to build scalable network applications like web based user interfaces.
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
Typescript
- This wiki page explains the rationale for using typescript in more detail
- The Official documentation for the TypeScript language includes links to sample code, as well as a live in-browser editor/samples.
Angular
- Official Angular.io 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 -
- 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
- Angular Forum - 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
- Discussion Group
- Scotch.io - article collection and HowTos
Other Packages
- RxJS - JavaScript implementation of ReactiveX, which describes itself as an API that combines the Observer pattern with iterators and functional programming. It facilitates the type of event/data driven programming that is common in web applications. The RxJS GitHub repo contains Resources and Links to Tutorials.; André Staltz wrote a good introduction to Reactive Programming
@ngrx is an implementation of Redux for Angular 2. The main Redux documentation describes the general concepts. Angular 2 — Introduction to Redux is an Angular specific how to. Getting Started with Redux is a 2h video course on egghead
ngx-translate - supports multilingual text display
Node.js and Npm
- node.js - official site
- npm - official site
- npm-check-updates - npm package dependency management
Angular Universal
- Official Angular Universal Site
- Here‘s a high level explanation
- Universal GitHub - with documentation and a few videos
- 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.
...
Additional DSpace 7 Resources
Children Display |
---|
...