First let’s check the web (as many of us come from web background), In web development we can set viewport where we set content width and initial scaling values. Also we have frameworks like Bootstrap, Foundation, UIKit, etc.

Now let’s come to react-native, In react-native we have flexbox which helps to provide consistent UI for different screen sizes. But the flexbox alone is not helpful. We may also need to use % in the styles as react-native@0.42 support % in the CSS styles.

But i had a thought that using ‘%’ is still not a recommended way where my application gonna be used in thousands of TVs of different screen sizes. So i searched for a reliable soultion and found Dimensions , PixelRatio and React Native Pixel Perfect

Dimensions

Dimensions in react native helps to get the window’s width and height and also we can use the event listener available in the Dimensions module to know if there is a change in window height and width.

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

PixelRatio

PixelRatio in react native helps to get the device pixel density. Pixel density will varies device to device based on the resolution and pixels per inch (ppi).

For an mdpi android device PixelRatio.get() === 1 and hdpi android device PixelRatio.get() === 1.5 and so on.

React Native Pixel Perfect

react-native-pixel-perfect helps to create pixel perfect app of any screen sizes. It has a create function where we need to supply the device resolution so it generates a function which computes the correct size for different screen sizes.

const designResolution = {
    width: 1125,
    height: 2436
};
const perfectSize = create(designResolution);
perfectSize(50);

perfectSize(50) will return the actual size needed to make 50 fit the screen perfectly according to original design. 50 is 50px in CSS styles.

Let’s say for High Definition TVs

720p Resolution TV = 1280 x 720 (Total pixels = 921,600)
perfectSize(50) is 23.589

similarly,

1080p Resolution TV = 1920 x 1080 (Total pixels = 2,073,600)
perfetctSize(50) is 15.726

So using the module we can achieve pixel perfect application which reflects our UI design perfectly.

Now let’s combine all these together for a perfect and dynamic adaptive application.

import {PixelRatio, Dimensions} from 'react-native';
import {create} from 'react-native-pixel-perfect';

let displayProps = {
  width: PixelRatio.roundToNearestPixel(
    Dimensions.get('window').width * PixelRatio.get(),
  ),
  height: PixelRatio.roundToNearestPixel(
    Dimensions.get('window').height * PixelRatio.get(),
  ),
};

export const perfectSize = create(displayProps);

you can export the perfectSize fn and import it in any component to use it for pixel perfect size.

import { perfectSize } from './helper.js';

const styles = StyleSheet.create({
   container: {
    width: perfectSize(500),
    height: perfectSize(300)
   }
});

Finally achieved the design scaling for different screen sizes. :)

The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. The library should work fine on the following browsers (with Promise polyfill):

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Safari 6+

As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported. It does not require any rendering from the server, as the whole image is created on the clients browser. It doesn’t magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy to get the content to the same origin.

Requirements

Install the library in the application using NPM or if you prefer Bower.

    npm isntall html2canvas

    // or

    bower install html2canvas

Incase if you are using this for a plain javascript web application then you can simply add the reference to the script with a script tag. html2canvas.min.js

    <script src="/path/to/html2canvas.min.js"></script>

Create Screenshot using html2canvas

Let’s say you want to capture screenshot of div in you web application. In the below image the black highlighted part is the div you need to capture. So first make sure you hav set an id to the element.

The html2canvas is a simple library, the function expects an argument which is the DOM element of the web page in other words the DOM element which you want to export as image.

    let element = document.querySelector("#capture");
    html2canvas(document).then(function(canvas) {
        // Convert the canvas to blob
        canvas.toBlob(function(blob){
            // To download directly on browser default 'downloads' location
            let link = document.createElement("a");
            link.download = "image.png";
            link.href = URL.createObjectURL(blob);
            link.click();

            // To save manually somewhere in file explorer
            window.saveAs(blob, 'image.png');

        },'image/png');
    });

Once the element is passed to the html2canvas window function then a promise is returned with the canvas of the div. Use the function canvas.toBlob() to convert it to the canvas to a blob and from blob you can create a url out of it using URL.createObjectURL().

To download automatically to default browser ‘Downloads’ location, Create an anchor element and assign the link to the href and make a click so it will automatically download the data.

To allow user to save manually in their machine, use window.saveAs() function.

The downloaded image will be like this finally..

Observables

Observables are lazy collections of muliple values over time. Let’s take it in more simple way..

Observables are lazy

You could think of observables as newsletters. For each subscriber a new newsletter is created. They are then only send to those people, and not to anyone else.

Observables can have multiple values over time

Now if you keep that subscription to the newsletter open, you will get a new one every once and a while. The sender decides when you get it but all you have to do is just wait until it comes straight into your inbox.

Lets Create an Observable

If you start using Angular you will probably encounter observables when setting up your HTTP requests. So let’s start there.

Below is an example service, which pass students data to the subscribers through observables. Here, instead making a Http call, i’m using local data to send.

Creating observables

Creating observables is easy, just call the new Observable() and pass along one argument which represents the observer. Therefore i usually call it observer as well.

// student.services.ts 

  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs';

  @Injectable({
    providedIn: 'root'
  })
  export class StudentService {

  students = [{
      id: 1,
      name: 'Prasanth',
      enrollmentnumber: 110201501126,
      college: 'SNS College of Engineering',
      university: 'AU'
  },
  {
      id: 2,
      name: 'Mohan',
      enrollmentnumber: 110470116027,
      college: 'SNS College of Engineering',
      university: 'AU'
  }];

  constructor() { }

  public getStudents(): any {
     const studentsObservable = new Observable(observer => {
            setTimeout(() => {
                observer.next(this.students);
            }, 1000);
     });

     return studentsObservable;
 }
}

When observer.next() is called in the observables the data passed inside the next() is sent to all the subscribers across the application. Now we have created an observable, lets subscribe to this observables in a component.

Subscribing to observables

Remember, observables are lazy. If you don’t subscribe nothing is going to happen. It’s good to know that when you subscribe to an observer, each call of subscribe() will trigger it’s own independent execution for that given observer. Subscribe calls are not shared among multiple subscribers to the same observable.

  // app.component.ts

  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { Subscription } from 'rxjs';
  import { StudentService } from './student.service';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {

      students = [];
      studentsObservable: Subscription;

      constructor(private studentservice: StudentService) {}

      ngOnInit() {
          this.studentsObservable = this.studentservice.getStudents();
          studentsObservable.subscribe((studentsData) => {
              this.students = studentsData;
          });
      }
  }

Unsubscribing to Observables

Unsubscribing is necessary, it is important that we unsubscribe from any subscriptions that we create in our Angular components when the component is destroyed to avoid memory leaks.

  // app.component.ts

   ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.studentsObservable.unsubscribe();
    }

Error handling

One of the most difficult tasks in asynchronous programming is dealing with errors. Unlike interactive style programming, we cannot simply use the try/catch/finally approach that we use when dealing with blocking code. So In the sense of Observables, you can handle the errors by specifying an error callback on the observer.

  // app.component.ts
  studentsObservable.subscribe({
    studentsData => console.log(studentsData),
    err => console.log(err)
  });

Producing an error also causes the observable to clean up subscriptions and stop producing values. An observable can either produce the values (calling the next callback), or it can complete, calling either the complete or error callback.

Requirements

To start with, You should have a firebase account, i will consider you have an firebase account else create one.

Go to Firebase Console and select your project or create a project. Select the Settings icon and click Project settings

Select Could Messaging tab and copy Server API key, we need to use this in nodejs applciation.

Now install the fcm-node in your nodejs project.

    npm install fcm-node

This is a simple nodejs firebase cloud messaging library which sends push to one or multiple devices using a function fcm.send, it also supports promises instead callbacks. Do not forget to get the android device token from your android device and save it in your database.

    // Notifications.js

    var FCM = require('fcm-node');
    var serverKey = 'YOURSERVERKEYHERE'; // put your server key here
    var fcm = new FCM(serverKey);
 
    var message = { //this may vary according to the message type (single recipient, multicast, topic, et cetera)
        to: 'registration_token', 
        collapse_key: 'your_collapse_key',
        
        notification: {
            title: 'Title of your push notification', 
            body: 'Body of your push notification' 
        },
        
        data: {  //you can send only notification or only data(or include both)
            my_key: 'my value',
            my_another_key: 'my another value'
        }
    };
    
    fcm.send(message, function(err, response){
        if (err) {
            console.log("Something has gone wrong!");
        } else {
            console.log("Successfully sent with response: ", response);
        }
    });

You can collapse multiple notifcations of same application in your android device with collapse_key and maximum of 4 collapse key is used.

With fcm-node you can send notifications to multiple devices by replacing to with registration_ids in the message object.

    var message = { 
        registration_ids: ['registration_tokens'], // Multiple tokens in an array
        collapse_key: 'your_collapse_key',
        
        notification: {
            title: 'Title of your push notification', 
            body: 'Body of your push notification' 
        },
        
        data: {  //you can send only notification or only data(or include both)
            my_key: 'my value',
            my_another_key: 'my another value'
        }
    };

Note: Device registration token in android will be updated some time so make sure you are sending to the notifications with latest device tokens.

This event loop is maybe the most misunderstood concept of the platform. I interviewed many people, most of the people have these kind of misconceptions. So some of the misconceptions are here..

Misconception 1: The event loop runs in a separate thread than the user code

Misconception:

There is a main thread where the JavaScript code of the user (userland code) runs in and another one that runs the event loop. Every time an asynchronous operation takes place, the main thread will hand over the work to the event loop thread and once it is done, the event loop thread will ping the main thread to execute a callback.

Reality:

There is only one thread that executes JavaScript code and this is the thread where the event loop is running. The execution of callbacks (know that every userland code in a running Node.js application is a callback) is done by the event loop. We will cover that in depth a bit later.

Misconception 2: Everything that’s asynchronous is handled by a thread pool

Misconception:

Asynchronous operations, like working with the filesystems, doing outbound HTTP requests or talking to databases are always loaded off to a thread pool provided by libuv.

Reality:

Libuv by default creates a thread pool with four threads to offload asynchronous work to. Today’s operating systems already provide asynchronous interfaces for many I/O tasks (e.g. AIO on Linux). Whenever possible, libuv will use those asynchronous interfaces, avoiding usage of the thread pool. The same applies to third party subsystems like databases. Here the authors of the driver will rather use the asynchronous interface than utilizing a thread pool. In short: Only if there is no other way, the thread pool will be used for asynchronous I/O.

Misconception 3: The event loop is something like a stack or queue

Misconception:

The event loop continuously traverses a FIFO of asynchronous tasks and executes the callback when a task is completed.

Reality:

While there are queue-like structures involved, the event loop does not run through and process a stack. The event loop as a process is a set of phases with specific tasks that are processed in a round-robin manner.

Philip Roberts has explained here very clearly about what is the event loop and how does it work in run time with clean simulation of the engine.

I will explain in simple way you can understand these and will give you some examples when you can use these. Okay, Let’s move on and start the article.. I

map()

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

    const numbers = [25, 50, 75, 100];
    const halves = numbers.map(x => x / 5);
    // halves is [5, 10, 15, 20]

Map is used when you have an array of values and you want to do something for every item in that array.

Example:

• Think of processing each element with given formula.

    const celsius = [-15, -5, 0, 10, 16, 20, 24, 32]
    const fahrenheit = celsius.map(t => t * 1.8 + 32);
    // fahrenheit is [5, 23, 32, 50, 60.8, 68, 75.2, 89.6]

filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

    const words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];
    const longWords = words.filter(word => word.length > 6);
    // longWords is ["exuberant", "destruction", "present"]

Filter is simple as map(), It’s going over values in ‘words’ array checking which values pass the test, in this case which value has length greater than 6 and then returns a new array with those values.

Example:

• Filtering users with admin access

    var officers = [
        { id: 11, name: 'Adam', age: 23, group: 'editor' },
        { id: 47, name: 'John', age: 28, group: 'admin' },
        { id: 85, name: 'William', age: 34, group: 'editor' },
        { id: 97, name: 'Oliver', age: 28, group: 'editor' }
    ];
    const admins = officers.filter(user => user.group === 'admin' );
    // admins is [{ id: 47, name: 'John', age: 28, group: 'admin' }]

reduce()

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

    const total = [0, 1, 2, 3].reduce((sum, value) => sum + value, 1);
    // total is 7

The really cool thing about reduce is that it passes the result of one callback function invocation to the next one allowing us to do things easy.

Example:

• Find sum of same age people from array

    const users = [
        { id: 11, name: 'Adam', age: 23, group: 'editor' },
        { id: 47, name: 'John', age: 28, group: 'admin' },
        { id: 85, name: 'William', age: 34, group: 'editor' },
        { id: 97, name: 'Oliver', age: 28, group: 'editor' }
    ];
    const groupByAge = users.reduce((acc, it) => {
        acc[it.age] = acc[it.age] + 1 || 1;
        return acc;
    }, {});
    // groupByAge is {23: 1, 28: 2, 34: 1}

Hope, you are clear with the methods and usage now. If you’ve stumbled upon some interesting ways map, filter or reduce were used be sure to put it in the comments, I’m sure there are heaps of practical ways these 3 can be used!