DSpace UI prototype dsember
0 likes1,261 views
Presentation by Atmire's Art Lowel from January 14th 2016. The slides present a new prototype for the future of the DSpace user interface. https://wiki.duraspace.org/display/DSPACE/DSpace+UI+Prototype+Challenge
![Project Structure: add-ons
• Optional dspace features, like the
embargo example, should be implemented
as add-ons.
• So should themes. Customisations to the
base themes should reside in the app.
• run
ember install [addon-name]
to include an addon in your local version.](https://image.slidesharecdn.com/dspace-user-interface-future-dsember-160122083649/85/DSpace-UI-prototype-dsember-9-320.jpg)
![Why Ember: Not going anywhere
• Under active development:
• dozens of commits/week since its inception [1][2][3]
• Active community:
• hundreds of new posts/month on stackoverflow [4]
and the official ember forum [5]
• Monthly meetups all over the world [6]
• Used in production by:
• Apple, Netflix,Yahoo!, LinkedIn, Groupon,Vine, …](https://image.slidesharecdn.com/dspace-user-interface-future-dsember-160122083649/85/DSpace-UI-prototype-dsember-20-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to DSpace UI prototype dsember (20)
Ad
More from Bram Luyten (13)
Recently uploaded (20)
DSpace UI prototype dsember
- 2. Introduction • Art Lowel, @mire • most notable contributions: Mirage 1 & 2 • dsember = DSpace & Ember
- 3. Technologies used • REST API + Ember JS + Ember CLI • Ember JS is a framework for creating ambitious web applications in javascript • Ember CLI is a command line tool to build and structure Ember projects
- 4. Guidelines • Do not spend more than 80 hours • ☑ spent between 70 and 80 hours • Use the Rest API or DSpace Java API • ☑ used REST API • Use bootstrap or emulate Mirage2. Focus on functionality over fancy UI look and feel. • ☑ bootstrap slightly tweaked to look like Mirage2 • Make the code developer friendly • ☑ Code is well structured, follows ember guidelines, uses jsHint validation.
- 5. Guidelines • Make all code publicly available. Demo is nice • ☑ code: https://github.com/atmire/dsember • ☑ demo: http://dsember.atmire.com • Write Documentation • ☑ README & Wiki on Github • Mock-up missing features • ☐ no features missing
- 7. Project Structure: split in to two parts • dsember-core: • a CLI addon containing all the code • dsember: • an empty app, that imports dsember-core • to keep customisations separate from vanilla code
- 8. Project Structure: split in to two parts • Anything in the dsember-core addon can be overridden or extended in the dsember app • Just put a file with the same name in the same relative location • Ember classes can be subclassed or reopened
- 9. Project Structure: add-ons • Optional dspace features, like the embargo example, should be implemented as add-ons. • So should themes. Customisations to the base themes should reside in the app. • run ember install [addon-name] to include an addon in your local version.
- 11. Advantages over current UIs: Performance • Client side JS apps are very fast • The first page load may be a little slower: • All possible templates, messages, etc are downloaded before the app starts • but afterwards everything is a lot faster: • only data needs to be downloaded and it only gets downloaded once: e.g. if you’ve already seen the simple item page, the full view or edit views load instantly.
- 12. Advantages over current UIs: Coherence • Javascript is a necessity for most complex behaviour • The more Javascript you put in a server- rendered HTML, the more it turns in to a giant mess • If you build the UI entirely in Javascript, using a proper framework, it’s easier to reason about how the different dynamic behaviours interact • Significantly fewer synchronisation problems
- 13. Advantages over current UIs: REST API • Incentive to improve/extend the REST API • applicable for much more than just this UI • makes DSpace a more attractive platform • Separation of concerns • All communication between UI and backend happens through the REST API • So it’s not possible to e.g. call a backend class straight from a JSP file
- 14. Why Ember: Convention over Configuration • Solving a common problem doesn’t require much code • Easy to follow best practices, hard to go against them
- 15. Why Ember: Backwards compatibility • Designed with backwards compatibility in mind. • Six week release cycles synchronised across core modules: ember-js, ember-cli, ember-data, … • New features are added when they’re done
- 16. Why Ember: Backwards compatibility • legacy features are deprecated until at least the next major version, with in-browser warnings on how to upgrade them • Because of this, the release of 2.0 was not an issue • all new features were gradually introduced in 1.x releases • 2.0 only removed features that had been deprecated for months.
- 17. Why Ember: Developer friendly • Great documentation • Tutorials, guides and API docs can all be viewed by ember version. • ES6, today • Ember CLI comes with babel, an ES6 to ES5 transpiler, built-in • ES6 modules are the building blocks of an ember CLI app • You’re encouraged to use other ES6 features: • fat arrows, destructuring, template strings, promises, …
- 18. Why Ember: Developer friendly • Computed Properties: fullName: Ember.computed('firstName', 'lastName', function() { return `${this.get('firstName')} ${this.get('lastName')}`; }) • Enumerable helpers: map, filter, find, first/ last, … • Great chrome/firefox extension • livereload out of the box • …
- 19. Why Ember: Addons • addons are NPM modules • there are 1000s of 3d party addons available to solve all sorts of problems. In dsember: • i18n • authentication • sass-support • … • can be completely self contained • or use overlay mechanism
- 20. Why Ember: Not going anywhere • Under active development: • dozens of commits/week since its inception [1][2][3] • Active community: • hundreds of new posts/month on stackoverflow [4] and the official ember forum [5] • Monthly meetups all over the world [6] • Used in production by: • Apple, Netflix,Yahoo!, LinkedIn, Groupon,Vine, …
- 21. Try it out • Demo: http://dsember.atmire.com • or install it yourself: • https://github.com/atmire/dsember • Straightforward install, especially if you have the Mirage 2 dependencies installed. • Test it on your own DSpace 5 REST API: ember server --proxy http://your.dspace.uri
- 22. Questions?