just wanted to share some of my recent web development experiences...
Requirement
one of my recent project is to rewrite an existing desktop application for internal users and we wanted to go web based this time instead of windows application. Most of the core logic for the old app was in database in the form of complex stored procs, but the existing windows application was also having lot of custom override logic rewritten many times over the past few years which made it run slow and completely block lot of other internal users during its execution time. our task was to increase the performance, remove the locks, redesign the application interface with more flexibility and to simplify the overall process.
Design
Data Layer
as part of the redesign, the first task was to update the database procs with all the additional custom logic moved into them from the client app and kept the client layer very light. literally the client layer is just a view now.
Service Layer
then we added a light weight service layer in between the web client and the database layer. this service layer is to support the ajax calls from the client layer and to do the required data transformation. no business logic again here.. all the database calls are asynchronous ones taking advantage of the async options avaialble in the ado.net framework
Client Layer
we started building the client interface using html5, css3 and jquery... but then we realised some of our users are still running IE8 or less in Win XP so we can't make the interface to fail.. so we limited ourself to safe use of jQuery & jQuery UI with additional client side UI plugins which runs fine even in old versions of IE.
first we broke down our layout into 5 steps based on the existing logic and the new requirements we gathered from the users, then started building up the interface based on these 5 steps. we wanted to keep the UI as simple as possible, so tried to limit everything in 1 page with no additional navigation, extra tabs, links..
Panels
So we kept all 5 steps in 1 page with each step as a collapsible container. the requirement is to display data @ each step based on the business rule. the users can then select, filter, modify the data in each step and take additional actions on them and process the data into the next step and it continues till step 5. we encapsulated all the controls required for each step into a panel using the jQuery plugin Expandable.
https://github.com/flamewave/jquery-ui-expandable/
Grid
To achieve our goal to display, filter, sort, edit, update the data entirely on the client side we looked around for a client side grid which can bind to the data using ajax calls and manipulate the html data using javascript fast and neat. then we ended up using one of the best available
http://www.datatables.net/
Action
all of the actions that the user perform on the data which needs to submit/retrieve the data and for which calls hops thru service and into data layer, we need to display a confirmation message and block the page till the user confirms. we used the simple blockUI plugin from jQuery
http://jquery.malsup.com/block/
Ajax/Async Calls
we made all of the service calls from the UI ajax based and kept all the database calls from the service layer as Async calls taking advantage of the inbuilt ado.net asynchronous support. this made the user to trigger the calls and get back to the interface as fast as possible without any blocks so that they can carry on with rest of their work. all of the service calls uses JSON data format and the parser we used is available here
https://github.com/douglascrockford/JSON-js
Final Line
all these plugins used are simple, opensource, jquery based which made our client side web development much easier and faster. and the good part is we were able to make some adjustments and customise some of these plugins based on our needs with very less code change...
happy coding :-)
Requirement
one of my recent project is to rewrite an existing desktop application for internal users and we wanted to go web based this time instead of windows application. Most of the core logic for the old app was in database in the form of complex stored procs, but the existing windows application was also having lot of custom override logic rewritten many times over the past few years which made it run slow and completely block lot of other internal users during its execution time. our task was to increase the performance, remove the locks, redesign the application interface with more flexibility and to simplify the overall process.
Design
Data Layer
as part of the redesign, the first task was to update the database procs with all the additional custom logic moved into them from the client app and kept the client layer very light. literally the client layer is just a view now.
Service Layer
then we added a light weight service layer in between the web client and the database layer. this service layer is to support the ajax calls from the client layer and to do the required data transformation. no business logic again here.. all the database calls are asynchronous ones taking advantage of the async options avaialble in the ado.net framework
Client Layer
we started building the client interface using html5, css3 and jquery... but then we realised some of our users are still running IE8 or less in Win XP so we can't make the interface to fail.. so we limited ourself to safe use of jQuery & jQuery UI with additional client side UI plugins which runs fine even in old versions of IE.
first we broke down our layout into 5 steps based on the existing logic and the new requirements we gathered from the users, then started building up the interface based on these 5 steps. we wanted to keep the UI as simple as possible, so tried to limit everything in 1 page with no additional navigation, extra tabs, links..
Panels
So we kept all 5 steps in 1 page with each step as a collapsible container. the requirement is to display data @ each step based on the business rule. the users can then select, filter, modify the data in each step and take additional actions on them and process the data into the next step and it continues till step 5. we encapsulated all the controls required for each step into a panel using the jQuery plugin Expandable.
https://github.com/flamewave/jquery-ui-expandable/
Grid
To achieve our goal to display, filter, sort, edit, update the data entirely on the client side we looked around for a client side grid which can bind to the data using ajax calls and manipulate the html data using javascript fast and neat. then we ended up using one of the best available
http://www.datatables.net/
Action
all of the actions that the user perform on the data which needs to submit/retrieve the data and for which calls hops thru service and into data layer, we need to display a confirmation message and block the page till the user confirms. we used the simple blockUI plugin from jQuery
http://jquery.malsup.com/block/
Ajax/Async Calls
we made all of the service calls from the UI ajax based and kept all the database calls from the service layer as Async calls taking advantage of the inbuilt ado.net asynchronous support. this made the user to trigger the calls and get back to the interface as fast as possible without any blocks so that they can carry on with rest of their work. all of the service calls uses JSON data format and the parser we used is available here
https://github.com/douglascrockford/JSON-js
Final Line
all these plugins used are simple, opensource, jquery based which made our client side web development much easier and faster. and the good part is we were able to make some adjustments and customise some of these plugins based on our needs with very less code change...
happy coding :-)
No comments:
Post a Comment