Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MVVM for the Web


Published on

Excella Consultings's Doguhan Uluca discusses delivering a responsive and modern Web client based on emerging technologies in an MVVM architecture, such as Breeze, Knockout, Require with Javascript unit testing and Automated Acceptance Testing.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

MVVM for the Web

  1. 1. Presentation Layer DoguhanUlucaMVVM for the Web
  2. 2. ASP.NET MVC
  3. 3. MVVM
  4. 4. How
  5. 5. SPAJQueryKnockoutAngularBackboneNodeJsTwitterBootsrapMongoDBBreezeCSSThisPluginThatPluginJsonRequireQ(YeahThat’sAThing)CanYouReadThisAtTheBack?Yup, ALotOfStuff
  6. 6. JavaScript, really?50views?Testing?
  7. 7. Is it ready?
  8. 8. Project Structure
  9. 9. Project Structure
  10. 10. Project Structure
  11. 11. Scalable Framework• Separation of concerns• Lazy load resources• Based on Boilerplate.js– Thin– Full control– Configuration based– Takes over routing
  12. 12. Taming JavaScript• “use strict”;• Q– Async promises• Require.js– Revealing Module Pattern
  13. 13. Binding• Knockout
  14. 14. UI Toolkit• jQWidgets– Affordable– Tested with Knockout
  15. 15. We have thetechnology
  16. 16. Let’s tie this to the backend• Data• Security• Error Logging• Testing
  17. 17. Data In a Breeze“1/4 the code, about 1/4the time, and more value.Does that interest you?”–John Papa
  18. 18. What about Breeze?
  19. 19. Security• Authenticate and Authorize– WebApi– Client• Anti-forgery token– Mvc– Breeze• Encryption? Go for it!
  20. 20. Error Logging• Server side– Elmah– Nlog• Client side– Basic– Full featured (with Toastr.js)
  21. 21. Error Logging
  22. 22. Testing• Unit testing– Qunit– PhantomJS (for TeamCity integration)• AAT– SpecFlow (gherkin)– Selenium (instrumentation) with Chrome Driver– Simpler Fake pipeline
  23. 23. Resources• John Papa• Julie LermanPain-Free Data Access in JavaScript--Yes, JavaScript• Boilerplate.js• jQWidgets
  24. 24. About UsShahed Chowdhuri• Email:• Twitter: @shahedc• Web: http://WakeUpAndCode.comSahil Talwar• Email:• Twitter: @sahiltalwar88• Web: Uluca• Email:• Twitter: @duluca• Web:
  25. 25. Get Lean• Work in progress• Will move to• It’s open source – feel free to submit pull requests