React is also brittle because it has a dense tool chain managed by a brittle poorly funded open source community.

The objective fact is that the most stable development process would not use frameworks at all.

You can create state management by creating basic javascript objects that server as components. If designed thoughtfully you can build scripts that are compatible across all browsers back to IE 9 and not subject to breaking when framework changes are made.

For example:

<html>

<body>

<div>
  <h2>Counter1 <span id="counter1">0</span></h2>
  <input type="button" id="add_counter1" value="add">
  <input type="button" id="subtract_counter1" value="subtract">

  <h2>Counter2 <span id="counter2">0</span></h2>
  <input type="button" id="add_counter2" value="add">
  <input type="button" id="subtract_counter2" value="subtract">

  <h2>CounterN <span id="counterN">0</span></h2>
  <input type="button" id="add_counterN" value="add">
  <input type="button" id="subtract_counterN" value="subtract">

</div>

<script type="text/javascript" >

  var CounterComponent = function(){

    // Constructor
    this.init = function(counterId){

      var buttonMap = [
        {elementId:'add_'+counterId, functionName:'add', eventType:'click'},
        {elementId:'subtract_'+counterId, functionName:'subtract', eventType:'click'}
      ];

      this.counterElement = document.getElementById(counterId);
      this.counter = parseInt(this.counterElement.innerHTML);

      this.buildButtons(buttonMap);
    }

    // Add to counter
    this.add = function(){
      this.counter++;
      this.setCounter();
    }

    // Subtract from counter
    this.subtract = function(){
      this.counter--;
      this.setCounter();
    }

    // Set Counter
    this.setCounter = function(){
      this.counterElement.innerHTML = this.counter;
    }
    /**
    | Oh Yes the dreaded innerHTML -
    |   You can hack a React frontend just as easily.
    |     Manage your backend properly
    |
    **/

    // The funcitons bellow follow the open closed principal of
    //   SOLID programming - which means they should not be modified
    this.buildButtons = function(buttonMap){
      for( let i = 0; i < buttonMap.length; i++){
          let buttonElement = document.getElementById( buttonMap[i].elementId );
          console.log(buttonMap[i].elementId);
          this.attachFunctionToElement( buttonElement, buttonMap[i] );
      }
    }

    this.attachFunctionToElement = function( element, functionMap ){
        // Resolve the `this` context to a variable accessible by the
        //  function inside of the addEventListener method
        let self = this;
        try{
          element.addEventListener(functionMap.eventType,
            function(){
              // Dynamically call the function
              self[ functionMap.functionName ]();
            }
          );
        }catch(err){
          console.error(err + " @ functionMap"+ functionMap.elementId);
        }
    }

  }

  // initialize the JS after the DOM has loaded
  document.addEventListener("DOMContentLoaded", function(){

    // Now you can add this component to any number of elements
    //  by just passing the elementId

    // Init the components
    let counter = new CounterComponent();
    let elementId = 'counter1';
    counter.init(elementId);

    let counter2 = new CounterComponent();
    elementId = 'counter2';
    counter2.init(elementId);

    let counterN = new CounterComponent();
    elementId = 'counterN';
    counterN.init(elementId);
  });

</script>

</body>

</html>

The jQuery Dilemma

Updated Series Available