Behind the Scenes of Appointedd’s Native Cross-Platform App Development

Appointedd is a multi-timezone online booking system that helps businesses sell and manage their time. Up until now we only had a simple iOS app to accompany our main web app, with limited functionality in comparison. With feedback from our users, we realised more and more businesses require access to Appointedd on the move. It became obvious we needed to expand the functionality of our mobile app, and start replicating functionality already available in the web app over to mobile. We decided we would start from scratch and take a cross-platform approach so our Android users could also benefit from the mobile app. The first question was: Which technology would we use?

There are generally two paths to take when developing a cross-platform mobile app. You can go fully native or use a framework such PhoneGap or Ionic which uses web views to wrap UI components in. Both have their pros and cons; going fully native gives you a blazing fast app which takes full advantage of the device it’s running on. It can be expensive, however, requiring separate development teams with knowledge of Objective-C/Swift for iOS and Java for Android. PhoneGap and other web view wrappers remove the need for separate development teams and allow you to create an app for both platforms with a single codebase – which is great, but performance isn’t anywhere near that of a fully native app.

While planning our app development, we were stuck trying to decide which route to take. Being full-stack JavaScript advocates, the web wrapper route appealed to us — but we care about the user experience of our products at Appointedd, and fully featured apps built taking web wrapper route can be sluggish and slow. We wanted the Appointedd app experience to match the web app. If only there was some middle ground that would let us write fully native apps, using JavaScript, while only needing to maintain one codebase..?

Enter: NativeScript.

NativeScript is a cross-platform open source mobile app development framework that allows you to build apps that can take advantage of the Native iOS and Android APIs and UI components using JavaScript with Angular 2 (and we LOVE Angular at Appointedd).

This gives us access to our favourite JavaScript tools and packages from NPM such as Moment.js, Async, Lodash, WebPack and anything else we care to NPM install. As a full-stack JavaScript development team, this is awesome as it allows for skill sharing across both our web and mobile platforms, and the ability to create and use custom libraries across both. Efficiency!

NativeScript allows you to write the App UI using a subset of HTML and CSS which compiles down to the native equivalent for both platforms. This means access to essentially any native element such as list-views, buttons or dialogs which naturally perform much better than web wrappers as they were built specifically for the device they are running on. We use Angular 2 with TypeScript for the application architecture and logic. The ability to use Angular 2 is easily one of the best things about NativeScript, it makes routing and data-binding simple and blazingly fast.

The downside? It’s still not fully native. The compiled JavaScript is still JavaScript which means it’s single threaded. The logic is entirely run on the devices UI thread, which can be problematic when performing heavy data parsing or trying to do too much on the UI at one time. This can be avoided by making use of Web Workers, which allows you to run JavaScript on a background thread, freeing up the UI thread for other things.

In conclusion, we’re definitely happy with the decision to build our mobile app with NativeScript. It’s going to allow us to add a lot more functionality to our mobile platform that currently only exists on the web app such as creating recurring bookings, managing your resources’ bookable hours and seeing more of your week at a glance. The great thing is we don’t have to reinvent the wheel; these functionalities already exist in the web app as JavaScript code, it’s as simple as repackaging it in a way that makes sense for mobile. It’s still early days but we have exciting plans, so stay tuned!

You can read our iOS and Android launch announcement here!