Building the Responsive Radio Nav (Using BDD)
The aim was to have a more up to date navigation bar which is fully responsive across all platforms. We took the Behaviour Driven Development (BDD) approach which involved us writing tests & defining the behaviour of our nav first. Before doing that we needed to come up with a way this nav would work.
Architecture & Idea
The radionav was broken down into separate modules (using RequireJS) which gave us a Model, View, Controller structure. The View would manipulate the DOM, our Models would gather data (for our Programmes panel) and the Controller would handle everything inbetween such as user actions.
Building in a BDD fashion
We then moved to the visual behaviour of the radio nav itself; including animation, colours changing, links working properly and content showing on certain screen sizes. Each of these scenarios were written in a language known as Gherkin. Gherkin can be understood by cucumber which in turn talks to Capybara, a tool which simulates real world interaction. These tests are then ran in a browser automatically and therefore becomes very useful when building anything that’s responsive as we can resize the browser, check what appears, resize again, repeat..
The advantage became clear when we changed how we wanted certain modules to work before writing up any code, had we changed our minds later the process would have taken longer. You are also clarifying your requirements from the beginning with everyone, this should mean less confusion across the board when features (and their usability) are brought to light. Stakeholders being able to read and understand the requirements (scenarios) you wrote down for each feature provides an advantage too.
The BDD process certainly takes more time, you need to think about investing time to write tests, to consult with others when sketching out scenarios on how your product will work and learning new frameworks/languages. There’s no denying this adds more overhead and its certainly not something which will run smoothly amongst the team overnight.
Libraries and Techniques
We have our models which asynchronously go of an get data for search results in the programme panel. Instead of using typical JS callbacks we use promises. Promises are very powerful and represent the eventual outcome of an asynchronous action, they’re also chainable. You can read more about the Promises/A+ spec here
EventEmitter & RequireJS
By calling events rather than functions directly means we can hook multiple functions to a particular event. Our section of code that handles the view fires off events when actions happen by the user (I.E clicking on the search box, typing in a query etc). The event fires and the view sits and waits for data to come back. By separating logic into modules we can swap out how our implementation but keep the view the same.
These modules are put together with RequireJS.
Well it seems we’ve reached a point where we can do CSS transition and have them degrade gracefully; browsers not supporting these just open and close. The opening and closing of the drawer is a CSS transition. This brings us a nice advantage of having the animations being handled directly by the browser; It should give us a much smoother transition. Our JS code can listen on the transtionEnd event to know when the drawer has finished opening/closing.