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?