Ionic Web and Mobile App Development: Tricks of the Trade

Introduction

Companies have been searching for ways to deploy their finished products to different mobile platforms with minimal differences for a fairly long time.  As an additional challenge some are ambitious enough to deploy to mobile platforms and web concurrently, and Kuika happens to be one of them. There are many reasons as to why companies seek to combine Web and Mobile development.  Most important reasons are listed below:

  • Reduce development cost,
  • Reduce response time to essential bugs,
  • Share a single development platform, which would make updates consistent,
  • Remove the necessity to keep a dedicated team for each platform,
  • Provide similar UI/UX design between mobile and web views easily.

Many hybrid mobile development frameworks have been released to make this task easier. Most notable ones are; Appcelerator Titanium, PhoneGap, Xamarin, Ionic and Intel XDK.

These frameworks provide most of the tools to make mobile multi-platform support a reality, but they fall short on Web support.

As Kuika development team, we have searched hybrid mobile development frameworks extensively. We eventually landed on Ionic to be the main framework we can build our apps on. There were many reasons to our choice, one of them being the fact that Ionic was built on Angular and  we have been using the Angular framework for quite a while. But ‘Why Ionic?’ is not the topic of this blog post. That’s a question which deserves its own blog post. For this article we’ll concentrate on Ionic Web and Mobile App Development.

Web Development with Ionic

Ionic boasts many capabilities that make single environment development of mobile apps easier, yet deployment to web from the same project is not a straightforward task.

As a framework, it is fully confident of its ability to create cutting edge mobile apps, and we are thankful to them for their hard work. It is also mentioned that a very high percentage of the apps created using Ionic v1, could be used on Web browsers as well. With the lack of official support for web apps creating few conundrums, developers are encouraged to be innovative to solve issues that come up. Kuika’s aim to give its customers the means to create unique experiences both on web and on mobile app meant we had to use some patterns that would enable us on all supported platforms

Below I’ll be listing some of the key points that we came across during our development:

First, Ionic supports the use of ‘cordova plugins’. These are code packages that allow the Cordova webview to communicate with the native platform on which it runs. They provide functionalities that are normally unavailable to web-based apps. Most of these packages are open sourced, and get updated frequently. It should be noted that you are unable to deploy these packages as part of a web app. Thus, the team should consider implementing features based on the plugins carefully, for a counter implementation will be required if the aim is to give the same experience to users.

When ‘cordova’ is undefined (meaning deployed as a web app), there is a need to create a browser placeholder for plugin implementation.

if (typeof cordova != “undefined”){
// Plugin implementation
} else {
// Browser implementation
}

Second, Ionic has in its arsenal a number of examples where html <input> or <button> tags reside in <label> tags. This block of html code renders perfectly fine for mobile apps but the input fields and buttons are unclickable when deployed manually as a web app. Solution to this is to use <div class=”label”> as the encapsulating block instead of a <label>.

Third, <ion-content> Ionic directive, unless stated explicitly otherwise, will insert a scrollable div as its immediate child. There is no need to place an overflowing div inside an ion-content which we found ourselves doing the first couple of times.

The last, Ionic offers custom styling for select boxes, date inputs, radio-buttons, check-boxes and various other things based on the mobile platform you are on. This is not the case for Web. Most of the time what you see on your screen is heavily influenced by the Web View API. Hence, your layout could be displayed differently between mobile platforms and web.

We frequently find ourselves searching for answers to new and exciting questions, which help keep the fire alive. Thankfully these problems have never been long lasting. Ionic has an amazing community, great support, and a dedicated team behind it who are eager to answer your questions. Of course it comes with some drawbacks some of which I’ve mentioned above and if your team isn’t particularly fond of spending hours, in some cases days, looking for answers then this approach might not be the optimal one.

Conclusion

In conclusion we are content with the state our development is in.  We, as a team, strongly believe mobile and web development from the same platform holds great potential. Some of the fruits it bore are already observable in our development speed, time spent training and the positive feedback to our app.

Our commitment to this approach shows our willingness to experiment and adapt new technologies, bend them to our will if need be. And, this is just one of the things where we differentiate from our competitors.

Sign up for our newsletter and keep in touch.
Full Name
Email
Teşekkürler
İşleminiz başarıyla tamamlandı
Thank you
You subscribed successfully
Thank you
Email will be sent shortly
Thank you
Email will be sent shortly
Thank you for your demo request.
We need more information to help you.
Request a demo
Full Name
Work email
Phone
Company website
Business Unit
Your Title
Tell us more about your objective
Request a demo
Full Name
Work email
Phone
Company website