Monday, April 23, 2018

React app with Redux and Redux Observables

Technologies

  • React js (for UI)
  • Redux (for state management; actions and reducers that set state)
  • React-Redux (for connecting Redux to React; redux actions and arbitrary properties that can be set as properties of the component; Provider component makes the store available to all components)
  • Redux Observable (for linking RxJS to Redux; applyMiddleware to redux store; takes care of RxJS subscriptions and un-subscribe)
  • RxJS (Reactive programming based on observables)

Packages

yarn add redux react-redux rxjs redux-observable

// rxjs requires tslib
yarn add tslib

The Idea

  • Redux Action is dispatched
  • Received by the Reducer
  • Since there is redux observable middle-ware applied, the action is then received by the Epic (redux observable action handler)
  • Epic is now free to either handle that action or not based on the action.type
  • Epic can fire an entirely new action that is then received by the Reducer
  • Which in turn may possibly be handled by another Epic (or not)

Data Retrieval Flow

Epics (Redux observables) are very good at handling asynchronous operations, errors, and mapping results.
  • An redux action is invoked (for example, by clicking a button)
  • Action is handled by the reducer (which can possibly place a loading message in the store, which in turn my be displayed by react component to the user)
  • The same action can then be optionally handled by an Epic (redux observables middleware)
  • The Epic can perform the asynchronous data fetch operation (ajax, for example)
  • When finished, Epic can produce another action with the data retrieved
  • That action is then handled by the reducer, that may remove the loading message from the store and set retrieved value in the store.
  • The retrieved value in the store may then be reflected in the react component

Sunday, April 22, 2018

Git Help

usage: git [--version] [--help] [-C ] [-c name=value]
           [--exec-path[=]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=] [--work-tree=] [--namespace=]
            []

These are common Git commands used in various situations:

start a working area (see also: git help tutorial)
   clone      Clone a repository into a new directory
   init       Create an empty Git repository or reinitialize an existing one

work on the current change (see also: git help everyday)
   add        Add file contents to the index
   mv         Move or rename a file, a directory, or a symlink
   reset      Reset current HEAD to the specified state
   rm         Remove files from the working tree and from the index

examine the history and state (see also: git help revisions)
   bisect     Use binary search to find the commit that introduced a bug
   grep       Print lines matching a pattern
   log        Show commit logs
   show       Show various types of objects
   status     Show the working tree status

grow, mark and tweak your common history
   branch     List, create, or delete branches
   checkout   Switch branches or restore working tree files
   commit     Record changes to the repository
   diff       Show changes between commits, commit and working tree, etc
   merge      Join two or more development histories together
   rebase     Reapply commits on top of another base tip
   tag        Create, list, delete or verify a tag object signed with GPG

collaborate (see also: git help workflows)
   fetch      Download objects and refs from another repository
   pull       Fetch from and integrate with another repository or a local branch
   push       Update remote refs along with associated objects

'git help -a' and 'git help -g' list available subcommands and some
concept guides. See 'git help ' or 'git help '
to read about a specific subcommand or concept.

Friday, February 23, 2018

Imperative vs Object-Oriented vs Functional Programming Style

Same program written in three programming styles.

IMPERATIVE PROGRAMMING STYLE




OBJECT-ORIENTED PROGRAMMING STYLE




FUNCTIONAL PROGRAMMING STYLE





Function Closure


A function closure contains a function and the environment the function is referenced in. The referencing environment may contain variables that are not local to the function but are nonetheless accessible to the function code. These non-local variables are called free variables or upvalues.

// example of function closure for Inner()
function Outer(){
    var upvalue = 1

    function Inner(){
        // upvalue is available here & part of function closure
        // for Inner()
        var funcVar = 2
    }
}

Saturday, December 9, 2017

Setting up a simple HTTP Server for local web development

watch-http-server

It works similarly to http-server but automatically reloads the webpage when it changes on disk. This is very useful during developement.

npm install -g watch-http-server

See: watch-http-server


1. Install NodeJS from https://nodejs.org

2.  Install watch-http-server or http-server npm package

npm install -g watch-http-server

or

npm install -g http-server

3. From command line, change to the directory containing your static web files (e.g. html, javascript, css etc) in the command line window, e.g:

cd \temp\website

4. Start the server from the website directory with following command line command.

watch-http-server -o -a localhost

or

http-server


Or run it with more more options

watch-http-server --help

C:\Users\srazzaq>watch-http-server --help
usage: http-server [path] [options]

options:
  -p                 Port to use [8080]
  -a                 Address to use [0.0.0.0]
  -d                 Show directory listings [true]
  -i                 Display autoIndex [true]
  -e --ext           Default file extension if none supplied [none]
  -s --silent        Suppress log messages from output
  --cors             Enable CORS via the 'Access-Control-Allow-Origin' header
  -o                 Open browser window after staring the server
  -c                 Cache time (max-age) in seconds [3600], e.g. -c10 for 10 seconds.
                     To disable caching, use -c-1.

  -S --ssl           Enable https.
  -C --cert          Path to ssl cert file (default: cert.pem).
  -K --key           Path to ssl key file (default: key.pem).

  -h --help          Print this list and exit.


5. The watch-http-server will start and print the local http address where the website can be reached. It is typically http://localhost:8080. Open your browser and go to the address http://localhost:8080 and you should see the index file in your web site directory from Step 3.

Wednesday, October 25, 2017

Getting started with React in 5 minutes


Development Environment Setup

1. Install node.js. What you really need is npm that is installed as part of node.js.

2. Install create-react-app npm module globally. This npm modules contains scripts that set up a new app, ready for further development.

npm install -g create-react-app

3. Create a folder where you want to create your react apps

C:\> md react
C:\> cd react
C:\react>

4. Create an app

C:\react> create-react-app hello-react

5. Change to your new application directory

C:\react> cd hello-react

6. Now you can run the dev version of your app.

npm start

7. Build production optimized version of your app in the build subfolder.

npm run build

8. To run the production version, npm install a static server (need to do just once)

npm install -g serve

9. Run the production version of the app

serve -s build

10. To manage all the configuration scripts yourself (permanent for the app; cannot be reverted).

npm run eject

React-friendly Editors, IDEs and Tools

  • Visual Studio Code
  • Sublime Text
  • WebStorm
  • Chrome Extension for React

Tools under the hood

React development environment uses the following tools.
  • Babel - Transpiler to convert ES6 JavaScript to ES5 for a wider Web Browser compatibility
  • webpack module bundler - To create a single bundle of js from multiple files
  • express - http server for dev
  • serve-static - To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express
  • eslint - static analysis of code

Advanced State Management Module (optional)

  • Redux
  • Use redux-logger middleware for viewing state changes

npm - Node Package Manager

npm manages JavaScript packages (source code for modules).

npm gets the package from the repository at https://www.npmjs.com/

npm is installed as part of nodeJs installation. Think of nodeJs as the runtime for npm.

Install npm

Install the latest version of nodeJs. npm is installed as part of nodeJs.

Initialize npm config file

Go the application directory.

npm init

Creates package.json that contains packages installed by npm.

Install a package

npm install <packagename> --save

Creates a node_modules folder for the module source code.
--save makes an entry for the module in Package.json

Package.json

Package.json keeps track of all packages installed (their dependencies).

npm modules can re-installed/refreshed by running:

npm install

We can create named scripts in the package.json

script {
   "start" : "<command line>"

The script can then be invoked as:
npm run <namedscript>

npm run build
npm run start

This is useful for builds and for starting the application.

App code sharing

When sharing code that uses npm packages, do NOT share node_modules folder. Simply share your js code and package.json. Running the the following command installs all the packages specified in package.json.

npm install

Global vs Local Modules

npm modules are usually installed local to an application (folder). This is preferred to avoid any breaking changes to modules.

Modules can be installed globally. This is usually done for dev tools that are utilized for multiple projects. For example, nodemon module that detects and restarts an application (web server) may be installed globally. nodeman re-executes a script or restarts the web server when underlying source code is changed.

npm install -g nodeman

To find the location of the global npm module folder:
npm root -g

To remove a global module.
npm remove -g nodeman

Useful Commands

Check npm version

npm -v
npm --version

Get help

npm
npm help
// overview
npm help npm

Initialize npm

npm init

// answer yes to all questions
npm init --yes 

// set / get / delete initialization defaults
npm config set <value-name-from-package.json> "default value"

npm config get <value-name-from-package.json>

npm config delete <value-name-from-package.json>

Install/Uninstall modules

// install module and update package.json
npm install lodash --save

// development only package install
npm install <package-name> --save-dev

// install a module globally
npm install -g <packagename>

// get (refresh) ALL packages in package.json
npm install

// get production-only packages in package.json
npm install --production

// uninstall a package - delete from module folder and package.json
// remove and rm are synonyms for uninstall
npm uninstall <packagename>

To remove a global module.
npm remove -g <packagename>

// install a specific version of a package
npm install <packagename>@version --save

// update to the latest version
npm update <packageversion>

If the version specified in the package starts with:

^1.2.3 Update to the latest minor version. Retain the major version.
~1.2.3 Update to the latest patch. Retain the major and minor version
* Update to the latest version

To specify update to a specify version of module, enter the specific version and do not precede the version with any of the characters above. Example: "1.2.3"

1.2.3
1 is major version
2 is minor version
3 is patch version

Listing installed modules

// list all packages and their dependencies
npm list

// list top level packages only
npm list --depth 0