docs: add section for why/when to use NgRx for state management to intro page (#1852) (#1882)

Closes #1852

Author: itayod

projects/ngrx.io/content/guide/entity/index.md

@@ -20,4 +20,4 @@ Entity promotes the use of plain JavaScript objects when managing collections. *
 2. State will always be serializable allowing you to store and rehydrate from browser storage mechanisms like local storage.
 3. State can be inspected via the Redux Devtools.
 
-This is one of the [core principles](docs#core-principles) of NgRx. The [Redux docs](https://redux.js.org/faq/organizingstate#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state) also offers some more insight into this constraint.
+This is one of the [core principles](docs) of NgRx. The [Redux docs](https://redux.js.org/faq/organizingstate#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state) also offers some more insight into this constraint.

projects/ngrx.io/content/marketing/docs.md

@@ -2,14 +2,57 @@
 
 NgRx is a framework for building reactive applications in Angular. NgRx provides state management, isolation of side effects, entity collection management, router bindings, code generation, and developer tools that enhance developers experience when building many different types of applications.
 
-## Core Principles
-
-- State is a single, immutable data structure.
-- Components delegate responsibilities to side effects, which are handled in isolation.
-- Type-safety is promoted throughout the architecture with reliance on TypeScript's compiler for program correctness.
-- Actions and state are serializable to ensure state is predictably stored, rehydrated, and replayed.
-- Promotes the use of functional programming when building reactive applications.
-- Provide straightforward testing strategies for validation of functionality.
+## Why NgRx for State Management?
+
+NgRx provides state management for creating maintainable explicit applications, by storing single state and the use of actions in order to express state changes.
+
+
+### Serializability
+
+By normalizing state changes and pass them through observables, NgRx provides serializability and ensures state is predictably stored. This enables to save the state to an external storage, for example, `localStorage`.
+
+In addition, it also allows to inspect, download, upload, and dispatch actions, all from the [Store Devtools](guide/store-devtools).
+
+
+### Type Safety
+Type safety is promoted throughout the architecture with reliance on the TypeScript compiler for program correctness.
+
+
+### Encapsulation
+
+Using NgRx [Effects](guide/effects) and [Store](guide/store), any interaction with external resources side effects, like network requests, web socket and any business logic can be isolated from the UI. This isolation allows for more pure and simple components, and keep the single responsibility principle.
+
+### Testable
+
+Because [Store](guide/store) uses pure functions for changing state and selecting data from state, and the ability to isolate side effects from the UI, testing becomes very straightforward.
+NgRx also provides tests setup like `provideMockStore` and `provideMockActions` for isolated tests, and a better test experience.
+
+### Performance
+
+[Store](guide/store) is built on a single immutable data state, making change detection turn into a very easy task using an [`OnPush`](https://angular.io/api/core/ChangeDetectionStrategy#OnPush) strategy.
+NgRx is also powered by memoized selector functions which optimize state query computations.
+
+## When Should I Use NgRx for State Management
+
+In particular, you might use NgRx when you build an application with a lot of user interactions and multiple data sources, when managing state in services are no longer sufficient.
+
+A good substance that might answer the question "Do I need NgRx", is the 
+<a href="https://youtu.be/omnwu_etHTY" target="_blank">**SHARI**</a> principle:
+
+* **S**hared: state that is accessed by many components and services.
+
+* **H**ydrated: state that is persisted and rehydrated from external storage.
+
+* **A**vailable: state that needs to be available when re-entering routes.
+
+* **R**etrieved: state that must be retrieved with a side-effect.
+
+* **I**mpacted: state that is impacted by actions from other sources.
+
+
+However, realizing that using NgRx comes with some tradeoffs is also crucial. It is not meant to be the shortest or quickest way to write code and encourage its users the usage of many files.
+It is also often require a steep learning curve, including some good understanding of [`RxJs`](https://rxjs-dev.firebaseapp.com/) and [`Redux`](https://redux.js.org/).
+
 
 ## Packages
 

projects/ngrx.io/content/marketing/resources.json

@@ -30,6 +30,14 @@
               "https://www.youtube.com/playlist?list=PL8OUS498tQP3FFsZzULTGnbyIcILFjHd3",
             "rev": true
           },
+          "angular-connect-2018": {
+            "title": "You might not need NgRx by Mike Ryan at AngularConnect 2018",
+            "desc":
+              "Mike Ryan talk about the benefits and complexity of NgRx, and introducing the SHARI principle",
+            "url":
+              "https://www.youtube.com/playlist?list=PL8OUS498tQP3FFsZzULTGnbyIcILFjHd3",
+            "rev": true
+          },
           "international-javascript-conference-london-2019": {
             "title": "State Management in Angular with NgRx Stores and Effects at iJS London 2019",
             "desc": "Overview of how to use NgRx stores and effects in an Angular application by Fabian Gosebrink",