Advanced @ngrx Recipes

Slides: https://photos.app.goo.gl/fQPsFgSLqwtllAi93

Advertisements

Visualizing data points across regions in Map

A Bar indicator over Map can help visualize data points (eg. user allocation) for any region of the map:

Moreover, heatmaps on different regions can convey more info like what regions have most open tasks to be worked on :

chart_art_us_light_blue

Also, the user can zoom into any region (by simply clicking on a region to zoom into that region on the map OR using google map style zoom at cursor position using mouse wheel or arrow keys) and visualize the user allocation in individual branches of that region:

clip_image032.jpg

Also, for allocating users to regions/branches, the manager can drag users to the region on the map OR select the regions in map for any given user.

Interesting Chrome Flags

Toggle Following in Latest Chromium:

https://www.xda-developers.com/enable-google-chrome-new-design-chrome-flag/

Google Chrome Material Design

 

UI Layout for the browser’s top chrome

Toggles between 1) Normal – for clamshell devices, 2) Hybrid (previously touch) – middle point for devices with a touch screen, 3) Touchable – new unified interface for touch and convertibles (Chrome OS), 4) Material Design refresh and 5) Touchable Material Design refresh. Enabling #upcoming-ui-features forces the Material Design refresh option. – Mac, Windows, Linux, Chrome OS

Enable new Print Preview UI

If enabled, Print Preview will display a newer UI. This feature is activated if either this flag or #upcoming-ui-features is enabled. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

Custom-drawn Windows 10 Titlebar

If enabled, Chrome will draw the titlebar and caption buttons instead of deferring to Windows. – Windows

Default
Enabled
Disabled

Disabled
Enabled

Experimental contextual omnibox suggestion

Change omnibox contextual suggestions to an experimental source. Note that this is not an on/off switch for contextual omnibox and it only applies to suggestions provided before the user starts typing a URL or a search query (i.e. zero suggest). – Mac, Windows, Linux, Chrome OS, Android

Default
Enabled
Disabled

Disabled
Enabled

Omnibox new answer layout

Display answers using an enhanced layout with larger images. Has no effect unless either the #upcoming-ui-features flag is Enabled or the #top-chrome-md flag is set to Refresh or Touchable Refresh. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

Omnibox new answer layout

Display answers using an enhanced layout with larger images. Has no effect unless either the #upcoming-ui-features flag is Enabled or the #top-chrome-md flag is set to Refresh or Touchable Refresh. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

Omnibox rich entity suggestions

Display entity suggestions using images and an enhanced layout; showing more context and descriptive text about the entity. Has no effect unless either the #upcoming-ui-features flag is Enabled or the #top-chrome-md flag is set to Refresh or Touchable Refresh. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

Omnibox tail suggestions

Enable receiving tail suggestions, a type of search suggestion based on the last few words in the query, for the Omnibox. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

Omnibox tab switch suggestions

Enable suggestions for switching to open tabs within the Omnibox. Has no effect unless either the #upcoming-ui-features flag is Enabled or the #top-chrome-md flag is set to Refresh or Touchable Refresh. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

Enable speculative start of a service worker when a search is predicted.

If enabled, when the user enters text in the omnibox that looks like a a query, any service worker associated with the search engine the query will be sent to is started early. – Mac, Windows, Linux, Chrome OS, Android

Default
Enabled
Disabled

Disabled
Enabled

Include title for the current URL in the omnibox

In the event that the omnibox provides suggestions on-focus, the URL of the current page is provided as the first suggestion without a title. Enabling this flag causes the title to be displayed. – Mac, Windows, Linux, Chrome OS, Android

Default
Enabled
Disabled

Disabled
Enabled

Force color profile

Omnibox UI Elide Suggestion URL After Host

Elides the path, query, and ref of suggested URLs in the Omnibox dropdown. – Mac, Windows, Linux, Chrome OS, Android

Default
Enabled
Disabled

Disabled
Enabled

Omnibox UI Hide Steady-State URL Scheme and Trivial Subdomains

In the Omnibox, hide the scheme and trivial subdomains from steady state displayed URLs. Hidden portions are restored during editing. For Mac, this flag will have no effect unless MacViews is enabled. – Mac, Windows, Linux, Chrome OS, Android

Default
Enabled
Disabled

Disabled
Enabled

Omnibox UI Show Suggestion Favicons

Shows favicons instead of generic vector icons for URL suggestions in the Omnibox dropdown. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

Omnibox UI Max Autocomplete Matches

Changes the maximum number of autocomplete matches displayed in the Omnibox UI. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Enabled 3 matches
Enabled 4 matches
Enabled 5 matches
Enabled 6 matches
Enabled 8 matches
Enabled 10 matches
Enabled 12 matches
Disabled

Disabled
Enabled

Omnibox UI Vertical Margin

Changes the vertical margin in the Omnibox UI. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Enabled 4px vertical margin
Enabled 6px vertical margin
Enabled 8px vertical margin
Enabled 10px vertical margin
Enabled 12px vertical margin
Enabled 14px vertical margin
Disabled

Disabled
Enabled

Omnibox UI Swap Title and URL

In the omnibox dropdown, shows titles before URLs when both are available. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

Disable minimum for server-side tile sugg

Experimental fullscreen exit UI

Displays experimental UI to allow mouse and touch input methods to exit fullscreen mode. – Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

Enable network service

Experimental Productivity Features

Enable support for experimental developer productivity features, such as Layered APIs and policies for avoiding slow rendering. – Mac, Windows, Linux, Chrome OS, Android

Default
Enabled
Disabled

Disabled
Enabled

New Tab Page Background Selection

New Tab Page Background Selection

Allow selection of a custom background image on the New Tab Page. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

New Tab Page Custo

New Tab Page Custom Link Icons

Show custom link icons on the New Tab Page, instead of Most Visited tiles. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

New Tab Page Material Desig

New Tab Page Material Design UI

Updates the New Tab Page with Material Design elements. – Mac, Windows, Linux, Chrome OS

Default
Enabled
Disabled

Disabled
Enabled

Overscroll hist

Insecure origins treated as secure

Treat given (insecure) origins as secure origins. Multiple origins can be supplied as a comma-separated list. For the definition of secure contexts, see https://w3c.github.io/webappsec-secure-contexts/ – Mac, Windows, Linux, Chrome OS, Android

 

Experimental fullscreen exit UI Windows, Linux, Chrome OS

Displays experimental UI to allow mouse and touch input methods to exit fullscreen mode. 

Enable ECMAScript 6 modules Mac, Windows, Linux, Chrome OS, Android

Enables ECMAScript 6 modules support in Blink. 

Experimental contextual omnibox suggestion Mac, Windows, Linux, Chrome OS, Android

Change omnibox contextual suggestions to an experimental source. Note that this is not an on/off switch for contextual omnibox and it only applies to suggestions provided before the user starts typing a URL or a search query (i.e. zero suggest). 
Default
Enabled
Disabled

New omnibox answers in suggest types Mac, Windows, Linux, Chrome OS, Android

Enables new types of answers in the omnibox suggest drop-down: currency conversions, dictionary definitions, sports scores, translations, and when is. 
Default
Enabled
Disabled

Omnibox entity suggestions Mac, Windows, Linux, Chrome OS

Enable receiving entity suggestions – disambiguation descriptions – for Omnibox suggestions. 
Default
Enabled
Disabled

Custom-drawn Windows 10 Titlebar Windows

If enabled, Chrome will draw the titlebar and caption buttons instead of deferring to Windows. 

Enable Material Design bookmarks Mac, Windows, Linux, Chrome OS

If enabled, the chrome://bookmarks/ URL loads the Material Design bookmarks page. 
Default
Enabled
Disabled

Simplified full screen / mouse lock UI. Windows, Linux, Chrome OS

A simplified new user experience when entering page-triggered full screen or mouse pointer lock states. 
Default
Enabled
Disabled

WebVR Mac, Windows, Linux, Chrome OS, Android

Enabling this option allows web applications to access experimental Virtual Reality APIs. 

Windowing related features for desktop PWAs. Mac, Windows, Linux, Chrome OS

Enable experimental windowing features for desktop PWAs. 
Default
Enabled
Disabled

Only Auto-Reload Visible Tabs Mac, Windows, Linux, Chrome OS, Android

Pages that fail to load while the browser is offline will only be auto-reloaded if their tab is visible. 
Default
Enabled
Disabled

Material Design in the rest of the browser’s native UI Mac, Windows, Linux, Chrome OS

Extends the –top-chrome-md setting to secondary UI (bubbles, dialogs, etc.). On Mac, this enables MacViews, which uses toolkit-views for native browser dialogs. 

UI Layout for the browser’s top chrome Mac, Windows, Linux, Chrome OS

Toggles between normal and touch (formerly “hybrid”) layouts. 
Default
Normal
Touch

Experimental Web Platform features Mac, Windows, Linux, Chrome OS, Android

Enables experimental Web Platform features that are in development. 

Developer Tools experiments Mac, Windows, Linux, Chrome OS

Enables Developer Tools experiments. Use Settings panel in Developer Tools to toggle individual experiments. 

Experimental JavaScript Mac, Windows, Linux, Chrome OS, Android

Enable web pages to use experimental JavaScript features. 

Experimental Validate Asm.js and convert to WebAssembly when valid. Mac, Windows, Linux, Chrome OS, Android

Validate Asm.js when “use asm” is present and then convert to WebAssembly. 
Default
Enabled
Disabled

WebAssembly structured cloning support. Mac, Windows, Linux, Chrome OS, Android

Enable web pages to use WebAssembly structured cloning. 
Default
Enabled
Disabled

New style notification Mac, Windows, Linux, Chrome OS

Enables the experiment style of material-design notification 
Default
Enabled
Disabled

Enable Material Design extensions Mac, Windows, Linux, Chrome OS

If enabled, the chrome://extensions/ URL loads the Material Design extensions page. 
Default
Enabled
Disabled

NgRx: Patterns and Techniques

ref: https://blog.nrwl.io/ngrx-patterns-and-techniques-f46126e2b1e5

NOTES:

  • Programming with NgRx is programming with messages. In NgRx they are called actions. To start an interaction a component or a service creates an action, populates it with data, and then dispatches it. The component does not mutate any state in place.
  • As in most messaging systems, NgRx actions are reified, i.e., they are represented as concrete objects and they can be stored and passed around.
  • Workflow: The action is received and processed, which can be done in two ways.

    • First, an action can be processed by a reducer — a synchronous pure function creating applications states. It does it by applying an action to the current state of the application.
    • Second, an action can be processed by an effects class. An effects class taps into the Actions object (an observable of all the actions flowing through the app) to execute the needed side effects.
    • Finally, the component often reacts to the state changes by subscribing to the store. The following component gets an observable of todos. Any time a todo gets added, removed, or updated, that observable will emit a new array, which the component will display.
  • Actions
    • Actions can be divided into the following three categories: commands, documents, events.
      • Dispatching a command is akin to invoking a method: we want to do something specific. This means we can only have one place, one handler, for every command. This also means that we may expect a reply: either a value or an error. To indicate that an action is a command I name them starting with a verb Eg. ADD_TODO

      • When dispatching a document, we notify the application that some entity has been updated — we do not have a particular single handler in mind. This means that we do not get any result and there might be more than one handler. Dispatching a document is less procedural. Name documents using nouns or noun phrases

      • When dispatching an event, we notify the application about an occured change. As with documents, we do not get a reply and there might be more than one handler.
    • We often use several actions to implement an interaction. Here, for instance, we use a command and an event to implement the todo addition. We handle the ADD_TODO command in an effects class, and then the TODO_ADDED event in the reducer.
  • Processing Actions
    • A dispatched action can be processed by effects classes and reducers.
    • Reducers are simple: they are synchronous pure functions creating new application states.
  • Effects Classes
    • Effects classes have three roles:
      • They decide on how to process actions.
        • An action decider determines if an effects class should process a particular action. A decider can also map an action to a different action.
        • Decider can use either Action Type or Payload for making the decision
      • They transform actions into other actions.
        • A splitter maps one action to an array of actions, i.e., it splits an action. This is useful for exactly the same reasons as splitting a method into multiple methods: we can test, decorate, monitor every action independently.
        • An aggregator maps an array of actions to a single action. Aggregator are not as common as say splitters, so RxJs does not come with an operator implementing it. That’s why we had to add some boilerplate to do it ourselves. But could always introduce a custom RxJS operator to help with that.
      • They perform side effects.
    • Building Blocks

      These are the common building blocks used to implement application logic using NgRx:

      The best thing about them is how well they compose.

      Let’s look at a simple scenario first, where we select one type of action, execute needed side effects, and then update the state.

      Often that’s not enough, and we need to implement at a more complex scenario.

      In this scenario we start with a filtering decider, next we use a splitter. We then use a content-based decider for the top action. The bottom one is simpler. After executing the side effects, we aggregate the results and pass them to the reducer.

NgRx 4

Some of the highlights:

  • Official support for lazy loading
  • Simplified testing
  • Redesigned router integration

Of course, there is a lot more great stuff in this release (the improved dev ergonomics and error messages for starters). So check out the ngrx platform repository to find out more.

Check out the NEW DOCUMENTATION:

Links to the current documentation for ngrx 4.x

The sections below cover the changes between the ngrx projects migrating from V1.x/2.x to V4.

@ngrx/core
@ngrx/store
@ngrx/effects
@ngrx/router-store
@ngrx/store-devtools

ref: https://github.com/ngrx/platform/blob/master/MIGRATION.md

Jive Q&A

Create a Jive Discussion. and users will use the reply on the discussion title to post new Questions. The Qs appear in comment like style below the discussion header.

Moderators can use the reply action on the bubble to answer these Qs.