Your SlideShare is downloading. ×
Javascript ui for rest services
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript ui for rest services


Published on

Presented at Bucharest Java User Group, . Project source code available at:

Presented at Bucharest Java User Group, . Project source code available at:

Published in: Technology
1 Comment
  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. JavaScript UI for REST servicesBackbone, Require.js, Jasmine, HtmlUnit JUG #5 București @Cegeka
  • 2. Ioan Eugen StanPartner @AxemblrApache James PMC memberDebianistConnect with me on Linkedin
  • 3. DisclaimerOne solution out of many. Focus on some best practices.
  • 4. Why?REST services are nice but we need an UI thatis:● 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
  • 5. 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
  • 6. 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!!
  • 7. Sample Backbone Model Todo.Item = Backbone.Model.extend({ defaults:function () { return { title:"", created:-1 } } })
  • 8. 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() } })
  • 9. Backbone conclusions Allows us stay away from DOMmanipulations so we can test things in isolation
  • 10. Require.jsIs 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
  • 11. Require.js App File Structureproject-directory/● index.html● js/ ○ libs/ ■ require.js ■ backbone.js ■ jquery.js ○ model/ ... ○ view/ ... ○ tpl/ - templates ○ config.js - require.js config file
  • 12. 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
  • 13. JasmineBehavior-driven development framework for testing JavaScript code.
  • 14. 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.
  • 15. 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) }) })
  • 16. HtmlUnit"GUI-Less browser for Java programs"
  • 17. HtmlUnit provides:● support for HTTP/HTTPS● cookies● forms, clicking links,● most important HTTP: POST, GET, etc.● JavaScriptUse it when you need to test code that runs in the browser!
  • 18. Jasmine Maven Plugin Test drive your JavaScript
  • 19. 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
  • 20. 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>
  • 21. 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 !!
  • 22. Resources● Demo : jug/dropwizard-todo (todo-service)● Other: ○ ○ ○ ○ ○ ○ ○
  • 23.