What is React Native?

React Native is a popular JavaScript-based mobile app framework that allows an app developer to build a natively rendered mobile app for iOS and Android.  The framework lets us create an application for various platforms (Apple, Android and more) by using the same codebase.  This reduces the cost of development for our clients, because we don’t need to build to same app twice; once for iOS and once for Android.

In early 2015, Facebook first launched React Native, a framework for building native apps using the React Javascript library.  Since its initial release it has become one of the most popular solutions used for mobile app development.  React Native is used to power some of the world’s most used mobile apps, including the mobile apps for Facebook, Instagram, Shopify and Skype.

What’s in the latest version of React Native?

React Native is aiming to provide more frequent releases of new features and fixes, and engaging more regularly with the developer community.  Upcoming product releases will focus on fixes and as well as improvements.

The latest version of React Native is 0.67.  Below are some notable changes and fixes provided in this latest version:

• Removed DatePickerAndroid – the component to interact with the selection of date and time is now the same for both Android and iOS.
• Various 3^rd party components used by React Native have been updated, including Kotlin, Gradle.
• Various issues that were present in the previous version of React Native have been corrected, including bug fixes for animations in specific scenarios, as well as:
  • Android specific fixes: alignment of screen elements along the baseline, scrolling to a particular screen element checks the current position before scrolling, ability to trigger an event when a number pad button is pressed, text input field selection and an issue selecting the last item in a list, and much more.
  • iOS specific fixes including corrections to the behaviour of scrolling to a particular screen location, correcting the movement of the cursor for multi-line text boxes, handling all font family names, and more.
• Added new features:
  • Android specific: ACCESS_MEDIA_LOCATION permission now available, meaning that an app can be given access to media files on the local mobile device, support for Android 11 which includes a new Locale API, and more features which are specific to the development environment.
  • iOS specific: ability to change the colour of a cancel button, additional control over progress bars, and more features for specific 3^rd party software.
• Removed unnecessary files and global variables.

Why is it important to maintain your React Native app?

Upgrading React Native to its latest version improves performance and security of your apps, as well as ensuring that your app supports the latest changes in the operating systems running of your customer’s Apple and Android devices.

The JavaScript ecosystem is particularly interesting in this aspect as it changes very quickly.  If your app is not kept up to date on a regular basis, it is likely that your app codebase will end up being so far behind that upgrading it will become much more difficult, time-consuming and therefore costly.

How to improve the performance of a React Native app?

To ensure that your React Native app performs well, performance requires careful attention.  Performance is one of the main reasons why we sometimes recommend that our client’s build their apps natively rather than using cross platform languages such as React Native.

One of the changes in the latest release of React Native is the removal of the Android specific component for allowing a user to choose date and time, in favour of utilising the same component for both iOS and Android.  While this may be annoying from the viewpoint of app functionality, it will help the performance of the app by reducing the size of the codebase.

During development of a React Native app, we ensure that we focus on the following to help deliver a high performing app:

• Provide appropriate navigation strategies – code re-use and minification are important here, as well as usability.
• Avoid rendering overhead and unnecessary renders – rendering is where the screen is “re-drawn” to refresh information shown to the user.
• Avoid use of ScrollView to render huge lists. There are several ways to display items within scrollable lists in React Native; two of the most common ways are use ScrollView and FlatList components.  When implementing very long lists (or lists that might grow to be very long), is better to paginate, splitting up the call for information to manageable smaller collection of information and using the FlatList method.
• Scale and resize images.  The following improvements can be applied to optimize images in a React Native app:
  • Using PNG format instead of JPG.
  • Using smaller-resolution images.
  • Using WEBP format for images – this can help reduce the images’ binary size on iOS and Android by nearly a third of the original size.

• Cache images – using cache speeds up the display of images that are already in the device local cache.
• Avoid arrow functions. Arrow functions reduce the number of lines of code required to achieve a particular app behaviour, but slows performance of the app.  This is a bit technical, but to explain further, the arrow function causes each render to generate a new instance of that particular function.  React Native needs to reconcile the function instances, finds a difference due to the use of the Arrow method, and therefore cannot re-use old references.
• Avoid passing inline functions as properties. Similar to the above, while this coding style achieves the required functionality, it does so at the expense of app performance.
• Use style references correctly. Similar to the problem caused by arrow functions, when we use object or arrays for styling, React creates new instances with each new render.  Instead we use a Style Sheet in React Native, which always passes a reference instead of a new object or array.
• Remove console statements – console statements are used to help us test the application during development. These are removed prior to publishing the app; even though they are unseen by the end user, if left in place they impact upon the speed of the app.

The above strategies are also applied during maintenance of our client’s apps.

If your mobile app is built in React Native, and hasn’t been updated recently, we strongly recommend that you take corrective action as soon as possible.

by

First, what is Vue?

Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex. Vue has big and strong community to support with many good plugins.  Contactpoint often chooses VueJS to develop our client’s web and desktop applications, to facilitate fast development of modern user interfaces.

By way of summary, Vue has the following characteristics:

Progressive Framework

Vue is a framework and ecosystem that provides tools to create most of the common features needed in development of user interfaces. However, the web is extremely diverse – the applications we build for the web may vary drastically in form and scale. With that in mind, Vue is designed to be flexible and incrementally adoptable. Vue can be used in different ways, for different scenarios, including:

• Enhancing static HTML without requiring the HTML to be compiled – this allows a modern user interface component to be added into a pre-existing website.
• Embedding as Web Components on any page. Again, this makes it possible to add a new component, with a modern UI design, into an existing website or application.
• Single-Page Application (SPA) – the name given to an application which has only one “page” (i.e. one address) but presents a completely different set of screen elements depending on the way the user interacts with the application.
• Fullstack / Server-Side-Rendering (SSR). Fullstack refers to an application which is split into layers due to complexity and ensuring maintenance and performance.  Those layers include user interface (aka ‘frontend’), API layer through which the frontend sends or requests information, Server layer where the core logic resides and draws on data within a database or other data store.  SSR refers to rendering the Vue component with data fetched into static html – this is important for SEO of pages using Vue because it ensures that the data within a page is visible to the search engines.
• JAMStack / Static-Site-Generation (SSG). A pre-rendered, self-contained application, which with Vue can include sophisticated user interface components.
• An application for a desktop device, mobile, WebGL or even a terminal device.

In summary, there are many ways that Vue can be used!

Single-File Components (SFC)

SFC is a defining feature of Vue, and the recommended way to author Vue components.

SFC allows us to define the HTML/CSS and Javascript (JS) of a component, all within a single .vue file.

A single-file component is composed of three parts:

• The <template> section which contains the component’s markup in plain HTML.
• The <script> section which contains all the JS logic within that component.
• The <style> section which contains all the component styles. Alternatively, it can make use of an external css file, which we will often lean towards for code re-use.

Your application can then access all the properties of the SFC via an instance of the component, which contains the data, methods, computed properties, lifecycle hooks, etc.

An example of the SFC is shown in the screen grab below:

Performance

Vue is designed to be performant for most common use cases without much need for manual optimisations.  However, there are always challenging scenarios where extra fine-tuning is needed.  In which case, Vue enables the developer to override and adjust a particular component to meet the specific needs of the application.

New Features in Vue 3

Vue is undergoing constant improvement, which ensures that the framework keeps pace with the latest trends in user interface development, and hardware / operating system updates.

The new features of Vue 3 are also heavily targeted towards improving the ability of developers to create easy to maintain applications, and achieve high performance applications.

The most recently added features include:

• Async Components: in large applications, we may need to split the app into many smaller components and only load a component from the server when it’s needed. To make that possible, Vue 3 has a defineAsyncComponent function which is similar to lazy loading to improve the performance of your application.
• SSR rendering: the speed of server side render has been improved considerably compared to Vue 2. SSR can be very important from a search engine optimisation point of view, as well as performance of the application.
• Composition API: The Composition API new in Vue 3 makes it easier to extract repeatable parts of the code along with its functionality. The Composition API focuses on the Javascript (logic) side of application code and combining the logic of related code together, which is more conducive to code maintenance.
• Portals: a new feature which allows the application to render a component, or part of a component faster, in a different place in the DOM (document object model) tree.
• Fragments: Vue 3 supports multiple root node components in a template without any issues using the new Fragments API, which is easy to maintain the code, without using unnecessary wrappers.
• Multiple v-models: This change provides a directive to achieve two-way binding on a component, which is a shortcut to passing in values and listening for an input event.
• More advanced components: there are more complex and good components with full support from Vue 3 community.

Contactpoint has built numerous sophisticated applications using Vue.

If you are considering the creation of a desktop or web application, the use of Vue JS may be the appropriate technology to use.  Feel free to get in touch with Contactpoint to discuss your application requirements.

by