Getting started with progressive React Web Apps using Firebase

 Introduction

Sending notifications is one of the best ways to increase your app usage. Out of many websites/apps user visit, he can remember a few. Sometimes users install the app and forget. Push notifications come to your help. It’s a quick and simple way to notify the user without spamming his inbox. Push notifications are used widely by News Apps and Shopping Apps. Apps build in such a way that they can display notifications and keep track of user activity are known as Progressive Apps. In this article, we will be discussing only React applications.

React is a JavaScript library for building user interfaces.

  • Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
  • Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
  • Learn Once, Write Anywhere: We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business

As per Google Developers, Progressive Web Apps are

  • Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging – Feel like a natural app on the device, with an immersive user experience.

Prerequisites:

To turn App into Progressive App you need

  • Working React App.
  • React 12.0 or above
  • Node 6.0 or above
  • Chrome(50+) or Firefox(48+)
  • Google Cloud / Firebase Account (Even free trial will suffice)

Steps to implement Push Notifications using Cloud Messaging in React App

Step 1:

Login to firebase console https://console.firebase.google.com , and create a project. Then go to Project Overview and get started by adding Firebase to your app.

Click on the platform you want to implement Cloud Messaging.

In our case click on web icon and you will see config variable with API Key and Sender Id. Copy and keep this object for use in our App.

Step 2:

Install Firebase SDK.

npm install firebase – -save

Step 3:

All below code to your App.js

In this code, we are asking user permission to send notifications. If user allows then we start a worker in the user’s browser which will listen to incoming push messages.

Step 4:

Add  “gcm_sender_id”: “103953800507”  to your manifest.json (Note: 103953800507 is hard code value and do not replace it with your sender id)

Step 5:

Create a file firebase-messaging-sw.js and add below code

This is code for worker which run in the background in the browser even if user close App. We have added two Event Listeners one to receive notification and other to handle click on the notification.

That’s it we are done this changes in the app, this setup will receive the push notification on the user’s browser. Now we need the setup to send push notifications to the user.

Sending Push Notifications to App from Firebase

To send push notification also you need to store token every time a new worker is registered or existing worker is refreshed.

With help of token, you can send the unicast push notification to that user.

To send a message you need to send a POST Request

URL: https://fcm.googleapis.com/fcm/send

Body:

Headers:

Content-Type: “application/json

Authorization: “key=AIzaSyD0TOmt….upinUwueESEYI”

To generate this key go to https://console.firebase.google.com/project/<your project>/settings/cloudmessaging/ and generate a key pair.

Use Public Key in Authorization Header.

There are few other ways to send Push Messages like use Firebase SDK. Firebase SDK can be installed via npm

npm install -g firebase-tools

Then Login to the firebase

firebase login

firebase init

Check docs here https://firebase.google.com/docs/cli/

Conclusion:

This is just a start with Progressive Apps. There are a lot of possibilities in the world of Progressive Apps. We can leverage local resources available and minimize the use of REST calls. Also, we can give user Native App-like experience in Web Apps when the user is offline. You can make use of Service Workers. Service Workers are great tools when the user is offline or away from App.

Drawbacks of Progressive Web Apps

PWAs are not supported by iOS Safari. It only operates on Chrome, Firefox or Opera. But the survey reveals that it performs better than mobile websites even if the web browser is not supported.

iOS Build Management using Custom Build Scheme

Introduction

One of the best practices in iOS development is to be able to manage multiple environments during the development of a project. Many a time we might have to jump between DEV, QA, STAGE, and Production environments. As the owner of a product, clients request to have both development version of the app and production version of the app i.e. App store released version of the app on the same device.

If you have ever faced or might face this situation, then you need a custom build scheme.

Objective

This blog explains the significance of custom build schemes & build configurations in XCode. We will see how we can leverage these to configure an iOS project to support multiple build environments without the need to duplicate targets and keep the same code base.

Prerequisites

  • XCode 8.0 onwards
  • Mac machine with macOS Sierra version

Advantages of Custom Builds

  • Write code that only runs on a particular environment. For example, on DEV you might want to have different values to constants in the app than on Production.
  • Switch between different environments easily to deliver a build that talks to the production server after testing your app in a development environment.

Difference Between Build Schemes & Build Configurations

Before we start actual changes on XCode, let’s understand the difference between build schemes & build configurations first.

A build scheme is a blueprint for an entire build process. It is a way of telling Xcode what build configurations you want to use to create the development, unit test, and production builds for a given target (framework or app bundle).

A build configuration is a specific group of builds settings that can be applied to any target.

Most app projects come with two build configurations and one build scheme. You get the debug and release build configurations along with a building scheme that runs the debug configuration for debugging purposes and the release configuration for archiving/submission.

For most projects, this is perfectly fine and requires no tweaking. However, if you want to offer both a DEV and a PRODUCTION version of the same app, it’s not quite enough. You must add a new build configuration to achieve this.

Adding a new build configuration

Whenever you wish to support multiple environments in the app, you need to start by adding a new build configuration. There are some important steps involved which sometimes seems confusing at first, so follow every step carefully.

  1. Open Xcode and select the project file.

vj1

2. Go to Editor → Add Configuration → Duplicate Debug Configuration.

vj2

Repeat Steps 1 and 2 for Release configuration.
NOTE: Remember that for every environment you must Duplicate Debug and Release configuration. Thus, if you want to support DEV, QA, STAGE, PRO then you should have the following configuration:

  • DEV-Debug, DEV-Release
  • QA-Debug, QA-Release
  • STAGE-Debug, STAGE-Release
  • PRO-Debug, PRO-Release

vj3

Creating a separate build scheme for every environment

We’re going to take our new build configurations and create a build scheme that runs them.

  1. Tap on the currently active scheme.
  2. In the dropdown, select New Scheme.

vj4

3. Provide a name to the new build scheme. I usually follow <Name of the app>-       <Environment>. For example, MultipleEnvApp-QA.

vj5

Once you’ve done this, notice that your new build scheme is selected.

vj6

We’re not done yet. We have a build scheme, but it isn’t using our new build configurations yet.

4. Click on your build scheme and select Edit Scheme.

vj7

5. Select the appropriate build configuration as per the environment. For example, our selected scheme is MultipleEnvApp-QA, hence choose respective QA build configurations.

vj8

That’s it. In the same way, you can create and configure schemes for STAGE and PRO environment. You can rename the default scheme as MultipleEnvApp-DEV

Writing code that runs on a particular environment of your app

Unfortunately, having separate build schemes isn’t quite enough. We also need a way to selectively run blocks of code on a particular environment. To do that, we are going to add a custom Swift flag that only applies to the particular build configurations we just created.

  1. Select the target and then Go to Build Settings, and scroll down to Other Swift Flags.
  2. You must add the flags for every configuration. For example, add the flag “-DQA” to both of the QA build configurations.

vj9

-D is the namespace for custom flags that can be passed into a build command.

You can ignore the “-D” for now.

3. Go to any of your source files. For example, AppDelegate and add these lines of code.

https://gist.github.com/vkhemnar/7b4c38bb8f8597f2ac4792208dab3f2c 

We have created a global variable SOME_SERVICE_KEY and used a unique value for each environment. In this way, you can actually use different service keys, constants for different environments.

Different bundle identifiers for different build configurations

Optionally, if you want to use different bundle ID for different configurations, do the following:

  1. Create two app IDs on your Apple Developer portal.
  2. Go to your project settings and set the appropriate bundle identifiers for different build configurations.

vj10

Conclusion

That’s all there is to it. Now you are setup to deliver a configurable app for different environments using the same shared codebase. Here is the GitHub project that contains all the configurations which we followed in this blog.

Happy Coding!

Comparing productivity of node.js frameworks

Our mission is to compare the node.js frameworks on productivity.

In one of my previous blogs I have benchmark the various node.js frameworks performance against native http call and native mongodb driver and native combination was clear winner in term of performance.

https://blog.talentica.com/2017/11/14/comparing-performance-of-node-js-frameworks/

so, Why not use only native http and native mongodb driver. well one of the the key aspect and usp of node.js frameworks is that they provide lot of abstractions and as a developer you don’t have to write boiler plate , repetitive code . so lets see what our research has come up with against this concept. Continue reading Comparing productivity of node.js frameworks

Comparing performance of node.js frameworks

Our mission is to compare the node.js frameworks on performance (completed no of requests per second).

Node.js performance tests were performed on the Ubuntu subsystem(2 core , 2 GB RAM) on a VM provisioned from Digital Ocean. The tests only utilize the most basic capabilities of the frameworks in question, therefore the main goal was to show the relative overhead these frameworks add to the handling of a request. This is not a test of the absolute performance as this will vary greatly depending on the environment and network conditions. This test also doesn’t cover the utility each framework provides and how this enables complex applications to be built with them. Continue reading Comparing performance of node.js frameworks

Part 2: Building web app using react.js, express.js, node.js and mongodb

Introduction

For quite sometime now, I have been hearing some very interesting things about react.js like how fast it is and how cool it would be to pick react.js for your next web project. All that sounds very good but, unless we try it ourself, we won’t be able to appreaciate it. So I decided to play with react.js for a while and see myself how accurate these claims are. Now there is just one problem, react.js documentation assumes certain level of experience with modern Javascript developement workflow, in short let’s just say it’s not very helpful if you are trying to use it for the first time. This series of articles is my attempt to put all the pieces together and show what it will take to build a fully functional react app.

In this series of articles, we will be creating a full stack single page JavaScript application from scratch. In Part 1 of this series we will focus completely on react.js workflow and create the front end piece of our app without any backend APIs or database. In the Part 2, we will create backend for our application using express.js and also persist our data in mongodb.

This article is part 2 of this series, if you have not followed the part 1 then you might find this article a bit confusing, please visit the part 1 first.

Continue reading Part 2: Building web app using react.js, express.js, node.js and mongodb

Part 1: Building web app using react.js, express.js, node.js and mongodb

Introduction

For quite sometime now, I have been hearing some very interesting things about react.js like how fast it is and how cool it would be to pick react.js for your next web project. All that sounds very good but, unless we try it ourself, we won’t be able to appreaciate it. So I decided to play with react.js for a while and see myself how accurate these claims are. Now there is just one problem, react.js documentation assumes certain level of experience with modern Javascript developement workflow, in short let’s just say it’s not very helpful if you are trying to use it for the first time. This series of articles is my attempt to put all the pieces together and show what it will take to build a fully functional react app.

Continue reading Part 1: Building web app using react.js, express.js, node.js and mongodb

Prototypal Inheritance in JavaScript

Introduction

JavaScript is the most widely used programming language, however a large number of programmers keep working with JavaScript without knowing the nuances of it. Inheritance support in JavaScript is another such feature which often confuses programmers who learn JavaScript as their secondary programming language and come from OOP background like C# and Java.

Continue reading Prototypal Inheritance in JavaScript