7punches: A Cross-Platform Mobile Development Experiment

Martina
7shifts Back of House
10 min readOct 19, 2022
Hand holding mobile phone
Photo by Rodion Kutsaev via Unsplash

Android and iOS dominate the global mobile platform market. Together, they command more than 90 percent of it. Want to guarantee broad market reach and wide user penetration? Organizations need to publish everything from mobile games to productivity apps on both platforms.

At 7shifts, we currently maintain native applications for the Android and iOS mobile platforms. This includes our 7punches app, which is our Time Clocking feature. It allows employees to clock in and out of their shifts and breaks, track tips, and do a health check before starting their shift.

This app provides our partners with native support on their Point of Sale (POS) iOS and Android tablets. It requires them to employ “app switching” in order to access the 7punches app and its Time Clocking features. Most partners want to alternatively embed the Time Clocking solution into their existing products without having to switch apps. But, some want to deploy it on Windows devices — something we don’t currently support. So, how can we implement 7punches once, and deploy everywhere? That’s where the cross-platform development approach comes into play

Cross-platform mobile development has a lot of benefits. But it also comes with challenges. We’re giving you a run-down of how it compares to alternatives, plus sharing the tools and frameworks involved.

Multiple mobile phones — Android and iPhone
Photo by Kina on Unsplash

What Is Cross-Platform Mobile Development?

Cross-platform mobile development is the development and production of applications that can run on different operating systems from a single codebase. Imagine using a single language, integrated development environment (IDE), and software development kit (SDK) to build an application that can run on all mobile operating systems. It’s a build once, deploy everywhere mantra. We have a lot of partners that work with us. And with that comes a lot of various needs. Cross-platform development is a way to cut down on the effort while still meeting those needs. It’s fewer resources to develop and maintain the same functionality in existing applications. Plus, it’s a way of introducing support on the Windows platform.

Alternatives to Cross-Platform Mobile Development

Cross-platform isn’t the only way — there are other ways to achieve broad mobile reach. Two common alternatives? Native development and hybrid mobile development.

Native Mobile Development

The native approach involves developing applications for a particular mobile platform. This includes Android or iOS using its dedicated tools and programming languages. Android offers Java and Kotlin as its programming languages while using either Android Studio or IntelliJ IDEA for a development environment. iOS uses Objective-C and Swift programming languages and the Xcode IDE. Developing for iOS requires you to use a macOS system and an Apple ID to publish applications.

Natively developed applications have direct access to device capabilities (ex. sensors) and tend to have the most optimized performance compared to their hybrid counterparts. Yet native development does have it’s challenges. These include:.

  • A higher total cost of development and maintenance
  • Increased development time
  • Greater effort to coordinate development on different platforms

Hybrid Mobile Development

The hybrid approach is a cross of web technologies (HTML, JavaScript,CSS) with native mobile technologies (Android or iOS). The application is built using web technologies and then encapsulated within a native application’s embedded browser. For example, an iOS application would use WKWebView to display your application, while an Android app would use the WebView element to do the same. Tools such as Apache Cordova and Capacitor by Ionic are used to build these applications, which can be submitted to each platform’s app store.

This approach has two benefits. One, it gives the web application a more native look. And two, it allows full access to the device’s capabilities. Again, there are some limitations, including:

  • User Interface (UI) isn’t as good as that of a native app, because it uses webviews
  • It takes time and resources to develop and maintain plugins used to improve platform capabilities
  • Web app performance is slower than native app performance
  • For apps using complex graphics and 3D, it would likely result in more frustration than benefit
Code happy
Photo by Martin W. Kirst on Unsplash

Benefits of Cross-Platform Mobile Development

The cross-platform approach has a lot of advantages over both other options.

Cost of Production

At 7shifts, we deploy mobile products on multiple platforms and have to budget accordingly. Hiring proficient engineers for both iOS and Android is an expensive undertaking. Adding support for a Windows platform makes it even more expensive. It can mean hiring a whole new team with Windows expertise, or the need to train our current developers in a new platform. With software engineering being one of the highest-paid professions, these hiring and/or training practices could add up fast With cross-platform development, we only need to budget for a single team to build quality applications and deploy them on multiple platforms.

Faster Time to Market

Because the development teams here could build once and deploy everywhere, they only have a single codebase to write and walk through the software development lifecycle (SDLC). Reducing development time means that 7punches and 7shifts applications can make it to market at a faster pace.

Code Reusability

This is an engineer’s paradise, especially for 7shifts developers. The ability to use the same lines of code to achieve the same effect over multiple platforms is huge. Cross-platform development guarantees this. How? Because it’s a single codebase used to develop the same application for multiple platforms. Those sleek animations, complex algorithms, or API libraries that devs spent hours working on? They will exist over all platform deployments, after only writing it once.

Consistent Design across Devices

Conforming to multiple platform guidelines while striving to maintain consistency is a daunting task. Following the intended guidelines results in a different UI design and user experience (UX) for the 7shifts app on each platform.

Cross-platform development eliminates this problem. It means we design once and implement the UI in a single codebase. That single codebase adapts perfectly to every platform it’s deployed on.The 7punches app UX is consistent and delivers a high-quality application.

Maintenance and Deployment

Attempting to deploy bug-free applications is a challenge in the software engineering world — then multiply that by multiple codebases for different platforms. If there is a bug found in one codebase, our developers then have to test all other codebases for the same bug. Talk about time-consuming.

Because cross-platform development utilizes a single codebase, detecting and solving a bug requires less time and effort. Once it’s solved, our team can deploy the fix on all platforms at a faster pace.

As a bonus, the single codebase is much simpler to secure and test. Integrating version control and implementing continuous integration (CI) and continuous deployment (CD) practices are way smoother.

Challenges of Cross-Platform Mobile Development

For all the benefits, the cross-platform approach isn’t perfect. Downsides are evident, but there are ways to address them.

Performance

Cross-platform development works by relaying messages to and from the native device code. This introduces an abstraction layer, which increases the time complexity when application processes are running. No direct access to the native device code makes it a slower option than native mobile development.

Performance issues are more common when building complex apps and games that need quick processing and access to advanced device features. Things like augmented reality (AR) apps and graphically intensive games. Less complex applications still achieve a high performance ratio when utilizing cross-platform development.

With performance being a top priority for us, this is important. A good solution is offloading heavy computing tasks to the backend where possible and only displaying the result of the task on the application.

User Experience

Cross-platform apps have the additional abstraction layer noted above. They also have a rendering process, which increases their response time to user inputs and interaction. This can lower the UX of cross-platform apps compared to native apps. Also, some UI components differ from platform to platform. For example, Android uses Material checkbox and radio button controls while iOS encourages using check marks to represent the same controls.

Adapting to specific platform design guidelines and conventions is the recommended solution to this issue. Where design differences and disruptions are minimal, platform design adaptation is optional. At 7shifts, UX is one of the major decision criteria when considering a cross-platform approach.

Slow Update Time

The mobile development ecosystem is evolving quickly. New features and device capabilities are being released regularly. Integrating a cool new feature takes more time for cross-platform applications because the framework needs to be updated in order to communicate with the native code and harness the feature.

However, most cross-platform frameworks are open source with a lot of support from the developer community. That means quick turnaround times while making updates. It also means easy integration for 7shifts partners, while 7shifts developers are able to meet their needs in a reasonable time frame.

Hands over a keyboard, probably coding
Photo by Thomas Lefebvre on Unsplash

Cross-Platform Mobile Development Tools

So how can cross-platform development become easier? Here are some popular options:

Kotlin Multiplatform Mobile

Kotlin Multiplatform Mobile (KMM) enables the sharing of code that performs the same business logic between Android and iOS platforms. This reduces the time spent writing the same code on different platforms but maintains the flexibility of native programming.

Developed by JetBrains and open source contributors with support from Google, KMM went alpha in August 2020. It is fairly new in this ecosystem, and it promises to provide the combined benefits of creating cross-platform and native apps.

Our team already has proficiency in Kotlin from the native Android versions of its applications. Because developers could reuse existing 7punches Kotlin code instead of needing to learn a new language, this has a big benefit. However, the main reason for this investigation is to add Windows support for 7punches, and KMM doesn’t support code sharing with Windows out of the box. We’re hopeful that’ll change but at the time of this article it’s lacking the amount of support we need in order to confidently commit to this solution.

Xamarin

Xamarin is an extension of the .NET platform that provides tools and libraries for building apps on iOS, Android, macOS, and other operating systems. It also adds Extensible Markup Language (XML) for building dynamic mobile apps using C#. Founded in 2011 and acquired by Microsoft in 2016, it’s one of the founding frameworks for cross-platform development.

Our team doesn’t have experience with this tool. Because of that, it would require rewriting of the existing 7punches app.

React Native

React Native is an open source framework created by Meta (formerly Facebook). It combines native development with React, allowing you to build apps for both Android and iOS platforms. It was built on JavaScript and provides native components that map to each platform’s UI building blocks. React Native was released in 2015 and boasts a high number of contributors on GitHub and wide adoption by developers.

We do have React developers, although they aren’t allocated to the mobile development team. Leveraging React Native is possible, but current native mobile developers would be pushed out of their roles.

Flutter

Flutter is an open source framework created by Google and released in 2017 for developing multi-platform applications from a single codebase. With support for mobile, web, desktop, and embedded devices, it provides developer tooling to build beautiful and fast applications. Flutter is based on Dart, a programming language optimized for UI and fast apps across all platforms, and is gaining popularity as a cross-platform mobile SDK.

Like Xamarin, we don’t have any experience in Flutter. Because of that, it would require a total rewrite of the 7punches app, and training existing developers with the new frameworks.

Photo by Mark Fletcher-Brown on Unsplash

Conclusion

As mobile apps become a necessity for businesses across various industries, it’s essential to build robust applications that run perfectly at a fast pace and in a cost-effective manner. Targeting multiple platforms broadens the market reach of an application.The bigger the market reach, the stronger the revenue. Using the cross-platform mobile development approach can help achieve that goal.

As many benefits as there are, for now, we’re keeping each codebase in its native language and framework. We’ll continue implementing every feature in duplicate for iOS and Android. We’ll shelve adding Windows support until either it becomes unavoidable to defer any longer for our partners and develop it in triplicate, or KMM matures enough that we can implement code sharing with Windows support out of the box. Why? This choice means we can leverage existing developers with their existing tools and knowledge and keep a clear direction on what can be achieved.

Cross-platform development is gaining popularity among developers. Major software companies are also heavily investing in it, including Google supporting KMM and Flutter, Microsoft supporting Xamarin, and Meta supporting React Native. The big question in the coming years will be about which framework you use for your application. Of all the solutions considered, KMM could deliver enough value with minimal effort at 7shifts, but without Windows support, it isn’t quite ready to serve what we need. That doesn’t discount the potential to evolve and grow to serve 7shifts.

Making the switch to cross-platform mobile development is the first step to building beautiful, scalable apps at incredible speeds for all mobile platforms. In the meantime, our team continues to explore more conceptual forms of sharing Android, iOS, and Windows for development on all three platforms. With them all utilizing Model-View-ViewModel (MVVM) UI patterns, support SQLite storage, and having reactive based patterns, there are opportunities. Conceptual sharing will help reduce the conceptual and functional discrepancies between the platforms. Long term, it’s going to ease the transition into actual code sharing, if the time comes. While maintaining a cross-functional team of Android and iOS developers who are also jointly responsible for Windows, 7shifts will ship quality code and minimize bug count and recovery time from issues.

Technial Writer: Dedan Ndungu

Original Report: Ben Moss

Facilitator: Martina Rauert

--

--