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

2,227

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

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,227
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 : 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. Thanksieugen@apache.org

×