Applying agile development practices to rich internet applications

Transcription

1 Applying agile development practices to rich internet applications Proposal in detail: Agile practitioners today are comfortable with applying practices such as behaviour-driven development (BDD) and test-driven development (TDD) to incrementally build robust, objectoriented code in server-side environments like Java and C#. Increasingly, however, development teams are being asked to deliver highly-interactive rich internet web applications that present information in visually exciting ways. As application-logic necessarily moves from the server-side to the web browser, agile development teams are faced with the dilema of leaving behind the techniques and tools they are comfortable with, in persuit of the compelling user-experience that their customers want. This need not be the case. In this tutorial, we show you how to apply BDD and TDD to incrementally build a rich internet application based on HTML5, CSS and OO Javascript, utilising frameworks such as Jasmine, js-test-driver and mock4js. A real-world application from the trading domain will be used to drive your learning, and we will also make use of new technologies such as websockets and knockout.js. The focus of the exercise is on applying BDD and TDD to writing object-oriented Javascript code. Participants will be given an introduction to the techniques and tools used and an overview of the domain and business requirements. The group will particpate in breaking down the business requirements into stories. We will implement the first few acceptance criteria together as a group. For the remainder of the session, the participants will be asked to pair-program the solution. Producers and facilitators will be on hand throughout the session to assist with the implementation. We will come together at regular intervals to review progress. Process/Mechanics 1. Introduction (15 mins) - Overview of the session timings, explain the business requirements, demo the finished application 2. User story breakdown (15 mins) - As a group, we will discuss the first 3-4 user stories to be delivered 3. Introduce the development environment (20 mins) - Explain how js-test-driver, Jasmine etc are configured. Describe all the pre-built elements (e.g. how we receive data from the server) Break (10 min) 4. Story 1(50 mins) - Start development by framing the first AC in Jasmine syntax, then writing the unit tests using js-test-driver and mock4js, followed by the production code. This will demonstrate how knockout.js is used to seperate view and business logic, websockets to stream data from the server and CSS to make the UI look nice. Depending on the group, we may do the whole of the first story together. Break (10 mins)

2 5. Repeat for remaining stories, in pairs (50 mins) 6. Retrospective (10 mins) Note - 1. All required software will be provided. Participants are asked to have a basic knowledge of Javascript syntax and bring a windows laptop (1 per pair). 2. The producer will have a solution prepared for each story. Depending on the participants comfortlevel, some of the steps could be skipped to accelerate learning. 3. There will be a producer and a co-producer. The producer will focus on explaining the techniques whilst the co-presenter will be implementing them. If possible, we will have one or two facilitators on hand to assist with the pair-programming. 4. The application will be a real business use case from the trading domain, simple enough to understand but with some complex visualisation requirements. No prior domain knowledge is required. Learnings: 1. Learn how to use BDD and TDD to develop rich internet applications 2. Learn how to write clean, well-tested, object-oriented code in Javascript 3. Learn some of the tools for agile rich internet application development - Jasmine, js-test-driver, mock4js

3 User Stories (Heatmap web component): User stories for the Heatmap web component. Heatmap is a way to summarise the trading market, where the instrument prices are streamed in real time and the colour of the tile is updated as per the change in the price(change = last session closed price current price). Story 1 See a single instrument detail on the screen I want to see an instrument details on the screen, So that I can understand the market for that instrument. 1. See details of an instrument on screen Then I should be able to see the instrument details.

4 Story 2 See the real time price updates for an instrument I want to see the real time price updates, So that I can understand how the market is moving for that instrument. 1. See price updates for an instrument Then I should be able to see price updating and flashing for an instrument.

5 Story 3 See top 5 active instruments I want to see the top 5 instruments based on the trading volume, So that I know the most actively traded instruments. 1. See top 5 most active instruments Then I should be able to see the top 5 actively traded instruments. Story 4 See top 5 instruments in the basic heat map I want to see the top 5 instruments displayed as tiles, So that I know the overview of the top 5 instruments. 1. See the top 5 instruments displayed as a tile Then I should be able to see the top 5 instruments displayed as tile with the summary (Instrument name and change in percentage).

6 When the price changes for that instrument Then I should be able to see the change in percentage updated on the tile. 2. See the instrument details on mouse over on a tile Given I open the heatmap web component When I move a mouse over a tile Then I should be able to see the instrument details. Story 5 See price change depicted by a colour I want to see tile colour, which reflects the price change since the start of the day, So that I can get quick visual view on market rising or falling for that instrument. 1. See colour change to the green shade when market is rising for that instrument Given I open the heatmap web component When the market moves up for that instrument Then I should see the tile colour is change to a blue shade 2. See colour change to the red shade when market is falling for that instrument Given I open the heatmap web component When the market moves down for that instrument Then I should see the tile colour is change to a red shade Close to the actual heatmap as shown on the first page (without grouping by sector).

7 Further Stories 6. I want to see instruments grouped by sector in the heat map. 7. I want to configure the instruments as per my interest in the heatmap. 8. I want to see the tile size according to the trading volume. 9. I want to see the heatmap for sectors, on clicking each sector, system will show heatmap for the instruments of that sector. 10. I want to organize the tiles (instruments) by dragging them in the heatmap.