Transcription
Choosing the RightCross-PlatformFrameworkfor Mobile DevelopmentChoosing the Right Cross-Platform Framework for Mobile Developmentwww.globallogic.com 1
AbstractIn this white paper, GlobalLogic’s Mobile PracticesTeam rates the various features of crossplatform mobile frameworks to help readerschoose the best technology stack for developingor expanding a mobile application. We alsoprovide recommendations on when to applywhich technologies for different types of mobileapplications.Authors:Oleksandr FurdyloAjay ChaudharyDenys BratchukChoosing the Right Cross-Platform Framework for Mobile Development 2
Contents4Introduction56Common Mobile Development ApproachesNative Toolkits vs. Cross-Platform Frameworks89101011121314Technology Stack AssessmentsNative App Toolkits AssessmentCross-Platform Framework AssessmentsPhoneGapXamarin NativeReact NativeFlutterProgressive Web App (PWA)16161719Technology Stack RecommendationMobile Application OnlyMobile and Desktop ApplicationsMobile and Web ApplicationChoosing the Right Cross-Platform Framework for Mobile Development 3
IntroductionAs the world becomes increasingly mobile,businesses must ensure that their digital solutionscan continue to evolve in terms of scalability andextensibility. Users expect their mobile apps tocontinuously offer new features and services, aswell as be available on any device, any place.As a digital product engineering specialist,GlobalLogic has developed hundreds of mobileproducts for industry-leading businesses. Wealso have a dedicated Mobile Practices Team thatexplores the latest technologies around mobiledevelopment.When building a new mobile solution, or evolvingan existing one, businesses must carefully considerwhich technology stack and development approachto use. Using a cross-platform framework to developapps across multiple platforms (versus developingindividual app instances via native iOS and Androidtoolkits) has become an especially attractive option.Based on this expertise, we have assessed themost popular cross-platform frameworks acrossa variety of factors to help readers select the besttechnology stack for their unique project. Wehave also provided recommended strategies forhow to use these technologies to support mobileapplications across web and desktop formats, asneeded.Each cross-platform framework option has itsadvantages and disadvantages, and choosingwhich technology to use depends on a huge varietyof factors, including cost, industry trends, and futureproduct roadmaps.Choosing the Right Cross-Platform Framework for Mobile Development 4
Common MobileDevelopmentApproachesBelow is a quick overview and comparison of thethree most common approaches to mobile appdevelopment.Native app toolkits support single platforms only.They provide faster performance, extremely handynavigation, experience optimized for the targetplatform, and full access to native capabilities.Cross-platform frameworks enable the creationof mobile applications tailored for differentplatforms and contain cross-platform code writtenin JavaScript, C#, or C , as well as platformspecific code wrappers for iOS, Android, andother platforms. Cross-platform frameworks savedevelopment efforts while coding applications.Browser-based solutions provide a universalplatform support. These are normally based onwell-established web technologies and requirecentralized application hosting, but lack accessto native features. Browser-based solutions savedevelopment efforts while coding, compiling, anddeploying applications.For the purposes of this paper we will focus oncross-platform frameworks, using native toolkitssimply as a means of comparison.Choosing the Right Cross-Platform Framework for Mobile Development 5
Native Toolkits vs. CrossPlatform FrameworksBelow is a quick overview and comparison of thethree most common approaches to mobile appdevelopment.Native app toolkits support single platforms only.They provide faster performance, extremely handynavigation, experience optimized for the targetplatform, and full access to native capabilities.Cross-platform frameworks enable the creationof mobile applications tailored for differentplatforms and contain cross-platform code writtenin JavaScript, C#, or C , as well as platformspecific code wrappers for iOS, Android, andother platforms. Cross-platform frameworks savedevelopment efforts while coding applications.When cross-platform development frameworksappeared, they became very popular due to thefact that most of the code is shared, and thereforedevelopment efforts can be optimized. In addition,only one core team is needed to support allplatforms, and applications can have a commonset of documentation (including SRS and designspecifications).Shared Code More Than 80%Browser-based solutions provide a universalplatform support. These are normally based onwell-established web technologies and requirecentralized application hosting, but lack accessto native features. Browser-based solutions savedevelopment efforts while coding, compiling, anddeploying applications.For the purposes of this paper we will focus oncross-platform frameworks, using native toolkitssimply as a means of comparison.Shared Code 0%However, cross-platform mobile applications havedrawbacks as well:1. Application performance will be lower comparedto native applications due to an introducedintermediate level (a bridge between thecommon and native code).2. Some device-specific functionality cannotbe easily implemented using cross-platforminstruments (e.g., push notifications, behaviourin sleep mode, multithreading, data-storagesetc.). These functions can be supported bycross-platform frameworks to some extent, butin this case the system will include an additionalabstraction level, which makes the system morecomplicated and harder to maintain.Choosing the Right Cross-Platform Framework for Mobile Development 6
Native Toolkits vs. CrossPlatform Frameworks (cont.)3. Plugins and libraries used during cross-platformdevelopment are normally less stable than nativetools and may contain bugs and issues that arehard or impossible to fix on the developer’s side.4. User experience in different platforms varies. Forinstance:- Typical iOS applications include a TabBarat the bottom to switch screens (Home, Profile,Search etc.), whereas the navigation bar isnormally at the top and it includes Title, Back,and Action items.- There is a SegmentedActivity elementsupported by Android, which looks similar toiOS TabBar but has totally different mechanics(e.g., iOS TabBar doesn’t enable you to swipescreens, whereas it is a common practice inAndroid).5. Cross-platform applications require largeregression testing cycles, as the changes in anapplication can affect multiple platforms.- Even though Android also has a navigationbar, it is used differently and normally doesn’tcontain buttons.Choosing the Right Cross-Platform Framework for Mobile Development 7
TechnologyStackAssessmentsIn this section, we will assess each mobile toolkitacross a variety of factors, with each factor beingranked on a scale from 1-5 (“1” being the lowestvalue and “5” being the highest).Below is an overall comparison of each of thesetechnologies. Continue reading for additionaldetails and recommendations about each uniquetechnology stack.Choosing the Right Cross-Platform Framework for Mobile Development 8
Native App ToolkitsAssessmentAlthough they are costly to develop, native apps areundoubtedly more efficient and maintainable froma technical standpoint. They also provide betterperformance and user experience for animationheavy applications. To provide a base level forcomparison purposes, below is our assessment ofnative app toolkits.However, cross-platform mobile applications havedrawbacks as well:2. Some device-specific functionality cannotbe easily implemented using cross-platforminstruments (e.g., push notifications, behaviourin sleep mode, multithreading, data-storagesetc.). These functions can be supported bycross-platform frameworks to some extent, butin this case the system will include an additionalabstraction level, which makes the system morecomplicated and harder to maintain.1. Application performance will be lower comparedto native applications due to an introducedintermediate level (a bridge between thecommon and native code).Choosing the Right Cross-Platform Framework for Mobile Development 9
Cross-Platform FrameworkAssessmentsPhoneGapApplications based on PhoneGap use WebViewand have a simple implementation: create a small,native application that displays the built-in webbrowser and single-page HTML. There are nonative controls or direct access to the API, as allthe interface elements inside the web page aresimply stylized as native ones. The application hasaccess to the system functionality using specialplug-ins that add JavaScript methods to the insideof the web browser and associate them with nativeimplementation on each platform.For application development on PhoneGap,engineers need experience in HTML, JavaScript,CSS, and also native instruments such as ObjectiveC and Java. Additionally, engineers must have goodengineering knowledge about integrating native andcross-platform parts.Our opinion is that using PhoneGap or similartechnology would not provide any significant benefitsfor mobile application development.Choosing the Right Cross-Platform Framework for Mobile Development 10
Xamarin NativeXamarin Native is a cross-platform mobile appdevelopment framework based on the .NETframework. It uses C# to create applications formobile platforms, and it is natively compiled. Asa result it enables us to build high-performingapplications with close-to-native design. Theframework uses native libraries for cross-platformdevelopment and can access native APIs.Xamarin Native is a popular choice for crossplatform application development. It is oftenconsidered while building mid-size business mobileapplications for different platforms, especially thoseintegrated with MS-based backend.Choosing the Right Cross-Platform Framework for Mobile Development 11
React NativeSimilarly to PhoneGap, React Native (sponsoredby Facebook) lets developers build mobile appsusing only JavaScript. It uses the same design asReact, letting you compose a rich mobile UI fromdeclarative components. As opposed to PhoneGap,React Native enables you to render nativecomponents, not just a web view.With React Native, you don’t build a “mobileweb app,” an “HTML5 app,” or a “hybrid app.” Itenables you to create a real mobile app that isindistinguishable from an app built using Objective-Cor Java. React Native uses the same fundamentalUI building blocks as regular iOS and Androidapps; the developer just puts those building blockstogether using JavaScript and React. There is still apossibility to use native code.For application development on React Native,engineers need experience in JavaScript and alsonative instruments such as Objective C or Java.All in all, React Native can be considered asan alternative to Xamarin Native in the area ofcross-platform development, especially for newapplications created from scratch, as its popularity isgrowing (as compared to Xamarin Native), the costof development of a new application will be lowerthan for native applications, and the performancewill be nearly native.Choosing the Right Cross-Platform Framework for Mobile Development 12
FlutterIn terms of the cross-platform space the big twoapproaches are still Xamarin and React Native(backed by Facebook). However, good traction hasrecently been shown by Flutter (backed by Google)and its adoption is slowly increasing, though thenumber of applications using Flutter are significantlyless compared to Xamarin or React Native.Flutter and Dart are two of the fastest-growingtechnologies worldwide, and this stack is easy tolearn for developers with native (iOS/Android) or webbackground. Also, Google is heavily investing in thistechnology.According to the trend, we can predict that in thenear future, the market will have a lot of competitiveFlutter/Dart developers. The main strengths of Flutterinclude: Fast onboarding process for new developerswith Web or Android backgroundPerformance. Flutter application is native andthere are no additional layers between Flutterand hardwareSupport from the Google community. Googlehas developed Flutter itself, as well as a lot ofdifferent UI widgets. This allows the build ofcomplex UI in short period of timeChoosing the Right Cross-Platform Framework for Mobile Development 13
Progressive Web App (PWA)PWA (Progressive Web App) is an approach whichhas grown more popular over the last few years.It enables the extension of the functionality of websites and makes them closer to “applications” oreven “mobile applications.” This includes the abilityto work in offline mode, access the camera onmobile devices, etc.The main driver of PWA is Google, therefore Androidand Chrome support most of the features. Apple’scoverage of PWA features is also growing.PWA is normally used to extend the functionalityof existing websites. This can be done gradually,by means of adding PWA-related features one byone. PWA works best with mobile-friendly sites withresponsive design. If a site is already mobile friendly,it only takes a day or two to convert it into a basicPWA-application.One of the main features of PWA applications isthat it can be added to the main screen on mobilephones, and moving forward, it can be used as if itwere a mobile application.The main difference between PWA and nativeor hybrid mobile apps is that you don’t need todownload PWA from the marketplace, as it can bedownloaded directly from the site.Choosing the Right Cross-Platform Framework for Mobile Development 14
PWA (cont.)Progressive Web Apps cannot be used fortransferring native mobile iOS or Android appsthough. If there is a native mobile application, thena JavaScript-based PWA application will need to becreated from scratch.A PWA approach can be used either purely as isor by means of wrappers such as the Electron JSframework.Progressive Web Applications share the followingprinciples: progressive, responsive, faster after initialloading, connectivity independent, application-like,fresh, safe, discoverable and re-engageable. Amongthe others, PWA applications normally utilize oneor several of the following technologies: Manifest,Service Workers, Web Storage, WebAssembly andDatabases.A PWA approach is mostly useful when creating astrategy and architecture of new massive softwareproducts and ecosystems, and combining mobileand web experience. UI/UX design of all existingweb-based applications will need to be adjusted tobe mobile-optimized, and all newly created productswill have to follow a “Mobile-First” approach. Itmakes no major sense to replace an existingnative or cross-platform mobile application withProgressive Web App if there is no plan to build aweb-version of the platform.Choosing the Right Cross-Platform Framework for Mobile Development 15
TechnologyStackRecommendationsThe choice of technology for building a platformheavily depends on the pros and cons of eachtechnology, as well as the roadmap of the overallplatform development. Below are GlobalLogic’srecommendations on how to leverage the previouslydiscussed cross-platform frameworks based onhow you plan to build or expand your product.Mobile Application OnlyRecommendation: Xamarin Native, ReactNative, FllutterTaking into account the scope of a typical mobileapplication, the technical specifics of different mobiledevelopment approaches, their popularity, and ourexperience in using these approaches, we came tothe conclusion that Xamarin Native, React Native,and Flutter are the best technology choices for across-platform mobile application development.recommend using React Native or Flutter since theycan support multiple platforms, deliver comparativelyhigh performance, and are growing in popularity.Exceptions1. We recommend creating a native applicationunder the following circumstances:- If you want to build a mobile applicationfrom scratch and support either the iOS orAndroid platform (but not both)- If your product has any features that areheavily mobile-specific and require complexcustom implementation- If your product has strict performancerequirementsIf you want to build a mobile application from scratchand support both iOS and Android platforms, weChoosing the Right Cross-Platform Framework for Mobile Development 16
Mobile ApplicationOnly (cont.)Mobile and DesktopApplicationExceptions (cont.)Recommendation: Xamarin and WPF2. If you already have a mobile application, wecaution switching to a new platform due tothe cost of rewriting an application and thepotentially negative impact on existing users.There should be a valid business reason forswitching to another platform, such as majorapplication-related bottlenecks, or significantperformance or security issues.If your goal is to create a desktop application inaddition to the mobile app, we recommend usinga .NET technology stack and, in particular, a WPF(Windows Presentation Foundation) subsystem. Forthe Mobile Desktop combination, we recommendutilizing Xamarin.Native (Xamarin.Android Xamarin.iOS) for mobile, and Xamarin.Native (Xamarin.Mac)and WPF for desktop.The WPF application will be able to partly utilize thecode of the Xamarin.Native mobile application, asthese are both written in C#, and they can becomea part of a larger Microsoft-based ecosystem. WPFis still popular and more stable than UWP (UniversalWindows Platform), which was introduced inWindows 10.Interest over time charts based on Google Trendsresults (https://trends.google.com/).Interest over time charts based on Google Trendsresults (https://trends.google.com/).Choosing the Right Cross-Platform Framework for Mobile Development 17
Tools MatrixThe tools used to develop and test the nextgeneration of mobile and desktop applications willcertainly evolve over time in collaboration with theimplementation team. However, we have listed apotential set of tools here as a starting point fordiscussion, with the understanding that many ofthese tools will be common. This enables the useof similar — or even the same — developmentresources to build and maintain desktop and mobileapplicationsChoosing the Right Cross-Platform Framework for Mobile Development 18
Mobile and Web ApplicationRecommendation: PWAIf your goal is to build a web application in additionto mobile apps, we recommend considering theProgressive Web App (PWA) approach. Unliketraditional applications, Progressive Web Apps area hybrid of regular web pages (or websites) anda mobile application. This new application modelattempts to combine the features offered by mostmodern browsers with the benefits of a mobileexperience. More importantly, the PWA approachcan be used to build desktop applications, as well.Mobile users can access the PWA through theirmobile browser by URL. On the first use, the PWAwill suggest adding a shortcut on the home screen,so users can access it as a regular mobile applater on. Desktop users can open the PWA in theirbrowser and use it as a website. Additionally, userscan install the PWA onto their desktop through theChrome browser, and the application will open in aseparate window and mimic a desktop app.If you already have a legacy mobile application (e.g.,Xamarin Native app), GlobalLogic recommends thatyou start developing a new PWA as though it werea regular web application, with a mobile-first UI/UX design approach. The estimated effort to addPWA-specific features is approximately an additional20-30% on top of what is needed to create a usualweb application with the same functionality.Choosing the Right Cross-Platform Framework for Mobile Development 19
Pros and Cons of Using PWAAs per Comscore’s report, the reach of the mobileweb is 2.5 times more than that of apps whenconsidering the top 1,000 sites
performance and user experience for animation-heavy applications. To provide a base level for comparison purposes, below is our assessment of native app toolkits. However, cross-platform mobile applications have drawbacks as well: 1. Application performance will be l
