Upload
mavis-carpenter
View
225
Download
0
Tags:
Embed Size (px)
Citation preview
From legacy desktop application to Single
Page ApplicationBy Jens Munk
Freelance consultant
The application – a little bit of history• Old application ~20 years• Originally developed in PowerBuilder• Automatically converted to c#• ”Made to run” in India• ”Made usable” in Denmark
• Several generations of technology• Windows forms, WPF, embedded Razor/MVC, IBatis, ADO, OleDb, Entity
Framework, WCF service layer – and lots of other technologies.
The application – business point of view• Basically a workflow engine/state machine
• Excel like input – formula, calculation engine etc.• And 3. party integrations to e.g. ERP systems
• A thick windows client• Only for the administrating party of the workflow/state machine
• Several customers• With lots of installations
• The application is stabile• bugs are reported – but most of them can be considered as change requests
An application that fits the current business needs
The application – technical point of view• No consistent architecture exists
• A service layer exists• … but not a service architecture• The desktop application also access the database through stored procedures and DAL
• The database used to be an Oracle database but has been migrated to MS-SQL• but without changing the naming conversions, still missing foreign keys, inconsistent data types (e.g.
decimal/int/bigint)• …a lightweight conversion
• Heavy usage of anti-pattern magic strings and numbers• Nice mix of Danish and English• Lots of business logic in the GUI layer• Unit test coverage is less than 10%
• The rest is handled by manual tests
I big pile of… challenges.
Motivation for changes
• Make a consistent architectural foundation• Upgrade to new technology• Better recruitment foundation• Cheaper to implement new features
• Fix data consistency challanges• Rapid installation• Add application workflow party support• Could be SaaS application
How to proceed?
• Total rewrite?• No release for the next couple of years• … and a shaky version• The “Vista way”
• Bottom up conversion?• Update data types and add foreign keys• Add O/RM (using EF or NHibernate)• Build service layer• … Shaky version due to limited unit test coverage – or a
huge load on test team
Either way… Not an option
Selected approach
• Encapsulation pattern• Side by side implementation• Consistent EF model on existing
database + repository pattern• Only used by new code
• Old code is treated as black box
• New features developed in new technology• Changes requires re-written in new
architecture (and technology)
Old desktop application
Database
EF model
Repository
Service layer Security
Embedded IE
SPA
Single-page application – in a single slide• Page is loaded once (hence single
page)• HTML is modified based on user
input and service layer response• From Wikipedia:• A single-page application (SPA), also
known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.
HTML + JavaScript + AJAX
Browser
Service layer
Data layer
…
Issues related to SPA
• Service layer security• You should not be allowed to access the
services if you are not authorized
• Entity security• Data needs to be filtered on a per
user/role basis• E.g. getPossibleActivities(caseId)
• Access denied/error on unaccessible cases• Different lists will be returned to case admin
and to case applier• Kind of row level security pattern – but in
using existing security model
Service layer
Data layer
…
Authentication
Auth
oriza
tion
How about in real life?
• Sounds easy?• How about new features that use some
existing business logic?• That is implemented in the GUI layer?• With side effects?
• Case by case• …But in general
• Create appropriate test cases for the selected area (automation preferred) – for both new and old architecture
• Implement service in new architecture• Replace old code with new service• Keep side effects in old code
Our SPA technology choices
• Bootstrap• JQuery• ServiceStack• (HTML) Template based• No HTML in JavaScripts
• Demo/slides
Partial view– static part
Id’er when redering is dynamic
Dynamic rendered HTML
HTML template
Table row template
Button template
Pagination templates
Applied templates
Form validation
• The form is validated server side by ServiceStack.• Some errors are directly related to a single field• And some are global
Form validation• Create a form with a given id• Names needs to match
names in request object otherwise the serializeObject() cannot be used
• In the save function use the formid as a parameter for clearErrors() and applyErrors()
Form validation
• Template for displaying error messages is located in the container file.
The anchor object
• Anchor object• The uri must never be accessed directly always through the available methods• Additional properties will probably be added
Current status
• We are not there yet• … But we are well on our way• And expect to have first SPA with encapsulation pattern ready Q1
2015