Node JS project where client side javascript variables persist?

Question

I come from a PHP background and I'm new to Node JS development. I decided to try a basic Meteor JS + Iron Router + React project. The following behaviour caught me off guard:

I'm on a page like http://192.168.0.110:3000/dashboard/john and it has a link like <a href="/dashboard/john/111222">. When the page first loads, a client side javascript variable myvariable has the value undefined but I set it to myvariable="hello world" as the page loads.
When I click on the <a href="/dashboard/john/111222"> link, the page loads up, but to my surprise, the myvariable already has the value hello world instead of undefined.

So even though I went to a totally new url, in which I expected a full page refresh, the myvariable maintained the value of the previous page. Because of my PHP background, I was expecting the value undefined.

This is a completely new behaviour to me because if this were a PHP project, I would have had to explicitly write code to give the illusion that client side javascript variables persist across different page urls (or I use ajax to redraw the screen). But with my NodeJS project, I didn't have to do any of that, and the client side variable maintained it's value.

So my question is, what is this behaviour called? And is it Node JS, Meteor, Iron Router or React that's responsible for this behaviour? Once I know the name of this behaviour, then I can google and read up on details.

Here's the code for my project:

myproject.jsx

var myvariable;
var configAppRoute = {action:applicationController};
Router.route('/dashboard/:username',configAppRoute);
Router.route('/dashboard/:username/:appid',configAppRoute);
function applicationController()
{
  console.log(myvariable);
  myvariable='hello world';
  console.log(myvariable);

  Meteor.startup(function () {
  ReactDOM.render(<App />, document.getElementById("render-target"));
  });
}

App.jsx

App = React.createClass({

  render() {
    return (
      <div>
        <a href={'/dashboard/john/111222'}>click me</a>
      </div>
    );
  }
});

myproject.html

<head>
  <title>My Project</title>
</head>

<body>
  <div id="render-target"></div>
</body>

Can you post the javascript code with the myvariable code in question? — Tim
– Tim, Commented Dec 24, 2015 at 0:34
It's probably meteor doing this. One of the principles of meteor: Data on the Wire. Meteor doesn't send HTML over the network. The server sends data and lets the client render it -- which means that meteor based app are single page apps. I haven't used meteor so I'm not 100% sure but meteor probably rewrites your link to do an ajax call and render it in the same page. That would explain the behavior you're seeing. FWIW you can do this in PHP as well. Facebook is an example of an app written in PHP that behaves like this. — slebetman
– slebetman, Commented Dec 24, 2015 at 0:38
@slebetman Thanks. I'll research that. Yeah in PHP, I would have expected to write my own code to make this happen. — learningtech
– learningtech, Commented Dec 24, 2015 at 0:44

Ethan Clark · Accepted Answer · 2015-12-24 00:49:53Z

3

I have never used Iron Router, but I can still confidently tell you that this is where the behavior is coming from.

Iron Router includes a client-side router. This means that your app is actually a single-page app that behaves like a multi-page app.

Since you are writing a single-page app, variables are never "reset," as your context persists for the entire duration of user interaction -- new "pages" are written to the SAME instance of the Document Object. So, unless the user navigates away from the app, you'll get to keep the context.

answered Dec 24, 2015 at 0:49

Ethan Clark

1266 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

learningtech Over a year ago

thanks Ethan. Do you know if meteor was only meant to make single page apps?

Ethan Clark Over a year ago

Yes, this is a central purpose of Meteor. To quote their documentation: "With Meteor you write apps ... that send data over the wire, rather than HTML."

Collectives™ on Stack Overflow

Node JS project where client side javascript variables persist?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related