MVVM for the Web
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

MVVM for the Web

on

  • 3,158 views

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 ...

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.

Statistics

Views

Total Views
3,158
Views on SlideShare
1,886
Embed Views
1,272

Actions

Likes
0
Downloads
8
Comments
0

5 Embeds 1,272

http://www.scoop.it 810
http://www.excella.com 400
http://www.techtalkdc.com 59
http://webcache.googleusercontent.com 2
http://register.excella.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • - In Mvc display logic can get mixed up with business logic- There’s a need to clearly separate business logic from display logic
  • -Responsive and rich by default- Server rendering vs client side rendering-Less bandwidth- Gracefully handle semi connected states- Designers/BAs can design views ahead, while development catches up and hooks up binding
  • Durandal is alternativeConvention basedSee HotTowel SPA
  • Breeze: accelerator, delay decisions until the last possible moment (query)OData behind it, don’t need Breeze to write Odata calls (show actual URLs) JSON dataIf not: ko-liteManage risks: dataservice
  • Majority of the client can be tested by just faking the JSON data

MVVM for the Web Presentation Transcript

  • 1. Presentation Layer DoguhanUlucaMVVM for the Web
  • 2. ASP.NET MVC
  • 3. MVVM
  • 4. How
  • 5. SPAJQueryKnockoutAngularBackboneNodeJsTwitterBootsrapMongoDBBreezeCSSThisPluginThatPluginJsonRequireQ(YeahThat’sAThing)CanYouReadThisAtTheBack?Yup, ALotOfStuff
  • 6. JavaScript, really?50views?Testing?
  • 7. Is it ready?
  • 8. Project Structure
  • 9. Project Structure
  • 10. Project Structure
  • 11. Scalable Framework• Separation of concerns• Lazy load resources• Based on Boilerplate.js– Thin– Full control– Configuration based– Takes over routing
  • 12. Taming JavaScript• “use strict”;• Q– Async promises• Require.js– Revealing Module Pattern
  • 13. Binding• Knockout
  • 14. UI Toolkit• jQWidgets– Affordable– Tested with Knockout
  • 15. We have thetechnology
  • 16. Let’s tie this to the backend• Data• Security• Error Logging• Testing
  • 17. Data In a Breeze“1/4 the code, about 1/4the time, and more value.Does that interest you?”–John Papa
  • 18. What about Breeze?
  • 19. Security• Authenticate and Authorize– WebApi– Client• Anti-forgery token– Mvc– Breeze• Encryption? Go for it!
  • 20. Error Logging• Server side– Elmah– Nlog• Client side– Basic– Full featured (with Toastr.js)
  • 21. Error Logging
  • 22. Testing• Unit testing– Qunit– PhantomJS (for TeamCity integration)• AAT– SpecFlow (gherkin)– Selenium (instrumentation) with Chrome Driver– Simpler Fake pipeline
  • 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. 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. 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