Javascript concepts

gistfile1.txt

<noscript>No script text goes here...</noscript>

//true or false
navigator.cookieEnabled
//Win32, MacPPC, MacIntel, X11
//NOTE: MacIntel and X11 are equivalent in case of Safari
navigator.platform

//The indexOf() method returns the position of the first occurrence of a specified value in a string.
stringVar.indexOf( strToSearch, [int start] );

//NaN = Not a Number
//returns true or false

isNaN();

//throw an exception
throw new Error( 'err msg goes here...' );

//squre root
Math.sqrt( num );

//generate rand number
Math.ceil( Math.random() * max_limit );

//object detection is better than browser version detection
if( document.getElementById( 'element' ) )
	//do something;


If you don’t understand prototypes,
you don’t understand JavaScript.

Aren’t classical inheritance and prototypal inheritance really the same thing, just a stylistic preference?
No.

Concatinative Inheritance
Just copy properties from secondary object to new object.

A prototype is a object instance

Aren’t classes the right way to create objects in JavaScript?
No.

how to do inheritance
object = Object.create(function returning object)
extendedObj = Object.assign(object, …other_obects)

Don’t you need a constructor function to specify object instantiation behavior and handle object initialization?
No.

Any function can create and return objects. When it’s not a constructor function, it’s called a factory function.


Don’t you need constructor functions for privacy in JavaScript?
No.

we can use closures to protect data


let animal = {
	animalType: 'animal',
	 

	// these are currently unknown. See below how it is being extended with other object properties.

	describe () {
		return `An ${this.animalType} with ${this.furColor} fur, 
	  	${this.legs} legs, and a ${this.tail} tail.`;
	}
};
	 
let mouseFactory = function mouseFactory () {
	// to protect data
	let secret = 'secret agent';

	return Object.assign(Object.create(animal), {
		animalType: 'mouse',
	    	furColor: 'brown',
	    	legs: 4,
	    	tail: 'long, skinny',
	    	profession () {
	      	return secret;
	}

	});
};

let james = mouseFactory();

Does `new` mean that code is using classical inheritance?
No.

what does new does:

Create instance
Bind this to new instance
Call object constructor on the object on which constructor is referenced.
Call new instance constructor and attach reference to it.
assign name to to the type of new instance
Attach instance stuff.



Instanceof lies.
It only checks for properties not the object type. Can be fooled easily

let foo = function() {}
let bar = {abc: ’123’}
foo.prototype.bar = bar;
var baz = Object.create(bar)
foo instanceof bar // true — which is actually wrong.

instanceof limits reusability in context of strongly typed language and create abstracting functions on top of logic.



`new` keyword is weird
It doesn’t return primitive, if return object it works. But it beaks all references including call and apply references. Also break the link to constructor prototype ref.

Difference between. Call and apply???

Is There a Big Performance Difference Between Classical and Prototypal Inheritance?
No.


Performance:

Rule of thumb: Profile your app and eliminate as many loading, networking, file I/O, and rendering bottlenecks as you can find. Then and only then should you start to think about a micro-optimization.


Is There a Big Difference in Memory Consumption Between Classical and Prototypal?
No.


if you want the most flexibility for memory management,
use factory functions


The Native APIs use Constructors. Aren’t they More Idiomatic than Factories?
No.
Factories are extremely common in JavaScript. For instance, the most popular JavaScript library of all time, jQuery exposes a factory to users. 


“Favor object composition over class inheritance.”



* React `React.createClass()` is a factory.
* Angular uses classes & factories, but wraps them all with a factory in the Dependency Injection container. All providers are sugar that use the `.provider()` factory. There’s even a `.factory()` provider, and even the `.service()` provider wraps normal constructors and exposes … you guessed it: A factory for DI consumers.
* Ember `Ember.Application.create();` is a factory that produces the app. Rather than creating constructors to call with `new`, the `.extend()`methods augment the app.
* Node core services like `http.createServer()` and `net.createServer()` are factory functions.
* Express is a factory that creates an express app.









Angular comparisions:
* Change detection is a central problem in UI development, and JavaScript frameworks attempt to solve it in various ways.
* EmberJS detects changes when they occur, because it controls your data model API and can emit events when you call it.
* Angular.js detects changes after the fact, by re-running all the data bindings you've registered in your UI to see if their values have changed.
* Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
* React with immutable data structures enhances plain React by allowing a component tree to be quickly marked as unchanged, because mutations within component state are not allowed. This isn't done primarily for performance reasons, however, but because of the positive impact it has on your app architecture in general.

REDUX

This complexity is difficult to handle as we're mixing two concepts that are very hard for the human mind to reason about: mutation and asynchronicity. I call them Mentos and Coke. Both can be great in separation, but together they create a mess. Libraries like React attempt to solve this problem in the view layer by removing both asynchrony and direct DOM manipulation. However, managing the state of your data is left up to you. This is where Redux enters.


Redux is a predictable state container for JavaScript apps.

Redux evolves the ideas of Flux, but avoids its complexity by taking cues from Elm

in Redux a middleware is like the negotiator between store.dispatch and reducer.

To be more specific, the store.dispatch() we call is actually comprised of layers of middleware, and the reducer is in the innermost layer.




Yup, React and Redux don’t have a direct relationship – Redux controls an app’s state changes, while React renders the view of states.


So how do you use React & Redux together? We do this by finding the top-level React components, and inside these components we will set Redux’s state as the component’s state. When these states changes, we will use our handy setState component to trigger a re-render. This way, React and Redux states will be bound together.


Progressive webapp

* Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
* Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
* Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
* App-like - Feels like an app, because the app shell model separates the application functionality from applicationcontent .
* Fresh - Always up-to-date thanks to the service worker update process.
* Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
* Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
* Re-engageable - Makes re-engagement easy through features like push notifications.
* Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
* Linkable: Easily share the application via URL, does not require complex installation



Love javascript