Life @ NCP

A common scenario when dealing with React is inter-component communication, particularly when the components do not share a parent child relationship.

For example, consider the case of a context-dependent header bar action that affects the main content window.

    <Layout>  
        <AppBar />
        <Content />
    </Layout>  

Arguably, there are a number of alternative solutions such as providing a callback to the AppBar, and propogate back down to the content (you can invoke component methods directly via a ref), but we’ll focus on the non parent-child case mentioned in the official docs.

It turns out that if you’re using browserify you already have access to an implementation of NodeJS events, so emit away.

    // eventService.js
    'use strict';
    
    var events = require('events');  
    var eventEmitter = new events.EventEmitter();
    
    module.exports = eventEmitter;  
    

    var bus = require('./eventService');
    
    ...
    // caller
    handleAction: function(arg) {  
      bus.emit('addCard', arg);
    }
    
    // receiver
    componentDidMount: function() {  
      bus.on('addCard', this.addCard);
    }

Ratchet is a css/js library for prototyping iOS apps. Maintained by Twitter, it looks similar to its more established older brother Bootstrap but is much less mature and has an anemic API.

Simple things like closing its popovers don’t seem to exist. If you need to do this, digging into the source reveals

    element.addEventListener('touchend', function () {  
          popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
          popover.classList.remove('visible');
          popover.parentNode.removeChild(backdrop);
    });

for the popover backdrop, so doing something like

    var backdrop = document.querySelector('div.backdrop');  
    if (backdrop) {  
      // sad there's not real way to close this
      // https://github.com/twbs/ratchet/issues/625
      var evt = document.createEvent('TouchEvent');
      evt.initUIEvent('touchend', true, true);
      evt.target = backdrop;
      backdrop.dispatchEvent(evt);
    }

to dispatch the touch event was sufficient for my purposes.

See https://github.com/twbs/ratchet/issues/625 for a short discussion on this.

If you’re using IndexedDB in Chrome and getting this exception, AND you’re not using web workers like this StackOverflow question, you might have members of type Functions on the object you’re saving.

See MDN’s article on structured clones for more info on what’s allowed. Also worth noting are that prototype chains and property features are not cloned.

Hope this helps 🙂

Specifically cordova, Android + iOS

• localStorage
  • Best support – http://caniuse.com/#search=localstorage
  • Not very powerful – name/value pairs, size limits (~5mb)
  • Shim which backs with WebSQL/IndexedDB to bypass some limits – http://mozilla.github.io/localForage/#localforage
• WebSQL
  • Ok support (No IE / Opera / Firefox) – http://caniuse.com/#feat=sql-storage .
  • Sadly, deprecated since 2010 – http://www.w3.org/TR/webdatabase/
  • Cordova plugin alternative – https://github.com/brodysoft/Cordova-SQLitePlugin
• IndexedDB
  • Sad, patchy support. Also not supported in iOS 7 – http://caniuse.com/#feat=indexeddb
  • Horribly broken in iOS 8. – http://www.raymondcamden.com/2014/9/25/IndexedDB-on-iOS-8–Broken-Bad
  • Only key-value pairs
  • Polyfill – https://github.com/axemclion/IndexedDBShim , but broken with workaround on iOS 8 – https://github.com/axemclion/IndexedDBShim/issues/167

Interesting alternatives:

• http://pouchdb.com/

Ionic doesn’t track history too well if you’re going between tabbed and non-tabbed layouts. Here’s a drop-dead simple implementation of a history tracker:

Then to navigate back from your controller, just use the goBack method on the historyState service.