dspace ui prototype dsember
Post on 16-Apr-2017
721 Views
Preview:
TRANSCRIPT
www.atmire.com
DSpace UI prototype dsember
Introduction
• Art Lowel, @mire
• most notable contributions: Mirage 1 & 2
• dsember = DSpace & Ember
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
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.
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
Demo: Scope Requirements
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
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
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.
Customisation demo
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.
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
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
Why Ember: Convention over Configuration
• Solving a common problem doesn’t require much code
• Easy to follow best practices, hard to go against them
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
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.
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, …
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
• …
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
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, …
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
Questions?
top related