I am starting to work on a new project for a new customer, I’ll join the team for a couple of days or perhaps weeks. They have been spiking and eventually have decided they want to develop the front-end using Marionette.js a library on top of Backbone.js together with Require.js. I’ve done a spike to show them how I’d structure the files, the app and the different kinds of tests.
The app is dead simple. The is a form with two fields, “description” and “url”. When the user clicks on the button below, a new link is added underneath. So it’s to add links to a panel.
Versions used in this working spike:
- Jasmine.js – v2.0
- Require.js – v2.1.14
- Marionette.js – v2.0.1
The repo is here: https://bitbucket.org/carlosble/marionette-testing-sample/overview
Structure:
- bower_components – dependencies
- node_modules – dependencies
- index.html – launches the app
- uiTests.html – launches Jasmine tests against the DOM, using Require.js
- actionsTests.html – launches Jasmine tests to test business logic
- js – this is the production code
– app.js
– views.js
– models.js
– actions.js - spec – these are the tests
– viewsSpec.js – interact with the DOM
– actionsSpec.js – no interaction with the DOM, works on the business logic
With this structure the business logic don’t have to depend on Marionette, although it depend on Backbone models and collections.
Resources that help:
- https://leanpub.com/marionette-gentle-introduction
- https://leanpub.com/structuring-backbone-with-requirejs-and-marionette
- http://blogs.lessthandot.com/index.php/webdev/uidevelopment/javascript/unit-testing-with-jasmine-2-0-and-require-js/
- http://www.bennadel.com/blog/2393-writing-my-first-unit-tests-with-jasmine-and-requirejs.htm