Javascript ui for rest services

JavaScript UI
for REST services
Backbone, Require.js, Jasmine, HtmlUnit
JUG #5 București @Cegeka

Ioan Eugen Stan
Partner @Axemblr
Apache James PMC member
Debianist

Connect with me on Linkedin

Disclaimer
One solution out of many. Focus on some
best practices.

Why?
REST services are nice but we need an UI that
is:
● easy to develop against the API
● easy to test (cross-browser)
● brakes when API evolves - but informs us
what changed
● can have continuous integration with our
service

Tools
● Backbone - MVC for the Browser
● Require.js - modules for JS - put some order
in that chaos !!
● Jasmine - JS BDD and unit testing
● HtmlUnit - "GUI-Less browser for Java
programs"
● jasmine-maven-plugin - combines Jasmine,
HtmlUnit and Requirejs into a Maven plugin

Backbone.js
● gives structure to web applications
● provides: models, collections and views
● binds view to collections/models by custom
events
● declarative event handling

● views can be rendered detached from DOM!!

Sample Backbone Model
Todo.Item = Backbone.Model.extend({
defaults:function () {
return {
title:"",
created:-1
}
}
})

Sample Backbone View
var TodoView = Backbone.View.extend({
events:{
"click .delete":"deleteTodo"
},
render:function () {
this.$el.html(Table)
return this;
},
deleteTodo:function (eventName) {
this.model.delete() }
})

Backbone conclusions
Allows us stay away from DOM
manipulations so we can test things in
isolation

Require.js
Is a file and module loader for JavaScript and:

● puts structure in to the web application
● fights against namespace pollution => less
weird bugs !!
● has some nice optimization features

Require.js App File Structure
project-directory/
● index.html
● js/
○ libs/
■ require.js
■ backbone.js
■ jquery.js
○ model/ ...
○ view/ ...
○ tpl/ - templates
○ config.js - require.js config file

Index page with Require.js
<html>
<head>  </head>
<body>

<div id="container" class="container"></div>

<script data-main="/assets/js/config.js" src="
/assets/js/libs/require.js"></script>

</body>
</html

Jasmine
Behavior-driven development framework for
testing JavaScript code.

Jasmine features
● does not depend on DOM
● has very nice semantics
● can use Spyes to inspect/mock calls
● comes with jQuery support
● you can even test for events like: click, blur,
etc.

Sample Jasmine Spec
describe("mode/todo Todo Collection", function () {
var collection

beforeEach(function () {
// initialize collection before each test case
})

it("loads data from the proper url", function () {
expect(collection.length).toBe(1)
})
})

HtmlUnit
"GUI-Less browser for Java programs"

HtmlUnit provides:
● support for HTTP/HTTPS
● cookies
● forms, clicking links,
● most important HTTP: POST, GET, etc.
● JavaScript

Use it when you need to test code that runs in
the browser!

Jasmine Maven Plugin
Test drive your JavaScript

Jasmine Maven Plugin - esentials
● built on HtmlUnit with Jasmine, + Require.js
● it helps you practice TDD/BDD as you write
JavaScript
● it can run as part of your build with no added
configuration on your part
● also supports CoffeScript

Jasmine Maven Plugin - config
<configuration>
<browserVersion>FIREFOX_3</browserVersion>
<junitXmlReportFileName>TEST-FIREFOX_3-jasmine.
xml</junitXmlReportFileName>
<jsSrcDir>${project.basedir}/src/main/resources/assets</jsSrcDir>
<jsTestSrcDir>${project.basedir}
/src/test/javascript/specs</jsTestSrcDir>

<specRunnerTemplate>REQUIRE_JS</specRunnerTemplate>
</configuration>

Jasmine Maven Plugin - benefits
● you can integrate with CI infrastructure
(Jenkins)
● has multiple browser support => test your
code against I.E. 6,7,9, Firefox, Chrome, etc.
● we can test JS models with the fixtures used
in Java !!

Resources
● Demo : https://github.com/bucharest-
jug/dropwizard-todo (todo-service)
● Other:
○ http://backbonejs.org/
○ http://underscorejs.org/
○ http://requirejs.org/
○ http://pivotal.github.com/jasmine/
○ http://htmlunit.sourceforge.net/
○ http://searls.github.com/jasmine-maven-plugin/
○ https://github.com/ieugen/brooklyn/tree/app-explore

Javascript ui for rest services

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Javascript ui for rest services

Semelhante a Javascript ui for rest services (20)

Mais de Ioan Eugen Stan

Mais de Ioan Eugen Stan (8)

Último

Último (20)

Javascript ui for rest services