A Smooth Transition to HTML5 Using MVVM
-
Upload
chris-bannon -
Category
Technology
-
view
119 -
download
2
description
Transcript of A Smooth Transition to HTML5 Using MVVM
A Smooth Transition to HTML5
Using MVVM Development Patterns
About: me
Chris Bannon@[email protected]
Wijmo
• 40+ Widgets
• Built on jQuery UI
• Powered by HTML5
• Themed with Themeroller
• Supports MVVM
About: session
• Philosophical (warning: lot’s of
talking)
• Share our approach on porting to
HTML5
– General guidelines
– Tools
– Pitfalls
• Show some code!
Real World Examples
Why Use HTML5?
“Virtually every computing device supports HTML and JavaScript”
Benefits of Using HTML5
• Mobile
• Performance
• Shared code in multiple platforms
– Mobile Web
– Native Mobile (PhoneGap)
– Desktop Web
– Native Desktop (Win8)
Principles When Migrating to HTML5
• Port your programming knowledge
• Port your patterns & practices
• Port your code conventions
• Port your business logic, not your
code
How to Migrate to HTML5
How Can You Port to HTML5?
Use a familiar development pattern:
MVVM
–Widely used by Silverlight developers
– Use Knockout for MVVM in JavaScript
– Use UI controls with MVVM support for
quicker development
What is MVVM?
• Model
– Data for an application
– Example: Web service
• ViewModel
– Pure code representation of UI Model
– Example: JavaScript Class or Object
• View
– Visible and Interactive UI
– Example: HTML, CSS & JavaScript UI
Example ViewModel Usagevar myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123)};ko.applyBindings(myViewModel);
<span data-bind="text: personName"></span>
MVVM Examples
Using Knockout for MVVM in JavaScript
Porting the Model
Use the same Model/Datasource
–Most JavaScript apps can use the same
services
Porting the ViewModel
Port the ViewModel
– Create JavaScript Objects/Classes that
match their equivalents in C#
– Hook up observability using Knockout
– Remember to focus on porting business
logic, not code
Porting the View
Port the View
– Create HTML markup that represents your
UI (similar to what you have in XAML)
– Add data-bind attributes to bind markup to
the View-Model
– Use data-bind attributes to turn markup
into UI Controls (like jQuery UI widgets)
The Benefits of Using MVVM
Shorter Development Cycles• MVVM separates development clearly
between Data, Code and UI
• Each layer can be developed in
parallel and individually
• Minimizes turnaround time
Improved Reliability & Easier Maintenance• ViewModels are testable
• ViewModels easily integrate with Unit
Tests
• Unit Tests become assets to the project
during the lifecycle of the application
• Maintenance made easier with
automated tests
More Predictable Development Cycles• Our steps in development:
– Design the View (general appearance and
behavior)
– Design the ViewModel to support the View
– Implement the ViewModel
– Implement the View
• This allows us to more easily estimate
time/cost for each step
Improved Quality
• Less overlap between developers
and designers
• Each can focus on their specialty and
deliver higher quality
• Both can work simultaneously
Flexibility
• Loose coupling between Views and
ViewModels
• Multiple Views can use a single
ViewModel
• Easily make Mobile, Desktop or other
custom Views against a single
ViewModel
Standardization
• Use the same binding mechanisms in multiple
applications
• Once initially developed these assets can be
reused in new applications
– Markup
– Styles
– UI Controls
– Common Input Forms
– Libraries (Globalization, shared functions, etc)
Challenges When Porting to HTML5
Development Tools
JavaScript development tools are not
as mature as Silverlight’s
– Compile-time error detection
– Code re-factoring
– IntelliSense (Code Auto-complete /
Suggestions)
UI Controls
Silverlight has a wider variety of UI
controls available to developers
– Only basic elements in HTML to use
– Usually need to use a library of UI
Controls
–More difficult to create controls in HTML
than in Silverlight
Data Access
Silverlight provides a rich and mature
set of business data tools
– No concept of data queries
– Rich data features are not native to
collections (arrays)
–Must use ajax to call services and
consume data
Questions?
Resources
• Wijmo MVVM Support
http://wijmo.com/widgets/mvvm-support/
• Download Wijmo
http://wijmo.com/downloads/
• Knockout
http://knockoutjs.com/
• Contact Me
@b4nn0n
Thanks for Joining!