A few weeks ago, we announced the beta of our official React support, making it possible for developers to build quality apps for mobile, desktop, and the web using React and standard web development techniques. Predictably, we’ve gotten a few questions from the community wondering about Ionic React and how it’s different from React Native, and when someone would pick one over the other.

First of all, we are huge fans of the React Native project and what the team at Facebook has built. In many ways, React Native has helped Ionic quite a bit by getting more and more teams to be okay with building apps in JavaScript. We have a shared mission in making app development easier using JavaScript, and are thankful to have them fighting alongside us.

However, we believe Ionic React fills an important void in the React ecosystem and has a few fundamental philosophical differences that may resonate with your team. Let’s dig into some of those differences.

Web Native vs Mobile Native

Ionic React is what we call “web native,” meaning that it is based on pure web technology that runs in a browser. In fact, Ionic’s mission is to help make the web platform the dominant app runtime by helping teams build awesome apps for mobile, desktop, and the web, without compromising native power and performance.

That means every Ionic React component is a typical HTML element that runs in most every browser environment on most every platform out there, without any custom per-platform UI code needed. Under the hood, Ionic styles your UI for each platform to follow platform design standards and meet user expectations.

Ionic React components use the standard web development technology stack so it’s very natural for the traditionally-trained web developer. Every bit of Ionic React works the same as any other web app component framework, so customizing with CSS, adding custom div’s to build custom UI, etc. work exactly the same. With Ionic React you can drop in pretty much any web library or component (such as a graphing library like c3) just like you do in the browser, helping you take advantage of decades of web libraries and existing web code.

On top of that, one of the biggest benefits to being web-native like Ionic React, is being able to build a huge portion of your app directly in your desktop browser (Chrome, etc.) using the typical Dev Tools workflow. This is one of my personal favorite aspects of the web-native approach.

React Native, in contrast, uses React to orchestrate iOS and Android stock “native” controls on the screen. React Native provides some utilities, like a flexbox-like library and stylesheet abstraction, to bring some of the web dev experience to native, but fundamentally it’s not drawing standard HTML elements like divs on the screen and it’s not running a browser environment, so those features are emulated and may not let a web developer apply the exact same skills to mobile.

In fact, even React Native and React are not the same development experience, since React Native does not support CSS files or DOM. One of the bits of feedback we’ve had from early Ionic React users is they are glad they can use the same React development experience they use for the web to build mobile and desktop apps with Ionic React. Given that the standard React DOM npm package (React web support) has nearly 25x the installs that React Native has, we think focusing on this most popular of React environments is a safe bet.

To be clear, React Native is a high-quality mobile experience and has focused on providing a core set of familiar web-dev features but running using stock mobile controls. There are some benefits and tradeoffs to that approach that may fit better for your team (more on that at the end).

More than mobile

Ionic at the core is a UI framework for building apps. While we focused primarily on mobile for the first few years of Ionic’s existence, we’re increasingly adding desktop and mobile web (Progressive Web Apps) as core supported platforms.

That means a typical Ionic app can literally run without modification in the app stores, as a Progressive Web App, as a deployed intranet app available in a browser, as an Electron or UWP app, as an embedded view in a traditional native app, and on some smart devices like TVs and wearables.

React Native, in contrast, is focused on iOS and Android app store apps. There are some projects that bring React Native to desktop and a web project that uses the React Native control names but renders web controls. However, keep in mind that none of those projects are official and the desktop ones have a similar tradeoff compared to mobile as a non-web native abstraction.

For us, supporting more than iOS and Android app store apps is important, because it’s important for you. In our 2018 developer survey, over 50% of developers reported targeting the web with a Progressive Web App using their Ionic code, something that isn’t quite possible to the same extent with React Native.

Similar Plugin Model

While the two projects have more that separates them than they have in common, React Native has a similar plugin model to Cordova and Capacitor. Native code is written in a platform-specific native language, and then exported to JavaScript through an internal plugin API. Capacitor is even more similar here as portions of its plugin system were inspired by React Native.

Capacitor, like React Native, automatically exports Plugin API code to JavaScript in a way that your plugins are immediately available to use as soon as your app code starts executing. This differs from Cordova which loads plugin interfaces in an async fashion and requires you to wait for deviceready before using plugins.

With a similar plugin model, that means React Native and Cordova or Capacitor have similar concerns when considering community plugins. You need to ask if a plugin is maintained, whether or not there is support available if you have issues, and whether the plugin exposes the full functionality you need. Many people complain about plugin support in Cordova but forget that this is a question about open source sustainability first and foremost, not about the project itself, and React Native is no different.

This last point is one place that React Native differs heavily from Ionic. Facebook does not commercialize React Native, so teams building mission-critical apps on the platform are not able to engage with Facebook for commercial support contracts or access to additional software on top. Ionic, in contrast, is commercializing the platform by providing enterprise support and expanded native plugin functionality on top of our open source offerings, such as our Identity Vault solution and suite of supported native plugins. For many teams, that means you have an expert available to help you navigate any app development challenges, and a team of native mobile experts providing ready-made native components in a well-supported fashion.

When to choose Ionic React or React Native?

Ionic is relentlessly focused on the web platform and we are excited about aligning with the core web developer skill set. When thinking about whether to try out Ionic React or use React Native, consider whether your team will want to target Desktop or Web/PWA along with app store apps for iOS and Android, and whether you plan to hire and build a team of primarily web developers. If so, you might want to try Ionic React to get as broad of cross-platform support possible using the standard web developer skill set. Also, if you have existing web libraries and code you want to incorporate, Ionic React is a good bet.

When would you pick React Native over Ionic React? While we think Ionic React can handle many React Native use cases, we think there are a few cases where React Native would be a better choice for your team. First, if your team is largely native developers and you want to experiment with adding some JavaScript powered bits to your app, React Native might be a better fit. If you want to use stock native controls in your app for every bit of your UI, React Native would be a better fit (though Ionic supports rendering native UI controls in many scenarios, so this choice is not quite cut and dry). If there’s a plugin out there you really like for React Native, Ionic won’t work with it (yet…) so you’ll want to use React Native in that case.

And, obviously, there’s a matter of taste and preference here. If you like React Native and prefer that project’s view of the world, then stick with it! We’re not out here to tell anyone to change platforms. We think Ionic React offers something compelling for the React community and so far it seems many of you agree based on the passionate reception we’ve gotten since we announced the project. We’re thrilled to be able to bring Ionic to the React community, especially considering how many React fans we have at Ionic (myself included!).

Get Started with Ionic React

At the end of the day, Ionic React is focused on being 100% aligned with where the web platform is going, and this mission drives us to build better and better ways to build apps on top.

Ionic React is in beta at the time of this writing, but you can get started using it today.

Check out our announcement blog that walks through getting started, and our fully-featured demo app that features most of the Ionic React UI components and explores more complicated navigation flows.

And, stay tuned for a lot more on the React front as we work to make Ionic React one of the primary way Ionic apps are built!

Read more

In case you missed it, last week we gave a live presentation on the top Cordova challenges and the best strategies to overcome them.

During that discussion, Ionic’s Senior Product Evangelist, Matt Netkow, and I dug into the top challenges that development teams face when working with Cordova to unlock native features in a hybrid mobile app. This included tackling dependency management, addressing failed builds, and crafting ongoing maintenance strategies. If you’d like to learn more, check out the on-demand recording.

The purpose of this post is to go back and address some of the great questions that we weren’t able to get to in the Q&A session. Some of them are specific to Cordova, and some are about Ionic 4 (or Ionic 3) application development in general.

How can I run and debug my Ionic app from within Android Studio or Xcode?

There are several Ionic command line options you can use to package and run your app locally on an Android or iOS device. If you run them from each dedicated IDE (Android Studio or Xcode) though, you can view native logs in addition to web logs – incredibly useful for debugging Cordova issues.

Within Android Studio:
1. Select the “Profile or Debug APK” option from the Welcome screen.
2. Navigate to the APK file from within your Ionic project: platforms/android/app/build/outputs/apk/<build_type>/YourAppName.apk.

Within Xcode (only available on a Mac):
1. Go to “File > Open”.
2. Navigate to your Ionic project, and open the .xcworkspace file: platforms/ios/YourAppName.xcworkspace.

Note that you will need to select a development team (provisioning profile) associated with your app before you can run it. This is due to Apple’s code signing requirements.

Finally, in either IDE, click on the “Play” button to run your app using a simulator/emulator or a physical device.

For additional debugging tips, please refer to these Android and iOS sections of the Ionic Framework documentation site.

What are some strategies for addressing native mobile performance issues?

The recommended approach will vary greatly depending on the application and the Cordova plugins in use. That said, here are some general strategies:

  • Update to the latest versions of the Cordova plugins (and platforms) used in your application. This can result in increased performance, but it isn’t guaranteed.
  • Perform an audit of your Cordova plugins. Removing those that are no longer needed may improve application startup times.
  • Consult with the Ionic team. We offer a variety of Cordova-related assistance, including Advisory Services, Architecture Reviews, and more.

What are the best ways to keep up with iOS and Android Cordova updates?

Keeping up with the constantly changing mobile landscape can be difficult. There are always new operating system updates, hardware form factors, and thousands of mobile phones and tablets available at any given time.

Besides the Ionic blog, follow the Cordova team’s blog, a great source of information for the latest Cordova platform releases. These announcements (like the most recent cordova-android 8.0.0 and cordova-ios 5.0.0) include release notes on improved functionality, performance, and features that can make your development experience and applications better.

As for keeping track of plugin updates, there are a few handy commands and resources at your disposal:

  • The best resource for any given Cordova plugin is its associated GitHub repository. Most plugin repositories include information regarding general plugin details, including known or existing issues, code examples, and release notes.
  • To get a snapshot of the current state of your application’s plugins, run some of the commands we mentioned during the presentation, such as:
ionic doctor check: Detect common Ionic project issues and suggestions to fix them. cordova plugin ls: Once you’ve added at least one Cordova platform to your project (via ionic cordova platform add <platform>), run this command to determine the exact version of the Cordova plugins installed in your app. This is useful for general troubleshooting, comparing development environments, or checking that your plugins are actually being installed with the versions you specify. npm outdated or npm outdated <dependency>: Review all project dependencies (or a specific one) to see if any updates are available. Caution: We don’t recommend updating a plugin just because there is an update available, or all of them at once! Make small, iterative changes in a separate code branch and perform lots of testing.

What version of Node.js does Ionic support?

We recommend using the Long Term Support (LTS) version of Node.js as it is the most stable option for Ionic apps. Understandably, not all dev teams are able to update frequently, but it’s generally OK to use an older version of Node with your Ionic project as long as it builds (ionic build) and runs successfully.

You mentioned that Cordova plugins may conflict with each other when they share the same underlying native dependencies (i.e. Google Play Services). What’s the best way to tackle this issue?

Unfortunately, there isn’t a catch-all solution. The answer to this question in part depends on the plugins you’re using. For example, the popular cordova-plugin-firebase plugin can conflict with other plugins like cordova-plugin-googleplus or google-analytics-plugin because the underlying Play Services versions don’t match.

One possible solution is to add cordova-android-play-services-gradle-release to your Ionic project. It attempts to resolve the issue by forcing a specific Google Play Services version for all plugins in your Ionic/Cordova project. This may require you to do some testing to find out which version of Play Services your app should be using. Check the Github repo for more information, and don’t be afraid to try things out!

Is there any way to build and submit iOS apps without owning a Mac?

In order to build and submit an iOS app to the App Store, Apple’s Xcode software is required. Unfortunately, it only runs on Mac computers.

When it comes to building iOS apps, there are some options:

  • You can develop and test your apps using a Mac and a connected iOS device without a paid Apple Developer account.
  • Ionic’s Package service allows you to create native app binaries in the cloud, taking away a lot of the pain of managing iOS provisioning profiles and certificates away, especially for larger development teams. Ionic Package creates the IPA binary file that can then be submitted to the App Store – either manually with Xcode’s Application Loader or in an automated fashion using Appflow’s CI/CD capabilities.

When you’re ready to submit your app to the App Store, follow along here.


Cordova opens up a world of cross-platform opportunities for web developers. The broad ecosystem of Cordova plugins enables anyone proficient in JavaScript to build native-powered iOS and Android mobile apps, without having to be a native expert. If you’re an individual developer just getting started, or working on the next hot app, open source Cordova plugins are a great option.

Ionic’s Native Bridge feature, part of Ionic Enterprise Edition, takes it a step forward, providing easy access to native features and third-party apps for professional development teams building mission-critical apps in an enterprise environment, where time-to-market, support, and stability are critical.

If you would like to learn more about how Ionic Enterprise Edition can help your team tackle its development projects with stability and speed, get in touch with one of our Solution Engineers today.

Read more

Today, it’s typical when searching for mobile development solutions to stumble upon head-to-head comparison articles like Native vs. Cross-platform or Full-Code vs. No-Code, etc., which more often than not showcase common information like performance reviews and feature checklists.

While the above information is certainly helpful, as most enterprise decision-makers know, finding the key information needed to make a strategic decision about which mobile development approach to choose can be a challenge.

That’s why, we thought it would be helpful to put together an article guide that highlights 5 questions you might not think to ask, but should, when it comes to choosing the right development approach for your organization.

The questions we’ve chosen to answer are based on our experiences and conversations with hundreds of IT executives, senior developers, and architects, plus some industry research we thought could be useful in the decision-making process.

From evaluating your in-house talent to choosing an open vs. closed ecosystem to the types of partners out there, we do our best to answer the burning questions many executives might not think to ask of the platforms they’re evaluating.

Check out the full post on How to Pick the Right Mobile Development Approach in the new article section of our Resource Center for all the answers!

And, be sure to keep checking back for our guides on important industry questions and topics.

Read more

When it comes to hybrid app development, there are often some lingering misconceptions among those who are less familiar with the landscape. Also, many of the worries that persist about hybrid app dev were born out of issues that arose in its infancy stages, but no longer apply as much to the technology today.

Thankfully, because of the powerful evolution of the web and emerging platforms, concerns around topics like delivering great UX and achieving high performance from this type of development are less in question. So, we decided to deep dive into why that is and what’s changed in the current scope of hybrid app development that makes it a great choice for modern enterprises.

In our recent post, we explore the particulars of how this approach is able to help companies create apps that look-and-feel native to any device or channel while still achieving great app performance. From having more time to focus on features, iterating faster, saving resources, and building seamless cross-platform experiences, it’s harder, now, to argue the for the concerns that once existed against the hybrid approach.

In case you missed it, we have a new section in our Resource Center for articles where we tackle high-level industry topics and share thought-leadership content.

Be sure to check it out this new space and explore the full article, which highlights the key reasons for How Hybrid App Development Helps Deliver Great UX and includes helpful use cases for inspiration.

Happy reading!

Read more

Do you use VS Code for Ionic and Angular development? Chances are good that you do. It’s a little app from the unlikeliest of companies that is becoming a big deal.

At its core, VS Code (Code from here on), is a code editor that is free, open source, runs on multiple platforms, and has wide support for most major programming languages and environments.

It goes beyond a simple editor, though, and starts to blur the line between a lightweight editor and a full-blown integrated development environment (IDE). Code is super fast, takes seconds to install, and provides key development features most commonly found in large, commercial IDEs.

One of my favorite features of Code is its vast extension ecosystem. There are thousands of extensions out there built by the community that enhances functionality.

In this post, I’m going to share some of my favorite extensions that can help increase productivity when building Ionic and Angular apps.

Extensions for Teams

First, let’s talk about a few that will help out development teams. It is important when coding on a team that you maintain consistent coding styles and patterns. These extensions will help teams stay consistent on the really important decisions like tabs vs spaces, and if semicolons should or shouldn’t be used.

Prettier

image

Prettier is a library that provides consistent formatting and style choices in code. The Prettier extension for Code will read a common configuration file (.prettierrc) and apply these rules to code whenever you use Code’s built-in formatting. The rules available in Prettier aren’t numerous, but they are beneficial. Below is a sample .prettierrc file:

{
"printWidth": 80,
"semi": true,
"singleQuote": true,
"tabWidth": 2
}

This fairly common ruleset will provide some practical code formatting that your entire team will adopt. Setup Code to format on save, then formatting will always be applied, with no need to run some task to do it later!

TSLint

Where Prettier is mainly concerned with the formatting of code, TSLint rules can help enforce certain coding conventions like making sure triple equals is always used for equality checking. This helps make sure code complies with best practices decided by the team (as configured in the tslint.json file). TSLint can also fix common problems automatically:

TSLint in action

Installing the TSLint extension shows lint errors in Code immediately, versus waiting for the build system to report them.

Note: It was recently announced by the TSLint team that they plan on deprecating TSLint and focus on making TypeScript work better for ESLint. TSLint is still a good choice, though, until the work on ESLint for TypeScript is complete.

GitLens

image

GitLens surfaces data from git history directly into the editing surface of Code. With it, you can easily see who last edited a particular line of code, view differences, and easily browse repos on a particular commit. There are so many features here and I only use a small subset of them (much like git itself), but it saves a ton of time when needing to view commit history.

Extensions for Development in Ionic & Angular

This next set of extensions will help in your day-to-day coding activities by streamlining development.

Peacock

image

If you ever work with multiple copies of Code open it can be confusing which project you are currently looking that. Peacock aims to fix that by letting you assign toolbar colors for a particular project. For instance, you can assign your Ionic project a red toolbar, and your backend Node project a blue toolbar, making it much easier to see what project you are working on in a particular window.

Auto Rename Tag

image

This extension is so simple it’s a wonder that it isn’t included in the default version of Code yet. With the below extension enabled, you can now rename a tag in HTML and have the closing tag rename with it:

image

It also works great on Ionic component tags as well.

Angular Language Service

image

The Angular Language Service extension is maintained by the Angular team and gives code completion and go-to definition support inside of HTML templates. No more wondering what you named that model object when trying to write our HTML!

image

Angular Snippets

image

This set of Angular snippets has long been maintained by the great John Papa from Microsoft. Updated with each version of Angular, you will find dozens of snippets (bits of code that can quickly generate by typing a simple command) for the most common Angular tasks.

image

Ionic 4 Snippets

Much like the Angular snippets, this gem will complete Ionic component tags in your HTML quickly as well as some special snippets for code and CSS files. This extension saves on having to go back and forth on the docs so much. If you are still on Ionic 3, search for Ionic 3 snippets.

Angular2 Switcher

image

Of all the Angular based extensions, this one is perhaps my favorite. It allows you to quickly switch back and forth between the HTML, code, and CSS files that make up your component with quick keystrokes.

While the switching between files is a nice time saver, another feature this extension has is the ability to either cmd/ctrl+click (or hit f12) on variables and functions in HTML to quickly take you to the definition for them in the code file.

Code Spell Checker

image

This one is self-explanatory but extremely helpful: It catches spelling mistakes in code files. Often I find this helps catch unintended bugs by making a typo in a variable name that TypeScript wouldn’t otherwise catch (like in templates).

Wrapping Up

Code is a great editor for any development project. With a vast ecosystem of extensions and plugins, you can greatly customize your development environment. Have any favorite extensions that I didn’t cover here? Post them in the comments down below!

If you are looking for a more full-featured app builder for working on Ionic apps, then you might be interested in Ionic Studio. It shares many similarities with Code but offers a deeper integration into Ionic with a drag and drop interface, a properties editor, and on-device testing for quickly building out Ionic apps.

Happy coding!

Read more

© 2020 Extly, CB - All rights reserved.