Ratchet with React

632 views
Skip to first unread message

Shane

unread,
Jul 12, 2014, 12:00:36 AM7/12/14
to gora...@googlegroups.com
Anyone try using Ratchet with FaceBook's React? I'm having a problem with React needing to attach it's fake dom to the browser dom, which means nesting the .bar and .content element. That really messes with Ratchet's CSS.

Is there a way to nest those in parents?

BTW, it works great when I fake it, creating browser dom elements on the fly. But that presents it's own challenges on the React side.


Kristian Mandrup

unread,
Aug 25, 2014, 12:54:45 PM8/25/14
to gora...@googlegroups.com
Hi Shane,

I'm new to ReactJS and GoRatchet, but I'm also looking to use them together, as GoRachet looks like the best option for a Mobile UI framework that is not too tightly coupled like Ionic, Jquery Mobile, Kendo Mobile UI etc.

If I understand the issue correctly, it looks like you should post the issue on the React issue list on github, to allow for customizing how the virtual DOM attaches itself so that you can control that the .bar and .content elements don't get nested. I would like to see an example app that causes that issue so I can better understand it.

Please post your example on plunker, github or both :)

Cheers!

Kristian

Kristian Mandrup

unread,
Aug 25, 2014, 2:03:13 PM8/25/14
to gora...@googlegroups.com
Hi Shane,

First check React and Styling components?




I think the best option is to tweak swapContent function of push.js in Rachet

  var swapContent = function (swap, container, transition, complete) {
    ...
    if (!transition) {
      if (container) {
        container.innerHTML = swap.innerHTML;
      } else if (swap.classList.contains('content')) {
        document.body.appendChild(swap);
      } else {
        document.body.insertBefore(swap, document.querySelector('.content'));
      }
    } else {
      ...


      container.parentNode.insertBefore(swap, container);
    }

I imagine the problem is this hardcoded line?

document.body.appendChild(swap);

It would be nice if we could control the DOM node that acts as the top level container using some configuration

// default
Push.appContainerNode = function() {
  return document.body;
}

Push.appContainerNode().appendChild(swap);

And so on...??

If that is not enough, something similar could be done on the React side for sure...

Kristian Mandrup

unread,
Aug 25, 2014, 2:40:30 PM8/25/14
to gora...@googlegroups.com
In React, looks like getReactRootElementInContainer.js could be a potential problem?

function getReactRootElementInContainer(container) {
  if (!container) {
    return null;
  }


  if (container.nodeType === DOC_NODE_TYPE) {
    return container.documentElement;
  } else {
    return container.firstChild;
  }
}



Might want to change it into something like

function getReactRootElementInContainer(container) {
  if (!container) {
    return null;
  }


  if (container.nodeType === DOC_NODE_TYPE) {
    return container.documentElement;
  } else {
    if (container.classlist.contains('content')) {
      return container;      
    } else {
      return container.firstChild;
    }
  }
}
 


or something like that?

Kristian Mandrup

unread,
Aug 25, 2014, 4:34:39 PM8/25/14
to gora...@googlegroups.com
From Rachet docs


Fixed bars come first

All fixed bars (.bar) should always be the first thing in the <body> of the page. This is really important!

2. Everything else goes in .content

Anything that's not a .bar should be put in a div with the class .content. Put this div after the bars in the <body> tag. The .content div is what actually scrolls in a Ratchet prototype.

So that "bootstrap" DOM looks like this:

<body>

    <!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <h1 class="title">Ratchet</h1>
    </header>

    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">

But React will use the strategy: first child of the container to obtain the component to swap with the Virtual DOM. This is essential for React to work "all the way down"...
So the problem is not with React but with Push.js being hardcoded to swap in at the body level. Instead it should allow swapping in at one level below the body level IMO.
Conclusion so far: Change push.js swapContent function to not be hardcoded but be configurable as to where in the document to make the content swap.
I will try this in a small demo project ASAP.


Kristian Mandrup

unread,
Aug 25, 2014, 5:00:10 PM8/25/14
to gora...@googlegroups.com
  // To customize getContainer strategy


  PUSH.getContainer = function() {
    // your custom get DOM container element logic
  }


  // See swapContent function
  var swapContainer = PUSH.getContainer();

Reply all
Reply to author
Forward
0 new messages