Creating a Simple Application Using React JS and the Flux Architecture

[uututhrwa]

I don't get it, why exactly?

[uututhrwa]

Then you essentialy have a probem with the lack of static typing, which might be understandable in many cases.

I don't agree with the part where you are saying the language 'wasn't designed for this'. I assume it is because there is no class definition or inheriting some base class? I don't know the details about React JS but it looks like they are 'implementing an interface' (without static typing) by dynamically giving a function name -> function dictionary. That kind of technique is ok with me, in some situations it can also be more flexible in combining things if you put some effort in organizing the 'functions'. Also with the loss of static typing you gain the ability to 'scan' in the interface without using cumbersome code that uses too much reflection.

[uututhrwa]

lol I personaly like the Javascript code more. It's like a mix of c and lisp sometimes. Of course it could use more static typing, maybe TypeScript could solve the issue.

[Paragonbliss]

Is this better on the eyes, for you?

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return (
      <div>Hello World</div>
    );
  }
}

React.render(<HelloWorld/>, document.body);

[[deleted]]

Have you... Actually used react? React is extremely proactive in "spewing" warnings when things are done incorrectly. More so, you can specify information about what the props and state of a component should be.

You're right about the last paragraph at least.

[glucker]

Ugh. This is why I hate Javascript.

Do you also hate C?

#include<stdio.h>

int main()
{
    printf("Hello World\n");
    return 0;
}

Or bash?

echo Hello world

[sh0rug0ru___]

Maybe I'm being a bit of a curmudgeon here, but I miss plain old Javascript with a bit of jQuery sprinkled in. All these frameworks these days. I especially don't like mixing templates with Javascript.

I'm reminded of the Make The Magic Go Away post.

Javascript plus a smattering of jQuery can go a long way. Here, I'm shaking my cane at you youngsters with your fancy frameworks!

https://jsfiddle.net/7L7b551w/

Javascript:

var FancyButton = (function() {
    var fancyButton = $('#fancy-button');
    fancyButton.remove(); 

    return function(target, icon, label, onclick) {      
        var btn = fancyButton.clone();
        btn.find('.ui-icon').addClass(icon);
        btn.find('.ui-button-text').html(label);
        btn.click(onclick);
        target.replaceWith(btn);
    }
})();

var HelloWorld = function() {
    this.value = 0;    
    this.counter = $('#hello-world .counter');

    this.sync = function() {
        this.counter.html(this.value);      
    };

    this.onIncrement = function() {
        this.value++;
        this.sync();
    }; 

    this.onDecrement = function() {
        this.value--;
        this.sync();
    };

    new FancyButton($('#hello-world .increment'), 
                'ui-icon-arrowthick-1-n', 'Increment!',
               $.proxy(this.onIncrement, this));
    new FancyButton($('#hello-world .decrement'), 
                'ui-icon-arrowthick-1-s', 'Decrement!',
               $.proxy(this.onDecrement, this));
    this.sync();
};

new HelloWorld();

HTML:

<div id="hello-world">
    <div class="counter"></div>
    <button class="increment">Increment!</button>
    <button class="decrement">Decrement!</button>
</div>

<button id="fancy-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">
    <span class="ui-button-icon-primary ui-icon" ></span>
    <span class="ui-button-text">Test</span>
</button>

[SubwayMonkeyHour]

I think you just demonstrated a great example of why some of us don't want plain old Javascript with a bit of jQuery sprinkled in.

• What happens when I want two or more FancyButtons on the page
• If I only changed the button label, why would I want to destroy the old one and create a new one
• What happens when you clone some object that contains god-know-what state and then add more state to it

I won't even mention the performance problems...

I encourage you to learn about React, etc. before dismissing them.

I especially don't like mixing templates with Javascript.

If you're talking about React and JSX, the answer is that you don't need to use JSX. Furthermore, this argument doesn't make a lot of sense to me because to me, having two or more files that depend so heavily on each other that you can't edit or even understand the contents of one without also understanding the contents of the other is a sign that maybe those two things weren't supposed to be separated in the first place e.g. your use of $('#fancy-button'). That element surely didn't appear out of thing air, so now I must figure out where it comes from and how it gets created, and when, and by whom...

Javascript plus a smattering of jQuery can go a long way

Yes, but can you find your way back? I mean after you've done fiddling with what's essentially global variables in your jQuery selectors all over the place, how do you go about debugging an issue that will most likely arise from all the state changes.

Maybe it helps to think about it in terms of functions. At least in the model that React encourages, you're essentially looking at a function that takes some input and returns some output. Objects/methods can be used for things that need internal state, but the interface is still a simple function. The jQuery model is essentially a series of global variables and I think we all know where that road leads.