Update and discussion on the new Angular 2 UI proof-of-concept, presented during the OR16 Developer / DCAT meeting on Monday, June 13, 2016. Notes from that meeting are also available at: https://wiki.duraspace.org/display/DSPACE/DevMtg+2016-06-13+-+OR16+Meeting
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
New UI Update - OR16 Developer / DCAT Meeting
1. Licensed under Creative Commons Attribution-ShareAlike 4.0 International License
New UI Discussion
OR2016 Dev / DCAT meeting
Tim Donohue, DuraSpace
Tech Lead for DSpace
tdonohue@duraspace.org
2. How we got here
• Tune in on Weds @ 2pm
• Also a full demo!
https://www.youtube.com/user/dspacevideoshttps://www.youtube.com/user/dspacevideos
3. Picking up in Mid-March
(DuraSpace Summit)
VSVS
(Angular 2 was in Beta)
4. Why a Java UI?
+ Stable, trusted
+ Same as backend / API
+ More modern Java tech
‒ Less innovative / added value?
‒ Less exciting to new developers
5. Why a JavaScript UI?
+ More dynamic
+ Separation of concerns
+ Innovative / exciting
+ Better REST API
‒ SEO?
‒ Accessibility?
‒ Will it meet our needs?
6. Why try Angular 2?
• Benefits of JavaScript UI
• Angular = most widely used
• SEO support claims
• Accessibility claims
https://angular.io/https://angular.io/
10. SEO (Google Scholar)
Accessibility (U of Kansas)
Better user experience
Easily configurable UI (JSON)
Backend is still Java (5.x)
++
Angular 2 in Release Candidate!
14. Components
Each ‘part’ of webpage is a
Component (module):
… ‘implements’ Interface
… ‘extends’ another Component
… has a selector (HTML-like tag)
e.g. <news> = NewsComponent
… has a constructor (defines its inputs)
… has a template (view) and/or
methods (actions)
18. Dependency Injection (DI)
Inject modules into other modules
// Define DSpaceService as injectable
@Injectable()
export class DSpaceService { … }
// Then, inject DSpaceService as input
export class myComponent {
constructor(private dspaceService:
DSpaceService) { … }
}
19. SEO via Angular Universal
• Same JS on server & client!
– Server side: Node.js or ASP.NET
• Future: Java!
• Serves up HTML to non-JS clients
• Speeds up app initial load
SEO verification with Google Scholar
22. RoadMap to 7
Top Priorities
•REST API++
•Angular 2 User Interface
Timeline Goals
•Beta & training at OR2017
•Final by late 2017 / early 2018
https://wiki.duraspace.org/display/DSPACE/RoadMap
23. But, we need your help!
Sprint-like, organized development
REST API needs Java devs
Angular 2 UI needs JS devs
UI / UX Designers
Accessibility experts / testers
Translators (eventually)
If you want to join the team, email
tdonohue@duraspace.org
Angular very popular. No indication that Angular 2 will change that momentum. Major users include:
Capital One (capitalone.com): https://www.infoq.com/news/2016/05/angular-2-release-candidate
Weather Channel (weather.com): http://thenewstack.io/google-preps-angular-2-final-release/
Google Fiber, Adwords
Many many third-party modules (ng2-bootstrap, ng2-file-upload). We don’t need to build it all.
ngFor and ngIf are Angular (ng) *directives*
{{ }} are dynamic textual outputs
&lt;form-validation-message&gt; is an example of calling another *component*