Embed Size (px)
DESCRIPTION
This presentation was part of EXPERTALKS: Jan 2012 conducted at Equal Experts India on 21st Jan 2012. Visit http://www.meetup.com/expertalks/ to know more. ------------------------------------------------------------------------------------- It focuses on how to create rich internet applications (RIA) by using Agile practices. This PPT accompanied a workshop conducted on the same topic.
Citation preview
Outline
Development Environment What is TDD? What is BDD? Domain problem Stories Demonstration Questions?
Development Environment Eclipse
– Using Eclipse IDE for JavaScript Web Developers
– Installed Jetty(Run-Jetty-Run) plugin.• Help -> Eclipse Marketplace -> type Jetty -> hit enter ->
install Run-Jetty-Run
Backend Server(Streamer.jar), – URL to access it “ws://localhost:8081/”– It is a Streaming Engine and a Stub
Exchange
Test Driven Development (TDD)? Concept
– Add a test for each new feature/improvement– Write production code, to pass test– Refactor
Aspect– KISS (Keep It Simple, Stupid)– YAGNI (You Ain’t Goona Need It)– Fake it till you make it
Benefits– Designs become more cleaner and clearer– Testable code– Focus only on what is important
Behaviour Driven Development (BDD)?
Concept– Write/Automate a desired behaviour first (in natural
language)– Driven by business value
Aspect– Test method names should be sentence– It extends TDD
Benefits– Clear understanding of desired software behaviour– Starting point– Encourages more collaboration, Dev + QA + BA +
Customer
Domain Problem
Heat Map
Top 4 gainer?
Different representation - Heat Map
Another version
Stories – Identify? Story 1 – As a trader, when I load application,
I want to see the instruments, so that …
Story 2 – As a trader, I want to see “price change” updating in real time, so that …
Story 3 – As a trader, I should able to see instruments performance visually(color coded), so that I will get overview of the market in real time
Story 1 As a trader, when I load application, I want to
see the instruments, so that … Scenario 1
– When a trader starts the application– Then I will see the instruments with details
• Instrument Symbol• Instrument Name• Price change in percentage
Design Discussion – Story 1
Streamer Engine
Connect to – ws://localhost:8081/
HTML document
Knockout bindings
Application
Design Discussion – Story 1
Streamer EngineChannel
Connect to – ws://localhost:8081/
/Instrument
{messageType:"Snapshot",message : {[
{ "instrumentSymbol":"PL Z11", "instrumentName":"Platinum", "instrumentChange":"-3.9“}
]}}
Instrument Container
Application
HTML document
Knockout bindings
Story 2 As a trader, I want to see “price change”
updating in real time. Scenario 1
– Given I have launched Heat Map application– When I monitor the Heat Map– Then I will see the instrument’s “price change”
updates in real time
Design Discussion – Story 2
Streamer EngineChannel
Connect to – ws://localhost:8081/
/Instrument
{messageType:“Update",message : {[
{ "instrumentName":"Platinum", "instrumentChange":"-3.9“}
]}}
Instrument Container
Application
HTML documents
Knockout bindings
Instrument
Story 3 As a trader, I should able to see instrument’s
performance visually. Scenario 1
– Given I have launched Heat Map application– When I monitor the Heat Map– Then I will see the instrument’s tile color changing
according to the “price change” in real time
Design Discussion – Story 3
Streamer EngineChannel
Connect to – ws://localhost:8081/
/Instrument
Instrument Container
Application
HTML documents
Knockout bindings
Instrument
Color Code Calculator
