Creating Common Components

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

  • Using Custom HTML Elements
    • Using a framework like Angular/React that allows custom HTML Components
    • 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.  <md-select placeholder=”Food i would like to eat” [formControl]=”foodControl”>
          • Disable: this.foodControl.disable()
          • Enable: this.foodControl.enable()
      • FINAL:
        <md-select placeholder="Favorite food">
          <md-option *ngFor="let food of foods" [value]="food.value">
            {{ food.viewValue }}
          </md-option>
        </md-select>
  • Using Attributes (Eg. Bootstrap + JQuery/PureJS components)
    • Use class attribute to control style and layout
      • Eg. Dropdown Header/Item
        • Layout: class=”dropdown-menu-right”
        • Style: <button class=”dropdown-item”
    • 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…
      })

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

SlickGrid with Angular2

The original SlickGrid repo is unmaintained and hasn’t been updated in over a year: https://github.com/6pac/SlickGrid

This fork is the most active one: https://github.com/6pac/SlickGrid

 

Microsoft has published an Angular2 wrapper for Slickgrid: https://github.com/Microsoft/angular2-slickgrid

Here’s a sample app: https://github.com/Microsoft/angular2-slickgrid/tree/master/examples/basic_application

 

OTHER GRIDS: https://jspreadsheets.com/

Hosting NodeJS app on Openshift

ref: https://developers.openshift.com/languages/nodejs/getting-started.html

Prereq: https://developers.openshift.com/getting-started/windows.html#client-tools

OpenShift’s default platform features include automatic DNS setup, SSH services, and a git server. The resulting output should contain a live URL where your application will be available:

https://MyApp-MyNamespace.rhcloud.com/