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.
Presentation Layer DoguhanUlucaMVVM for the Web
ASP.NET MVC
MVVM
How
SPAJQueryKnockoutAngularBackboneNodeJsTwitterBootsrapMongoDBBreezeCSSThisPluginThatPluginJsonRequireQ(YeahThat’sAThing)Can...
JavaScript, really?50views?Testing?
Is it ready?
Project Structure
Project Structure
Project Structure
Scalable Framework• Separation of concerns• Lazy load resources• Based on Boilerplate.js– Thin– Full control– Configuratio...
Taming JavaScript• “use strict”;• Q– Async promises• Require.js– Revealing Module Pattern
Binding• Knockout
UI Toolkit• jQWidgets– Affordable– Tested with Knockout
We have thetechnology
Let’s tie this to the backend• Data• Security• Error Logging• Testing
Data In a Breeze“1/4 the code, about 1/4the time, and more value.Does that interest you?”–John Papa
What about Breeze?
Security• Authenticate and Authorize– WebApi– Client• Anti-forgery token– Mvc– Breeze• Encryption? Go for it!
Error Logging• Server side– Elmah– Nlog• Client side– Basic– Full featured (with Toastr.js)
Error Logging
Testing• Unit testing– Qunit– PhantomJS (for TeamCity integration)• AAT– SpecFlow (gherkin)– Selenium (instrumentation) wi...
Resources• John Papahttp://www.johnpapa.net/spajs04/http://www.johnpapa.net/howmanyistoomany/http://www.johnpapa.net/kolit...
About UsShahed Chowdhuri• Email: shahed.chowdhuri@excella.com• Twitter: @shahedc• Web: http://WakeUpAndCode.comSahil Talwa...
Get Leanhttps://github.com/duluca/LeanEnterpriseArchitectureorgoo.gl/xAii7• Work in progress• Will move to https://github....
MVVM for the Web
MVVM for the Web
MVVM for the Web
MVVM for the Web
MVVM for the Web
MVVM for the Web
Upcoming SlideShare
Loading in …5
×

MVVM for the Web

5,313 views

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 Papahttp://www.johnpapa.net/spajs04/http://www.johnpapa.net/howmanyistoomany/http://www.johnpapa.net/kolite1-1/• Julie LermanPain-Free Data Access in JavaScript--Yes, JavaScripthttp://msdn.microsoft.com/en-us/magazine/jj863129.aspx• Boilerplate.jshttp://boilerplatejs.org/• jQWidgetshttp://jqwidgets.com/
  24. 24. About UsShahed Chowdhuri• Email: shahed.chowdhuri@excella.com• Twitter: @shahedc• Web: http://WakeUpAndCode.comSahil Talwar• Email: sahil.talwar@excella.com• Twitter: @sahiltalwar88• Web: http://about.me/sahiltalwarDoguhan Uluca• Email: doguhan.uluca@excella.com• Twitter: @duluca• Web: http://DeceivingArts.com/blog
  25. 25. Get Leanhttps://github.com/duluca/LeanEnterpriseArchitectureorgoo.gl/xAii7• Work in progress• Will move to https://github.com/excellaco• It’s open source – feel free to submit pull requests

×