React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

Benefits:

• Allows Performing Development Faster, and, Therefore, It Costs Less.
• Provides Cross-Platform support.
• Increases the efficiency of Native Apps Development Increases Many-Fold.
• Focusses on UI and Access to Native API out of the Box
• Single Code Base for iOS and Android
• Transforms Any Web Project into a Mobile Decision Easily
• App Performs as a Native App

References

• 10 Strong Reasons to Choose React Native for Mobile App
• Learning React Native

The browser’s viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content. Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

The width property controls the size of the viewport. The special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. The initial-scale property controls the zoom level when the page is first loaded.

References:

• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
• https://www.quirksmode.org/mobile/viewports2.html
• https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html

Much of what makes application development difficult is tracking mutation and maintaining state. Immutability means that once you call that data structure in being, you can’t make changes to (a.k.a. mutate) the data structure and the data it contains at that particular memory location.

In Javascript, we have both immutable and mutable data structures. In JavaScript, strings and numbers are immutable by design. Examples of native JavaScript values that are mutable include objects, arrays, functions, classes, sets, and maps.

// Code from https://benmccormick.org/2016/06/04/what-are-mutable-and-immutable-data-structures-2
let a = 'test';
let b = a;
a = a.substring(2);

console.log(a) //st
console.log(b) //test
console.log(a === b) //false

// Code from https://benmccormick.org/2016/06/04/what-are-mutable-and-immutable-data-structures-2
let a = {
    foo: 'bar'
};

let b = a;

a.foo = 'test';

console.log(b.foo); // test
console.log(a === b) // true

Benefits of Immutablity : Easier to Debug, Persistence, Easier Deep Value Comparisons, Concurrency

References:

• https://immutable-js.github.io/immutable-js/
• https://medium.com/@yej.arin.choi/this-is-a-post-that-summarizes-my-dive-into-immutability-in-programming-what-it-is-why-its-34cbba44f889
• https://www.sitepoint.com/immutability-javascript/
• https://developer.mozilla.org/en-US/docs/Glossary/Mutable
• https://benmccormick.org/2016/06/04/what-are-mutable-and-immutable-data-structures-2

The Web Workers specification defines an API for spawning background scripts in your web application. Web Workers allow you to do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.

// Code from https://www.html5rocks.com/en/tutorials/workers/basics/

var worker = new Worker('task.js');
worker.postMessage(); // Start the worker.

Communication between a work and its parent page is done using an event model and the postMessage() method.

// Code from https://www.html5rocks.com/en/tutorials/workers/basics/

// Main script
var worker = new Worker('doWork.js');

worker.addEventListener('message', function(e) {
  console.log('Worker said: ', e.data);
}, false);

worker.postMessage('Hello World'); // Send data to our worker.

// Worker script
self.addEventListener('message', function(e) {
  self.postMessage(e.data);
}, false);

There are two ways to stop a worker: by calling worker.terminate() from the main page or by calling self.close() inside of the worker itself.

References:

• https://www.html5rocks.com/en/tutorials/workers/basics/
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.

document.body.style.background = 'lightblue';

References:

• https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model
• https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/
• https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model