opencast admin ui - tools and development setup

Admin UITools and development setup

Xavier Butty Software Engineer

for the open minded

First name, Last name Position

for the open mindedfor the open minded

How did we develop the new

Admin UI?

01

– for the open minded

Development processDesign UI and

API

Integration

API Backend implementation

MocksFrontend implementation

JS

First name, Last name Position

for the open mindedfor the open minded

02

The right tools for the job

– for the open minded

Code quality checker

CSS extension / compiler

Javascript framework

Task runner

Testing framework

Lightweight http server - Mocks

Test runnerMinification

Template pre-compilation

Compress img

– for the open minded

Code quality

The checkstyle tool for Javascript

Adaptable to code convention

Much more flexible than JSLint

JSHint

– for the open minded

Demo JSHint

http://jshint.com/

– for the open minded

CSS extension

Enhance the stylesheet creation Reusable component

CascadingMixins

LESS is currently used in the new Admin UI, but an update to SASS coming soon

Better scalability

Larger community

More resources available

– for the open minded

Demo Less

http://less2css.org/

– for the open minded

Javascript Framework

Most popular javascript MVW framework actually Widely used

Large community supporting it

Powered by Google

Lots of valuable resources available online

Scalable Short introduction coming at 11h30

– for the open minded

Testing frameworks

Behaviour driven unit tests frameworks

Most popular unit test solution for AngularJS

ngMocks AngularJS Module provides mocking for the tests

– for the open minded

Test runner

Spawn a web server which loads your application's source code and executes your tests

Highly configurable

De facto test runner for AngularJS

Existing Adapter for Jasmine

– for the open minded

Lightweight HTTP server

Connect

Extensible HTTP server framework

Used for development

Allow to use middleware for mocking the REST endpoints.

Livereload

– for the open minded

Task runner

Javascript Task runner working on Node.js

Large choice of plugins for all the popular frontend tools

The “Gruntfile” is what the “pom” is to Maven

GRUNT

First name, Last name Position

for the open mindedfor the open minded

03

Automate the tasks

– for the open minded

What has to be automated?

Refresh page

Run unit tests

Check code qualityStart

web serverCompile CSS

Copy source to web server

Copy sourcesto target folder

When developing? When building?

– for the open minded

Creating profiles

JSHint Code quality

CSS compilation

Development profile

Copy src to WEBAPP

Build profile

Create/Clean WEBAPP folder

Web

ser

ver

Wat

ch JS

JSHint Code quality

Copy src to WEBAPP

Wat

ch C

SS

Karma: unit tests

CSS compilation

Copy src to WEBAPP

CSS compilation

JSHint Code quality

Karma: unit tests

Copy to target folder

with skipTests option

– for the open minded

Integration in Mavenpom.xml

Install

Dependancies

Run build profile

First name, Last name Position

for the open mindedfor the open minded

Setup

04

– for the open minded

Module files structure

Web app sources

Tests sources + Mock files

Grunt profiles

Grunt dependancies

– for the open minded

Web app files structure

Components used in different context

Components related to specific pages

– for the open minded

Tools configuration

JSHint Convention > jshint.json

Grunt Profiles > Gruntfile.js

Dependancies > package.json

Karma Configuration > src/tests/resources/karma.conf.js

First name, Last name Position

for the open mindedfor the open minded

05

Some practice

– for the open minded

Prerequisites

Only Grunt… that itself requires:

> Node.js and its package manager npm

> Install project dependencies:cd $MATTERHORN_HOME/modules/matterhorn-admin-ui-ng/npm install

> Ready!

– for the open minded

Let’s run itCss compilation

Code qualityJSHint

Copy

Web server

Test runnerUnit tests

– for the open minded

Creating Mocks

Mock files are located in: /src/test/resources/[GET/POST/PUT/

DELETE]

The connect web server + a middleware to redirect request to it.

Need to mock /info/me.json for GET request?

Simply add a file called me.json in /src/test/resources/GET/info/me.json

First name, Last name Position

for the open mindedfor the open minded

06

Next steps

– for the open minded

What’s next

e2e tests with Protractor

Compilation of the whole as an AngularJS app

use Bower for Javascript dependencies

Define Javascript convention for the community

thanks for you attention

Xavier Butty Software Engineer

for the open minded

Questions?

http://entwinemedia.com @entwinemedia