Javascript ui for rest services
•
0 recomendaciones•3,074 vistas
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
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Javascript ui for rest services
Similar a Javascript ui for rest services (20)
Más de Ioan Eugen Stan
Más de Ioan Eugen Stan (8)
Último
Último (20)
Javascript ui for rest services
- 1. JavaScript UI for REST services Backbone, Require.js, Jasmine, HtmlUnit JUG #5 București @Cegeka
- 2. Ioan Eugen Stan Partner @Axemblr Apache James PMC member Debianist Connect with me on Linkedin
- 3. Disclaimer One solution out of many. Focus on some best practices.
- 4. Why? 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
- 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 DOM manipulations so we can test things in isolation
- 10. Require.js 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
- 11. 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
- 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. Jasmine Behavior-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. ● JavaScript Use 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