Introduction of the development process of the new Opencast Administration UI with a presentation of the tools used and the whole setup.

1. Admin UI
Tools and development setup
Xavier Butty
Software Engineer
for the open minded

2. First name, Last name
Position
for the open mindedfor the open minded
How did we
develop the new
Admin UI?
01

3. – for the open minded
Development process
Design UI and
API
Integration
API
Backend
implementation
MocksFrontend
implementation
JS

4. First name, Last name
Position
for the open mindedfor the open minded
02
The right tools
for the job

5. – for the open minded
Code quality checker
CSS extension / compiler
Javascript framework
Task runner
Testing framework
Lightweight http server - Mocks
Test runner
Minification
Template pre-compilation
Compress img

6. – for the open minded
Code quality
The checkstyle tool for Javascript
Adaptable to code convention
Much more flexible than JSLint
JS Hint

7. – for the open minded
Demo JSHint
http://jshint.com/

8. – for the open minded
CSS extension
Enhance the stylesheet creation
Reusable component
Cascading
Mixins
LESS is currently used in the new Admin UI,
but an update to SASS coming soon
Better scalability
Larger community
More resources available

9. – for the open minded
Demo Less
http://less2css.org/

10. – 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

11. – 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

12. – 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

13. – 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

14. – 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

15. First name, Last name
Position
for the open mindedfor the open minded
03
Automate the tasks

16. – for the open minded
What has to be automated?
Refresh page
Run unit tests
Check
code quality
Start
web server
Compile CSS
Copy source
to web server
Copy sources
to target folder
When developing? When building?

17. – for the open minded
Creating profiles
JSHint Code quality
CSS compilation
Development profile
Copy src to WEBAPP
Build profile
Create/Clean WEBAPP folder
Webserver
WatchJS
JSHint Code quality
Copy src to WEBAPP
WatchCSS
Karma: unit tests
CSS compilation
Copy src to WEBAPP
CSS compilation
JSHint Code quality
Karma: unit tests
Copy to target folder
with
skipTests option

18. – for the open minded
Integration in Maven
pom.xml
Install
Dependancies
Run build profile

19. First name, Last name
Position
for the open mindedfor the open minded
Setup
04

20. – for the open minded
Module files structure
Web app sources
Tests sources + Mock files
Grunt profiles
Grunt
dependancies

21. – for the open minded
Web app files structure
Components
used in different context
Components related
to specific pages

22. – 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

23. First name, Last name
Position
for the open mindedfor the open minded
05
Some practice

24. – 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!

25. – for the open minded
Let’s run it
Css compilation
Code qualityJSHint
Copy
Web server
Test runner
Unit tests

26. – 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

27. First name, Last name
Position
for the open mindedfor the open minded
06
Next steps

28. – 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

29. thanks for you attention
Xavier Butty
Software Engineer
for the open minded
Questions?
http://entwinemedia.com
@entwinemedia