JavaScript UI       for REST servicesBackbone, Require.js, Jasmine, HtmlUnit     JUG #5 București @Cegeka
Ioan Eugen StanPartner @AxemblrApache James PMC memberDebianistConnect with me on Linkedin
DisclaimerOne solution out of many. Focus on some             best practices.
Why?REST services are nice but we need an UI thatis:● easy to develop against the API● easy to test (cross-browser)● brake...
Tools● Backbone - MVC for the Browser● Require.js - modules for JS - put some order  in that chaos !!● Jasmine - JS BDD an...
Backbone.js● gives structure to web applications● provides: models, collections and views● binds view to collections/model...
Sample Backbone Model Todo.Item = Backbone.Model.extend({    defaults:function () {      return {         title:"",       ...
Sample Backbone View var TodoView = Backbone.View.extend({    events:{        "click .delete":"deleteTodo"    },    render...
Backbone conclusions  Allows us stay away from DOMmanipulations so we can test things in              isolation
Require.jsIs a file and module loader for JavaScript and:● puts structure in to the web application● fights against namesp...
Require.js App File Structureproject-directory/●  index.html●  js/    ○   libs/          ■  require.js          ■  backbon...
Index page with Require.js<html><head> <!-- title, CSS definitions, etc--> </head><body><div id="container" class="contain...
JasmineBehavior-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...
Sample Jasmine Spec describe("mode/todo Todo Collection", function () {   var collection      beforeEach(function () {    ...
HtmlUnit"GUI-Less browser for Java programs"
HtmlUnit provides:●   support for HTTP/HTTPS●   cookies●   forms, clicking links,●   most important HTTP: POST, GET, etc.●...
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...
Jasmine Maven Plugin - config<configuration> <browserVersion>FIREFOX_3</browserVersion>              <junitXmlReportFileNa...
Jasmine Maven Plugin - benefits● you can integrate with CI infrastructure  (Jenkins)● has multiple browser support => test...
Resources● Demo : https://github.com/bucharest-  jug/dropwizard-todo (todo-service)● Other:  ○   http://backbonejs.org/  ○...
Thanksieugen@apache.org
Upcoming SlideShare
Loading in...5
×

Javascript ui for rest services

2,405

Published on

Presented at Bucharest Java User Group, http://www.bjug.ro/editii/5.html . Project source code available at: https://github.com/bucharest-jug/dropwizard-todo

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
2,405
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript ui for rest services

  1. 1. JavaScript UI for REST servicesBackbone, Require.js, Jasmine, HtmlUnit JUG #5 București @Cegeka
  2. 2. Ioan Eugen StanPartner @AxemblrApache James PMC memberDebianistConnect with me on Linkedin
  3. 3. DisclaimerOne solution out of many. Focus on some best practices.
  4. 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. 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. 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. 7. Sample Backbone Model Todo.Item = Backbone.Model.extend({ defaults:function () { return { title:"", created:-1 } } })
  8. 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. 9. Backbone conclusions Allows us stay away from DOMmanipulations so we can test things in isolation
  10. 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. 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. 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. 13. JasmineBehavior-driven development framework for testing JavaScript code.
  14. 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. 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. 16. HtmlUnit"GUI-Less browser for Java programs"
  17. 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. 18. Jasmine Maven Plugin Test drive your JavaScript
  19. 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. 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. 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. 22. 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
  23. 23. Thanksieugen@apache.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×