DEVELOPING THE UDUBS-IT PLATFORM AS A HYBRID APP WITH THE IONIC FRAMEWORK

DEVELOPING THE UDUBS-IT PLATFORM AS A HYBRID APP WITH THE IONIC FRAMEWORK INTERNSHIP: INTERNSHIP MENTOR: INTERNSHIP GUIDANCE: UNIVERSITY OF THE WESTERN CAPE MR. KEVIN DERUDDER MR. WOUTER GROVÉ PROJECT BY BART VANDECANDELAERE BACHELOR THESIS NEW MEDIA AND COMMUNICATION TECHNOLOGY HOWEST ACADEMIC YEAR: 2014-2015

I

INTRODUCTION I AM BART VANDECANDELAERE A STUDENT NEW MEDIA AND COMMUNICATION TECHNOLOGY AT UNIVERSITY COLLEGE HOWEST IN WEST FLANDERS BELGIUM. NEW MEDIA AND COMMUNICATION TECHNOLOGY (NMCT) IS A COMPUTER SCIENCE BASED COURSE THAT COVERS A BROAD RANGE OF COMPUTER SCIENCE SUBJECTS BUT MAINLY FOCUSSES ON FIVE PILLARS. WEB DEVELOPMENT, APP DEVELOPMENT, SERVER SIDE DEVELOPMENT, INFRASTRUCTURE AND DIGITAL EXPERT SKILLS. NMCT GAVE ME BROAD INSIGHT INTO WHAT IS AVAILABLE REGARDING COMPUTER SCIENCE. WITH THIS PERSPECTIVE I CHOSE TO FOCUS MY ATTENTION ON WEB TECHNOLOGIES. WHAT MAKES WEB APPEALING TO ME IS THE FACT THAT IT IS MUCH MORE FLEXIBLE THAN WHAT MOST PEOPLE CONSIDER IT TO BE. IN THE FINAL SEMESTER OF OUR BACHELORS WE HAVE THE COURSE INTERNSHIP AND THESIS. DURING OUR INTERNSHIP WE NEED TO WORK ON A PROJECT WITHIN A CORPORATE ENVIRONMENT AND WRITE A CORRESPONDING THESIS ABOUT THE PROJECT OR THE SUBJECT MATTER THAT WE VE ENCOUNTERED. SINCE I HAVE AN INTEREST IN BROADENING MY HORIZON BEYOND THE NATIONAL BOARDERS I DECIDED TO LOOK FOR AN INTERNSHIP ABROAD. VLIRUOS, AN ORGANIZATIONS THAT SUPPORTS COOPERATION BETWEEN UNIVERSITY COLLEGES AND THEIR PARTNERS IN THE SOUTH, HAS A PLATFORM FOR ONGOING PROJECTS. IT S THROUGH THIS ORGANIZATION THAT I FOUND THE UDUBS-IT PROJECT IN SOUTH AFRICA. THE PROJECT IS A COOPERATION BETWEEN THE UNIVERSITY OF GHENT AND THE UNIVERSITY OF THE WESTERN CAPE. THEY WE RE LOOKING FOR WEB DEVELOPERS TO ASSIST DEVELOPMENT OF A COMMUNITY APP FOR THE ±23000 STUDENTS AT THE UNIVERSITY OF THE WESTERN CAPE. I WOULD LIKE TO THANK THE PROVINCE OF WEST FLANDERS, BELGIUM FOR THEIR HAND IN THE PREPARATION AND GUIDANCE OF MY INTERNATIONAL INTERNSHIP AND ALSO THE INTERNATIONAL COORDINATORS AT HOWEST UNIVERSITY COLLEGE FOR ORGANIZING OPPORTUNITIES FOR THE STUDENTS TO GO ABROAD. II

ABSTRACT DURING MY INTERNSHIP I VE DEVELOPED AN APP NAMED UDUBS-IT USING IONIC AS MY HYBRID APP FRAMEWORK. THIS THESIS WILL CONTAIN AN OVERVIEW OF HYBRID APP DEVELOPMENT AND ITS COMPONENTS. THE PROJECT IS A COMMUNITY BASED APP FOR STUDENTS OF WHICH THERE WAS A BETA VERSION AVAILABLE FOR ANDROID. THE PROBLEM HOWEVER WAS THAT THE UNIVERSITY OF THE WESTERN CAPE HAS ONLY ±30% OF THE STUDENTS USING ANDROID ON THEIR MOBILE DEVICES. TO HANDLE THIS PROBLEM THEY WANT TO USE A WEB BASED APPROACH AND DEVELOP AN APPLICATION THAT CAN BE EXPORTED TO SEVERAL PLATFORMS INCLUDING A WEB VERSION. THIS IS WHERE HYBRID APPS COME IN TO PLAY. THE BACKEND OF THE APPLICATION WAS ALREADY IN PLACE BUT NEEDED SEVERAL ADJUSTMENTS TO IMPROVE PERFORMANCE AND ENHANCE OVERALL STABILITY. THE BACKEND IS WRITTEN IN PHP AND USES THE CODE IGNITE FRAMEWORK. AFTER GOING INTO DETAIL ABOUT IONIC AND ITS COMPONENTS THERE WILL BE A USE CASE DESCRIBING THE DEVELOPMENT OF THE UDUBS-IT APP WITH IONIC. DURING MY INTERNSHIP I HAVE LEARNED A LOT ABOUT DIFFERENT CULTURES AND THE CORPORATE STRUCTURES THAT COME ALONG WITH COLLABORATING ON A PROJECT ACROSS SEVERAL COUNTRIES. III

NOMENCLATURE HYBRID APP AN APPLICATION THAT USES WEB TECHNOLOGIES AT ITS CORE BUT IS COMPILED TO RUN ON NATIVE MOBILE PLATFORMS. SASS A CSS PREPROCESSOR. THIS SCRIPTING LANGUAGE OFFERS ADDITIONAL FUNCTIONALITY WHEN WRITING CSS AND OUTPUTS IT AS A CSS FILE. ANGULAR A JAVASCRIPT FRAMEWORK THAT IS BUILT FOR SINGLE PAGE APPLICATIONS. DEPENDENCY INJECTION A SOFTWARE DESIGN PATTERN IN WHICH A FUNCTION USES THE FRAMEWORK TO SUPPLY IT WITH A SERVICE INSTEAD OF RETRIEVING THE SERVICE ITSELF. RESPONSIVE OFTEN USED TO DESCRIBE THE MANNER IN WHICH CONTENT IS ADJUSTED TO THE DISPLAY FORMAT THAT IS BEING WORKED ON. GESTURES MOTIONS A USER MAKES ON THE DEVICE TO INSTIGATE CERTAIN CONTROLS OR FUNCTIONALITY. THRIFTY THE DEVELOPERS OF THE IONIC FRAMEWORK. MVC A SOFTWARE DESIGN PATTERN IN WHICH THE CODE IS BROKEN UP INTO SEVERAL COMPONENTS THIS CREATES A SEPARATION OF CONCERN. THERE S THREE MAIN COMPONENT. THE MODEL CONTAINS ALL THE BUSINESS LOGIC AND REPOSITORIES OF THE APPLICATION. THE VIEWS WHICH CONTAIN ALL THE CONTENT THAT WILL BE SHOWN TO THE USER THE CONTROLLERS WHICH HANDLE THE COMMUNICATION BETWEEN THE MODELS AND THE VIEWS. SEPARATION OF CONCERNS THE SPLITTING UP OF COMPONENTS SO THAT EACH OF THEM CAN STAND ON THEIR OWN. WHEN A FILE GETS ADJUSTED IT DOESN T INFLUENCE HOW THE OTHERS FUNCTION, EACH COMPONENT HAS THEIR OWN TASKS. SINGLE THREADED THE PROCESSING OF ONE COMMAND AT A TIME. EVENT LOOP IN AN EVENT DRIVEN APPLICATIONS THERE IS A MAIN PROCESS THAT RUNS AND CONTINUALLY CHECKS WHICH EVENTS ARE BEING TRIGGERED. IT HANDLES THESE EVENTS ONE BY ONE BY CALLING THEIR CALLBACK FUNCTION. DOCUMENT OBJECT MODEL A CONVENTION OF SHOWING AND INTERACTING WITH THE OBJECTS IN HTML OR XML STRUCTURES. IV

A SINGLETON A CLASS THAT IS ONLY ALLOWED TO HAVE ONE INSTANCE OF ITSELF AT A TIME. MINDSHARE THE MEASURE IN WHICH CONSUMERS ARE AWARE OF A PARTICULAR BRAND, SERVICE OR PRODUCT. API APPLICATION PROGRAM INTERFACE. A SET OF TOOLS, PROTOCOLS TO CREATE SOFTWARE APPLICATIONS, DEFINING THE STRUCTURE IN WHICH THEY SHOULD BE USED. REST SERVICE REPRESENTATIONAL STATE TRANSFER IS AN INTERFACE APPLIED TO A WEB SERVICE TO ACCESS CERTAIN FUNCTIONALITY OR RESOURCES THROUGH SEVERAL URI S. CSS CASCADING STYLE SHEETS IS A FORMAT IN WHICH STYLING OF WEB PAGES IS DEFINED. RUBY A GENERAL PURPOSE OBJECT ORIENTED LANGUAGE OFTEN USED FOR WEB APPLICATIONS. IFRAME AN HTML PAGE EMBEDDED IN ANOTHER HTML PAGE OFTEN USED TO DISPLAY CONTENT FROM A DIFFERENT SOURCE. IDE INTEGRATED DEVELOPMENT ENVIRONMENT IS AN APPLICATION THAT PROVIDES DEVELOPERS WITH THE TOOLS AND EDITOR THEY NEED FOR SOFTWARE DEVELOPMENT. HOD HEAD OF DEPARTMENT V

CONTENTS HYBRID APPLICATIONS COME IN ALL SHAPES AND SIZES USING MANY DIFFERENT FRAMEWORKS AND TECHNOLOGIES. THIS THESIS WILL CLARIFY WHAT HYBRID APPS ARE AND PROVIDE AN OVERVIEW OF THE DIFFERENT KINDS OF HYBRID APPLICATIONS AND THE COMMON FRAMEWORKS OR PRACTICES THAT ARE BEING USED TO DEVELOP THEM. ALSO THE POSITION OF HYBRID APPLICATIONS IN THE CURRENT MARKET WILL BE DESCRIBED TO GET A BETTER UNDERSTANDING WHY HYBRID APPLICATIONS ARE BEING DEVELOPED. I WILL HAVE A CLOSER LOOK AT THE IONIC FRAMEWORK AND THE DIFFERENT COMPONENTS AND TECHNOLOGIES THAT ARE BEING USED TO CREATE HYBRID APPLICATIONS. THE CHOICE TO ELABORATE ON IONIC COMES FROM THE FACT THAT IT WAS USED DURING THE DEVELOPMENT OF THE UDUBS-IT APPLICATION AT THE UNIVERSITY OF THE WESTERN CAPE. IN THE SECTION DEVELOPING IN A DIFFERENT CONTEXT THE MOBILE MARKET AND INTERNET OVER LANDLINES WILL BE DISCUSSED SINCE THIS WILL HELP CLARIFY WHY A STUDENT PLATFORM IS BEING DEVELOPED AS A MOBILE APPLICATION RATHER THAN A WEB APPLICATION. AFTER THE IONIC FRAMEWORK I WILL GO OVER THE UDUBS-IT APP AS USE CASE AND DISCUSS WHY THEY CHOSE TO TAKE THIS ROUTE. VI

Contents DEVELOPING THE UDUBS-IT PLATFORM AS A HYBRID APP WITH THE IONIC FRAMEWORK... 1 BART VANDECANDELAERE... 1 NEW MEDIA AND COMMUNICATION TECHNOLOGY... 1 INTRODUCTION... II ABSTRACT... III NOMENCLATURE... IV CONTENTS... VI HYBRID APPS... 2 WHAT ARE HYBRID APPS... 2 NATIVE APPLICATIONS... 2 WEB APPLICATIONS... 2 HYBRID APPLICATIONS... 3 BUILDING TO A NATIVE PLATFORM... 8 WEBVIEW... 8 WEB TO NATIVE... 9 CONCLUSION... 9 IONIC... 10 IONIC BY DRIFTY... 10 IONIC FEATURES... 10 IONIC COMPONENTS... 10 IONIC JAVASCRIPT COMPONENTS... 11 IONIC TOOLS... 12 TECHNOLOGIES USED IN IONIC... 14 ANGULAR.JS... 14 WHY ANGULAR.JS... 15 REUSABLE CODE... 15 TWO WAY BINDING... 15 DEPENDENCY INJECTION... 16 ANGULAR COMPONENTS... 18 NON-INJECTABLE... 18 INJECTABLE... 19 UI-ROUTER... 20 SASS... 21 THERE ARE TWO KINDS OF SYNTAX WHEN WRITING SASS... 21 WHY USE CSS PREPROCESSORS... 21 THE USE OF SASS IN IONIC... 21 VII

CORDOVA... 22 INNER WORKINGS... 22 CONCLUSION... 24 DEVELOPING IN A DIFFERENT CONTEXT... 25 SOUTH-AFRICA... 25 MOBILE MARKET... 25 USE CASE UDUBS-IT... 26 PROJECT... 26 THE APPLICATION HAS FOUR MAIN FUNCTIONS... 26 PROJECT HISTORY... 27 THE STATE OF UDUBS-IT... 27 USAGE... 27 COMPONENTS... 28 DEVELOPMENT ENVIRONMENT... 28 UDUBS-IT STRUCTURE... 29 FRONTEND... 29 BACKEND... 31 IMPLEMENTATION... 32 BIBLIOGRAPHY... 33 FIGURE LIST... 35 ANNEX... 36 UDUBS-IT PRINT SCREENS... 36 VIII

HYBRID APPS WHAT ARE HYBRID APPS WHEN DISCUSSING HYBRID APPLICATIONS IT IS IMPORTANT TO KNOW WHAT OTHER OPTIONS ARE AVAILABLE WHEN DEVELOPING MOBILE APPLICATIONS. THERE ARE THREE MAIN APPROACHES WHEN DEVELOPING AN APPLICATION. Native application Web application Hybrid application THE CHOICE WILL DEPEND ON THE RESOURCES, DEVELOPMENT TIME AND GOAL OF THE APPLICATION. NATIVE APPLICATIONS NATIVE APPLICATIONS ARE DEVELOPED USING THE DEVELOPMENT TOOLS AND PROGRAMMING LANGUAGES FOR EACH SPECIFIC PLATFORM THAT IS TARGETED. FOR EXAMPLE. Android o Java, Android studio Windows Phone o C#, Visual studio ios o Objective-C, Xcode NATIVE APPLICATIONS ALLOW THE FULL USE OF THE MOBILE OPERATING SYSTEM IN TERMS OF PERFORMANCE, DESIGN PATTERNS AND STYLE GUIDELINES. THIS CONTRIBUTES TO AN OVERALL FAMILIAR USER EXPERIENCE AND PERFORMANCE FOR THE END USERS. HOWEVER THE DOWNSIDE TO NATIVE DEVELOPMENT IS THAT THE APPLICATION NEEDS TO BE DEVELOPED FOR EACH PLATFORM THAT IS BEING PUBLISH TO. THIS REQUIRES RESOURCES IN TERMS OF DEVELOPERS WHO KNOW THE PLATFORM, DEVELOPMENT TIME AND SUPPORT FOR DIFFERENT PLATFORMS. THE MANAGEMENT OF THE DIFFERENT PLATFORMS ALSO NEEDS TO BE TAKEN IN TO ACCOUNT SINCE THERE WILL BE MULTIPLE VERSIONS OF THE APPLICATION IN PRODUCTION AT THE SAME TIME. WEB APPLICATIONS WEB APPLICATIONS ARE RUN WITHIN THE MOBILE BROWSER OF THE OPERATING SYSTEM. THESE ARE IN ESSENCE WEBSITES THAT HAVE BEEN OPTIMIZED TO THE FULLEST TO BE RUN ON MOBILE. THEY USE A RANGE OF TECHNOLOGIES THAT THE BROWSERS SUPPORT LIKE HTML5, JAVASCRIPT AND CSS3. A MAJOR BENEFIT OF WEB APPLICATIONS IS THE LIMITED AMOUNT OF RESOURCES THAT ARE REQUIRED. THE SAME CODE IS BEING USED ACROSS ALL PLATFORMS AND A DIFFERENT STYLE CAN BE APPLIED DEPENDING ON THE PLATFORM. ALTHOUGH THIS IS A BROAD APPROACH AND IT MAKES SENSE IN FINANCIAL TERMS. THOUGH THERE ARE SEVERAL ISSUES WITH WEB APPLICATIONS THAT MAKE THEM LESS APPEALING. THE FIRST ISSUES IS THE FACT THAT AN INTERNET CONNECTION IS NEEDED TO ACCESS THE PLATFORM, ANOTHER ISSUES IN TERMS OF ACCESSIBILITY IS THE LACK OF DISTRIBUTION THROUGH THE PLATFORM SPECIFIC APPLICATION STORES. THERE IS ALSO NO SUPPORT FOR PUSH NOTIFICATIONS. THESE ISSUES COMBINED LIMIT THE VISIBILITY OF THE APPLICATION TO THE END USER. 2

TECHNOLOGY WISE WEB APPLICATIONS CAN T ACCESS ANY OF THE NATIVE COMPONENTS OF THE MOBILE DEVICE. FOR EXAMPLE CAMERA, GPS MODULE OR ACCELEROMETER. AND THE POSSIBILITY TO HAVE HEAVY PROCESSES RUNNING LOCALLY IS LIMITED TO WHAT THE BROWSER ALLOWS. HYBRID APPLICATIONS HYBRID APPLICATIONS BRING TOGETHER WEB TECHNOLOGIES/PRACTICES WITH NATIVE APPLICATIONS. A HYBRID APPLICATION IS DEVELOPED USING COMMON WEB TECHNOLOGIES LIKE HTML5, JAVASCRIPT AND CSS3. ONCE THE APPLICATION IS BUILT A FRAMEWORK LIKE PHONEGAP OR APPCELERATOR IS USED TO COMPILE THE APPLICATION TO BE RUN INSIDE A WEBVIEW (MORE ABOUT THIS WILL FOLLOW). ONCE THE APPLICATION HAS BEEN BUILT IT IS SIMILAR TO A NATIVE APPLICATION IN TERMS OF DISTRIBUTION THROUGH APP STORES, INSTALLING AND USAGE. BENEFITS THE MAIN BENEFIT OF HYBRID APP DEVELOPMENT IS THE REDUCTION IN COSTS AND TIME THAT COME ALONG WITH BUILDING FOR SEVERAL PLATFORMS. THE CREATION OF ONE APPLICATION CORE THAT IS THE SAME ACROSS PLATFORMS MAKES VERSION MANAGEMENT EASIER AND ELIMINATES THE REPLICATION OF CONTENT OVER THESE PLATFORMS. THE ABILITY TO ACCESS NATIVE FUNCTIONALITY OF THE SMARTPHONE (ACCELEROMETER, CAMERA ) COMBINED WITH ACCESS TO APP STORES PLAYS A MAJOR ROLE IN CHOOSING HYBRID OVER WEB APPLICATIONS. USING A FRAMEWORK TO DEVELOP THE HYBRID APPLICATION WILL PROVIDE THE POSSIBILITY TO KEEP THE USER INTERFACE CONSISTENT ACROSS PLATFORMS. OR IT CAN PROVIDE THE TOOLS NEEDED TO MIMIC THE NATIVE PLATFORMS LOOK AND FEEL. DRAWBACKS DEPENDING ON THE TYPE OF APPLICATION THAT IS BEING DEVELOPED HYBRID APPS MIGHT NOT BE THE BEST CHOICE WHEN IT COMES TO PERFORMANCE. FOR EXAMPLE WHEN DEVELOPING A GAME THAT REQUIRES SOME GPU PERFORMANCE IT MIGHT NOT BE POSSIBLE TO GET THE BEST RESULTS USING HYBRID APPLICATIONS OR WHEN DEVELOPING APPLICATIONS THAT DEAL WITH SENSITIVE SYSTEMS, IT IS BETTER TO DEVELOP NATIVELY SINCE THERE WILL BE MORE CONTROL OVER THE DEVICES RESOURCES. HYBRID APPLICATION FRAMEWORKS FRAMEWORKS PROVIDE THE DEVELOPER WITH A SELECTION OF TOOLS AND COMPONENTS THAT HAVE BEEN OPTIMIZED FOR MOBILE DEVELOPMENT AND USE. THE MAJOR BENEFITS OF THESE FRAMEWORKS ARE THE FACT THAT THEY OFFER THE MEANS TO PROVIDE A CONSISTENT METHOD OF ROUTING IN THE APPLICATION COMBINED WITH THE HANDLING OF MOBILE GESTURES AND TOUCH EVENTS. SOME OF THE MORE POPULAR HYBRID FRAMEWORKS ARE: Ionic KendoUI Sencha touch Appcelerator Mobile Angular UI Intel XDK 3

CURRENT STATE OF HYBRID APPLICATIONS VISION MOBILE IS A COMPANY THAT DOES RESEARCH IN TERMS OF APP ECONOMIES AND MOBILE BUSINESS MODELS DID A STUDY IN 2014 (DEVELOPER ECONOMICS Q1 2014 THE STATE OF THE DEVELOPER NATION) THAT TAKES A LOOK AT THE DEVELOPMENT OF APPS ACROSS ALL THE DIFFERENT PLATFORMS. THEY FOUND THAT THERE IS SIGNIFICANT INTEREST IN HTML5 BASED APPS BUT THE PLATFORM IS SEEN AS AN ADDITIONAL VALUE RATHER THAN A PLATFORM THAT THAT CAN BE USED TO REACH A LARGE AUDIENCE WITH THE POSSIBILITY OF SIGNIFICANT MONETIZATION OF THE APPLICATION. 37% OF MOBILE DEVELOPERS USE HTML5 AS A PLATFORM, I.E. TO DEVELOP MOBILE WEBSITES, OR WEB-APPS. AN ADDITIONAL 15% OF APP DEVELOPERS USE HTML5 BEYOND THE BROWSER, VIA HYBRID APPS OR HTML5-TO-NATIVE TOOLS. VISION MOBILE STUDY, DEVELOPER ECONOMICS Q1 2014, PAGE 2 6311 DEVELOPERS WHERE ASKED IF THEY USE ONE OF THESE PLATFORMS IF SO, DO THEY USE IT AS PRIMARY OR SECONDARY PLATFORM. TWENTY-SIX PERCENT OF DEVELOPERS THAT DEVELOP FOR HTML INDICATED THAT THEY USE IT AS THEIR PRIMARY PLATFORM. FIGURE 1 PREFERENCE OF PRIMARY PLATFORMS 4

VISION MOBILE ALSO MADE IN INQUIRE WITH 4953 DEVELOPERS REGARDING WHICH TOOLS THEY USE OR CHOOSE NOT TO USE PER PLATFORM. THE BEST SUPPORTED TOOLS THAT ARE BEING USED FOR THE DEVELOPMENT OF HTML5 BASED APPLICATIONS ARE: User analytics Cross/platform tools Mobile backend as a service THE TOOLS OR FUNCTIONALITY THAT IS LACKING ACCORDING TO DEVELOPERS. Game development tools App store analytics App certification and Beta testing. THE TOOLS THAT ARE LACKING SEEM TO CORRESPOND WITH THE NATURE OF HYBRID APPLICATIONS. GAME DEVELOPMENT TOOLS FOR HYBRID APPLICATIONS ARE LIMITED DUE TO THE LIMITATION IN RESOURCES THAT ARE AVAILABLE. APP STORE ANALYTICS AND CERTIFICATION ARE LIMITED SINCE WEB TECHNOLOGIES ARE USED AND NOT THE NATIVE TOOLS PROVIDED BY THE PLATFORMS DEVELOPERS. FIGURE 2 DEVELOPMENT TOOLS SATISFACTION 5

A SURVEY DONE BY TELERIK, A COMPANY FOCUSING ON THE DEVELOPMENT OF SOFTWARE TOOLS FOR WEB AND THE DEVELOPERS OF KENDUI HYBRID APP FRAMEWORK, FOCUSED ON THE END USE OF HYBRID APPLICATIONS. THE SURVEY CONCLUDED THAT THE MAIN USES OF HYBRID APPLICATIONS LAY IN THE DOMAIN OF BUSINESS APPLICATIONS. WITH 57% OF THE 3600 RESPONDENTS MENTIONING THEY DEVELOP BUSINESS ORIENTED APPS AS HYBRIDS. FIGURE 3 TYPES OF APPLICATIONS WHEN LOOKING CLOSER AT 57% OF APPLICATIONS BEING DEVELOPED FOR BUSINESS. DEVELOPERS RESPONDED THAT THEY USE HYBRIDS FOR THE FOLLOWING BUSINESS PURPOSES. Internal business-to-business 47% Other 4% Public businessto-consumer 64% Internal business-to-employee 49% FIGURE 4 TYPES OF BUSINESS APPLICATIONS 6

Developers that estimate THE SURVEY ALSO MADE IN INQUIRY ABOUT THE ESTIMATED COST THE COMPANY WOULD SAVE WHEN DEVELOPING HYBRID APPLICATIONS INSTEAD OF NATIVE. 25% Cost saving estimate when using hybrid over native. 20% 15% 10% 5% 0% 0-10% 11-20% 21-30% 31-40% 41-50% 51-60% 61-70% 71-80% 81-90% 91-100% Cost saved when using hybrids. FIGURE 5 COSTS SAVED ESTIMATION FUTURE MAY 5, 2014 TELERIK PUBLISHED AN ARTICLE TO DESCRIBE THE EVOLUTION OF HYBRID APPLICATIONS. THIS IMAGE CONTAINS A CURVE COMMONLY REFERRED TO AS THE HYPE CYCLE. IT VISUALIZES THE EVOLUTION OF HYBRID APPS AND PLACES THE CURRENT STATE OF HYBRID APPS AT THE PLATEAU OF PRODUCTIVITY. THIS CURVE HELPS VISUALIZE WHERE HYBRID APPS HAVE COME IN RECENT YEARS (2009 IPHONEDEVCAMP 2015). HYBRID APPLICATIONS HAVE ACQUIRED A CERTAIN MINDSHARE AMONGST DEVELOPERS (52% ACCORDING TO THE VISION MOBILE SURVEY). THIS HAS LED TO IMPROVED TOOLS FOR DEVELOPERS LIKE THE CHROME DEVTOOLS FOR REMOTE DEBUGGING, MOBILE BACKEND AS A SERVICE AND UI FRAMEWORKS LIKE IONIC. THERE HAS ALSO BEEN INVESTMENT IN FIGURE 6 GARTNER HYPE CYCLE FOR HYBRID APPLICATIONS HYBRID TECHNOLOGIES FOR EXAMPLE THE PURCHASE OF PHONEGAP BY ADOBE (ANNO 2011) WHICH LED TO THE INITIAL EXCITEMENT AMONGST DEVELOPERS AND THE MORE RECENT INVESTMENT OF $2.6MILLION BY ARTHUR VENTURES, FOUNDER COLLECTIVE AND LIGHTBANK INTO IONIC. HYBRID APPLICATIONS ARE STILL IN THERE EARLY STAGES AS AN ECOSYSTEM. BUT WITH THE RISE OF NEW PLATFORMS EACH YEAR THEY SEEM TO FILL IN THE GAP AND PROVIDE A SOLUTION TO INCLUDE NEW OPERATING SYSTEMS. WHILST PROVIDING AFFORDABLE DEVELOPMENT OF MOBILE APPLICATIONS. 7

BUILDING TO A NATIVE PLATFORM WHEN BUILDING HYBRID APPS THERE ARE TWO MAIN APPROACHES AVAILABLE. THE FIRST ROUTE IS USING WEB TECHNOLOGIES AND COMPILING THEM TO AN APPLICATION USING THE MOBILE OPERATING SYSTEMS BROWSER FUNCTIONALITIES OFTEN REFERRED TO AS THE WEB VIEW. THE OTHER ROUTE IS TO CONVERT THE WEB CODE TO NATIVE CODE THUS CREATING A NATIVE APPLICATION THAT WAS WRITTEN WITH WEB CODE. WEBVIEW HYBRID APPLICATIONS BUILT USING WEB TECHNOLOGIES ARE DEPENDENT ON A BROWSER COMPONENT TO BE ABLE TO RUN ON THE OPERATING SYSTEM. THIS COMPONENT IS A CONTAINER IN WHICH THE APPLICATION RUNS. AT ITS CORE IT S A WEB BROWSER THAT HAS BEEN STRIPPED FROM ALL ADDITIONAL FEATURES AND CHROME AND CONFIGURED TO USE THE FULL SCREEN AS ITS CONTENT SPACE. THE APPLICATION NEEDS TO MAKE USE OF AN API TO COMMUNICATE WITH THE COMPONENTS OF THE PHONE IN MOST CASES THIS WILL BE THE CORDOVA LIBRARY WHICH HANDLES THE JAVASCRIPT TO NATIVE COMMUNICATION. THE APPLICATION THAT IS RUN WITHIN THE WEBVIEW IS A SINGLE PAGE APPLICATION SINCE THIS ALLOWS THE SYSTEM TO STORE ITS VALUES. WHEN USING MULTIPLE VIEWS, THE WEBVIEW WILL LOSE ITS STATE AND INFORMATION WILL BE LOST. THE TYPICAL STRUCTURE OF A WEB BASED HYBRID APPLICATION IS THE WEBVIEW HOLDING THE APPLICATIONS SHELL COMBINED WITH A BACKEND THAT SUPPORTS THE APPLICATION THROUGH A REST SERVICE. THE BACKEND HANDLES THE COMMUNICATION WITH THE DIFFERENT DATA SOURCES. SQL server Other (sensors,s tream...) Mongo DB Data sources FIGURE 7 HYBRID FLOW Backend PHP,Node.js Hybrid application inside a webview Backend communicates with data sources. Hybrid application communicates with backend through XMLhttpRequests. User The user interacts with the application. THE WEBVIEW COMPONENTS OF THE MOBILE OPERATING SYSTEMS ALLOW THE EMBEDDING OF A WEB BROWSER INSIDE THE APPLICATION THAT WILL DISPLAY WEB CONTENT. WHEN THE HYBRID APPLICATION GETS COMPILED, IT IS INCLUDED IN THE WEBVIEW AND PACKAGED ACCORDING TO THE MOBILE OPERATING SYSTEM S FORMAT. ios IPA file Android APK file Windows Phone XAP file THE WEBVIEW CAN USE A DIFFERENT RENDERING ENGINE DEPENDING ON THE OPERATING SYSTEM. THIS CAN CAUSE CONTENT TO BE DISPLAYED IN A DIFFERENT MANNER. THIS DIFFERENCE IS USUALLY HANDLED BY USING A HYBRID APPLICATION UI FRAMEWORK. 8

WEB TO NATIVE THE WEB TO NATIVE APPROACH CAN T REALLY BE CONSIDERED AS DELIVERING HYBRID APPLICATIONS BUT THEY ARE WORTH MENTIONING SINCE THEY USE SOME WEB TECHNOLOGIES TO BUILD APPLICATIONS. THE EXAMPLE AT HAND IS APPCELERATOR TITANIUM. THIS TOOLSET ALLOWS THE USE OF WEB TECHNOLOGIES TO CREATE AN ABSTRACT ARCHITECTURE OF THE APPLICATION THAT MAKE USE OF THE MODEL VIEW CONTROLLER PATTERN. THE CONTROLLERS ARE WRITTEN IN JAVASCRIPT, THE VIEWS IN XML AND THE STYLING IS DONE BY JSON OBJECTS. USING THEIR ALLOY FRAMEWORK IN COMBINATION WITH THE MOBILE OPERATING SYSTEMS SDK S THE CODE IS THEN COMPILED TO A NATIVE APPLICATION. CONCLUSION HYBRID APPLICATIONS HAVE A ROLE TO PLAY IN THE FUTURE SINCE THEY CAN SIGNIFICANTLY REDUCE DEVELOPMENT COSTS FOR COMPANIES AND ALLOW WEB DEVELOPERS TO USE THEIR EXISTING SKILLSET WITHIN A NEW CONTEXT. THE MAIN ISSUES ARE RELIABILITY WISE AND THE FACT THAT THERE IS NO PROPERLY DEFINED ECOSYSTEM FOR THEM. THEY RELY ON THE DIFFERENT MOBILE COMPANIES TO PROVIDE THEM WITH ENOUGH SUPPORT AND ACCESS TO GROW. THERE ARE SEVERAL SMALLER OPERATING SYSTEMS LIKE FIREFOX OS, TIZEN, WEBOS AND UBUNTU TOUCH THAT TAKE HTML5 AS THEIR MAIN METHOD OF APP DEVELOPMENT THIS GIVES HYBRID APPLICATIONS A CHANCE TO GROW AS A PLATFORM AND ECOSYSTEM. 9

IONIC IONIC BY DRIFTY IONIC IS A HYBRID APPLICATION FRAMEWORK DEVELOPED BY DRIFTY IN 2013. IONIC FOCUSSES ON THE INTERFACE OF THE APPLICATION AND HOW THE USER INTERACTS WITH THE APPLICATION. THE MAIN TECHNOLOGIES USED ARE HTML5, CSS3 AND JAVASCRIPT. WITH THEM A RANGE OF TOOLS AND CONTENT HAVE BEEN BUILD WHICH ARE OPTIMIZED FOR MOBILE USE. FOR THE STRUCTURE OF THE APPLICATION IONIC USES THREE MAIN TECHNOLOGIES MAINLY ANGULAR.JS, SASS AND CORDOVA. ANGULER.JS IS NOT MANDATORY TO CREATE AN APPLICATION WITH IONIC. IT IS USED TO PROVIDE ESSENTIAL FUNCTIONALITY AS ROUTING, TWO WAY BINDING AND IONIC DIRECTIVES (FOR EXAMPLE LISTS AND FORMS). IF IONIC WERE TO BE USED WITHOUT ANGULAR THEN IT COULD ONLY RELY ON THE GRAPHICAL COMPONENTS AND THE HANDLING OF GESTURES AND RESPONSIVENESS. SASS IS USED TO PRECOMPILE THE CSS IONIC USES. SASS DELIVERS FUNCTIONALITY THAT IS CURRENTLY MISSING IN CSS3, LIKE NESTING STRUCTURES, USE OF VARIABLES, IF STATEMENTS AND LOOPS. THE USE OF SASS MAKES IT EASIER TO MANAGE THE DIFFERENT APPLICATION STYLES AND WRITE CUSTOM ONES. CORDOVA IS A SET OF UNIFORM JAVASCRIPT LIBRARIES THAT HANDLE THE COMMUNICATION BETWEEN THE APPLICATION AND THE NATIVE PLATFORM. THIS IS NECESSARY TO ACCESS PHONE SPECIFIC HARDWARE FOR EXAMPLE THE CAMERA OR THE PHONES GPS MODULE. BY ENCAPSULATING ANGULAR.JS, SASS AND CORDOVA IN ITS STRUCTURE TOGETHER WITH ITS OWN COMPONENTS AND BUILDING TOOLS, IONIC CREATES A SCAFFOLDING THAT OFFERS ALL THE WEB TECHNOLOGIES NEEDED TO CREATE HYBRID APPLICATIONS. CURRENTLY DRIFTY IS TRYING TO GROW ITS USER BASE FOR THE IONIC FRAMEWORK BY ATTRACTING INVESTORS AND ENGAGING WITH THE COMMUNITY TO POSITION THEMSELVES AS THE MAIN PLATFORM FOR HYBRID DEVELOPMENT. IONIC FEATURES Ionic Lab, development suite Live reload Icon and splash screen generation View app, demo and sharing platform ngcordova, Cordova for Angular.js Ionic.io Platform, backend services IONIC COMPONENTS Header Content Footer Buttons Lists Cards Forms Toggle Checkbox Radio buttons Range Select Tabs Grids Utilities (colors, icons, padding 10

IONIC JAVASCRIPT COMPONENTS Action sheet Backdrop Content Form inputs Gestures and events Headers and footers Keyboards Lists Loading status Modal (overlay) Navigation Platform (Hardware interactions, back button) Popover Popup Utility Scroll Side menus Slide box Spinner (loading) Tabs Tap & click IONIC SUPPORTS IOS7+, ANDROID 4.1 AND UP. WINDOWS PHONE DEVELOPMENT IS IN BETA AND FIREFOX OS IS PLANNED. 11

IONIC TOOLS IONIC HAS SEVERAL TOOLS BUILD IN TO ASSIST DEVELOPERS AND AUTOMATE CERTAIN ACTIONS INSTALLATION TO SIMPLIFY THE INSTALLATION OF IONIC AND ITS COMPONENTS THERE S THE POSSIBILITY TO INSTALL IONIC USING THE PACKAGE MANAGERS NPM (NODE.JS) AND BOWER. THE FOLLOWING COMMANDS ARE USED TO SETUP IONIC $ NPM INSTALL G IONIC $ IONIC START [APP NAME] [TEMPLATE: OPTIONAL] TESTING $ IONIC SERVE THIS COMMAND SETS UP A LOCAL SERVER AND OPENS THE BROWSER. DURING DEVELOPMENT IT WILL DETECT THE CHANGES IN THE CODE AND REFRESH THE BROWSER ACCORDINGLY. THIS COMMAND WORKS FOR ALL THE FUNCTIONALITY THAT DOESN T RELY ON CORDOVA. WHEN ADDRESSING MOBILE HARDWARE IONIC SERVE WILL OUTPUT AN ERROR IN THE CONSOLE. $ IONIC SERVE --LAB USING THE LAB PARAMETER WITH SERVE, IONIC CLI WILL DISPLAY THE APPLICATION IN THE BROWSER FOR EACH PLATFORM THAT HAS BEEN ADDED TO THE PROJECT. THIS WAY THERE IS A LIVE PREVIEW OF HOW THE APPLICATION LOOKS AND RESPONDS ON DIFFERENT MOBILE OPERATING SYSTEMS. FIGURE 8 IONIC SERVE COMMAND WITH LAB PARAMETER $ IONIC SERVE ADDRESS 111.222.123.234 RUNS THE APPLICATION FROM A DIFFERENT ADDRESS THEN THE LOCALHOST:8100 RUNNING THE APPLICATION $ IONIC PLATFORM ADD [IOS] [ANDROID] THIS COMMAND ADDS A BUILD PLATFORM TO THE PROJECT. EITHER ANDROID IOS, FIREFOX OS OR WINDOWS PHONE AT THE MOMENT. SOME PLATFORMS ARE STILL IN BETA. 12

$ IONIC BUILD ANDROID THIS COMMAND BUILDS THE APPLICATION. IT CREATES A FILE CONTAINING ALL THE SETTINGS AND BINARIES OF THE APPLICATION THESE ARE THEN COMBINED IN A FILE TOGETHER WITH THE UNCOMPRESSED SOURCE FILES. THIS PACKAGE THEN GETS SIGNED IN EITHER A RELEASE OR A DEBUG MODE. FIGURE 9 ANDROID APK STRUCTURE $ IONIC RUN ANDROID IF A SMARTPHONE IS CONNECTED TO THE WORKSTATION THAT HAS DEBUG MODE ENABLED AND THE CORRESPONDING OPERATING SYSTEM IS RUNNING. THEN THE APPLICATION WILL BE ABLE TO RUN ON THE PHONE. IONIC WILL USE CORDOVA TO AUTOMATICALLY DEPLOY THE APPLICATION. $ IONIC EMULATE ANDROID IF AN EMULATOR IS CONFIGURED ON THE WORKSTATION THIS COMMAND WILL START UP THE EMULATOR. THIS COMMAND IS THE EQUIVALENT TO RUNNING THE $ IONIC RUN COMMAND WITHOUT HAVING A SMARTPHONE ATTACHED. TO BE ABLE TO RUN THE APP ON MOBILE DEVICES IT IS NECESSARY TO HAVE THE SDK FOR EACH PLATFORM THAT IS BEING BUILT FOR. IT IS ALSO REQUIRED TO CONFIGURE THE CORRECT SYSTEM VARIABLES. WHEN BUILDING FOR IOS DEVICES AN APPLE DEVELOPERS LICENSE IS REQUIRED THUS IT IS ALSO REQUIRED TO HAVE A MAC DEVICE. BETA THRIFTY HAS BUILT AN IONIC PLATFORM TO WHICH AN APPLICATION CAN BE UPLOADED. THROUGH THIS PLATFORM IT IS POSSIBLE TO SHARE THE BETA OF THE APPLICATION TO ACCUMULATE FEEDBACK. THE PLATFORM IS ACCESSIBLE BY GOING TO THE APPLICATIONS MAIN FOLDER AND ENTERING THE FOLLOWING COMMAND. $ IONIC UPLOAD CREDENTIALS WILL BE REQUIRED AFTER WHICH THE APPLICATION WILL BE HOSTED ON IONIC SERVERS. FIGURE 10 IONIC PLATFORM BETA 13

TECHNOLOGIES USED IN IONIC ANGULAR.JS ANGULAR IS A FRONTEND MODEL VIEW CONTROLLER FRAMEWORK (MVC) DEVELOPED BY GOOGLE TO CREATE DYNAMIC SINGLE PAGE APPLICATIONS. THE FOCUS IS MAINLY ON THE DEVELOPMENT OF CREATE READ UPDATE AND DELETE (CRUD) APPLICATIONS. ORIGINALLY RELEASED IN 2009 ANGULAR HAS KNOWN A RISE IN POPULARITY AND IS GAINING A SLOW GROWTH. MONTH 2014 1 APR 2014 1 MAY 2014 1 JUN 2014 1 JUL 2014 1 AUG 2014 1 SEP 2014 1 OCT 2014 1 NOV 2014 1 DEC 2015 1 JAN 2015 1 FEB 2015 1 MAR 2015 1 APR 2015 5 APR NONE 37.7% 37.3% 36.8% 36.3% 35.9% 35.9% 35.9% 35.6% 35.2% 35.0% 34.6% 34.3% 33.6% 33.5% JQUERY 58.2% 58.7% 59.3% 59.9% 60.3% 60.4% 60.5% 60.7% 61.1% 61.5% 61.9% 62.4% 63.1% 63.1% MODERNIZER 5.1% 5.4% 5.6% 5.9% 6.2% 6.4% 6.6% 6.8% 7.0% 7.2% 7.4% 7.6% 7.9% 7.9% BOOTSTRAP 5.2% 5.6% 5.9% 6.1% 6.4% 6.8% 6.9% MOOTOOLS 4.8% 4.8% 4.7% 4.6% 4.6% 4.6% 4.5% 4.4% 4.4% 4.3% 4.3% 4.2% 4.2% 4.2% PROTOTYPE 2.6% 2.6% 2.6% 2.6% 2.5% 2.5% 2.5% 2.4% 2.4% 2.4% 2.4% 2.3% 2.3% 2.3% ASP.NET AJAX 2.3% 2.2% 2.2% 2.2% 2.2% 2.2% 2.2% 2.2% 2.2% 2.2% 2.2% 2.2% 2.2% 2.2% SCRIPT.ACULO.US 2.1% 2.1% 2.0% 2.0% 2.0% 2.0% 2.0% 2.0% 1.9% 1.9% 1.9% 1.9% 1.9% 1.9% YUI LIBRARY 0.8% 0.8% 0.8% 0.8% 0.7% 0.7% 0.7% 0.7% 0.7% 0.7% 0.7% 0.7% 0.7% 0.7% SHADOWBOX 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% SPRY 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.5% 0.4% 0.4% 0.4% 0.4% 0.4% 0.4% UNDERSCORE 0.1% 0.2% 0.2% 0.2% 0.2% 0.2% 0.2% 0.2% 0.2% 0.2% 0.2% 0.2% 0.2% 0.3% ANGULARJS 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.2% 0.2% 0.2% 0.2% DOJO 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% BACKBONE 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% EXT JS 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% KNOCKOUT <0.1% <0.1% <0.1% <0.1% <0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% 0.1% TABLE 1 JAVASCRIPT FRAMEWORKS 14

BENEFITS OF ANGULAR.JS ANGULAR HAS SEVERAL GREAT PROPERTIES, THAT WHEN COMBINED FORM AN IDEAL BACKBONE FOR A HYBRID APPLICATION. IT S ALSO IMPORTANT TO NOTE THAT ANGULAR COMPRISES COMPLETELY OUT OF JAVASCRIPT CODE, SO NO ADDITIONAL METHODS OF COMPILATION ARE REQUIRED TO HANDLE ANGULAR BESIDES A JAVASCRIPT ENGINE. REUSABLE CODE WHEN USING THE MVC PATTERN THERE IS A CLEAR SEPARATION OF CONCERNS. THIS ALLOWS THE DEVELOPER TO REUSE THE BUSINESS LOGIC REGARDLESS OF WHICH MOBILE PLATFORM THAT IS BEING BUILT FOR AND TO CHANGE THE USER INTERFACE FOR EACH SPECIFIC PLATFORM. THIS SAVES A CONSIDERABLE AMOUNT OF TIME WHEN DEVELOPING. FOR EXAMPLE WHEN RECEIVING DATA FROM A RESTFUL SERVICE AND OUTPUTTING IT TO A LIST. THE CALL TO RETRIEVE THE DATA WILL BE THE SAME ON EACH PLATFORM, THE DATA IS THEN PASSED ON TO THE VIEW (USER INTERFACE) WHICH CAN DISPLAY THE DATA IN A DIFFERENT MANNER FOR IOS OR ANDROID. TWO WAY BINDING IN ANGULAR IT IS POSSIBLE TO DEPICT THE CONTENT OF A MODEL IN THE VIEW. THERE IS A DIRECT CONNECTION BETWEEN THE CONTROLLER AND THE VIEW. THIS MEANS THAT WHEN THE VALUE OF THE MODEL IS CHANGED IN THE BACKGROUND THE VALUE WILL BE CHANGED IN THE VIEW WITHOUT THE DEVELOPER HAVING TO CODE THIS PROCESS. IN ORDER FOR TWO WAY BINDING TO WORK, THE MODEL AND THE VIEW NEED TO SHARE A COMMON CONTROLLER. FIGURE 11 ANGULAR.JS TWO-WAY BINDING VIEW <body data-ng-app= demoapp > <div data-ng-controller="howestcontroller as howest" <input type="text" data-ng-model="age" /> Reference to the model <h3>{{ age }}</h3> </div> </body> CONTROLLER VAR DEMOAPP = ANGULAR.MODULE( DEMOAPP,[]); DEMOAPP.CONTROLLER( HOWESTCONTROLLER, FUNCTION ( $SCOPE ) { $SCOPE.AGE = 21 ; }); THE SCOPE DEPENDENCY ACTS AS MODEL. 15

HOW BINDING WORKS IN THE BACKGROUND ANGULAR KEEPS A COPY OF ALL ITS SCOPE VARIABLES, THIS IS CALLED THE $WATCH LIST, WHEN A VALUE CHANGES AN EVENT IS TRIGGER WHICH CHECKS IF THE NEW VALUE MATCHES THE STORED VALUE. IF THE VALUE IS DIFFERENT THAN THE NEW VALUE IS ADDED TO THE $EVALASYNC QUEUE. THE $EVALASYNC QUEUE CONTAINS ALL THE NEW VALUES THAT NEED TO BE UPDATED IN EITHER THE VIEW OR THE MODEL. ANGULAR WILL CONTINUE AND CHECK ALL ITS SCOPE VARIABLES UNTIL NO MORE CHANGES ARE DETECTED. AFTER WHICH IT WILL SYNCHRONIZE THE MODELS AND THE VIEWS UNTIL ALL VALUES ARE UPDATED WITH THE NEW CONTENT AND THE $EVALASYNC QUEUE IS EMPTY. THIS PROCESS IS CALLED THE DIGEST LOOP. THIS METHOD IS NOT UNIQUE TO ANGULAR IT IS COMMONLY REFERRED TO AS THE DIRTY CHECKING METHOD. HOW ANGULAR WORKS WITHIN BROWSERS JAVASCRIPT IS SINGLE THREADED, THE JAVASCRIPT ENGINE IN THE BROWSER HAS AN EVENT LOOP THAT CONTINUALLY CHECKS THE EVENT QUEUE TO CHECK WHICH EVENTS HAVE BEEN TRIGGERED. WHEN HANDLING THE EVENTS IN THE EVENT QUEUE THEIR CORRESPONDING CALLBACK IS TRIGGERED AND THE DOCUMENT OBJECT MODEL IS ACCESSIBLE. AFTER HANDLING ALL THE CALLBACKS IN THE EVENT LOOP THE BROWSER RENDERS THE VIEW AND DOES THE NECESSARY ADJUSTMENTS. ANGULAR MAKES AN ADJUSTMENT TO THIS PROCESS BY INTRODUCING ITS OWN EVENT LOOP FIGURE 12 ANGULAR EVENTLOOP THAT RUNS WITHIN THE ANGULAR MODULE. ONLY EVENTS THAT ARE TRIGGERED WITHIN THIS EVENT LOOP ARE ABLE TO USE THE TWO WAY BINDING. DEPENDENCY INJECTION THE FOLLOWING PART ABOUT DEPENDENCY INJECTION REQUIRES BASIC ANGULAR KNOWLEDGE. FOR ADDITIONAL INFORMATION ABOUT ANGULAR SEE: HTTPS://ANGULARJS.ORG/ DEPENDENCY INJECTION IS A SOFTWARE DESIGN PATTERN THAT MAKES SURE COMPONENTS CAN GET TO THEIR DEPENDENCIES WITHOUT HAVING TO KNOW WHERE THEIR DEPENDENCIES ARE OR HAVING TO CREATE INSTANCES OF THE DEPENDENCY THEMSELVES. THE DEPENDENCY, COMMONLY REFERRED TO AS SERVICE (NOT TO BE MISTAKEN WITH ANGULAR SERVICES BUT THEY CAN BE ANGULAR SERVICES) MUST BE INJECTED INTO THE DEPENDENT OBJECT (CLIENT) IN ANGULAR THIS IS USUALLY A MODULE OR A CONTROLLER. THE CREATION OF THIS INSTANCE IS NOT DONE BY THE CLIENT BUT IS DONE BY $INJECTOR. $INJECTOR IS AN ANGULAR COMPONENT THAT HANDLES THE RETRIEVAL OF DEPENDENCIES AND CREATING THE INSTANCES THAT WILL BE INJECTED IN THE CLIENT MODULE. 16

Service creators Service Factory Provider Value Constant Angular $injector Client Controller Directive Filter THE DEPENDENCY MUST BE INJECTED IN THE CONSTRUCTOR OF THE MODULE, ANGULAR DOES THIS THROUGH THE ARRAY NOTATION. APP.CONTROLLER( TESTCONTROLLER, ['$SCOPE', 'MYFACTORY', FUNCTION($SCOPE, MYFACTORY) { CONTROLLER CONTENT }]); BEFORE A DEPENDENCY CAN BE USED IT NEEDS TO BE DEFINED IN THE ANGULAR MAIN MODULE. VAR APP = ANGULAR.MODULE('MYMODULE', []); APP.FACTORY( MYFACTORY, FUNCTION() { VAR NEWINSTANCE; FACTORY FUNCTIONALITY HERE RETURN NEWINSTANTCE; }); THERE ARE TWO SCENARIOS WHEN A DEPENDENCY IS REQUIRED. WHEN A COMPONENT THAT HAS DEPENDENCIES IS CALLED, THE $INJECTOR WILL LOOK FOR THE SERVICE IT REQUIRES IN THE SERVICE INSTANCES CACHE OF ANGULAR. IF THERE IS NO INSTANCE OF THE SERVICE IN THE INSTANCES CACHE THE $INJECTOR IS GOING TO LOOK FOR THE CORRESPONDING PROVIDER BY ADDING THE PROVIDER SUFFIX TO THE DEPENDENCY NAME AND THEN GOING THROUGH ITS PROVIDER LIST. WHEN THE PROVIDER IS FOUND THE $GET METHOD OF THE PROVIDER IS CALLED AND AN INSTANCE OF THE SERVICE WILL BE RETURNED TO THE $INJECTOR. NOW THE $INJECTOR PUTS THE INSTANCE IN THE INSTANCES CACHE AND THEN RETURNS IT TO THE COMPONENT THAT IS DEPENDENT ON THIS SERVICE. WHEN DEFINING A SERVICE IN ANGULAR IT WILL CREATE THE CORRESPONDING PROVIDERS. IT IS POSSIBLE TO CREATE A CUSTOM PROVIDER BUT THIS IS USUALLY ONLY DONE WHEN APPLYING SETTINGS TO A SERVICE WHEN ANGULAR IS RUNNING ITS CONFIGURATION MODULE. SETTINGS NEED TO BE APPLIED TO CUSTOM SERVICE THROUGH THEIR CORRESPONDING PROVIDERS. THIS IS DUE TO THE FACT THAT THE CUSTOM SERVICES DO NOT EXIST YET WHEN ANGULAR IS RUNNING ITS CONFIGURATION MODULE, BUT THE PROVIDERS DO. 17

.controller("mycontroller",['$scope','myservice',function($scope,myservice){}]); $injector ServicesCache ProviderCache FIGURE 13 ANGULAR.JS DEPENDENCY INJECTION ANGULAR COMPONENTS ANGULAR COMPONENTS ARE THE BUILDING BLOCKS OF THE APPLICATION THEY CONTAIN THE BUSINESS LOGIC AND THE STRUCTURE THAT NEEDS TO BE DEFINED FOR THE APPLICATION. THERE ARE TWO GROUPS OF COMPONENTS, THE INJECTABLE AND THE NON-INJECTABLE. THE INJECTABLE ARE THE COMPONENTS THAT CAN BE INJECTED INTO OTHER COMPONENTS (IN OTHER TERMS THEY CAN BE THE DEPENDENCY) THE NON-INJECTABLE COMPONENTS CAN HAVE DEPENDENCIES BUT CANNOT BE INJECTED THEMSELVES. NON-INJECTABLE DIRECTIVES DIRECTIVES ARE A MARKER IN THE DOCUMENT OBJECT MODEL THROUGH A CUSTOM ELEMENT NAME OR ATTRIBUTE. THESE MARKERS TELL ANGULAR THAT A SPECIFIED FUNCTIONALITY NEEDS TO BE COUPLED TO THIS ELEMENT AND ITS CHILDREN OR THAT THE ELEMENT NEEDS TO BE CHANGED IN A CERTAIN MANNER. ANGULAR OFFERS A WIDE RANGE OF DIRECTIVES FOR THE MOST COMMON SITUATIONS FOR EXAMPLE A LIST. IN ADDITION TO THESE PREDEFINED DIRECTIVES IT IS POSSIBLE TO CREATE CUSTOM DIRECTIVES. FIGURE 14 CUSTOM DIRECTIVES IN ANGULAR.JS 18

CONTROLLERS THE CONTROLLER IS AN OBJECT THAT IS BOUND TO AN ELEMENT IN THE DOCUMENT OBJECT MODEL THROUGH THE NG-CONTROLLER DIRECTIVE. IN THE CONTROLLER A SCOPE OBJECT IS INJECTED AS AN ANGULAR SERVICE. THIS SCOPE OBJECT IS CONNECTED TO THE VIEW THROUGH THE CONTROLLER AND CAUSES THE TWO WAY BINDING. THE CONTROLLERS CONTAIN MOST OF THE BUSINESS LOGIC FOR THE APPLICATION. FILTERS FILTERS CAN BE USED IN VIEWS AND CONTROLLERS TO FILTER DATA OUT OF COLLECTIONS AND OR RETURN DATA IN A PREDEFINED FORMAT. <div ng-controller="mycontroller"> <input ng-model="greeting" type="text"><br> No filter: {{greeting}}<br> Reverse: {{greeting reverse}}<br> Reverse + uppercase: {{greeting reverse:true}}<br> </div> HTTPS://DOCS.ANGULARJS.ORG/GUIDE/FILTER INJECTABLE SERVICE A SERVICE IS A SINGLETON THAT IN OTHER WORDS IT CAN ONLY BE ONE INSTANCE OF ITSELF THAT REMEMBERS THE STATE OF THE SERVICE. THIS MAKES SERVICES IDEAL TO EXCHANGE DATA BETWEEN ANGULAR COMPONENTS. A SERVICE IS DEFINED IN ANGULAR AND THE INSTANCE IS CREATED BY THE $GET METHOD OF THE CORRESPONDING PROVIDER. ANGULAR.MODULE( APP ).SERVICE( USER,FUNCTION USER($HTTP){ THIS.NAME = BART ; } FACTORY A FACTORY IS A SIMPLIFIED WAY OF CREATING A PROVIDER. A FACTORY HAS THE ADDED BENEFIT OF BEING ABLE TO GET INJECTED WITH OTHER COMPONENTS WHILE A PROVIDER CAN ONLY BE INJECTED WITH OTHER PROVIDERS. ANGULAR.MODULE( APP ).FACTORY( USER,FUNCTION($HTTP){ RETURN{ NAME: BART }; } VALUE VALUES ARE AS THE NAME IMPLIES A VALUE THAT CAN BE INJECTED INTO COMPONENTS. THEY RETURN A PREDEFINED VALUE TO THE CLIENT. VALUES CANNOT HAVE DEPENDENCIES THEMSELVES. IF A VALUE IS DEFINED MULTIPLE TIMES, ITS CONTENT WILL BE OVERWRITTEN WITH THE LAST VALUE PROVIDED. CONSTANT A CONSTANT IS THE SAME AS THE VALUE COMPONENT BUT THE VALUE IT CONTAINS IS CONSTANT THIS MEANS THAT WHEN IT IS DEFINED MULTIPLE TIMES ANGULAR WILL THROW AN ERROR. ANGULAR.MODULE( APP ).CONSTANT( NAME, BART ).CONTROLLER( CTRL,FUNCTION(NAME){ CONSOLE.LOG(NAME);} 19

UI-ROUTER ANGULAR HAS A BUILD IN MODULE NGROUTE THAT HANDLES ROUTING BETWEEN THE MODULES. IONIC HAS CHOSEN TO IMPLEMENT A THIRD PARTY ROUTING SYSTEM CALLED UI-ROUTER. UI-ROUTER OFFERS ALL THE FUNCTIONALITY THAT NGROUTE HAS BUT HAS SEVERAL ADDITIONAL FEATURES. Nested views Multiple names for one view Strong-type linking (updates the name throughout the project when the route has changed when using the ui-sref directive) Passing information between states through the $stateparams dependency EXAMPLE:.state ('app', { url: "/app", <- Browser URL abstract: true, templateurl: "templates/settings/menu.html", controller: "MenuController" }).state ('app.home', { url: "/dashboard", views: { "menucontent": { templateurl: "templates/home/dashboard.html", controller: "HomeController" } } }) IN THE EXAMPLE THE APP STATE IS DEFINED WITH THE HOME STATE NESTED IN IT. IN THE TEMPLATE URL THE APP STATE CONTAINS THE MENU. THIS MEANS THAT THE NESTED STATE HAS ACCESS TO THE MENU IN ITS VIEW. 20

SASS SYNTACTICALLY AWESOME STYLE SHEETS IS A SCRIPTING LANGUAGE THAT ORIGINATED ANNO 2007 AND WAS DESIGNED BY HAMPTON CATLIN. WHEN USING SASS THE SCRIPT WILL BE CONVERTED TO A CASCADING STYLE SHEET WITH RUBY AS AN INTERPRETER. THIS WAY OF WORKING IS CALLED A PREPROCESSOR. THERE ARE TWO KINDS OF SYNTAX WHEN WRITING SASS SASS THIS IS THE ORIGINAL SYNTAX, IT USES LINE INDENTATIONS TO SEPARATE CODE BLOCKS. $MYCOLOR: #F0F BODY BACKGROUND-COLOR: GREEN SCSS THIS SYNTAX IS MORE SIMILAR TO CSS $MYCOLOR: #F0F; BODY { BACKGROUND-COLOR : GREEN; } REASONS FOR USING A CSS PREPROCESSORS WHEN COMPARING CSS TO SASS ONE OF THE NOTICEABLE THINGS ARE THE ADDITIONAL FEATURE THE LANGUAGES HAS. FOR EXAMPLE THE USE OF Variables o $mycolor:#faf; Nesting o.myclass{ li{color:purple;} } Importing o @import other The other Scss file will be loaded into the current one. THESE ARE JUST A FEW FEATURES OF WHAT SASS OFFERS, SASS ALSO HAS THE BENEFIT OF KEEPING THE CODE MORE MANAGEABLE AND SAVING TIME WHEN DEVELOPING. THE USE OF SASS IN IONIC ONCE IONIC IS INSTALLED THROUGH NPM THE COMMAND $IONIC SETUP SASS IS AVAILABLE. THIS WILL INSTALL THE SASS PREPROCESSOR IN THE CODE EDITOR AND ADD A LISTENER TO THE PROJECT. THE LISTENER WILL CHECK FOR CHANGES IN THE SCRIPT AND WILL COMPILE THESE CHANGES TO CSS WHENEVER THE PROJECT IS SAVED. WHEN USING THE $IONIC SERVE COMMAND IT WILL ALSO UPDATE THE LIVE VIEW WHEN A SASS CHANGE HAS BEEN MADE. THE CSS FILE THAT SASS OUTPUTS NEEDS TO BE INCLUDED IN THE INDEX.HTML FILE. IT WILL AUTOMATICALLY BE ADJUSTED SO THERE S NO NEED TO MAKE ANY CHANGES AFTERWARDS. 21

CORDOVA CORDOVA BUILDS AN APPLICATION CONTAINER THAT HOLDS A NATIVE WEBVIEW FOR THE OS THE APP IS TARGETING. NEXT TO THE WEBVIEW COMPONENT IT ALSO CONTAINS AN API THAT HANDLES INTERACTION BETWEEN THE HYBRID APPLICATION AND THE NATIVE FUNCTIONS OF THE DEVICE. CORDOVA IS USED IN COMBINATION WITH UI FRAMEWORKS LIKE IONIC AND IS COMPILED TO AN APPLICATION USING THE SPECIFIC PLATFORMS SDK. THE SUPPORTED PLATFORMS ARE: Android ios Blackberry Windows Phone Palm WebOS Bada Symbian Tizen CORDOVA INNER WORKINGS CORDOVA TAKES INTO ACCOUNT ALL THE DIFFERENCES IN RENDERING SYSTEMS BETWEEN THE DIFFERENT WEBVIEWS THAT IT SUPPORTS. IT PROVIDES THE APPLICATION WITH AN API THAT IS CONSISTENT IN USAGE. CORDOVA ALLOWS ACCESS THE FOLLOWING FUNCTIONS OF THE DEVICE. Accelerometer File system Push notifications (Messages, Audio, Vibration) GPS Camera Web application Compass Media Contacts Network Storage CORDOVA S BUILD IN API WILL HANDLE THE COMMUNICATION BETWEEN JAVASCRIPT AND NATIVE FUNCTIONS. Cordova JS API THERE S FOUR MAIN COMPONENTS THAT COME INTO PLAY WHEN USING CORDOVA. 1 ST THERE S THE WEBVIEW THAT S NATIVE TO THE MOBILE OPERATING SYSTEM. Windows Phone WebViewClass Android android.webkit.webview ios UIWebview Class 2 ND THERE S THE JAVASCRIPT TO NATIVE BRIDGE. THIS WILL ALLOW THE HYBRID APPLICATION TO SEND REQUESTS TO THE NATIVE PLATFORM. Cordova Native API 3 RD THERE S THE NATIVE TO JAVASCRIPT BRIDGE. THIS ALLOWS THE NATIVE COMPONENTS TO SEND BACK INFORMATION TO THE HYBRID APPLICATION. 4 TH THERE S THE NATIVE SYSTEM WHICH HAS ALL THE HARDWARE COMPONENTS THE APPLICATION NEEDS TO ACCESS. Windows Phone SDK Android SDK ios SDK ALTHOUGH PROVIDING A CONSISTENT API TOWARDS THE DEVELOPER, CORDOVA HAS A DIVERSE WAY OF HANDLING JAVASCRIPT TO NATIVE INTERACTIONS UNDER THE HOOD. FIGURE 15 CORDOVA FLOW 22

THIS IS A SIMPLIFIED EXPLANATION AS TO WHAT HAPPENS WHEN THE HYBRID APPLICATION INTERACTS WITH THE NATIVE OPERATING SYSTEM. ANDROID THE JAVASCRIPT TO NATIVE BRIDGE SENDS ITS DATA THROUGH THE JAVASCRIPT PROMPT FROM THE HTML5 APPLICATION TO THE WEBVIEW. THE WEBVIEW HAS BUILT IN FUNCTIONS TO HANDLE THESE COMMANDS. DEPENDING ON THE CALL THAT HAS BEEN MADE TO THE WEBVIEW IT WILL RESPOND BY CALLING THE CORRESPONDING FUNCTIONALITY (ACCELEROMETER, GPS ). IN THE NATIVE TO JAVASCRIPT BRIDGE, THE JAVASCRIPT KEEPS POLLING THE NATIVE SITE EVERY 50MILLISECONS TO SEE IF THERE IS A RESPONSE. THE OTHER WAY IS THAT THE XHR BRIDGE. IN THIS CASE A SMALL SERVER IS RUN LOCALLY AND RESPONDS TO XHR REQUESTS THAT COME IN. IOS THE JAVASCRIPT TO NATIVE BRIDGE SENDS ITS DATA THROUGH AN IFRAME, THE CALLS ARE STORED AND EXECUTED BY THE NATIVE COMPONENT ONE BY ONE. THE OTHER WAY OF DOING THIS IS BY SENDING XHR REQUESTS TO NON-EXISTING URL S WITH THE COMMANDS IN THE HEADER OF THE REQUEST. UPON RECEIVING THE REQUEST THE NATIVE COMPONENT WILL CHECK THE HEADER RETRIEVE THE COMMAND, SERIALIZE AND RUN IT. FOR THE NATIVE TO JAVASCRIPT BRIDGE IOS USES THE UIWEBVIEW METHOD STRINGBYEVALUATINGJAVASCRIPTFROMSTRING. THIS WILL EVALUATE THE JAVASCRIPT CODE THAT S IN THE STRING, RUN IT AND RETURN THE RESULT. THE FLOW FIGURE 16 JAVASCRIPT TO NATIVE BRIDGE IN MOST CASES THE JAVASCRIPT TO NATIVE BRIDGE WILL END UP LOOKING LIKE THIS. THE WEBVIEW COMPONENT RECEIVES A COMMAND FROM THE APPLICATION AND IN TURN MAKES A CALL TO THE NATIVE SYSTEM REQUESTING TO ADDRESS A SPECIFIC COMPONENT. IN THE MEANTIME WEBVIEW AWAITS THE RESPONSE FROM THE SYSTEM AND IN TURN PROVIDES THE APPLICATION WITH THE REQUESTED DATA. 23

CONCLUSION IONIC MAKES USE OF SEVERAL WELL-KNOWN TECHNOLOGIES TO PROVIDE A BROAD RANGE OF FUNCTIONALITY TO THE DEVELOPER AS ONE PACKAGE. IT FORMS A FRAMEWORK THAT IS UP TO DATE WITH THE LATEST EVOLUTIONS IN HYBRID APPLICATIONS AND WILL CONTINUE TO EVOLVE DESPITE HAVING A LARGE DEPENDENCY ON THIRD PARTY TECHNOLOGIES. THE NEXT MAJOR STEP FOR IONIC WILL BE THE IMPLEMENTATION OF ANGULAR2.0 WHICH INCLUDES SIGNIFICANT CHANGES IN STRUCTURE (REMOVAL OF CONTROLLERS, $SCOPE...) AND PROVIDING THE PERFORMANCE THAT MAKES HYBRID APPLICATIONS AN ACCEPTABLE ALTERNATIVE TO NATIVE APPLICATIONS. 24

DEVELOPING IN A DIFFERENT CONTEXT SOUTH-AFRICA CAPITAL LANGUAGE POPULATION AREA GOVERNMENT GDP (2014) FLAG PRETORIA ENGLISH, AFRIKAANS, NDEBELE, SOTHO, SWAZI, TSONGA, TSWANA, VENDA, XHOSA, ZULU ±54MILLION 1,221,037 KM² CONSTITUTIONAL PARLIAMENTARY REPUBLIC $341.216 BILLION FIGURE 17 MAP SOUTH AFRICA MOBILE MARKET DUE TO THE LACK OF STABLE AND SUFFICIENT INTERNET ACCESS OVER LANDLINES MOBILE NETWORKS GAINED A SIGNIFICANT IMPORTANCE THROUGHOUT THE COUNTRY. THE SOUTH AFRICAN MOBILE REPORT DONE BY IAB AND EFFECTIVE MEASURE SHOWS WHAT ROLE MOBILE PLAYS WITHIN THE SOUTH AFRICAN CONTEXT. USE OF SMARTPHONES 80.2% OF INTERNET USERS ACCESS THE INTERNET WITH THEIR MOBILE PHONE ABOUT TWO THIRD OF THESE MOBILE USERS (65.4%) HAVE A MONTHLY SUBSCRIPTION. AND ANOTHER TWO THIRD (65.7%) OF THE TOTAL MOBILE INTERNET CONSUMERS MAKE USE OF A DATA PLAN. AMOUNT OF MOBILE DATA AND MARKET SHARE OF MOBILE DATA PROVIDERS 30,00% 25,00% 20,00% 15,00% 10,00% 5,00% 0,00% Volume of data consumption per month amongst the mobile internet users. 55,00% 45,00% 35,00% 25,00% 15,00% 5,00% -5,00% Market share of mobile data providers. Amount of data usage per month Market share of mobile data providers. FIGURE 19 DATA CONSUMPTION FIGURE 18 MARKET SHARE OF MOBILE PROVIDERS 25

USE CASE UDUBS-IT THE UDUBS-IT PROJECT IS WHERE HYBRID APPLICATIONS COME TOGETHER WITH MY INTERNSHIP AT THE UNIVERSITY OF THE WESTERN CAPE. IT WAS MY PROJECT TO DEVELOP THE APPLICATION AND DELIVER A WORKING BETA VERSION BY THE END OF MY STAY. AFTER WHICH DEVELOPMENT WAS HANDED OVER TO LOCAL DEVELOPERS. PROJECT UDUBS-IT IS A COMMUNITY APP TARGETED TOWARDS THE STUDENT COMMUNITY OF THE UNIVERSITY OF THE WESTERN CAPE (±23000 STUDENTS). THE MAIN GOAL IS TO PROVIDE STUDENTS WITH A PLATFORM TO HELP THEM MANAGE EVENTS, COMMUNICATE AND FIND THEIR WAY AROUND CAMPUS IN A MORE ORGANIZED WAY. THE APPLICATION HAS FOUR MAIN FUNCTIONS EVENTS THE STUDENTS ARE ABLE TO POST AN EVENT THROUGH THE APP. THE STUDENTS CAN CHOOSE TO NOTIFY WHETHER OR NOT THEY WILL ATTEND. SHOUT OUTS A SHOUT OUT IS A SMALL MESSAGE THAT SOMEONE CAN BROADCAST TO THE OTHER USERS. FOR EXAMPLE, I LEFT MY JACKET AT THE MAIN SQUARE. THEY ARE LIMITED IN TIME AND LOCATION AND WILL PROVIDE THE STUDENTS WITH ALL KINDS OF INFORMATION ABOUT THE DAILY CAMPUS HAPPENINGS. ADVERTISEMENTS WHEN A STUDENT HAS SOMETHING TO SELL, FROM BOOKS TO A BIKE, THEY ARE ABLE TO POST THESE THINGS IN THE ADVERTISEMENT SECTION. POINTS OF INTEREST THIS SECTION CONTAINS A LIST OF ALL CAMPUS BUILDINGS AND FACILITIES THROUGH WHICH THEY CAN SEARCH AND REQUEST NAVIGATION. THE CAMPUS IS QUITE A LARGE AREA AND OFTEN STUDENTS (ESPECIALLY FIRST YEAR STUDENTS) CAN T FIND CERTAIN DEPARTMENTS OR INFRASTRUCTURE. THIS SECTION IS MEANT TO HELP THEM NAVIGATE ON CAMPUS. THEY WILL ALSO BE ABLE TO SUBMIT THEIR OWN MEETING PLACES WHOM ARE THEN REVIEWED AND ADDED TO THE MAP, SO THAT THE MAP STAYS UP TO DATE ACCORDING TO CAMPUS LIFE. ALL THE FUNCTIONALITY PROVIDED IS CAMPUS AND LOCATION BASED. ACCESS TO THE APPLICATION IS ONLY POSSIBLE WITH AN E-MAIL ADDRESS PROVIDED BY THE INSTITUTION (EXAMPLE@MYUWC.AC.ZA). ALL THE CONTENT IS COUPLED TO THE STUDENTS E-MAIL ADDRESS TO PREVENT ANONYMOUS CONTENT. LOGIN IS PROVIDED WITH THE GOOGLE AUTHENTICATION API. IN THE FUTURE A WEB PLATFORM IS GOING TO BE DEVELOPED SO THAT STUDENTS WILL BE ABLE TO ACCESS IT THROUGH THE WEB. THIS CAN BE DONE WITH SOME ADJUSTMENTS TO THE IONIC PROJECT REGARDING LOGIN AND CORDOVA FEATURES. 26

PROJECT HISTORY THE PROJECT UDUBS-IT ORIGINATED AS A RESEARCH PROJECT BETWEEN THE UNIVERSITY OF GHENT AND THE UNIVERSITY OF THE WESTERN CAPE TO SEE HOW THEY CAN BUILD A MORE INVOLVED STUDENT COMMUNITY. THE RESEARCH HAS BEEN DONE BY BOTH PARTIES INVOLVED AND THE APPLICATION HAS KNOWN SMALL ITERATIONS OVER SEVERAL DEPARTMENTS OF THE INSTITUTIONS. THE UNIVERSITY OF THE WESTERN CAPE DECIDED TOGETHER WITH THE UNIVERSITY OF GHENT OUTSOURCED THE DEVELOPMENT OF THE APPLICATION TO AN INDIAN BASED COMPANY NAMED CDN SOLUTIONS. THIS COMPANY PROVIDED THEM WITH AN ANDROID APPLICATION THAT WAS NOT PRODUCTION READY. AFTER RECEIVING THE APPLICATION FROM CDN, THE UNIVERSITY OF THE WESTERN CAPE DECIDED TO PRESERVE THE BACKEND OF THE APPLICATION WHERE POSSIBLE AND TO REDEVELOP THE APPLICATION ITSELF AS A HYBRID APPLICATION. THE MAIN REASON BEHIND THIS CHOICE IS THE LACK OF FUNDS TO DEVELOP FOR ALL PLATFORMS NATIVELY AND THE FACT THAT ONLY ONE THIRD OF THE STUDENTS USE ANDROID ON THEIR DEVICES. A HYBRID APPLICATION ALLOWS THEM TO DEVELOP FOR MULTIPLE PLATFORMS AT ONE TIME. THE STATE OF UDUBS-IT THE APPLICATION IS UNDER DEVELOPMENT AND WILL HAVE A BETA VERSION BY THE END OF JUNE 2015. IT IS A HYBRID APPLICATION THAT USES IONIC AS UI FRAMEWORK. THE BACKEND IS WRITTEN IN PHP USING THE CODE IGNITE FRAMEWORK WHICH IN TURN USES THE MVC DESIGN PATTERN. USAGE THERE ARE THREE MAIN ROLES WHEN INTERACTING WITH THE SYSTEM. HYBRID APPLICATION THE STUDENTS WILL PROVIDE THE SYSTEM WITH CONTENT AND USE IT FOR GENERAL PURPOSES. ADMIN PANEL ADMINS AND SUB ADMINS WILL MONITOR THE PLATFORM TO PREVENT UNWANTED CONTENT. THEY WILL ALSO BE THE ONES THAT CREATE THE GROUPS FOR EACH DEPARTMENT. THEY GAIN ACCESS TO THE APPLICATION THROUGH A WEB PANEL. WEB PLATFORM SOME STUDENTS MIGHT NOT HAVE ONE OF THE SUPPORTED DEVICES. TO MAKE SURE THEY HAVE ACCESS TO THE PLATFORM, THERE WILL BE A WEB APPLICATION OFFERING THE SAME CONTENT. MySQL PHP backend REST service Admin panel Web platform Hybrid application FIGURE 20 UDUBS-IT MAIN STRUCTURE 27

COMPONENTS REST service Angular.js Connection to MySQL database Provides URL's to access the data Two way binding between the controllers and the views Makes the calls to the REST service Provides services to route the data internally Ionic Themes using Sass Handles touch events and gestures Offers set of directives to display data (optimized for mobile) Webstorm IDE for web development Runs the Ionic toolset using node.js FIGURE 21 MAIN COMPONENTS DURING DEVELOPMENT DEVELOPMENT ENVIRONMENT THE DEVELOPMENT WAS DONE USING WEBSTORM FROM JETBRAINS AS THE IDE. AFTER INSTALLING NODE.JS THE IONIC AND CORDOVA PACKAGES ARE INSTALLED USING THE NODE PACKAGE MANAGER. THE ANDROID SDK NEEDS TO BE INSTALLED AND THE PATH VARIABLES SET. THEN THE IONIC COMMAND LINE IS ABLE TO USE CORDOVA TO COMPILE THE ANDROID APPLICATION. WHEN DEVELOPING FOR IOS AN APPLE DEVELOPERS LICENSE IS NEEDED AND XCODE SHOULD BE SET UP ON A MAC DEVICE. WHEN DEVELOPING WITH IONIC THE WEB BROWSER CAN BE USED TO RUN THE APPLICATION. TAKE INTO ACCOUNT THAT FUNCTIONALITY WHICH REQUIRES NGCORDOVA WILL NOT WORK FROM THE BROWSER. WHEN RUNNING THE APPLICATION IN THE BROWSER THE JETBRAINS BROWSER PLUGIN IS REQUIRED AND THE HTTP://*/* PARAMETER NEEDS TO BE SET IN THE OPTIONS. THIS WILL ALLOW CROSS SITE REQUESTS WHEN THE APPLICATION IS RUNNING IN THE BROWSER. THESE REQUESTS (XMLHTTPREQUESTS) ARE NEEDED FOR THE COMMUNICATION FROM THE CONTROLLERS TO THE REST SERVICE. GITHUB IS USED AS VERSION CONTROL FOR THE APPLICATION AND SVN IS USED TO CHECK THE BACKEND OF THE APPLICATION IN BEFORE DEPLOYING TO THE UNIVERSITY SERVERS. TO RUN THE REST SERVICE LOCALLY A SMALL WEBSERVER IS USED FOR EXAMPLE USBWEBSERVER OR XAMP. TO DEBUG THE APPLICATION WHEN IT IS RUNNING IN THE BROWSER THE CHROME DEVELOPER TOOLS ARE USED. WHEN THE APPLICATION IS RUNNING ON THE SMARTPHONE THE CHROME DEVELOPER TOOLS ARE AVAILABLE WHEN NAVIGATING TO CHROME: //INSPECT/#DEVICES. THERE IS A LIST OF ALL CONNECTED DEVICES, AFTER SELECTING THE DEVICE THE DEVELOPER TOOLS FOR THE WEBVIEW ARE AVAILABLE FOR DEBUGGING. 28

UDUBS-IT STRUCTURE FRONTEND THE STRUCTURE OF THE APPLICATION IS DEFINED BY SEVERAL COMPONENTS THE MOST IMPORTANT BEING ANGULAR.JS, NGCORDOVA AND IONIC. THE BACKBONE OF THE APPLICATION IS DEFINED BY ANGULAR.JS. ANGULAR WILL HANDLE ALL THE ROUTING AND DATABINDING OF THE APPLICATION. IONIC PROVIDES A DEFAULT TEMPLATE THAT HAS A BUILD IN MENU WHICH IS OPTIMIZED FOR MOBILE USE. APP.JS IN APP.JS THE ANGULAR MODULE IS DEFINED AND THE CODE TO START THE APPLICATION IS DEFINED. ANGULAR FIRST CREATES THE INJECTOR AND SERVICE COMPONENTS OF THE APPLICATION AND THEN CALLS ITS RUN METHOD TO BOOTSTRAP THE APPLICATION. THE RUN METHOD OF UDUBS-IT DEFINES THE USER OBJECT AND INITIALIZES THE PHONES KEYBOARD. CONTROLLER.JS IN CONTROLLER.JS A CONTROLLER FOR EACH VIEW IS DEFINED. THIS CONTROLLER HANDLES THE XMLHTTPREQUESTS TO GET THE DATA IN JSON FORMAT FROM THE REST SERVICE. THIS DATA IS THEN PROCESSED AND COUPLED TO THE VIEW WITH TWO WAY BINDING THROUGH THE $SCOPE. NGCORDOVA TO GET ACCESS TO THE SMARTPHONES CAPABILITIES THE NGCORDOVA MODULE IS USED. NGCORDOVA IS A COLLECTION OF THE MOST POPULAR CORDOVA API S. THESE HAVE BEEN BUILD USING MODULES THAT MAKE IT EASIER TO USE IN ANGULAR. THE NGCORDOVA MODULE IS INCLUDED IN THE MAIN INDEX PAGE OF THE APPLICATION AND IS POSITIONED BEFORE ANGULAR. FIRST THE NGCORDOVA MODULE IS CREATED AFTER WHICH THE ANGULAR MODULE IS CREATED, THIS WAY NGCORDOVA CAN BE INJECTED INTO ANGULAR AS A DEPENDENCY. ONCE NGCORDOVA IS INJECTED, THE APPLICATION CAN CALL THE SMARTPHONES COMPONENTS BY INJECTING ONE OF THE NGCORDOVA MODULES INTO THE CONTROLLER. SERVICES THE SERVICES ARE DEFINED IN APP.JS AFTER THE.RUN AND.CONFIG, THESE SERVICES TAKE CARE OF DATA STORAGE OR REPETITIVE TASKS. ONCE DEFINED IN APP.JS THEY CAN BE CALLED IN THE CONTROLLERS THROUGH DEPENDENCY INJECTION. THERE ARE TWO MAIN SERVICES IN THE UDUBS-IT APPLICATION. THE FIRST IS THE DATA STORAGE SERVICE. THIS SERVICE HAS TWO FUNCTIONS ONE THAT RECEIVES DATA AND ONE THAT RETURNS DATA. WHEN NAVIGATING THROUGHOUT THE APPLICATION THE CONTROLLERS LOSE THEIR STATE AND ARE REEVALUATED, THIS CAUSES THE DATA TO BE LOST. FOR EXAMPLE WHEN GOING FROM THE LIST OR MAP VIEW OF EVENTS TO THE DETAIL PAGE, THE DATA IS LOST. THE DATA STORAGE SERVICE HOLDS THE DATA WHEN GOING BETWEEN THESE TWO STATES. THE OTHER MAIN SERVICE THAT HAS BEEN WRITTEN IS THE GROUPS AND CATEGORY SERVICE. THE CONTEXT OF THE DATA DEPENDS ON WHICH GROUP THE USER IS PART OF AND WHICH CATEGORY IS POSTED IN. THUS THE CATEGORIES AND GROUPS NEED TO BE RETRIEVED CONSTANTLY. THIS SERVICE HANDLES THE RETRIEVAL AND STORES IT. THIS WAY THE NUMBER OF REQUESTS ARE REDUCED. THE MAIN PRACTICALITY OF SERVICES WITHIN UDUBS-IT LAYS IN THE FACT THAT IT MAKES STATE MANAGEMENT EASY AND PREVENTS US FROM PUTTING DATA IN THE $ROOTSCOPE OF THE APPLICATION. 29

VIEWS THE VIEWS ARE HTML FILES WHICH ARE BOUND TO A CONTROLLER. THIS RELATION IS DEFINED IN APP.JS. IN THE VIEWS THE VISUALIZATION OF THE DATA IS DONE WITH A SET OF ANGULAR DIRECTIVES AND OR CUSTOM DIRECTIVES WHICH ARE INCLUDED IN THE IONIC FRAMEWORK. THESE HAVE BEEN OPTIMIZED FOR MOBILE PLATFORMS. DEVSETTINGS FOR DEVELOPING CONVENIENCE A NAMESPACE HAS BEEN CREATED WHICH CONTAINS ALL THE REST SERVICE URL S AND THE SERVER IP. THIS WAY THE SETTINGS OF THE APPLICATION ARE CENTRALIZED. IONIC HOOKS IN THE HOOKS FOLDER CUSTOM ACTIONS CAN BE DEFINED TO RUN DURING THE CORDOVA BUILD PROCESS. IONIC BY DEFAULT HAS SOME HOOKS FOR BUILDING PURPOSES. 30

BACKEND REST SERVICE THE UDUBS-IT REST SERVICE IS BUILT BY CDN SOLUTIONS USING THE CODE IGNITE PHP FRAMEWORK. WHEN A CALL IS MADE TO THE REST SERVICE A MODULE NAMED LOADOBJECT IS CALLED WHICH IN TURN INITIATES THE REST SERVICE. NEXT THE ACTION AND ACTION METHOD ARE DERIVED FROM THE URL. THE ACTIONS ARE CLASSES WHICH CORRESPONDS TO THE REQUESTED CONTENT LIKE EVENTS OR BROADCASTS, THE ACTION METHODS CONTAIN A SPECIFIC FUNCTIONALITY FOR EXAMPLE UPDATEBROADCAST. THESE ACTION METHODS CONNECT TO THE DATABASE AND RETURN THE RESULTS WHICH IN TURN GET RETURNED TO THE CLIENT IN THE FORM OF JSON. UNIVERSITY OF THE WESTERN CAPE HOSTING THE REST SERVICE WILL BE HOSTED ON SERVERS OF THE UNIVERSITY OF THE WESTERN CAPE. THE HOSTING IS PROVIDED BY THE ICS DEPARTMENT. DURING DEVELOPMENT THE BACKEND NEEDED TO BE CHECKED INTO APACHE SVN (VERSION CONTROL SYSTEM). AFTER CHECKING IN THE CODE MR. FALCONER (HOD) DEPLOYS THE CODE ON THE SERVER. FOR SECURITY AND PERFORMANCE REASONS DEVELOPERS ARE NOT ALLOWED TO HAVE STRAIGHT ACCESS TO UNIVERSITY SYSTEMS. 31

IMPLEMENTATION DURING JUNE 2015 THE INTERNAL CAPACITY FOR THE FURTHER DEVELOPMENT OF THE APPLICATION WAS CREATED AT THE UNIVERSITY OF THE WESTERN CAPE. A TEAM OF STUDENTS FAMILIARIZED THEMSELVES WITH THE APPLICATION AND TESTED AND DEBUGGED THE APPLICATION ACROSS A RANGE OF ANDROID AND IOS DEVICES. THE RESULT OF THIS IS THE UDUBS-IT BETA VERSION. FIGURE 22 IMPLEMENTATION PROCESS BY WOUTER GROVÉ, UNIVERSITY OF THE WESTERN CAPE ONCE THE BETA VERSION IS DELIVERED, SMALL GROUPS OF STUDENTS WILL TEST THE APPLICATION ON THEIR OWN DEVICE. THIS WILL RESULT IN A REPORT CONTAINING ADDITIONAL BUGS AND SMALL ADJUSTMENTS. WHEN THESE ISSUES HAVE BEEN HANDLED THE APPLICATION WILL BE ROLLED OUT TO A LARGE GROUP CONSISTING OUT OF SEVERAL THOUSANDS OF STUDENTS FROM ALL DEPARTMENTS. AFTER RESOLVING THE ISSUES THAT OCCUR AMONGST THE LARGE GROUP THE APPLICATION WILL GO INTO ITS FINAL STAGES BEFORE THE RELEASE. 32

BIBLIOGRAPHY [1] 4. WEBVIEW, WEBKIT, AND WEBSETTINGS - BUILDING HYBRID ANDROID APPS WITH JAVA AND JAVASCRIPT. [ONLINE]. AVAILABLE: HTTPS://WWW.SAFARIBOOKSONLINE.COM/LIBRARY/VIEW/BUILDING-HYBRID- ANDROID/9781449361907/CH04.HTML. [ACCESSED: 15-MAY-2015]. [2] 16 GRAPHS THAT SHED NEW LIGHT ON THE SOUTH AFRICAN SMARTPHONE SPACE - EFFECTIVE MEASURE : EFFECTIVE MEASURE. [ONLINE]. AVAILABLE: HTTP://WWW.EFFECTIVEMEASURE.COM/16-GRAPHS-SHED-NEW-LIGHT-SOUTH-AFRICAN- SMARTPHONE-SPACE. [ACCESSED: 15-MAY-2015]. [3] 16 GRAPHS THAT SHED NEW LIGHT ON THE SOUTH AFRICAN SMARTPHONE SPACE - MEMEBURN. [ONLINE]. AVAILABLE: HTTPS://MEMEBURN.COM/2014/08/16-GRAPHS-THAT-SHED-NEW-LIGHT- ON-THE-SOUTH-AFRICAN-SMARTPHONE-SPACE/. [ACCESSED: 15-MAY-2015]. [4] ANGULARJS: COUNT THE NUMBER OF WATCHERS ON A PAGE PAUL YODER S BLOG. [ONLINE]. AVAILABLE: HTTP://BLOG.YODERSOLUTIONS.COM/ANGULARJS-COUNT-THE-NUMBER-OF- WATCHERS-ON-A-PAGE/. [ACCESSED: 15-MAY-2015]. [5] ANGULARJS: DEVELOPER GUIDE: DATA BINDING. [ONLINE]. AVAILABLE: HTTPS://DOCS.ANGULARJS.ORG/GUIDE/DATABINDING. [ACCESSED: 15-MAY-2015]. [6] ANGULARJS: DEVELOPER GUIDE: DIRECTIVES. [ONLINE]. AVAILABLE: HTTPS://DOCS.ANGULARJS.ORG/GUIDE/DIRECTIVE. [ACCESSED: 15-MAY-2015]. [7] ANGULARJS: DEVELOPER GUIDE: INTRODUCTION. [ONLINE]. AVAILABLE: HTTPS://DOCS.ANGULARJS.ORG/GUIDE/INTRODUCTION. [ACCESSED: 15-MAY-2015]. [8] ANGULARJS ROUTING USING UI-ROUTER SCOTCH. [ONLINE]. AVAILABLE: HTTPS://SCOTCH.IO/TUTORIALS/ANGULAR-ROUTING-USING-UI-ROUTER. [ACCESSED: 15-MAY- 2015]. [9] APACHE CORDOVA API DOCUMENTATION. [ONLINE]. AVAILABLE: HTTPS://CORDOVA.APACHE.ORG/DOCS/EN/4.0.0/GUIDE_CLI_INDEX.MD.HTML. [ACCESSED: 04- JUN-2015]. [10] BUILD CONFIGURATIONS IN CORDOVA USING HOOKS. [ONLINE]. AVAILABLE: HTTP://INTOWN.BIZ/2014/05/13/BUILD-CONFIGURATIONS-IN-CORDOVA-USING-HOOKS/. [ACCESSED: 04-JUN-2015]. [11] BUILDING AND RUNNING OVERVIEW ANDROID DEVELOPERS. [ONLINE]. AVAILABLE: HTTPS://DEVELOPER.ANDROID.COM/TOOLS/BUILDING/INDEX.HTML. [ACCESSED: 15-MAY-2015]. [12] BUILDING MOBILE APPS WITH ANGULARJS AND IONIC THE OFFICIAL IONIC BLOG. [ONLINE]. AVAILABLE: HTTP://BLOG.IONIC.IO/ANGULAR-MOBILE- DEV/?UTM_CONTENT=BUFFERC6962&UTM_MEDIUM=SOCIAL&UTM_SOURCE=PLUS.GOOGLE.COM& UTM_CAMPAIGN=BUFFER. [ACCESSED: 15-MAY-2015]. [13] CODERWALL.COM : ESTABLISHING GEEK CRED SINCE 1305712800. [ONLINE]. AVAILABLE: HTTPS://CODERWALL.COM/P/D_AISQ/SPEEDING-UP-ANGULARJS-S-DIGEST-LOOP. [ACCESSED: 15- MAY-2015]. [14] CREATING REUSABLE DIRECTIVES IN ANGULARJS - YOUTUBE. [ONLINE]. AVAILABLE: HTTPS://WWW.YOUTUBE.COM/WATCH?V=DSB4VPRJAM0. [ACCESSED: 15-MAY-2015]. [15] DEVELOPER ECONOMICS Q1 2014: STATE OF THE DEVELOPER NATION - VISIONMOBILE. [ONLINE]. AVAILABLE: HTTP://WWW.VISIONMOBILE.COM/PRODUCT/DEVELOPER-ECONOMICS-Q1-2014-STATE-DEVELOPER-NATION/. [ACCESSED: 15-MAY-2015]. [16] DISSECTING PHONEGAP S ARCHITECTURE - AGILIQ BLOG DJANGO WEB APP DEVELOPMENT. [ONLINE]. AVAILABLE: HTTP://AGILIQ.COM/BLOG/2012/09/DISSECTING-PHONEGAPS- ARCHITECTURE/. [ACCESSED: 04-JUN-2015]. [17] HTML5 VS. NATIVE VS. HYBRID MOBILE APPS: 3,500 DEVELOPERS SAY ALL THREE, PLEASE VENTUREBEAT DEV BY JOHN KOETSIER. [ONLINE]. AVAILABLE: HTTP://VENTUREBEAT.COM/2013/11/20/HTML5-VS-NATIVE-VS-HYBRID-MOBILE-APPS-3500- DEVELOPERS-SAY-ALL-THREE-PLEASE/. [ACCESSED: 15-MAY-2015]. [18] IONIC CLI - IONIC FRAMEWORK. [ONLINE]. AVAILABLE: HTTP://IONICFRAMEWORK.COM/DOCS/CLI/RUN.HTML. [ACCESSED: 15-MAY-2015]. [19] MAX OGDEN BLOGOTRONZ. [ONLINE]. AVAILABLE: HTTP://MAXOGDEN.COM/BUILDING- 33

WEBVIEW-APPLICATIONS.HTML. [ACCESSED: 15-MAY-2015]. [20] MOBILE IN SOUTH AFRICA 2014 AMPS REPORT (PRE-RELEASE). [ONLINE]. AVAILABLE: HTTP://WWW.SLIDESHARE.NET/RAYMONDB/MOBILE-IN-SOUTH-AFRICA-2014-AMPS. [ACCESSED: 15-MAY-2015]. [21] MOBILE: NATIVE APPS, WEB APPS, AND HYBRID APPS. [ONLINE]. AVAILABLE: HTTP://WWW.NNGROUP.COM/ARTICLES/MOBILE-NATIVE-APPS/. [ACCESSED: 15-MAY-2015]. [22] NG-BOOK: THE DIGEST LOOP AND $APPLY. [ONLINE]. AVAILABLE: HTTPS://WWW.NG- BOOK.COM/P/THE-DIGEST-LOOP-AND-APPLY/. [ACCESSED: 15-MAY-2015]. [23] PHONEGAP ABOUT. [ONLINE]. AVAILABLE: HTTP://PHONEGAP.COM/ABOUT/. [ACCESSED: 15- MAY-2015]. [24] PHONEGAP PHONEGAP EXPLAINED VISUALLY. [ONLINE]. AVAILABLE: HTTP://PHONEGAP.COM/2012/05/02/PHONEGAP-EXPLAINED-VISUALLY/. [ACCESSED: 04-JUN- 2015]. [25] PHONEGAP: A MISUNDERSTOOD HYBRID FRAMEWORK. [ONLINE]. AVAILABLE: HTTP://WWW.ASYNCDEV.NET/2012/10/PHONEGAP-A-MISUNDERSTOOD-HYBRID-FRAMEWORK/. [ACCESSED: 15-MAY-2015]. [26] PHONEGAP: A MISUNDERSTOOD HYBRID FRAMEWORK. [ONLINE]. AVAILABLE: HTTP://WWW.ASYNCDEV.NET/2012/10/PHONEGAP-A-MISUNDERSTOOD-HYBRID-FRAMEWORK/. [ACCESSED: 04-JUN-2015]. [27] SAMSUNG DISPLACES BLACKBERRY AS SOUTH AFRICAN S PREFERRED SMARTPHONE - EFFECTIVE MEASURE : EFFECTIVE MEASURE. [ONLINE]. AVAILABLE: HTTP://WWW.EFFECTIVEMEASURE.COM/SAMSUNG-DISPLACES-BLACKBERRY-SOUTH-AFRICANS- PREFERRED-SMARTPHONE. [ACCESSED: 15-MAY-2015]. [28] SASS (STYLESHEET LANGUAGE) - WIKIPEDIA, THE FREE ENCYCLOPEDIA. [ONLINE]. AVAILABLE: HTTP://EN.WIKIPEDIA.ORG/WIKI/SASS_%28STYLESHEET_LANGUAGE%29. [ACCESSED: 15-MAY- 2015]. [29] SILVERSTONE MMA MOBILE IN SOUTH AFRICA 2014: PART 1 - THE MOBILE MEDI. [ONLINE]. AVAILABLE: HTTP://WWW.SLIDESHARE.NET/RAYMONDB/SILVERSTONE-MMA-MOBILE-IN-SOUTH- AFRICA-2014-PART-1-THE-MOBILE-MEDIUM. [ACCESSED: 15-MAY-2015]. [30] SOUTH AFRICA - WIKIPEDIA, THE FREE ENCYCLOPEDIA. [ONLINE]. AVAILABLE: HTTP://EN.WIKIPEDIA.ORG/WIKI/SOUTH_AFRICA. [ACCESSED: 15-MAY-2015]. [31] TEN REASONS YOU SHOULD BE USING A CSS PREPROCESSOR URBAN INSIGHT. [ONLINE]. AVAILABLE: HTTPS://WWW.URBANINSIGHT.COM/2012/04/12/TEN-REASONS-YOU-SHOULD-BE- USING-CSS-PREPROCESSOR. [ACCESSED: 15-MAY-2015]. [32] THE MAGIC OF ANGULARJS TWO-WAY BINDING - MODUS CREATE. [ONLINE]. AVAILABLE: HTTP://MODUSCREATE.COM/THE-MAGIC-OF-ANGULAR-JS-TWO-WAY-BINDING/. [ACCESSED: 15- MAY-2015]. [33] THE PROBLEM WITH ANGULAR - QUIRKSBLOG. [ONLINE]. AVAILABLE: HTTP://WWW.QUIRKSMODE.ORG/BLOG/ARCHIVES/2015/01/THE_PROBLEM_WIT.HTML. [ACCESSED: 15-MAY-2015]. [34] THE STATE OF HYBRID MOBILE DEVELOPMENT - TELERIK DEVELOPER NETWORKTELERIK DEVELOPER NETWORK. [ONLINE]. AVAILABLE: HTTP://DEVELOPER.TELERIK.COM/FEATURED/THE- STATE-OF-HYBRID-MOBILE-DEVELOPMENT/. [ACCESSED: 15-MAY-2015]. [35] THE TOP 7 HYBRID MOBILE APP FRAMEWORKS. [ONLINE]. AVAILABLE: HTTP://WWW.SITEPOINT.COM/TOP-7-HYBRID-MOBILE-APP-FRAMEWORKS/. [ACCESSED: 15-MAY- 2015]. [36] USAGE STATISTICS AND MARKET SHARE OF ANGULARJS FOR WEBSITES, MAY 2015. [ONLINE]. AVAILABLE: HTTP://W3TECHS.COM/TECHNOLOGIES/DETAILS/JS-ANGULARJS/ALL/ALL. [ACCESSED: 15-MAY-2015]. 34

FIGURE LIST FIGURE 1 PREFERENCE OF PRIMARY PLATFORMS... 4 FIGURE 2 DEVELOPMENT TOOLS SATISFACTION... 5 FIGURE 3 TYPES OF APPLICATIONS... 6 FIGURE 4 TYPES OF BUSINESS APPLICATIONS... 6 FIGURE 5 COSTS SAVED ESTIMATION... 7 FIGURE 6 GARTNER HYPE CYCLE FOR HYBRID APPLICATIONS... 7 FIGURE 7 HYBRID FLOW... 8 FIGURE 8 IONIC SERVE COMMAND WITH LAB PARAMETER... 12 FIGURE 9 ANDROID APK STRUCTURE... 13 FIGURE 10 IONIC PLATFORM BETA... 13 TABLE 1 JAVASCRIPT FRAMEWORKS... 14 FIGURE 11 ANGULAR.JS TWO-WAY BINDING... 15 FIGURE 12 ANGULAR EVENTLOOP... 16 FIGURE 13 ANGULAR.JS DEPENDENCY INJECTION... 18 FIGURE 14 CUSTOM DIRECTIVES IN ANGULAR.JS... 18 FIGURE 15 CORDOVA FLOW... 22 FIGURE 16 JAVASCRIPT TO NATIVE BRIDGE... 23 FIGURE 17 MAP SOUTH AFRICA... 25 FIGURE 18 MARKET SHARE OF MOBILE PROVIDERS... 25 FIGURE 19 DATA CONSUMPTION... 25 FIGURE 20 UDUBS-IT MAIN STRUCTURE... 27 FIGURE 21 MAIN COMPONENTS DURING DEVELOPMENT... 28 FIGURE 22 IMPLEMENTATION PROCESS BY WOUTER GROVÉ, UNIVERSITY OF THE WESTERN CAPE... 32 35

ANNEX UDUBS-IT PRINT SCREENS 36

37

38

39

40

41