Software Craftsmanship in Israel meeting. JavaScript and TDD

1. Java Script – MVVM & TDD
Itzik Saban
Itzik.saban@picscout.com

2. Agenda
•Demonstration of TDD importance
•Quick Intro to MVVM & Knockout.js
•Quick Intro to jasmine
•Example
•Practicing

3. TDD Importance

4. TDD importance
Possible points of failure:
• Changes in UI logics
• Renaming
• Merges
• Wrong syntax
• etc.

5. Introduction to MVVM

6. Introduction to MVVM
Bad code for testing:

7. Introduction to MVVM
Good code for testing:

8. Introduction to MVVM
Model-View-ViewModel

9. Introduction to MVVM
Model-View-ViewModel
• The model is a set of one or more
json objects, usually representing
entities in the domain.

10. Introduction to MVVM
Model-View-ViewModel

11. Introduction to MVVM
Model-View-ViewModel
• The view is actually the html itself.

12. Introduction to MVVM
Model-View-ViewModel

13. Introduction to MVVM
Model-View-ViewModel
• The ViewModel is a javascript
object which is responsible to
handle the UI logics.

14. Introduction to MVVM
Model-View-ViewModel

15. Introduction to MVVM
Model
ViewModel
Binding
Mechanism
(Knockout.js)
View

16. Introduction to Knockout.js

17. Introduction to Knockout.js
TextBox
HTML:
ViewModel:

18. Introduction to Knockout.js
ComboBox
HTML:
ViewModel:

19. Introduction to Knockout.js
Button
HTML:
ViewModel:

20. Introduction to jasmine

21. Introduction to jasmin