Languages
Pages
Legal
A Smooth Transition to HTML5Using MVVM Development Patterns
WIJMO – UI FOR THE WEB
• 40+ Widgets
• Built on jQuery UI
• Powered by HTML5
• Themed with Themeroller
• Works Everywhere
• Supports MVVM
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 Flex/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 USAGE
var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123)};ko.applyBindings(myViewModel);
<span data-bind="text: personName"></span>
PORTING THE MODEL
Use the same Model/Datasource
–Most JavaScript apps can use the same
services
PORTING THE VIEW-MODEL
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 MXML/XAML)
– Add data-bind attributes to bind markup to
the View-Model
– Use data-bind attributes to turn markup
into UI Controls (like Wijmo 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 Flex/Silverlight’s
– Compile-time error detection
– Code re-factoring
– IntelliSense (Code Auto-complete /
Suggestions)
UI CONTROLS
Flex/Silverlight have 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 Flex/Silverlight
DATA ACCESS
Flex/Silverlight provide 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
Top Related