Javascript for Native Apps: React Native, Electron, and Ionic
Many people consider the 1997 built-in arcade game ‘Snake’ on Nokia’s 6610 devices the first Native App. Fast forward a few years to Apple’s 2007 iPhone release and Native Apps were transformed forever. With competition and user needs growing, developers had to find a way to make Native Apps more functional, interactive, and user & developer friendly to keep up with demands. Today modern frameworks like React Native, Electron, Ionic streamline this process. These frameworks have a lot of similarities and few differences but as developers, it is important to know which framework might work best for your current or upcoming project(s).
React Native is an open-source project that was created by Facebook in 2015. React Native is able to create components that can share code across multiple platforms. The multi-platform capabilities make it easy to develop apps for different devices at the same time giving developers more time to meet deadlines. React Native looks similar to CSS but does not use CSS or HTML and is similar to its parent, Reactjs, except it does not manipulate the DOM. Instead, React Native runs in the background, interprets the Javascript we write, and communicates with the specific device being used to render content that is compatible with it. There are built-in components you can use but are not required, in your app including view, text, image, scroll view, and stylesheet. React Native is extremely flexible because it allows us to write code in languages like Java and C++. React Native is able to access device/platform features like users' locations and device cameras. Apps built with React Native are able to be downloaded directly to a user's device from the app/play store, accessed easily from an icon on their home screens, and works with or without network access.
Ionic is a framework that allows us to build apps that run on iOS, Android, Electron, and the Web. Ionic components are built with web standards using HTML, CSS, and Javascript. The elements are reusable and serve as the bones of an app. Ionic components change and adapt depending on the device it’s running on, using iOS design languages for Apple devices and Material Design language for Android devices. Ionic runs a bit slower because it uses plug-ins and is used to build Web Views and not native apps. Web Views are what power web apps on mobile devices. WebViews are not very interactive and mostly allow users to view a webpage and navigate forward or backward when necessary. A great example of a Web View is the email app on your device, you can view mail and move back and forth between messages. Developers can use Modern Web Views to enable hardware functionality like using a device's speakers or Bluetooth more similar to native apps. Ionic is able to add your app to the app store or work as a Progressive Web App and download an icon to users' home screens. Since Ionic is built with web tech, developers that have no knowledge of making native apps are able to easily build using this framework.
Electron is a framework used to build desktop apps. Desktop apps are apps that can run by themselves on an individual computer to perform a specific task with or without network access. Most desktop apps come pre-downloaded on a new computer. Examples of desktop apps are calendars, notepads, and paint. Electron apps are built using Javascript, HTML, CSS, and inserting Chromium and Node.js to allow developers to maintain one Javascript codebase and create cross-platform apps. The Electron library is recommended for developers that are already familiar with Node.js and have a bit of web development knowledge so it is not as beginner-friendly as React Native or Ionic. These apps are able to work offline, have access to a device's hardware (cameras, Bluetooth, etc), and can access native app features like sending notifications.
When looking at the details of each native app framework, you can probably see that each type has its place when starting a project. When deciding which framework to use, I would consider my background in certain languages, whether there is a website built in a certain language or not, budget, and how much time you have to develop the app.
Resources:
React Native: https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch01.html, https://ionic.io/resources/articles/ionic-react-vs-react-native, https://reactnative.dev/docs/components-and-apis#basic-components
Ionic:
https://ionic.io/resources/articles/ionic-react-vs-react-native, https://www.imaginarycloud.com/blog/ionic-vs-react-native-pros-and-cons/, https://www.simform.com/blog/react-native-vs-ionic, https://www.imaginarycloud.com/blog/ionic-vs-react-native-pros-and-cons/
Electron:
https://www.electronjs.org/docs/tutorial/introduction, https://www.360logica.com/blog/mobile-apps-vs-desktop-apps-a-deeper-look/, https://www.andplus.com/blog/web-apps-vs-native-desktop-apps, https://digitalskynet.com/blog/Desktop-App-vs-Web-App-Comparative-Analysis
App History:
https://inventionland.com/inventing/the-history-of-mobile-apps/