Use OO & FP Together

  • In OO Computation proceeds by sending messages to objects while in FP, Computation proceeds by applying functions to values
  • Have Functional Core and Imperative Shell in your program
  • All programming is abstraction and Abstraction is simply management of complexity using Composition (of Objects and Functions) using divide and conquer.
  • OO offers us encapsulation boundaries allowing system to be divided into modules that then communicate using message passing b/w objects. FP allows us to work with immutable values and pure functions, so that behavior can be uniformly composed from simpler building blocks into reliable larger modules.
  • OO is composition at large scale while FP is composition at small scale.
  • Thinking that programming is just mathematical, ignores resource considerations. Thinking that programming is just physics, ignores computational abstractions.
  • Broad spectrum multi paradigm languages allow us to solve all kinds or problems using OO concepts and FP concepts together where applicable.
  • Learn from OO and from FP and then rise above it all.

SLIDES: https://goo.gl/photos/M67ZoHrSibdAzYoc6

Creating Common Components

Common Reusable Components require Template, CSS and JS to express their behavior:

  1. USING CUSTOM HTML ELEMENTS
    • Using a framework like Angular/React that allows interpreting custom HTML Elements.
    • Let’s look at Angular Material Dropdown:
      • Use custom Attributes to control style, layout and behavior from template
      • Use custom methods to control behavior using JS
        • Eg.  [formControl]=”foodControl”>
          • Disable: this.foodControl.disable()
          • Enable: this.foodControl.enable()
      • Eg:
        <md-select placeholder="Favorite food">
          <md-option *ngFor="let food of foods" [value]="food.value">
            {{ food.viewValue }}
          </md-option>
        </md-select>
  2. USING ATTRIBUTES
    • USING DEFAULT ATTRIBUTE VALUES AND CUSTOM KEYS
      • Eg. Bootstrap + JQuery/PureJS components
      • Use default class attribute key with custom values to control style and layout. Eg. Bootstrap Dropdown Header/Item
        • Layout: class="dropdown-menu-right"
        • Style: <button class="dropdown-item"> </button>
    • USING CUSTOM ATTRIBUTE KEYS
      • This can be achieved using data-* custom attributes that are allowed in standard HTML and can be inspected by pure JS Eg. This Directive
      • Use data-* attributes to control behavior
        • Eg. Add data-toggle=”dropdown” to a link or button to toggle a dropdown.
        • Also allow JS API for all behaviors: $(‘.dropdown-toggle’).dropdown()
        • Fire Actions using JS Events
          • The client will register handlers like so: $(‘#myDropdown’).on(‘show.bs.dropdown’, function () {
            // do something…
            })
        • Frameworks like Angular can also be used to achieve this. Eg Attribute Directives,  Note that Angular Components can be easily injected into Non Angular Apps. See Sample Here.

          TLDR: Post AOT and Tree Shaking etc. optimizations of the Common Angular Components, their size would be lesser than one using JQuery etc. and would be more performant and have a better API (leveraging both custom Elements for abstraction and Custom Attributes for configuring the component) and they can be used anywhere

           

WRAPPING INTO F/W SPECIFIC API

In any of the above approaches, it is imperative for the library authors to wrap the component into a F/W friendly wrapper like wrapping pure js grid into angular component that they angular clients can then easily consume. Eg. https://ng-bootstrap.github.io/#/home

Save file to file system from Browser

https://github.com/eligrey/FileSaver.js

https://stackoverflow.com/questions/13405129/javascript-create-and-save-file

https://stackoverflow.com/questions/585234/how-to-read-and-write-into-file-using-javascript

http://www.keithwhor.com/fso/

The issue I see is that I didn’t find a way to specify the path in code. I wanted to add the file to network drive so that all users get the file from common storage and update in the same place essentially not needing server side code for updating this file.

Normalizing the Redux Store

Reasons:

  • When a piece of data is duplicated in several places, it becomes harder to make sure that it is updated appropriately.
  • Nested data means that the corresponding reducer logic has to be more nested or more complex. In particular, trying to update a deeply nested field can become very ugly very fast.
  • Since immutable data updates require all ancestors in the state tree to be copied and updated as well, and new object references will cause connected UI components to re-render, an update to a deeply nested data object could force totally unrelated UI components to re-render even if the data they’re displaying hasn’t actually changed.

 

Because of this, the recommended approach to managing relational or nested data in a Redux store is to treat a portion of your store as if it were a database, and keep that data in a normalized form.

 

Ref: http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html