#stockplans | Explore Tumblr posts and blogs

orionesolutions1 · 4 years ago

Text

REACT NATIVE VS IONIC: CHOOSE THE RIGHT ONE IN 2021

The “hybrid vs native” question still lingers among programmers and coders. In 2021, the choice is between React Native and Ionic, the two biggest players in the mobile app development frameworks market. According to AppBrain,

Ionic is the most used in app development at 3% while React Native is at 1.3%.

Market share in terms of app installs show 4.05% for React Native and 0.27% for Ionic.

To understand this stat, let us look at the difference between a native app and a hybrid app.

NATIVE VS HYBRID

Native and hybrid apps differ in many ways including UX, performance, technology used, features, and associated costs.

Hybrid Mobile Apps

The underlying tech in hybrid apps are HTML, CSS, JavaScript and other web technologies. WebView is the platform that they all run on. Through native modules and plugins, they can be developed as Single Page Apps or Progressive Web Apps.

Native Mobile Apps

Platform specific UI components are needed to run native mobile apps. Java for Android and Objective-Cor Swift for iOS are used to build these apps. They cannot be reused between platforms and there are about no drawbacks to the efficiency of these apps.

Now, with a surface understanding of native and hybrid mobile apps, let us know a little bit about React Native and Ionic development.

REACT NATIVE

React Native is a JavaScript based framework. It helps create native mobile apps and is supported by a huge community of developers. The corporate backing comes from Facebook. It uses the “learn once, write everywhere” principle. Facebook, Oculus, Coinbase, Shopify, Tableau, FlipKart, Discord, NerdWallet, Skype, Bloomnerg, Tesla, and Wix among many others use the React Native framework.

IONIC

With a shared codebase between mobile, web, and desktop apps, Ionic is a hybrid development framework for web apps. Ionic is rich in features and much more capable than web apps since it uses Cordova and PhoneGap to access native features. Ionic follows the “write once, use everywhere” principle. The Ionic framework has been used by MarketWatch, Pacifica, Sworkit, Diesel,StockPlan Connect, Honeyfi, McLaren, JustWatch, mcDonald’s, Untappd, Nationwide, and Cryptochange among a plethora of others. According to Ionic, over 5 Million apps have been created using its framework.

Now let us take a quick look at how the Ionic framework and the React Native framework compares against each other and determine the best one for 2021.

IONIC VS REACT

The Tech

React uses features that are native to the UI. This is what gives it the aesthetics of a native application. The native form also allows the developers to give a seamless experience to the end user.

Ionic uses web tech. This enables it to achieve multi-platform applications. It is based on Angular JS and uses the code base in a minimal fashion. Angular enables Ionic to have a smoother process and be extremely user-friendly.

Performance

React demands the developers to make platform-specific changes to achieve the most efficient components. React Native has a much more stable framework. This makes it efficient for large scale projects with higher budgets. The framework also enhances responsiveness and detailing of the UI. On the other hand, Ionic’s hybrid approach makes it much more convenient for prototyping or facilitating an urgent requirement. Using CSS, JavaScript and HTML5 components, Ionic enables faster app development but the user might be asked to download additional plugins to enable the native features.

Coding

As discussed earlier, React uses the “learn once, write everywhere” logic. This framework will suggest suitable components that respect the native aesthetics, to the developers.

Contrary to that, Ionic can run the same code across all platforms. It adapts to the platform and learns its behavior in order to provide the native aesthetics.

Apart from these differences, React native has a community of 1752 contributors while Ionic has just 268. And in order to pinpoint the better one for 2021, we need to understand the benefits and drawbacks of both Ionic and React Native.

ADVANTAGES OF IONIC

Open source

Easy to learn

Built in components

Speed development cycle

Familiar development environment

Cordova and PhoneGap wrapping

DISADVANTAGES OF IONIC

Requires WebView

Apache Cordova required to access hardware functionality

Slight performance issues

ADVANTAGES OF REACT NATIVE

Stable and reliable for large scale projects

Android, iOS and Windows app code reusability.

Codes are not dependent on the platforms

Vast community

DISADVANTAGES OF REACT NATIVE

Require native development skills.

Lack of custom modules

Slight debugging and compatibility issues.

Now that we have laid down the facts and figures, let us conclude by determining if one is above the other.

SUMMING UP

The choice will be largely influenced by the type of project you are undertaking, the time of development, and the skills garnered by the team. According to a popularity survey by Ionic,

86% of web developers have used Ionic and 16% went for React Native.

To build PWAs, 72% preferred Ionic while 21% picked React Native.

On GitHub, Ionic has 41,000 stars and React Native has 89,100 stars.

These statistics boil down to the fact that it is not feasible to put one over the other objectively. We can conclude by understanding that if the requirement is a low budget, high performance app in a limited time, Ionic is the better one and if the requirement is a high budget, large scale app, React Native is the better one, for 2021. At Orion, we specialize and deliver excellence in both.

#mobile app development #Hybrid Mobile Apps #Native Mobile Apps #React Native framework #IONIC APP DEVELOPMENT SERVICES INDIA

5 notes · View notes

mbaljeetsingh · 8 years ago

Text

Hybrid Apps And React Native: A Time To Transition?

Accomplished musicians often talk about how, at certain moments in their careers, they had to unlearn old habits in order to progress. This process often causes them to regress in performance while they adjust to an ultimately better method. Once the new approach is integrated, they are able to reach new heights that would not have been possible with their previous techniques.

Like musicians, all professionals should frequently question their methodologies and see what other options exist. If one approach was previously the best, that does not mean it remains the best. Then again, many established techniques have been the best for decades and might never be surpassed. The important thing is that one is willing to consider alternative approaches and is not too heavily biased towards the one they are most familiar with. This analysis is often more difficult in software development because new frameworks and technologies emerge almost as quickly as they die off.

This article will apply this analysis to hybrid mobile apps and present why I sincerely believe that React Native is in many ways a superior solution for apps developed in 2017, even if it introduces some temporary pains while you’re getting acclimated. To do this, we will revisit why hybrid apps were created initially and explore how we got to this point. Then, within this context, we’ll discuss how React Native stacks up and explain why it is the better approach in most cases.

Further Reading on SmashingMag: Link

An Origin Story Link

It’s 2010. Your company has a pretty awesome web application that uses jQuery (or, if you’re hip, some sort of AngularJS and React precursor like Mustache). You have a team of developers competent in HTML, CSS and JavaScript. All of a sudden, mobile apps are taking over. Everyone has one. Mobile apps are the new Tickle Me Elmo! You frantically research how to make your own mobile app and immediately run into a host of issues. Your team is ill-equipped for the task. You don’t have Java or Objective-C developers. You can’t afford to develop, test and deploy two separate apps!

Not to worry. The hybrid mobile app is your silver bullet. This shiny new technology allows you to quickly and (in theory) easily reuse what you have (code and developers) for your lustrous new mobile app. So, you pick a framework (Cordova, PhoneGap, etc.) and get to work building or porting your first mobile app!

For many companies and developers, their problems were solved. They could now make their very own mobile apps.

Problems Arise Link

Ever since 2010, developer forums, blogs and message boards have been full of arguments about the efficacy of hybrid apps. Despite the great promise and flexibility described in the previous paragraphs, hybrid apps have had and continue to face a very real series of challenges and shortcomings. Here are a few of the most notable problems

User-Experience Shortcomings Link

Over the past couple of years, the bar for UX in mobile apps has risen dramatically. Most smartphone owners spend the majority of their time using only a handful of premier apps5. They, perhaps unfairly, expect any new app they try to be as polished as Facebook, MLB TV, YouTube and Uber.

With this very high bar, it is quite difficult for hybrid apps to measure up. Issues such as sluggish or limited animations, keyboard misbehavior and frequent lack of platform-specific gesture recognition all add up to a clunkier experience, which makes hybrid apps second-class citizens. Compounding this issue is hybrid apps’ reliance on the open-source community to write wrappers for native functionality. Here is a screenshot from an app that highlights all of these issues. This app6 was selected from Ionic’s showcase7 and was created by Morgan Stanley.

8 Screenshot of the app store listing for MS StockPlan (View large version9)

A few things should be immediately apparent. This app has a very low rating (2.5 stars). It does not look like a mobile app and is clearly a port of a mobile web app. Clear giveaways are the non-native segmented control, font size, text density and non-native tab bar. The app does not support features that are more easily implemented when building natively. Most importantly, customers are noticing all of these issues and are summarizing their feelings as “feels outdated.”

User Interface Challenges Link

The majority of users are very quick to uninstall or forget new apps10. It is crucial that your app makes a great first impression and is easily understood by users. A large part of this is about looking sharp and being familiar. Hybrid apps can look great, but they do tend to be more platform-agnostic in their UI (if they look like a web app) or foreign (if they look like an iOS app on Android or vice versa).

Before even installing an app, many would-be customers will review images in the app store. If those screenshots are unappealing or off-putting, the app might not be downloaded at all. Here is an example app found on the Ionic showcase. This app11 was created by Nationwide, and, as you can tell, both apps look just like a mobile-friendly website, rather than a mobile app.

12 Screenshot of the Nationwide app on iOS 13 Screenshot of the Nationwide app on Android

It is clear from the app store reviews (3 stars on both platforms) that this app has several issues, but it is unlikely that any app with this UI would attract new customers. It is clearly only used by existing customers who think they might as well try it out.

Performance Issues Link

The most common complaints about hybrid apps cite poor performance, bugs and crashes. Of course, any app can have these issues, but performance issues have long plagued hybrid apps. Additionally, hybrid apps often have less offline support, can take longer to open and perform worse in poor network conditions. Any developer has heard any of the above called a “bug” and has had their app publicly penalized as a result.

Overall Lack of Premier Apps Link

All of these issues have added up to the vast majority of premier apps being written natively. A quick look at both PhoneGap’s14 and Ionic’s15 showcases demonstrate a noticeable shortcoming in premier apps. One of the most highly touted hybrid apps is Untappd, which despite being a pretty great platform, has fewer than 5 million downloads. This might seem like a large number, but it puts it quite far down the list of most used apps.

Additionally, there is a long list of apps that have migrated from hybrid to native. That list includes Facebook16, TripAdvisor17, Uber18, Instagram3619 and many others.

It would be quite challenging to find a list of high-end apps that have moved from native to hybrid.

Final Defence of Hybrid Apps Link

The point of this section is not to be overly critical of hybrid apps, but to show that there is room for an alternative approach. Hybrid apps have been a very important technology and have been used successfully in many cases. Returning to the Ionic showcase, there are several apps that look better than the ones above. Baskin Robbins20, Pacifica21 and Sworkit22 are three recent examples.

For the past four years, hybrid app developers and frameworks have been working hard to improve their apps, and they have done an admirable job. However, underlying issues and foundational shortcomings remain, and ultimately better options can be found if you’re building a new app in 2017.

Another Approach Link

Although it is clear that hybrid apps do not quite stack up against native apps, their advantages and success can’t be ignored. They help solve very real resource, time and capabilities problems. If there was another approach that solved these same problems, while also eliminating the shortcomings of hybrid apps, that would be extremely appealing. React Native might just be the answer.

Overview and Advantages Link

React Native23 is a cross-platform mobile application development framework that builds on the popular React web development framework. Like React, React Native is an open-source project maintained largely by developers at Facebook and Instagram.

This framework is used to create Android and iOS applications with a shared JavaScript code base. When creating React Native apps, all of your business logic, API calls and state management live in JavaScript. The UI elements and their styling are genericized in your code but are rendered as the native views. This allows you to get a high degree of code reuse and still have a UI that follows each platform’s style guide and best practices.

React Native also allows you to write platform-specific code, logic and styling as needed. This could be as simple as having platform-specific React components or as advanced as using a platform-specific C library in your React Native app24.

Similarities to Hybrid Apps Link

Like hybrid app frameworks, React Native enables true cross-platform development. Instagram has shared that it is seeing between 85 and 99% code reuse25 for its React Native projects. Additionally, React Native is built using technologies (JavaScript and React) that many web developers will be familiar with. In the event that a developer is not familiar with React, it is a dramatically easier to learn if they are familiar with AngularJS, jQuery or vanilla JavaScript than it would be to learn Objective-C or Java.

Additionally, debugging26 React Native apps should also be a familiar process for web developers. This is because it is exceptionally easy to use Chrome’s debugging tools to monitor a code’s behavior. Chrome tools can be used when viewing apps in an emulator or on actual devices. As an added bonus, developers can also use more native debuggers as needed.

27 iOS React Native debugger window

The main takeaway here is that React Native solves the same core problems that hybrid app frameworks set out to solve.

Further Improvements Over Hybrid Apps Link

Unlike hybrid apps, React Native apps run natively, instead of within a web view. This means they are not restricted to web-based UI elements, which can be sluggish when paired with a poor JavaScript interpreter28. Because React Native renders native UI elements, apps immediately feel more at home on the platform and make the user more comfortable on first use. Additionally, developer quality of life can be improved with React Native through more complete use of native tooling and profiling utilities.

Below are two screenshots of a recently released React Native app. These images highlight the platform-specific interface that can be achieved using this framework. As you can see, each app uses its native map and has callouts that follow each platform’s design guidelines. On Android, the callout is a card that rises from the bottom of the map. On iOS, the callout connects to the selected element on the map. The same actions can be performed in both apps, and most of the code is shared, but that extra bit of platform-specific polish really helps with overall usability.

29 Screenshot of the Vett Local app on iOS 30 Screenshot of the Vett Local app on Android (View large version31)

How Is This Done? Link

Below is a sample React Native component. It demonstrates some common elements that make up React Native apps and highlights the areas that web developers should already be familiar with. Following the code snippet is a description of what each section is doing.

import PropTypes from "prop-types"; import React, { PureComponent } from "react"; import { Dimensions, StyleSheet, Text, View } from "react-native"; import LoadingAnimation from "./LoadingAnimation"; import SearchBar from "./SearchBar"; const { width } = Dimensions.get("window"); const styles = StyleSheet.create({ title: { backgroundColor: colors.transparent, color: colors.black, fontSize: 19, fontWeight: "500", }, }); export default class MovieList extends PureComponent { state = { movies: [], filteredMovies: [], loading: true, }; componentWillMount() { this._fetchMovies(); } _fetchMovies = () => { fetch("http://ift.tt/2swy1i4", { method: "GET", }) .then(res => res.json()) .then(res => { this.setState({ movies: res, filteredMovies: res, loading: false, }); }) .catch(err => { this.setState({ error: "Unable to get movies.", }); }); }; _applyFilter = term => { const filteredList = this.state.movies.filter( movie => movie.title.toLowerCase().search(term) !== -1, ); this.setState({ filteredMovies: filteredList, }); }; _renderTitleRow = movie => { const titleLimit = width >= 375 ? 26 : 20; let formattedTitle = movie.title; if (formattedTitle.length > titleLimit) { formattedTitle = formattedTitle.slice(0, titleLimit - 3) + "..."; } return ( <Text numberOfLines={1} style={styles.title} key={movie.id}> {formattedTitle} </Text> ); }; render() { if (this.state.loading) { return ( <View> <LoadingAnimation /> </View> ); } else { return ( <View> <SearchBar onFilterChange={this._applyFilter} /> {this.state.filteredMovies.map(movie => this._renderTitleRow(movie))} </View> ); } } }

Much of the code above should be familiar to most web developers. The vast majority of the code is just JavaScript. Much of the rendering logic will be new, but the migration from HTML to the React Native views is pretty straightforward. Additionally, the style attributes are quite similar to CSS. Let’s walk through some of this code:

state State32 is an object that contains many of the values that our component33 MovieList needs to function. When state properties are changed (using this.setState()), the entire component is re-rendered to reflect those changes.

componentWillMount ComponentWillMount34 is a lifestyle function that is called prior to the component being rendered. Initial network requests often belong in this function.

_fetchMovies This function makes a network request that returns an array of movie objects. After it successfully completes, it updates state with the list and sets loading to false. Note that it also sets the initial filteredMovies to the returned list.

_applyFilter This function is called by our imported SearchBar component. For simplicity’s sake, assume that this function is called (likely with some debounce) whenever the value typed into the SearchBar component is changed. This function just contains some JavaScript that filters the filteredMovies list to the relevant titles.

_renderTitleRow This function outputs the view for a single movie. It contains some logic to make sure our output is uniform and renders a basic text component.

render() This function outputs the view for the component. It conditionally renders the list of movies or a loading animation, depending on the loading value stored in the state object.

Who Is Doing This? Link

When deciding how to build your own application, it is important to learn from industry leaders. Other companies and developers might have wasted years and millions of dollars building applications, and in minutes you can learn from their mistakes and experiences. Here is a quick list of some large companies that are using React Native in their apps: Facebook35, Instagram3619, Airbnb37, Baidu, Discord, Tencent, Uber38 and Twitter39.

Many of these apps were originally written using other approaches but have transitioned fully to React Native or are now using React Native to augment their existing native applications.

There is a notable trend of many premier apps being moved to React Native as a cross-platform solution, whereas, previously, most technology shifts among this class of apps were from cross-platform to platform-specific. This change simply can’t be ignored.

What Should You Do Now? Link

Just like the musician who has to rethink their approach to progress, so too must mobile app developers reconsider their technologies. It is critical that we make decisions based on the best options available and not rely solely on our familiarities. Even if the transition is uncomfortable initially, our industry and the app marketplace are highly competitive and demand that we continue to progress.

React Native is a highly attractive technology that combines the reusability and cost-effectiveness of hybrid apps with the polish and performance of native apps. It is seeing rapid adoption and should be considered as an alternative approach for any upcoming would-be hybrid apps.

(da, vf, yk, al, il)

1 http://ift.tt/2gPkWXi

2 http://ift.tt/2b2APf9

3 http://ift.tt/1SBKCSH

4 http://ift.tt/2oqbWwb

5 http://ift.tt/2cy5iTZ

6 http://ift.tt/2t65e0V

7 http://ift.tt/2t67ODY

8 http://ift.tt/2rhhfiD

9 http://ift.tt/2rhhfiD

10 http://ift.tt/1HZuIfA

11 http://ift.tt/2swISc5

12 http://ift.tt/2swZXlX

13 http://ift.tt/2swAU2G

14 http://ift.tt/14oiDl4

15 http://ift.tt/2t67ODY

16 http://ift.tt/2fCFTFx

17 http://ift.tt/1btSJks

18 http://ift.tt/2axUU92

19 http://ift.tt/2kkqjSN

20 http://ift.tt/2auP7zj

21 http://ift.tt/1PgOOep

22 https://sworkit.com/

23 http://ift.tt/1SBKCSH

24 http://ift.tt/2dvhW2H

25 http://ift.tt/2kkqjSN

26 http://ift.tt/1M6KVS3

27 http://ift.tt/2swKwug

28 http://ift.tt/1ReOni5

29 http://ift.tt/2t5RdAv

30 http://ift.tt/2t5RJyf

31 http://ift.tt/2t5RJyf

32 http://ift.tt/2t6rgAI

33 http://ift.tt/2fYy3Iu

34 http://ift.tt/2guuIlk

35 http://ift.tt/1LUtTNz

36 http://ift.tt/2kkqjSN

37 https://www.youtube.com/watch?v=tUfgQtmG3R0

38 http://ift.tt/2o8FCBl

39 http://ift.tt/2t67SUe

↑ Back to top Tweet itShare on Facebook

via Smashing Magazine http://ift.tt/2so5IRZ

#IFTTT #Feedly

0 notes