I'm having difficulties to see the benefit of using components as well. I'm trying to compare the two, to see the differences. But the demo's in the readme are pretty much just a Template. I've ported the demo to show you it's hard to see any difference.

I'm not saying that this is the way to go, I would implement this demo in a different way for sure, just tried to make them look the same to make my point more clear.

Component from readme

<template name="hello-component">
  <div class="hello-component">
    Welcome Message: {{state$message}}
  </div>
</template>

var component = FlowComponents.define('hello-component', function(props) {
  console.log("A component created!");
  this.name = props.name;

  this.setRandomGreeting();
  // change the greeting for every 300 millis
  setInterval(this.setRandomGreeting.bind(this), 300);
});

component.prototype.setRandomGreeting = function() {
  var greetings = ["awesome", "nice", "cool", "kind"];
  var randomGreeting = greetings[Math.floor(greetings.length * Math.random())];
  this.set("greeting", randomGreeting)
};

component.state.message = function() {
  return this.name + ", you are " + this.get("greeting") + "!";
};

<body>
  {{> render component="hello-component" name="Arunoda"}}
  {{> render component="hello-component" name="Sacha"}}
</body>

Template port of hello-component

<template name="helloComponent">
  <div class="hello-component">
    Welcome Message: {{message}}
  </div>
</template>

Template.helloComponent.onCreated(function() {
  console.log("A template created!");
  this.name = this.data.name;

  this.greeting = new ReactiveVar("awesome");
  // change the greeting for every 300 millis
  setInterval(setRandomGreeting.bind(this), 300);
});

var setRandomGreeting = function() {
  var greetings = ["awesome", "nice", "cool", "kind"];
  var randomGreeting = greetings[Math.floor(greetings.length * Math.random())];
  this.greeting.set(randomGreeting);
};

Template.helloComponent.helpers({
  'message': function() {
    var instance = Template.instance();
    return instance.name + ", you are " + instance.greeting.get() + "!";
  }
});

<body>
  {{> helloComponent name="Arunoda"}}
  {{> helloComponent name="Sacha"}}
</body>

"we releazied we are doing it wrong" #11

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions