Your SlideShare is downloading. ×
Using MVVM onthe web with IgniteUI & Knockoutjs                                        NISHANTH ANIL                      ...
Agenda– Patterns– What’s MVVM?– What’s Knockoutjs?  • Simple MVVM Demo– What’s Ignite UI?  • Building Enterprise Dashboard...
Patterns – are guidelines not              rules!• UI patterns  –   Model – View – Controller  –   Model – View – Presente...
MVVM? View    ViewModel      Model(HTML)               (jsonxml)                                  @nishanil
MVVM recap – WPF   –   INotifyPropertyChanged/INotifyCollectionChanged   –   DataContext   –   DataBinding   –   Commandin...
MVVM on the web?                   @nishanil
@nishanil
What’s knockoutjs?– a compact javascript library– implements the MVVM pattern for Javascript– rich client-side interactivi...
Key Concepts               @nishanil
Knockout in 3 steps– Declarative Binding– Dependency Tracking using Observable– Activating knockout                       ...
Observables– Updates UI automatically when the  ViewModel changes (UI notification)– Very famous 2 way binding!– Declare y...
Computed Observables– Computes value based on one more  dependent observable (for e.g, compute full  name based on first n...
Declarative Binding – It’s all about data-bind attribute in HTML – Not native to HTML, but perfectly OK! – The binding val...
Observable Array– Tracks which objects are in the array, not the  state of those objects– Notifies changes for add & remov...
Built-in Bindings                        Text & Appearance visible      text        attr       style         css        ht...
Binding – Control Flowforeach                     Foreach example  if ifnot with                                @nishanil
Knockout & jQuery• Not a jQuery competitor, Knockout solves  a different problem!• Will work together!                    ...
Knockoutjs Demo                  @nishanil
Enterprise dashboards using      HTML5/jQuery?                         @nishanil
@nishanil
The World’s Most Advanced  JavaScript & HTML5 UI       Framework                        @nishanil
@nishanil
and a lot more… www.igniteui.com                                   @nishanil
Ignite UI Demo                 @nishanil
Javascript MV* F/W           Web                                       Composed                  Plays Nicely        Frame...
Resources– Ignite UI   • www.igniteui.com– Infragistics Community   • http://www.infragistics.com/community/– KnockoutJS –...
Slides & Samples• You can download these slides from  – http://www.slideshare.net/nishanthanil/• Samples  – Knockout    • ...
Q&A@nishanil on twitterfacebook.com/InfragisticsIndia                                                   NISHANTH ANIL     ...
Upcoming SlideShare
Loading in...5
×

Using mvvm on the web using knockoutjs & ignite ui

2,434

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • There recently had been added one HTML5 javascript framework **jRIApp**.
    It was specially designed to build LOB applications like it is done in Silverlight with WCF RIA services.
    It is based on MVVM pattern and also has data service part.
    It is published under MIT license on GitHub.
    You can watch demo on youtube http://www.youtube.com/watch?v=CxWcC2O8u-k
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,434
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Using mvvm on the web using knockoutjs & ignite ui"

  1. 1. Using MVVM onthe web with IgniteUI & Knockoutjs NISHANTH ANIL TECHNICAL EVANGELIST nanil@infragistics.com | nnish.com facebook.com/InfragisticsIndia @nishanil
  2. 2. Agenda– Patterns– What’s MVVM?– What’s Knockoutjs? • Simple MVVM Demo– What’s Ignite UI? • Building Enterprise Dashboard in HTML5/jQuery demo– Comparing Javascript MV* frameworks @nishanil
  3. 3. Patterns – are guidelines not rules!• UI patterns – Model – View – Controller – Model – View – Presenter – Presentation Model – Model – View – ViewModel• Why do they exist? – Separation of concerns – Testability – Maintainability @nishanil
  4. 4. MVVM? View ViewModel Model(HTML) (jsonxml) @nishanil
  5. 5. MVVM recap – WPF – INotifyPropertyChanged/INotifyCollectionChanged – DataContext – DataBinding – CommandingRead more:http://nnish.in/myIGblog @nishanil
  6. 6. MVVM on the web? @nishanil
  7. 7. @nishanil
  8. 8. What’s knockoutjs?– a compact javascript library– implements the MVVM pattern for Javascript– rich client-side interactivity– supports all major browsers 6+ 2+ http://knockoutjs.com/documentation/browser-support.html @nishanil
  9. 9. Key Concepts @nishanil
  10. 10. Knockout in 3 steps– Declarative Binding– Dependency Tracking using Observable– Activating knockout @nishanil
  11. 11. Observables– Updates UI automatically when the ViewModel changes (UI notification)– Very famous 2 way binding!– Declare your properties as ko.observable()– ko.observable() objects are functions, not a property! @nishanil
  12. 12. Computed Observables– Computes value based on one more dependent observable (for e.g, compute full name based on first name & last name) @nishanil
  13. 13. Declarative Binding – It’s all about data-bind attribute in HTML – Not native to HTML, but perfectly OK! – The binding value can be a single value, variable, or literal or almost any valid JavaScript expression. Built-in Bindings valueUpdate optionsvalue, visible, text, change, keyup, keypreuniqueName, click ss, afterkeydownetc…Not happy with built-in bindings? – roll your own! (custom bindings) @nishanil
  14. 14. Observable Array– Tracks which objects are in the array, not the state of those objects– Notifies changes for add & remove– No notification for item changes! (use ko.observable())Pre-populating ObservableArray Binding it @nishanil
  15. 15. Built-in Bindings Text & Appearance visible text attr style css html Working with Form Fieldsclick disable submit value hasfocu enable sevent checked options selectedOptions uniqueName Or roll your own! Support s custom binding @nishanil
  16. 16. Binding – Control Flowforeach Foreach example if ifnot with @nishanil
  17. 17. Knockout & jQuery• Not a jQuery competitor, Knockout solves a different problem!• Will work together! @nishanil
  18. 18. Knockoutjs Demo @nishanil
  19. 19. Enterprise dashboards using HTML5/jQuery? @nishanil
  20. 20. @nishanil
  21. 21. The World’s Most Advanced JavaScript & HTML5 UI Framework @nishanil
  22. 22. @nishanil
  23. 23. and a lot more… www.igniteui.com @nishanil
  24. 24. Ignite UI Demo @nishanil
  25. 25. Javascript MV* F/W Web Composed Plays Nicely Framework UI Bindings Presentation Views With Others Layer Backbone.js ✗ ✗ ✓ ✓ SproutCore 1.x ✓ ✓ ✗ ✗ Sammy.js ✗ ✗ ✓ ✓ Spine.js ✗ ✗ ✓ ✓ Cappuccino ✓ ✓ ✗ ✗ Knockout.js ✓ ✗ ✓ ✓ Javascript ✗ ✓ ✓ ✓ MVC Google Web ✗ ✓ ✗ ✗ Toolkit Google ✗ ✓ ✓ ✗ Closure Ember.js ✓ ✓ ✓ ✓ Angular.js ✓ ✗ ✓ ✓ Batman.js ✓ ✗ ✓ ✓Source: http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ @nishanil
  26. 26. Resources– Ignite UI • www.igniteui.com– Infragistics Community • http://www.infragistics.com/community/– KnockoutJS – • learn.knockoutjs.com • http://www.knockmeout.net/– If you are new to Javascript • https://developer.mozilla.org/en-US/docs/JavaScript/Guide– Javascript MVC Frameworks reviewed • http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks- reviewed/ @nishanil
  27. 27. Slides & Samples• You can download these slides from – http://www.slideshare.net/nishanthanil/• Samples – Knockout • https://github.com/nishanil/koSamples – Ignite UI Grid & Knockoutjs • http://www.infragistics.com/products/jquery/sample /grid/grid-knockoutjs-integration @nishanil
  28. 28. Q&A@nishanil on twitterfacebook.com/InfragisticsIndia NISHANTH ANIL TECHNICAL EVANGELIST nanil@infragistics.com | nnish.com @nishanil

×