• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript ui for rest services
 

Javascript ui for rest services

on

  • 2,221 views

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

Statistics

Views

Total Views
2,221
Views on SlideShare
2,221
Embed Views
0

Actions

Likes
0
Downloads
24
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript ui for rest services Javascript ui for rest services Presentation Transcript

    • 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)● 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 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 namespace pollution => less weird bugs !!● has some nice optimization features
    • 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
    • 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.
    • 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.● JavaScriptUse 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
    • Thanksieugen@apache.org