Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a...

27
Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE OF TECHNOLOGY INFORMATION AND COMMUNICATION TECHNOLOGY

Transcript of Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a...

Page 1: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

Development of a Rendering Server for Enterprise-Grade Dynamic Websites

HESHAM OMRAN

KTH ROYAL INSTITUTE OF TECHNOLOGY

I N F O R M A T I O N A N D C O M M U N I C A T I O N T E C H N O L O G Y

Page 2: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

Development of a Rendering Server forEnterprise-Grade Dynamic Websites

Hesham [email protected]

Master’s Thesis in System-on-Chip DesignSupervisor: Mark SmithExaminer: Mark Smith

Page 3: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

Abstract

Openratio offers a mobile platform as a service (mPaaS)to build secure enterprise apps that use legacy sys-tems from vendors such as Microsoft, IBM and SAP.The platform creates native mobile applications andmobile websites using a simple drag and drop inter-face without writing code.Openratio continuously develops their platform in shortdesign cycles, and started a major system upgrade in2014. The old mobile website was incompatible withthe new specifications and upgrading it was time in-tensive, leading to a 6 months delay behind othersystem components’ progress.This thesis covers the process of analyzing the pre-vious mobile website server and implementing a newmobile website rendering server. The server is de-veloped from scratch using node.js, a javascript plat-form for developing web applications, and jQuery mo-bile, an HTML 5 based interface for responsive mobilewebsites.The designed server uses real-time configuration set-tings to dynamically render each page’s layout, navi-gation and content with enterprise-grade security. Inaddition, the server handles user authentication andsession management, content fetching from externaldata sources and uses styling and website templatingengines.The new implemented server shortened the updatingtime for each development cycle and decoupling themobile website rendering server from the main serverallowed team members to work on several platformcomponents in parallel.

iii

Page 4: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

Contents

1 Introduction 11.1 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Existing solutions . . . . . . . . . . . . . . . . . . . . . . . . . 21.3 Problem Statement . . . . . . . . . . . . . . . . . . . . . . . . 21.4 Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.5 Report Structure . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Project Description 42.1 System requirements . . . . . . . . . . . . . . . . . . . . . . . 4

2.1.1 Need statements . . . . . . . . . . . . . . . . . . . . . 42.1.2 Design metrics . . . . . . . . . . . . . . . . . . . . . . 52.1.3 Mapping needs to metrics . . . . . . . . . . . . . . . . 7

2.2 Project plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3 Architecture Design 93.1 Overall System Overview . . . . . . . . . . . . . . . . . . . . . 93.2 Openratio’s Development Team Structure . . . . . . . . . . . 103.3 System Design Overview . . . . . . . . . . . . . . . . . . . . . 103.4 Technology roadmap . . . . . . . . . . . . . . . . . . . . . . . 113.5 Technology stack . . . . . . . . . . . . . . . . . . . . . . . . . 113.6 Modules decription . . . . . . . . . . . . . . . . . . . . . . . . 12

3.6.1 Server configuration block . . . . . . . . . . . . . . . . 123.6.2 Sessions handler middleware . . . . . . . . . . . . . . . 123.6.3 Router and static file server . . . . . . . . . . . . . . . 133.6.4 Client configuration file interface . . . . . . . . . . . . 133.6.5 LESS rendering block . . . . . . . . . . . . . . . . . . . 133.6.6 Website rendering block . . . . . . . . . . . . . . . . . 133.6.7 Data-mapper . . . . . . . . . . . . . . . . . . . . . . . 133.6.8 Sitemap creator logic . . . . . . . . . . . . . . . . . . . 13

4 Implementation and Testing 15

iv

Page 5: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

4.1 Server implementation . . . . . . . . . . . . . . . . . . . . . . 154.2 Browser compatibility testing . . . . . . . . . . . . . . . . . . 154.3 Unit testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.4 CMS simulator testing . . . . . . . . . . . . . . . . . . . . . . 17

5 Conclusions 185.1 Project results . . . . . . . . . . . . . . . . . . . . . . . . . . . 185.2 Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185.3 Future work . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Bibliography 19

v

Page 6: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

Chapter 1

Introduction

1.1 Background

Employees today have increasingly powerful hand-held devices and more cloudbased productivity solutions are available to them, making it possible to workoutside the workplace. This trend is referred to as enterprise mobility.With today’s fast paced work environment employees can access data and com-munication tools on their preferred devices and software tools, which makes itmore difficult for organizations to secure their data on employees’ devices [1].To address data security concerns, companies adopt strategies such as MobileApplication Management (MAM) to protect sensitive data in their corporateapps from malicious third party applications and to enable wiping data offdevices remotely if a device is stolen. At the same time, employees can stilluse their preferred devices and keep their personal data private[2].To implement MAM, organizations need to develop their own applicationsfor multiple mobile operating systems and implement their security strategy,which is an expensive process. To cut down development costs, Mobile Plat-form as a Service (mPaaS) solutions helps organizations to build and managemobile applications on a large number of devices and multiple mobile operat-ing systems with minimal programming cost. mPaaS for enterprise mobilityoffers integration to existing enterprise systems provided by vendors such asSalesforce and SAP [3].Openratio, a start-up based in Stockholm, offers a mobile Platform as a Ser-vice (mPaaS) for enterprise mobility. The company provides a platform fororganizations to develop secure mobile applications and mobile websites thatsupport Enterprise Software from vendors such as Microsoft, IBM and SAP[4].

1

Page 7: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

CHAPTER 1. INTRODUCTION

1.2 Existing solutionsTo lower app development cost, cross-platform development allows program-mers to code an application once to run on multiple platforms[5]. Program-mers can either build HTML based apps using tools like phonegap[6] orSencha[7], or compile their code to native code for each platform using toolslike Titanium citeappcelerator or Verivo[8].While Openratio[4] offers a drag and drop interface to generate native code,Kony [9] and IBM Worklight [10] offer an integrated development environment(IDE) for developers to build HTML hybrid apps using phonegap as a basetechnology and adding their own data security and integration layer.Openratio’s platform doesn’t require programming skills to create apps using adrag and drop interface, and can integrate data from existing systems, or hostdata for the clients. In addition, Openratio uses native components becausethey have better performance than HTML based apps[11].

1.3 Problem StatementThis section has been moved to Appendix A. To request access to the appen-dices, please contact Openratio AB.

1.4 GoalsThe goals of this thesis project are:

1. To analyze Openratio’s platform specifications and existing solution

2. To define the project specifications

3. To create a technology stack

4. To design the system architecture

5. To implement and test the system

1.5 Report Structure

1. Chapter 2 shows how the system requirements are translated to needstatements and design metrics, and covers the project plan.

2

Page 8: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

1.5. REPORT STRUCTURE

2. Chapter 3 describes the designed server architecture, the technologyroadmap and platform, and the designed server’s system blocks.

3. Chapter 4 explains how the designed server was implemented andtested.

4. Chapter 5 discusses the results, challenges faced and future work.

3

Page 9: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

Chapter 2

Project Description

This chapter covers analyzing the existing system, summarizing Openratio’swebsite server need statements and mapping them to design metrics.

2.1 System requirements

2.1.1 Need statementsOpenratio has defined their need statements as listed below to cover the mainfunctions that the system needs to fulfill. Using the need statements and de-sign metrics, the project specifications are drafted and the system architectureand appropriate technology were selected.

1. The system supports major desktop and mobile browsers

a) The system creates responsive websites

2. The system creates dynamic layouts

a) The system renders website themes and stylingb) The system creates each web page’s navigation routingc) The system can render different navigation stylesd) The system can serve multiple websitese) The system uses a set of page templates

3. The system renders dynamic content

a) The system renders websites with static content

4

Page 10: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

2.1. SYSTEM REQUIREMENTS

b) The system renders websites with content from external sources

4. The system handles user authentication and roles

a) The system shows a login screen when a website’s access is re-stricted

b) The system verifies users with Openratio’s main server, and addsa cookie in their browser.

c) The system directs the user to a password reset paged) The system shows the corresponding content for each user rolee) The system enables the user to logout

5. The system can act as a previewer for apps during development

2.1.2 Design metricsList of supported browsers

The designed system should work with the following browsers and versions

• Desktop Browsers

– Internet Explorer 10+– Internet Explorer Windows8 app 10+– Safari 5.1+– Chrome 18.0+– Firefox 4.0+

• Mobile Browsers

– iOS 6.0+ Safari– Android Browser 4.0+

List of project styling parameters

The list below describes the general project theme colors and fonts. Each pagein the project will follow this theme by loading a Cascading Style Sheets(CSS)file that is generated using LESS templating engine. LESS is explained insection section 3.5

• Background color and image

5

Page 11: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

CHAPTER 2. PROJECT DESCRIPTION

• Font size, family and color

• Title and header style

• Button style

• List view items style

• Web view style

• Scroll view style

List of navigation types

The application has two navigation styles.

• Tile views show a homepage with navigation tiles grid and each tile willlink to a module.

• Tabs list show tabs on the bottom of the page and if there are more thanfive tabs, a MORE button is created to navigate to a listview showingthe rest of the pages.

List of supported data types

For more information about the supported data types, please refer to sec-tion 3.3

• Static data is fetched from Openratio’s server in a format that can di-rectly be mapped to populate web page templates

– JSON (JavaScript Object Notation) [12]

• Dynamic data is fetched from external sources and needs to be mappedto a format that matches the server’s web page templates

– JSON (JavaScript Object Notation) [12]– XML (EXtensible Markup Language) [13]

List of supported templates

The list has been moved to Appendix B. Please contact Openratio AB torequest this information.

6

Page 12: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

2.2. PROJECT PLAN

Data-mapping

The list has been moved to Appendix C. Please contact Openratio AB torequest this information.

User authentication and roles

• Set cookies in browser clients.

• Read cookies from request headers.

• Validate user cookies with Openratio’s main server.

• Delete cookies when a user logs out.

2.1.3 Mapping needs to metricsThe browser support metric has influenced the selection of browser side javascriptframeworks for navigation and view components’ functionality, such the asnavigation icon tiles that support finger swiping on mobile devices and theimage gallery viewer 2Dynamic layouts and dynamic content need statements are mapped to thedata- mapping metrics as they depend on rendered styling sheets, lists of webpage components and content that are generated from configuration files.Table 2.1.3 shows how the need statements are mapped to metrics.

Metrics / Need statements Browser support Dynamic layouts Content User auth PreviewerBrowers list X XStyling XData types XNav. types XSupported templates XUser auth X XData-mapping X X

Table 2.1. Need to metrics mapping

2.2 Project planAs Openratio’ platform was incomplete without a CMS previewer or mobilewebsite clients, the project had a list of milestones to achieve to support it’scustomers

7

Page 13: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

CHAPTER 2. PROJECT DESCRIPTION

• Analysis of Openratio’s technology roadmap and the existing system.

• Project planning and technology selection.

• Milestone 1: Rendering web pages from templates and static content.

• Milestone 2: Adding user authentication and roles.

• Milestone 3: Importing data from external sources and data-mapping.

• Milestone 4: Web previewer deployment.

• Milestone 5: Mobile website server deployment and testing.

Project dependencies

• Mobile application clients developers can influence changes in data for-mats and website layouts for platform specific adaptations.

• Customer feedback can ask for additional requirements.

• The company can change their product offering and change system spec-ifications.

8

Page 14: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

Chapter 3

Architecture Design

3.1 Overall System OverviewOpenratio’s platform consists of a server, a web based CMS interface andmobile application clients. The platform can connect to external APIs andenterprise systems to get data to populate the apps with.The platform’s mobile and web clients have predefined templates that can beconfigured with a layout theme and populated with data from either Openratioor external sources. These clients need to fetch up-to-data configuration filesfrom the platform with each request.The selected server technology is Node.js because of the following reasons:

1. Node.js is event driven. Asynchronous requests enable the server to freethe main thread for other tasks until the request is completed. Thisfeature makes Node.js scalable and more efficient.

2. Node.js is a mature technology with a large base of contributors andpackage libraries

3. Node.js is written in javascript. It is easier to use one language for boththe server and client side.

4. Simple JSON handling

5. All the packages and middleware needed for the project are well docu-mented, open source and have a community supporting and upgradingthem.

9

Page 15: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

CHAPTER 3. ARCHITECTURE DESIGN

6. Server side templating engines are supported and search engine crawlerscan read the content of the web pages easier than reading websites ren-dered in the browser

The selected client technology is JQuery mobile for the following reasons:

1. The company has already built the UI components and their stylingrules.

2. JQuery mobile pre-loads web pages to enable smooth transitions betweenpages.

3. JQuery mobile is lightweight, touch optimized and responsive. It is builtfor mobile devices.

Figure 1 shows Openratio’s overall platform architecture, which has beenmoved to Appendix D. To request access to the appendices, please contactOpenratio AB.

3.2 Openratio’s Development Team StructureOpenratio’s platform development is lead by the Chief Innovation Officer(CIO), who communicates the technology roadmap and technical specifica-tions to the development team.The development team is divided into back-end developers and clients develop-ers. The back-end developers develop the platform’s CMS interface, generateapplication configuration files andEach client developer is responsible for building applications that contain con-figurable views on a specific platform while following the specifications sharedwith other client developers. This thesis covers developing the mobile websiteclient development.Figure 2 shows Openratio’s development team structure, which has beenmoved to Appendix D. To request access to the appendices, please contactOpenratio AB.

3.3 System Design OverviewThe designed mobile website server is a modular system that utilizes a ModelView Controller (MVC) architecture to simplify continuous development. MVC

10

Page 16: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

3.4. TECHNOLOGY ROADMAP

architecture separates data models, views and the controller logic to buildmore organized and maintainable code [14].Figure 3 describes the mobile website server’s architecture,which has beenmoved to Appendix D. To request access to the appendices, please contactOpenratio AB.

3.4 Technology roadmapOpenratio is moving towards using generic views and data structures witheach major system upgrade, as shown in figure 4 [Moved to Appendix D. Torequest access to the appendices, please contact Openratio AB]. Each viewtemplate in version 3.0 had it’s own data structure. In version 4.0 (current),the data structure became more generic, and fewer views started to containmore logic to display different content types from the generic data structure.Openratio technology roadmap has been moved to Appendix F. To requestaccess to the appendices, please contact Openratio AB.

3.5 Technology stackThe main technologies and projects that the project is built up on are describedin this section.

1. Back end technology stack

• Node.js is a javascript platform to build web applications.[15]– Express.js is a framework for faster and easier node.js development.[16]– jade is a templating engine used to render HTML dynamically

and allows code reusability.[17]– requestify is a library that handles the server’s HTTP requests.[18]

∗ XPath is a language used to access objects and attributesin XML documents.[19]· xmldom is an XML Document Object Model (DOM)

parser library.[20]∗ JSONPath is a language similar to XPath for accessingobjects in JSON documents.[21]

– LESS is a CSS preprocessor that allows the server to dynami-cally set a web page’s styling. It adds variable definitions, morecomplex styling rules and functions to CSS.[22]

11

Page 17: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

CHAPTER 3. ARCHITECTURE DESIGN

2. Front end technology stack

• jQuery Mobile is a platform used to build repsonsive mobile ac-cessible websites using HTML5 standards.[23]

• iscroll.js is used for smooth swiping transition when swiping throughnavigation tiles [24]

• photoswipe.js handles navigation between images in gallery views[25]

All the modules mentioned above are open source under MIT license, exceptLESS project, which is published under Apache 2 License.

3.6 Modules decriptionIn this section, the mobile website server designed in this thesis work is ex-plained . Openratio’s platform server will be referred to as the platform server,while the designed server will be referred to as the website server.The designed server can be classified into a set of functional system blocks.

3.6.1 Server configuration blockThis block sets up the ports the website server listens to, configures the router,middleware, file directories and dependencies.

3.6.2 Sessions handler middlewareUser lists and roles can be either setup using the CMS or exported fromLightweight Directory Access Protocol (LDAP) or Active Directory, two ofthe most common user directories used by enterprise systems.The website server does not save the user lists, but will bridge all authenti-cation requests and session cookies between the platform server and the webbrowser.If an application is user restricted, the website server will redirect to a loginpage.When a user is successfully authenticated by the platform server, thewebsite server will receive a session key in the response, and will save thissession key in a cookie. This cookie will be added to every page request andwill be passed over to the platform server to receive the website configurationsettings for that specific user.

12

Page 18: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

3.6. MODULES DECRIPTION

3.6.3 Router and static file serverThe router handles all GET and POST requests to the server. The routerserves both static as well as generated HTML pages. Figure 5 summarizeshow the router works. The flowchart has been moved to Appendix D. Torequest access to the appendices, please contact Openratio AB.Each application has a server ID and an application ID. These parameters arerequired to fetch the corresponding configuration file.

3.6.4 Client configuration file interfaceThis interface requests application configuration files from the platform server,receives them in JSON format and extract the necessary data to render webpages.The requests are asynchronous to prevent blocking the server’s main threadthus allowing the server to handle other processes.

3.6.5 LESS rendering blockThis block uses a client configuration file to evaluate variables in LESS tem-plates and render a CSS file.

3.6.6 Website rendering blockThis section has been moved to Appendix E. To request access to the appen-dices, please contact Openratio AB.

3.6.7 Data-mapperThis section has been moved to Appendix G. To request access to the appen-dices, please contact Openratio AB.

3.6.8 Sitemap creator logicWith each page request, a sitemap creator algorithm is designed to determinethe position of the page, the navigation type and the URL of the back button.This algorithm is designed becuase the configuration file has a flat hierarchyfor the views, while a sitemap has multiple layers of hierarchy. Also, web pagescan be either linked from the homepage or are linked from another web page.Table 3.1 shows the inputs and outputs of the website mapper.

13

Page 19: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

CHAPTER 3. ARCHITECTURE DESIGN

Cases ResultsNavigation type Page index in navigation list Back button URL TabsTile menu index >= 0 Link to homepage NOTile menu index <0 Link to another page NOTab menu index <0 Link to another page NOTab menu index >=0 & index <=3 N/A YESTab menu index >3 Link to /more list NO

Table 3.1. Page navigation design

14

Page 20: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

Chapter 4

Implementation and Testing

4.1 Server implementationThe designed server is deployed on Microsoft Azure web apps service to serveboth the CMS previewer and mobile websites.There are two platform and website server versions: one for production andone for development.Each website server version is connected to an Azure website and Git is usedfor source control and whenever a commit is pushed to the remote server, therespective Azure website is updated.

4.2 Browser compatibility testingBrowser compatibility was performed to test the compatibility of the generatedmobile websites on different browsers running on Windows, Mac OSX, androidand iOS operating systems. The mobile website server is targeted for two usecases: as a previewer embedded in an iframe and as a mobile website thatshould work on mobile and desktop browsers.To test the browser compatibility, Browserstack was used to run virtual ma-chines for live testing. Browserstack is a service that allows users to selectboth browser and operating system versions as listed in [26].The test results are summarized in the table below. The minimum supportedInternet Explorer version was updated from the planned 9.0 version to 10.0version and above because of issues with cookies.

• Desktop Browsers

15

Page 21: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

CHAPTER 4. IMPLEMENTATION AND TESTING

– Internet Explorer 10+– Internet Explorer Windows8 app 10+– Safari 5.1+– Chrome 18.0+– Firefox 4.0+

• Mobile Browsers

– iOS 6.0+ Safari– Android Browser 4.0+

4.3 Unit testingTo test the mobile website server, a set of applications are created to cover validand invalid view settings. The test applications mainly cover the followingcases:

1. Data-mapping testing

a) A set of views to test views with data from external JSON filei. A view with a valid data source linkii. A view with an invalid data source linkiii. A view with a valid object mapping from data sourceiv. A view with an invalid object mapping from data source

b) A set of views to test views with data from external XML filei. A view with a valid data source linkii. A view with an invalid data source linkiii. A view with a valid object mapping from data sourceiv. A view with an invalid object mapping from data source

2. Testing views with youtube channels, embedded HTML views, Galleryviews and scroll views

a) A view to list videos from a youtube channelb) A view to list videos from a keyword search’s resultsc) A view with an image gallery with valid and invalid image linksd) A view with an image gallery with no images

16

Page 22: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

4.4. CMS SIMULATOR TESTING

e) A view with embedded HTML codef) A set of views to test scroll view components

i. A view with buttons, images, text, linksii. A view showing a map from Google mapsiii. A view with an embedded youtube video

4.4 CMS simulator testingThe CMS simulator was deployed in an iframe in the CMS web page to previewmobile application’s layout and content.After deploying the CMS simulator a number of applications were tested onSafari, Internet Explorer2 Chrome and Firefox. The test results showed thatInternet Explorer browsers needed a Platform for Privacy Preferences Project(P3P) header to set the mobile website’s privacy policy before being allowedto store cookies in the browser via an iframe.In addition, Safari browsers do not allow cookies to be stored by websitesloaded in iframes to avoid malicious tracking cookies for third party sites oradvertisement networks.[27]

17

Page 23: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

Chapter 5

Conclusions

5.1 Project resultsThe designed server has achieved the following

1. User authentication, user specific data and mapping data from externalsources used to take from 120 to 150 development hours for each client.With the new platform update, it takes only from 8 to 16 hours perclient.

2. Openratio can offer on premise or cloud installation of the website serverfor their clients

3. A broader market can be reached by having a mobile website with thesame functionality as the platform’s native mobile apps.

5.2 ChallengesThis section has been moved to Appendix H. To request access to the appen-dices, please contact Openratio AB.

5.3 Future workThis section has been moved to Appendix H. To request access to the appen-dices, please contact Openratio AB.

18

Page 24: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

Bibliography

[1] Cisco and citrix for productive and secure enterprise mobility.https://www.citrix.com/content/dam/citrix/en\_us/documents/products-solutions/citrix-cisco-mobility-white-paper.pdf?accessmode=direct, 2014.

[2] Janessa Rivera and Rob van der Meulen. Mobile applica-tion management: Best practices for driving secure app adop-tion in the enterprise and managing the complete mobile app life-cycle. http://go.apperian.com/rs/apperian/images/Definitive%20Guide%20to%20Mobile%20Application%20Management.pdf. Ac-cessed: 2015-04-09.

[3] Mendix app platform overview. urlhttp://ww2.mendix.com/rs/mendix/images/Mendix-App-Platform-Overview.pdf. Accessed: 2014-12-01.

[4] Openratio - enterprise mobile engagement platform - byod | enterprisemobile platform. mbaas - mpaas - byod. http://www.openratio.com.Accessed: 2015-02-16.

[5] Gustavo Hartmann, Geoff Stead, and Asi DeGani. Cross-platform mobiledevelopment. Mobile Learning Environment, Cambridge, 2011.

[6] Phonegap. urlhttp://phonegap.com/about. Accessed: 2015-04-09.

[7] Html5 app development for desktop and mobile. javascript frameworksand dev tools from sencha. urlhttp://www.sencha.com/products. Ac-cessed: 2015-04-09.

[8] Enterprise mobile app development - mobile app server | verivosoftware. urlhttp://www.verivo.com/mobile-platform/overview/agile-mobile-app-development. Accessed: 2015-04-09.

[9] Mobile, enterprise, and custom application development platform & solu-tions | kony. urlhttp://www.kony.com/products. Accessed: 2015-04-09.

19

Page 25: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

BIBLIOGRAPHY

[10] Ibm developerworks : Ibm’s resource for developers and it professionals.urlhttp://www.ibm.com/developerworks/. Accessed: 2015-04-09.

[11] Native, web or hybrid mobile-app development.url ftp://public.dhe.ibm.com/software/pdf/mobile-enterprise/WSW14182USEN.pdf, 2012. Accessed: 2015-04-09.

[12] Json. http://json.org/. Accessed: 2015-02-16.

[13] Xml. http://www.w3.org/XML/. Accessed: 2015-04-09.

[14] Mvc architecture. urlhttps://developer.chrome.com/apps/app_frameworks.Accessed: 2015-04-16.

[15] Joyent. evented i/o for v8 javascript http://nodejs.org/. https://github.com/joyent/node, 2014.

[16] Strongloop. Fast, unopinionated, minimalist web framework for node.http://expressjs.com. https://github.com/strongloop/express,2014. Accessed: 2014-12-01.

[17] TJ Holowaychuk. Jade - robust, elegant, feature rich template engine fornodejs http://jade-lang.com. https://github.com/tj/jade, 2014.Accessed: 2014-12-01.

[18] Ran Mizrahi. Simplifies node http request making. http://ranm8.github.io/requestify. https://github.com/ranm8/requestify,2013. Accessed: 2014-12-01.

[19] yaronn. An xpath module for node, written in pure javascript. https://github.com/yaronn/xpath.js, 2014. Accessed: 2014-12-01.

[20] jindw. A pure js w3c standard based(xml dom level2 core) domparserand xmlserializer. https://github.com/jindw/xmldom, 2014. Accessed:2014-12-01.

[21] Subbu Allamaraju. A fork of jsonpath from http://goessner.net/articles/JsonPath/. https://github.com/s3u/JSONPath, 2014. Ac-cessed: 2014-12-01.

[22] LESS. Leaner css http://lesscss.org. https://github.com/less/less.js, 2014. Accessed: 2014-12-01.

[23] jQuery JavaScript Library. jquery mobile framework http://jquerymobile.com/. https://github.com/jquery/jquery-mobile,2014. Accessed: 2014-12-01.

20

Page 26: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

BIBLIOGRAPHY

[24] Matteo Spinelli. Smooth scrolling for the web http://iscrolljs.com.https://github.com/cubiq/iscroll/tree/v4, 2012. Accessed: 2014-12-01.

[25] dimsemenov. Photoswipe: Javascript image gallery. http://photoswipe.com/. Accessed: 2014-12-03.

[26] 700+ desktop & mobile browsers for cross-browser test-ing. urlhttps://www.browserstack.com/list-of-browsers-and-platforms?product=live. Accessed: 2015-04-16.

[27] Daniel E Dilger. Google reportedly ignoring safari users’ privacy settingsto better track its ads. http://appleinsider.com/articles/12/02/17/google_reportedly_ignoring_safari_users_privacy_settings_to_better_track_its_ads, 2012.

21

Page 27: Development of a Rendering Server for Enterprise-Grade ...865901/FULLTEXT01.pdf · Development of a Rendering Server for Enterprise-Grade Dynamic Websites HESHAM OMRAN KTH ROYAL INSTITUTE

TRITA-ICT-EX-2015:84

www.kth.se