Mobile Apps Tag

How to build a plugin system with Node.js

If you’re building a minimalist product, but want to add an extra level of customisation or expansion, then plugins are a great way to enable that. They allow each instance to be customised with additional code that anyone can create.

In this tutorial, we will extend a minimal web server with a plugin system, create a plugin, and use that plugin with the server. We’ve already created a very basic web server. We’ll use this as our starter code.

What Is A Plugin

But before we start, what is a plugin? A plugin is an extra piece of code that expands what a program can normally do. Web extensions are a good example of this. They leverage existing APIs, and build new functionality upon them. In certain circumstances, they can also be used to patch bugs and flaws that the main software provider has not yet addressed.

In this tutorial, we’ll be building a request counting plugin, and the system to load and unload that plugin.

Getting Started

Let’s start by creating a fresh Node.js project. I’ll be using NPM in this tutorial, but I’ll add the Yarn commands too.

1. mkdir my-plugin-app
2. cd my-plugin-app
3. npm init -y (yarn init -y)
4. npm i express (yarn add express)

We won’t go through the process of creating an app for our plugins system. Instead, we’ll use this starter code. A simple server with one endpoint. Create an index.js file and add this starter code.

const express = require('express');
const EventEmitter = require('events');

class App extends EventEmitter {
  constructor() {
    super();

    this.server = express();
    this.server.use(express.json());
  }

  start() {
    this.server.get('/', (req, res) => {
      res.send('Hello World!');
    });

    this.server.listen(8080, () => {
      console.log('Server started on port 3000')
      this.emit('start');
    });
  }

  stop() {
    if (this.stopped) return;
    console.log('Server stopped');
    this.emit('stop');
    this.stopped = true;
    process.exit();
  }
}

const app = new App();
app.start();

["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "SIGTERM", "uncaughtException"].forEach(event => {
  process.on(event, () => app.stop());
});

Our First Plugin

To get a sense as to what our plugin system will do, let’s create a little plugin containing everything a plugin will need. The type of plugin system we’ll be implementing has two events. load and unload are the two times we will directly call any code in the plugin. load sets up any extra routes, middleware or anything else that is part of the plugin, and unload tells us to safely stop whatever we’re doing and save any persistent data.

This plugin will set up a middleware to count the number of requests we get. In addition, it will add an API route so we can query the number of requests that have been made so far. The plugin will export two different functions, one for each event.

const fs = require('fs');

let count = 0;

function load(app) {
  try {
    count = +fs.readFileSync('./counter.txt');
  } catch (e) {
    console.log('counter.txt not found. Starting from 0');
  }

  app.server.use((req, res, next) => {
    count++;
    next();
  });

  app.server.get('/count', (req, res) => {
    res.send({ count });
  })
}

// Save request count for next time
function unload(app) {
  fs.writeFileSync('./counter.txt', count);
}

module.exports = {
  load,
  unload
};

Loading Plugins

Our plugin system will all be kept in a separate class from the main app, we’ll put this in a new file plugins.js. The point of this class is to load and unload plugins.

The load function takes a path to a plugin file, and uses the require method to load it during runtime. The loadFromConfig method allows us to load plugins defined in a config file.

const fs = require("fs");

class Plugins {
  constructor(app) {
    super();
    this.app = app;
    this.plugins = {};
  }

  async loadFromConfig(path='./plugins.json') {
    const plugins = JSON.parse(fs.readFileSync(path)).plugins;
    for (let plugin in plugins) {
      if (plugins[plugin].enabled) {
        this.load(plugin);
      }
    }
  }

  async load(plugin) {
    const path = plugins[plugin];
    try {
      const module = require(path);
      this.plugins[plugin] = module;
      await this.plugins[plugin].load(this.app);
      console.log(`Loaded plugin: '${plugin}'`);
    } catch (e) {
      console.log(`Failed to load '${plugin}'`)
      this.app.stop();
    }
  }
}

module.exports = Plugins;

We’ll use a plugins.json file to store the paths to all the plugins we wish to load, then call the loadFromConfig method to load them all at once. Put the plugins.json file in the same directory as your code.

{
  "counter": "./counter.js"
}

Finally, we’ll create an instance of the plugin in our app. Import the Plugins class, create an instance in the constructor, and call loadFromConfig leaving the path blank (the default is ./plugins.json).

const express = require('express');
const Plugins = require('./plugins');

class App {
  constructor() {
    super();

    this.plugins = new Plugins(this);

    this.server = express();
    this.server.use(express.json());
  }

  async start() {
    await this.plugins.load();

    this.server.get('/', (req, res) => {
      res.send('Hello World!');
    });

    this.server.listen(8080, () => {
      console.log('Server started on port 3000')
    });
  }

  stop() {
    if (this.stopped) return;
    console.log('Server stopped');
    this.stopped = true;
    process.exit();
  }
}

const app = new App();
app.start();

["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "SIGTERM", "uncaughtException"].forEach(event => {
  process.on(event, () => app.stop());
});

Unloading Plugins

We now need to handle the unload method exported from our plugin. And once we do, we need to remove it from the plugins collection. We’ll also include a stop method which will unload all plugins. We’ll use this method later to enable safe shutdowns.

const fs = require("fs");

class Plugins {
  constructor(app) {
    super();
    this.app = app;
    this.plugins = {};
  }

  async loadFromConfig(path='./plugins.json') {
    const plugins = JSON.parse(fs.readFileSync(path)).plugins;
    for (let plugin in plugins) {
      if (plugins[plugin].enabled) {
        this.load(plugin);
      }
    }
  }

  async load(plugin) {
    const path = plugins[plugin];
    try {
      const module = require(path);
      this.plugins[plugin] = module;
      await this.plugins[plugin].load(this.app);
      console.log(`Loaded plugin: '${plugin}'`);
    } catch (e) {
      console.log(`Failed to load '${plugin}'`)
      this.app.stop();
    }
  }

  unload(plugin) {
    if (this.plugins[plugin]) {
      this.plugins[plugin].unload();
      delete this.plugins[plugin];
      console.log(`Unloaded plugin: '${plugin}'`);
    }
  }

  stop() {
    for (let plugin in this.plugins) {
      this.unload(plugin);
    }
  }
}

module.exports = Plugins;

Safe Shutdown

To make sure that plugins get a chance to unload when the app closes, we need to call Plugins.stop. In the index.js code, we included a stop method that gets called when the app is killed, and we’ve just added a stop method to the Plugins class. So let’s call the Plugins.stop method when our app stop method is called.

Add the following to the App.stop method.

 stop() {
    if (this.stopped) return;
+   this.plugins.stop();
    console.log('Server stopped');
    this.stopped = true;
    process.exit();
  }

For more information and to develop web applications using Node JS, Hire Node Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop your custom web app using Node JS, please visit our technology page.

Content Source:

1. javascript.plainenglish.io

How to improve the performance of your React Native App

React-Native(RN) apps suffer huge performance issues as compared to native apps. During initial development days, such challenges are ignored but as soon as the app grows developers find it difficult to improve. Sometimes, extreme calls to dump the RN app happen. We can escape such steps and you can easily improve the RN app performance, just with little effort.

There are multiple ways to improve RN app performance:

Basics of RN performance:

Hermes: A JS engine to optimizes app start time, reduce APK size, and memory footprints. Follow this guide to setup for your app.

Remove Arrow functions: Every render creates new instances of these functions. When passed to children, it will re-render the child components even when nothing has changed in them.

Simple Reducers: Reducers are just to dispatch store changes, not for complex code logic, avoid that as much as possible.

Use native driver: Enable useNativeDriver=true for all the animations that you use in the app.

Memoization:

React.PureComponent: This works for class components. It does a shallow comparison for the previous and new props, re-renders if they are not equal.

React.memo: Only functional components can leverage this functionality, and works similar to React.PureComponent. React.memo comes with an option to use a custom comparison function, to provide more control over it. For the child functional components use React.memo export const ChildrenMemoComponent = React.memo(ChildFunctionComponent) to memoize.

Whenever parent component props change children’s components are also re-rendered causing huge performance issues. This can be avoided either by using shouldComponentUpdate(), React.PureComponent, React.Memo. Memoization breaks if React creates new functions instances when child component is passed with callback functions from parents. New function instances are created with inline function calls, arrow functions, functions calls inside render. For function component use useCallback hook and for class component define functions outside render and pass references to children.

Memory leaks:

Debugger warnings and errors: You need to get rid of them, just enable debugging, remove (console.disableYellowBox = true) and fix all the warnings, promise rejections, key errors and other errors too.

Android Studio Profiler: Great tool to find memory leaks in the app. In the below image, the bottom section has lots of bin icons(white color icons) that when android running its garbage collector and repeated icons indicate memory leaks. Perform actions in your app, debug them and fix asap.

Android Studio Profiler
Pic courtesy: medium.com

React-DevTools: React Profiler provides in-depth component-level leak detection, though it supports RN version ≥ 0.57. Profiler API helps in optimizations like memoization, cost of rendering, sluggish code, re-renders. Go through the docs to check how to integrate it with your app.

Inspecting using React-DevTools
Pic courtesy: medium.com

Inspecting RN bridge: RN Bridge works asynchronously and converts javascript queries as JSON, finally calling the natives modules. We are leaving for you to check out how to do this, there are numerous great articles on this, We will write more on this later.

Stay updated:

Keep your libraries, React version updated to the latest stable versions:

React-native upgrade helper: RN community provides awesome documentation for upgrading RN versions. Major updates are between v0.60.0 and v0.63.0, there will be more errors you will need to fix. Do check out what’s new with v0.64 here.

Upgrade libraries & dependencies: A time-consuming process, during RN update also keep React in mind and upgrade accordingly, v17.0.0 has major changes. For every dependency you upgrade follow the below process:

• Package.json: Segment out the major and minor version upgrades using npm website, “^”(^2.1.2 will use releases from 2.1.2 to <3.0.0) and “~”(~2.1.2 will use releases from 2.1.2 to <2.2.0). For minor version just replacing the version name will do the work. For Major version upgrades check out the version release documentation for breaking changes.
• Code changes: After upgrading the version inside package.json make suitable code changes using Github document and release notes.
• Remove junk: This is also the right time to clean your app code. Try to remove unused codes, folders, files, and dependencies from package.json. Also, to reduce your assets, there is a great tool that does lossless compression, ImageOptim.

That’s 90% of your whole performance improvement job. There are other ways like amalgamation of native code and RN code but we will leave that for some other time.

For more information and to develop mobile application using React Native, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop a custom mobile application using React Native, please visit our technology page.

Content Source:

1. medium.com

Pros and cons of React Native development in 2021

React Native, next to Flutter and PWA, was called a revolution in cross-platform app development and delivering great mobile experience.

Code repository that’s shareable between platforms? Reusable components? That definitely sounds tempting.

React Native has been praised for its “Learn once, write anything.” objective which means you get a native look and feel of your app for both iOS and Android, and you may also include platform-specific modules.

For a developer with an experience in JavaScript, and React itself, it is easy to take up React Native and start building on it right away.

Some time ago one of our React Native apps, Guild, went public. (Update: Guild has been recognized by Red Herring’s 2019 Top 100 European Startups.)

We’re extremely proud of how the app is turning out and we just can’t wait to write more of them. Our devs and some of our clients are fully aboard the React Native train and in this post, we will tell you exactly why is that: from a perspective of a business owner and a JavaScript developer. As well as some React Native advantages and limitations.

Is React Native the pick for your next app?

Build a product your users will love to use. Get a highly performant, native app for Android, iOS, and even the Web. Work with our developers and designers to squeeze the most out of your app idea and React Native.

Business Perspective on React Native

Unlike other cross-platform frameworks like Ionic, the Facebook team stresses they acknowledge the differences between different platforms and React Native reflects that. Therefore, you can still include modules specific for iOS and Android like status bars, navigation, or access to native elements like camera and contacts are built according to the platform.

Using libraries such as React Native for Web or ReactXP allows a developer to build a cross-platform app that runs on the Web too, so there’s no need to build separate apps at all. We used ReactXP in one of our projects and it really felt like we’re getting the Web version for free. That’s pretty amazing.

Note that using React Native DOES NOT mean you will not need any help from a native developer. If your app includes many different native features, some work on their side may be required.

Now, when it comes to a team building…

Your front-end web developer can actually become a mobile developer without a need of learning iOS’s Swift or Java/Kotlin for Android. With some knowledge about native UI elements, React, and some platform-specific patterns, React Native is easy to pick up. That is a game changer in terms of building a team as your app will require just one instead of two (or even three if you’re also to conquer the Web).

You can hire JS developers who will be able to deliver for all platforms. Therefore, it is much easier for them to exchange knowledge, conduct a code review, and understand the code. What a difference it makes in terms of time and cost! Not to mention that React Native is all about bringing agility of web development to cross-platform development, with native results.

About the performance…

Some may argue that nothing will surpass the performance of native apps. It may be even true, but products written with React Native are almost identical in how they perform. Sometimes even better. In his great article comparing Native iOS and RN, John Calderaio says:

"(According to) the data we collected through measuring both of the application's CPU, GPU, and Memory during the tasks in each of the four tabs, the apps are also almost identical in how they perform. (…) React Native, winning two out of three categories, comes in first place as the better performing platform."

Wrapping-up: Pros and Cons for Business

Pros:

• Time and cost efficiency
• Native look and feel of your apps
• Sharing the codebase for iOS, Android, and the Web (with ReactXP and React Native for Web)
• One team for multiple platforms
• Awesome performance

Cons:

• Need for an expertise from a native developer for some platform-specific modules
• It’s not fully cross-platform, single-codebase approach

If you’re looking for a framework that will let you build a great cross-platform mobile app, check out Flutter.

Pic courtesy: medium.com

Bloomberg is a great example of preformant app written with React Native. Image source belitsoft.com.

Developer’s Perspective on React Native

When you start working with React, typically you go with a bundler like Webpack and spend some time considering the right bundling modules for your app. React Native is different, and yet it works similarly to React. It comes with everything you need to just sit down and start writing your code.

Hot/Live reload (similar to Instant Run on Android) is a beloved, killer feature that allows a developer to see introduced changes right away without complete rebuilding of the app. You don’t have to constantly check the results of actions you take which greatly boosts productivity and saves time on compilation.

When it comes to scroll, animations, buttons, text inputs and others, React Native gives an efficient recipe that allows developers to conduct basic tasks easily. Component usage is heavily simplified in comparison to native development and it’s huge.

Adding native modules may not be a piece of cake though.

Whereas there are countless libraries to choose from for iOS and Android, React Native does not exactly shine here. The list of third-party libraries and components is quite long, but in many cases they leave a lot to be desired. When working on modules like device sensors or push notifications, there is a chance you may need some help from a native programmer.

Truth to be told, the Facebook team together with outside collaborators and thriving population of active users constantly work on React Native making it better every day with over 2500 commits from 500 contributors last year.

According to Sophie Alpert, Engineering Manager on React:

"We're working on a large-scale rearchitecture of React Native to make the framework more flexible and integrate better with native infrastructure in hybrid JavaScript/native apps."

Even if it may happen that you’ll need to hack some existing solution or write something from scratch, this will happen more and more rarely.

Wrapping-up: Pros and Cons for a Developer

Pros:

• You’re web AND mobile developer!
• Great productivity
• Easy setup
• Simplified usage of styling components
• Hot/live reloading feature

Cons:

• Need of hacking some existing solutions or creating new ones from scratch
• Documentation still needs an upgrade

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com

Announcing the Capacitor ngAdd Schematic

Let’s take a look at what Capacitor is and how to add it to an Angular project

First off, let’s go over what Capacitor is and how it relates to other cross platform projects out there.

At a glance, Capacitor follows many of the same ideas as Apache Cordova.

pic courtesy: blog.angular.io

There is a Web layer that renders the app and a native layer that listens for calls to Native APIs. Within those layers are many technical decisions that make the overall developer and user experience much smoother.

• Unified API that makes cross-platform development easier
• Native Platforms are not distribution targets, but are committed to version control and can be edited by the developer.
• Modern native build tools and libraries, such as Cocoapods, Android Libraries, Xcode and Android Studio, provide more visibility into native project changes and better app maintainability.
• Utilize npm and modern JS tooling to simplify adding core plugins and creating new ones.

These principles bring the best of web development and native development with little to no friction for developers.

Capacitor and Angular integration

Capacitor itself is made up of 2 packages, the core functionality (@capacitor/core) and the CLI (@capacitor/cli). To add Capacitor to your project, let’s start with a simple Angular App from the Angular CLI.

ng new capApp --routing --style css
cd capApp

With the app created, let’s add Capacitor to our project.

ng add @capacitor/angular

With this, developers can add Capacitor to their project with ease.

pic courtesy: blog.angular.io

When the schematic is done running, developers should build our app, and run npx cap add <ios,android> or yarn cap add <ios, android> and our Xcode or Android Studio projects will be created!

ng run capApp:build
npx cap add ios

Pulling back the curtain

• Installing Capacitor Dependencies

First, it adds Capacitor dependencies to the package.json: Core and CLI.

• Installs dependencies

This will just do a quick npm (or yarn) install then make sure we have the Core and CLI packages for Capacitor.

• Run Capacitor CLI’s init script and create the scaffolding needed.

To make sure that the Capacitor project understands your Angular project, the schematic infers a lot of data based on your angular.json. It will read your app’s name and use that when creating the iOS and Android projects, as well as read the build folder so it knows where to copy your web code when preparing the native projects. This means that your Capacitor project will feel like a natural extension of your Angular project.

Once added, we do a build of our app, and deploy to either iOS, Android, web, or Electron. For building to iOS or Android, you’ll need to have the native SDKs and tools installed.

For more Information and to build the website using Angular, Hire Angular Developer from us as we give you high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the custom web app using Angular, please visit our technology page.

Source:

• blog.angular.io