javascript ui for rest services
DESCRIPTION
Presented at Bucharest Java User Group, http://www.bjug.ro/editii/5.html . Project source code available at: https://github.com/bucharest-jug/dropwizard-todoTRANSCRIPT
JavaScript UI for REST services
Backbone, Require.js, Jasmine, HtmlUnitJUG #5 București @Cegeka
Ioan Eugen Stan
Partner @AxemblrApache James PMC memberDebianist
Connect with me on Linkedin
DisclaimerOne solution out of many. Focus on some
best practices.
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
Why?
● 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
Tools
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 conclusionsAllows us stay away from DOM
manipulations so we can test things in isolation
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
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> <!-- title, CSS definitions, etc--> </head><body>
<div id="container" class="container"></div>
<script data-main="/assets/js/config.js" src="/assets/js/libs/require.js"></script>
</body></html
JasmineBehavior-driven development framework for
testing JavaScript code.
● 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.
Jasmine features
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) }) })
Sample Jasmine Spec
HtmlUnit"GUI-Less browser for Java programs"
● 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!
HtmlUnit provides:
Jasmine Maven PluginTest drive your JavaScript
● 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 - esentials
<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 - config
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
