Introduction
This blog represents the ideas from my ongoing research and development of HTML5/JS/CSS applications. So I will keep on updating it once I come up new ideas or verify some of the ideas here.
Traditionally in the world of enterprise system integration, only backend systems such as SAP, JDE or SOAP/Restful endpoints are considered as system integration points. However with complex front-end application and rapid change of modern JS/HTML5/CSS technologies, thick-client/thin-server architectures, we need to think Browser or Mobile App as independent system or application to be integrated into enterprise architectures. For example, applications written in HTML5/CSS/JS can act as their own by using Restful web service to integration with any enterprise backend system.
This blog represents the ideas from my ongoing research and development of HTML5/JS/CSS applications. So I will keep on updating it once I come up new ideas or verify some of the ideas here.
Traditionally in the world of enterprise system integration, only backend systems such as SAP, JDE or SOAP/Restful endpoints are considered as system integration points. However with complex front-end application and rapid change of modern JS/HTML5/CSS technologies, thick-client/thin-server architectures, we need to think Browser or Mobile App as independent system or application to be integrated into enterprise architectures. For example, applications written in HTML5/CSS/JS can act as their own by using Restful web service to integration with any enterprise backend system.
A few thoughts:
1. We need to identify the design patterns in mobile and HTML5 applications and apply them. Those patterns includes MVVM, data-binding, template, observable, singleton, interceptor, factory patterns which I will demonstrate in various places in my diagram.
2. application storage - local storage and session storage, mobile application has latency and network connectivity issue, so appropriate usage of browser cache is critical not just to performance.
3. security models - mobile application or call center application has different security models from public facing web applications.
4. unit test driven development in JS/HTML - UNIT TESTS ARE IMPORTANT IN TERMS OF TDD SOFTWARE DEVELOPMENT AND CONTINUOUS INTEGRATION. And functional testing on web pages are hard but a important step to achieve automation.
5. Use promise/deferred objects to manage Ajax calls - Promise and its chaining are powerful features of JS. I will detail about it later.
6. Stubbing out of the back-end service with json to achieve fast JS/HTML development. In this way the UI development can be truly separated from backend.
7. Caching the html snippets in browser to reduce the http traffic.
Reference architecture
Project structure
/data - stub for backend database, contain back-end response data in json or xml
/merge_build_scripts - script to build/merge/minimize js/css
/public - any files will be www readable
/css
/icon - use image sprite technology to handle the icons to reduce http request
reset.css - css file to reset browser and provide baseline
common.css - css file for typical JS library widgets
layout.css - page layout css file: 2 columns, 3, columns, header, footer and etc.
screen.css - font size, style css
/img - site images
/js
/shared
AppConfig.js - global constant vars
TemplateManager.js - singleton, manage the partial HTML snippets
AuthManager.js - singleton, manage Auth Token for each Restful request
AjaxManager.js - interceptor pattern, manage Ajax URLs and provide promise object back to caller
Router.js - manage the separate screens under single page
Router.js - manage the separate screens under single page
WidgetFactory.js - abstract factory class to create widgets such as table, grid, tab, dialog and etc.
/screen
partial.js - Observable definition and Model of MVVM patterns
screenAController.js - a controller specific to a view, which normally maps to a template
userProfileController.js - e.g. a controller for user profile view
userPhotoUploadDialog.js - e.g. a controller for user photo upload dialog
....
partial.js - Observable definition and Model of MVVM patterns
screenAController.js - a controller specific to a view, which normally maps to a template
userProfileController.js - e.g. a controller for user profile view
userPhotoUploadDialog.js - e.g. a controller for user photo upload dialog
....
app.js - the bootstrap js to start the app
login.js
/lib - third party JS
/templates
partial.html - View of the MVVM patterns
screenA.html
userProfile.html
userPhotoUploadDialog.html
partial.html - View of the MVVM patterns
screenA.html
userProfile.html
userPhotoUploadDialog.html
app.html - page for authorized user
login.html - login page for public user
tests.html - unit test runner html
unittests.js - unit test of JS classes
No comments:
Post a Comment