opencast admin ui - tools and development setup
TRANSCRIPT
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
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
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