Building Large-Scale Data-Centric Applications with Silverlight Ramya Parthasarathy Roman Rubin
Feb 24, 2016
Building Large-Scale Data-Centric Applications with Silverlight
Ramya Parthasarathy Roman Rubin
About us
• Roman Rubin – Wolters [email protected]
• Ramya Parthasarathy – Wolters [email protected]
• Wade Wegner – [email protected]
CT Corporation is …• The leader for registered agent, corporate compliance and
governance solutions, CT Corporation's expertise defines every customer contact. Law firms and corporate legal departments turn to its reliable service organization and intelligent technology for the precision and speed they need.
About hCue
• CT’s hCue is a market-leading, web-based, secure entity management and board collaboration solution. It consolidates all your essential corporate data in one central repository, facilitates collaboration and information sharing across your organization and assists you to meet state and SEC Section 16 compliance requirements.
About hCue
• A large product in production for more than five years
• Currently approx 300+ active pages delivered using ASP.Net 2.0 platform with Oracle back-end (database)
• Multiple sub-sites (sub-domains and virtual directories)
• Approx 30 batches / Windows services
• Approx 200 tables moved to SQL Server, 400 SPs, 500 selects…
What to expect in this session
• How we packaged the application (XAPs/DLLs)• Overview of Application Building Blocks for
Silverlight Development (Instrumentation, Client Configuration, MVVM, Light-weight Web Services)
• How we deploy our Web Services (DX)
Packaging large Silverlight LOB Application
Application Packaging• Initial download time (XAP size)• Browser working set size• Impact of long running application• Maintainability
One large XAP model
One HUGE XAP
Module #1
HTML #1
Module #2
Module #3
Module #4 Application = One HUGE XAP
• Default model supported by tooling and default project templates
• Initial download time (XAP size) - Large• Browser working set size - Large• Impact of long running application - Impacted• Maintainability - Difficult
How does it stack up?
Primary XAP with DLLs model
One HUGE XAP
Module #1
HTML #1
Module #2
Module #3
Module #4
Primary XAP
Module #1
HTML #1
Module #2
Module #3
Module #4
Application = One HUGE XAP
Application = One Primary XAP + Multiple on-demand DLLs
• Initial download time (XAP size) – Can be controlled• Browser working set size – Increases over time• Impact of long running application – Impacted
How does it stack up?
Multi-XAP model
Primary XAP
Module #1
HTML #1
XAP #2
Module #2
HTML #2
XAP #3
Module #3
HTML #3
XAP #4
Module #4
HTML #4
Application = Multiple modules (XAPs) each with independent URI
Module #1
HTML #1
Module #2
Module #3
Module #4
Primary XAP
Module #1
HTML #1
Module #2
Module #3
Module #4
Application = One HUGE XAP
Application = One Primary XAP + Multiple on-demand DLLs
• Initial download time (XAP size) – Under control• Browser working set size – Under control• Impact of long running application – Mitigated• Maintainability – Under control
Multi-XAP model• Exercise care while partitioning to avoid constant switching
between modules• Data sharing between modules• Fits in existing project templates and tooling support
Application Packaging - Summary
• Establish design objective for max XAP size• Establish design objective for browser’s max-
working-set-size• Choose a model that fits your needs early in
development. • Start your application with at least two XAPs,
even if you are only prototyping.
Multi-XAP model: Wrapper generation
SLHost.axd
Primary XAP
Module #1
HTML
XAP #2
Module #2
HTML
XAP #3
Module #3
HTML
XAP #4
Module #4
HTMLxml
Silverlight Object Tag related options
Browser DOM
Multi-XAP model: Application Configuration
SLHost.axd
Primary XAP
Module #1
HTML
XAP #2
Module #2
HTML
XAP #3
Module #3
HTML
XAP #4
Module #4
HTML
Silverlight Client Config. Providers
Browser DOM
Silverlight App Domain
Client Config. API
Encrypted Client Config Data
blocks
Layout, Navigation
• Define a common Layout for our pages (MasterPage concept from ASP.NET world).
• Make Navigation between modules seamless• Make Navigation in a “use-case” seamless
YourModule : UxModule : Application
MasterPage : UxMasterFrame
Header : UserControl
LeftNavArea
MyOrders: UserControl
ContactUs: UserControl
UxPageFrame
EntitySearch : HCuePage
ViewFrame’s optional footer
UxViewFrame
CustPreview : UserControl
CustSearchResult : UserControl
CustSearch: UserControl
Re-inventing ASP.Net mind-set
• Horizontally scalable packaging model with no upper limit • Logical application that can span multiple XAPs• Modules (or XAPs or Silverlight applications)• Master Page • Silverlight PageFrame, Pages,ViewFrame,Views, Abstract UX
containers• Heavyweight (PageFrame) and lightweight (ViewFrame)
navigation scheme• Consistent declarative navigation controls with declarative
parameter bindings.• Extensible “logical-application-level” Client Configuration
Instrumentation
Instrumentation
• Server-side and client-side • Performance Log, Trace log and Error log• Monitor health of production application• Understand site-usage• Trouble-shoot issues during an outage• Defect fixing during development• Performance tuning during development• Server side: Stored to database• Client side: In memory logging
Client-side Instrumentation
• Stored in memory. Therefore lives as long as the Silverlight application lives
• A sparse tree of loggers arranged by namespace in a hierarchical manner.
• Enforces upper limits on memory usage• Provides embedded UI for reviewing logs, configuring
logs, and exporting logs• Can be configured to enable / disable logging at a
node-level• Can be configured to log only messages that meet a
defined message level threshold
Instrumentation – Performance Log
Instrumentation – Trace Log
Instrumentation – Error Log
MV-VM Extensions
Visual Hierarchy – Perceived vs Actual
An Use-case container…
Transactions
Review Search Result
Search
An Use-case container… Review Search ResultXAML + Code-behind
SearchXAML + Code-behind
TransactionsXAML + Code-behind
Perceived
Actual
VM
VM
MV-VM Flexibility – Partitioning ViewModel
An Use-case container…
Transactions
Review Search Result
Search
An Use-case container… Review Search ResultXAML + Code-behind
SearchXAML + Code-behind
TransactionsXAML + Code-behind
Perceived
Actual
VM
VM
VM
VM
MV-VM - Questions
As our use-case complexity increased we were struggling with many fundamental questions, some ‘philosophical’…
• What is the definition/scope/boundary of a ‘View’?• How does composite Views fit in to the larger pattern?• Who is responsible for ‘provisioning’ ViewModel?• Is DataContext a good choice for attaching ViewModel to View?• If we do not use DataContext, how can we do data-binding to
substance of ViewModel?• Can we provision ViewModel using Dependency Injection pattern
(MEF for example…)• Are we abusing the MV-VM pattern?
MV-VM FlexibilitiesAn Use-case container…
Transactions
Review Search Result
Search
An Use-case container… Review Search ResultXAML + Code-behind
SearchXAML + Code-behind
TransactionsXAML + Code-behind
Perceived
Actual
VM
VM
VM
VM?
?
Our MV-VM Extended Implementation
• Can split / merge ViewModel with minimal impact• Provisioning ViewModel
– Can be provisioned declaratively (XAML) or using code– Not a static resource, can be attached to any FrameworkElement– Can attach multiple-view-models to parent UI container– Can be provisioned at any level of UI hierarchy– Strongly typed Connector model to declaratively bind to a ViewModel– Recycled when parent FrameworkElement goes out of scope
• Expression Trigger/Action/Behavior extensions for– Declarative binding to ViewModel substance– Route actions to ViewModel with parameter bindings.
Web Services Deployment
Service deployment
UX
www.wk.com
• One website for both UX and Services• Easily set up by default templates• Config file size and proxy count increase when more web services
are added.
Service deployment
UXapi.wk.com
ux.wk.com
• UX (passive) and Services are segregated• Requires more complex setup than first model
Service deployment
UX
api1.wk.com
api2.wk.com
api3.wk.com
• Services are partitioned to distinct end-points• Tolerant UI can improve perceived availability• Ease of service maintenance, enhancement and deployment
ux.wk.com
Service deployment
UXhttps://ux.wk.com
• Services are partitioned to distinct end-points• Enables partial DR capability
PRIM
ARYapi3.wk.com
api1.wk.com
DRapi3.wk.com
Service deployment
Content Delivery
Networks
• CDN used to push passive UI closer to end-user
UXapi1.wk.com
api2.wk.com
ux.wk.com
Light weight proxy
• Generic service contracts– IDxService<TRequest, TResponse>– Light-weight-strongly-typed proxy – Zero web.config entries (Convention over
configuration)
• Sharing data contracts - Issues– Runtime parity between Silverlight and core .Net– Bindable data contracts
Service Deployment – Takeaways
• Consider partitioning UX from web-service• Consider partitioning the services • Consider writing UI that tolerates service
unavailability• Consider writing light-weight universal proxy
and universal contracts. • Consider these aspects from day #1
More…
More foundation challenges
• DataSource With client-side caching, paging, sorting and not tied to type-of-source
• Runtime discovery of composite parts• Messaging• Extending role-based security to Silverlight client• Client side state management• Client side cache management• To-use or not-to-use Isolated storage• What-if-out-of-browser?
Why Silverlight…
Why Silverlight?
• Compressed budget Under tight economy, the budget that we could afford was lower than our comfort zone.
• Compressed timelineBusiness wanted to have the product out much sooner than we were comfortable.
• Dense and interactive experienceCompressed user-flow and dense screens that are highly interactive.
• Size was overwhelmingWe had to deliver many complex screens.
• Questions? Need Answers?– Ramya Parthasarathy (
[email protected])– Roman Rubin (
Don’t forget to fill out evaluation forms.