Angular vs React vs Vue vs UISYS event binding comparison (novice must see)

Posted by Lodius2000 on Fri, 17 Apr 2020 04:30:03 +0200

1. Start from zero

Event binding is the second lesson for beginners in web development, and learning event binding represents a new lesson in which you will challenge interaction.
Let's first look at what native html + JavaScript does:

Native mode:

<div>
  <button onclick="greet()">Greet</button>
</div>
<script>
    function greet(){
        alert("html and javascript");
     }
</script>

This is a very simple example, but it is a web page, so it cannot be encapsulated or modular.
No modularity is a pain point in Web pages. Early w3c standards for web component were outlined, but later they were abolished.
So there are three main frames out of the people, Angular, React and Vue.These three frameworks can be modular. Perhaps you've also heard about BEM and you can get on-line with popular science.They also provide concepts such as data binding, MVVM (not covered in this article, too tired to write).
What's more, it's a new development tool, which you can understand as the WEB modular tool, airoot-uisys, which just came out of v1 this year. It's really good, it has a separate parsing engine, and it compiles very quickly in real time.
OK, so let's look at how these guys bind events.

1. Angular event binding

angular understands what's going on and is more academic, so you can see that the idea of event controllers is incorporated into it.

<div ng-app="myApp" ng-controller="myctrl">
    <button ng-click="greet()">Greet</button>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myctrl', function($scope) {
        $scope.greet = function() {
           alert("Angular");
        };
    });
</script>

2. React event binding

React is fairly close to native, and if js is more capable, it feels like using ThinkPad (with little red cap, no mouse).

<div id="example"></div>
<script type="text/babel">
function App() {
  function greet(e) {
      e.preventDefault();
    alert('React');
  }
  return (
    <button  href="#" onClick={greet}>Greet</button>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('example')
);
</script>

3. Vue Event Binding

By using v-on or @click to bind Vue objects, I think it's a good idea to use React as a reference, but Vue itself is an idea from angluar.

<div id="app">
  <button v-on:click="greet">Greet</button>
</div>
<script>
    var vue = new Vue({
          el: '#app',
          data: {
            name: 'Vue.js'
          },
          methods: {
            greet: function (event) {
                  alert("Vue.js");
            }
          }
    });
</script>

4. UISYS Event Binding

uisys is the most direct, almost identical to its native counterpart, and can be modular and referenced.
airoot uisys is a quick modular tool for ui introduced by airoot.cn. It feels very powerful, but the ecosphere is not as big as it is because people are sponsored by large companies.

<div>
  <button onclick="@this.greet()">Greet</button>
</div>
<script>
    func greet(){
        alert("airoot uisys");
     }
</script>

uisys is more flexible to use and can be written as follows:

<div>
  <button id="greet">Greet</button>
</div>
<script>
    greet.addEventListener("click",func(){
        alert("airoot uisys");
     });
</script>

You can also at the origin:

<div>
  <button id="greet">Greet</button>
</div>
<script>
    //Note that if you get it through getElementById, you need to precede the green with a $
    document.getElementById("$greet").addEventListener("click",func(){
        alert("airoot uisys");
     });
</script>

2. The calf knife

Here we'll sit down with Vue and Uisys, and since these frameworks are business-oriented, let's try them out.
Example: Write a module, your module has a variable flag, the module can be clicked when flag is true, otherwise it cannot be clicked.

1. Vue

Actually, there are many ways to write this, so here we are just like using v-if and v-else to show you.
For your convenience, I use the setTimeout method to change flag to false after 5 seconds.

<div id="app">
    <div v-if="flag" @click="greet()">
     //Add Products
    </div>
    <div v-else>
     //Add Products
    </div>
</div>
<script>
    var vue = new Vue({
          el: '#app',
          data: {
            flag: true
          },
          methods: {
            greet: function (event) {
                  alert("Vue.js");
            }
          }
    });
    //You can click at first, and after 5 seconds the click effect will no longer work.
    setTimeout(function(){
        vue.flag = false;
    },5000);
</script>

2. uisys

uisys is very direct and it's great to get your gun on.
For your convenience, I use the setTimeout method to change flag to false after 5 seconds.

<div id="app">
    //Add Products
</div>
<script>
    func greet(){
        alert("airoot uisys");
    }
    
    set flag(value){
        app.onclick = value ? greet : null;//ternary operator
    }
    
    //Initialization function
    func init(){
        flag = true;
        //You can click at first, and after 5 seconds the click effect will no longer work.
        setTimeout(function(){
            flag = false;
        },5000);
    }
</script>

3. Summary

The three main web frameworks and airoot uisys have all been introduced.Event binding is great, except that some of angluar's small partners may wonder what's so complex about angluar. In fact, angluar was designed with a lot of consideration for large enterprise projects at the beginning, and its components are the most mature. React and Vue are not google after allThat's complicated, so when angluar started school, he felt a little "pant-free and farting". But if you learn more, you'll understand the author's dilemma.

But it's not that React and Vue are not as good as angluar. As the saying goes, "A journey of ten thousand miles begins with a faltering pace." React and Vue communities are growing larger and larger, and the components that mimic angluar and adobe flex are almost the same, so it's hard to distinguish between them.

Finally, evaluate the refreshing airoot uisys. To be honest, this fellow does exactly the same thing as the three main WEB frameworks. He writes the whole HTML parsing once, then generates html, JS code through his own parsing engine, which is the bottom layer of the browser. So it is certainly more efficient to modularize it. If you know the difference between Docker and VMware, uisysIt is the Docker principle, and the three main frameworks are the VMWare principle.So uisys is really suspended, but now companies choose platforms that look at the ecosphere and components, or simply don't want to write more, so uisys is inferior. But now uisys is pushing TMax framework, legends can change various JS plug-ins into HTML, and various "star-sucking methods" are waiting to be seen.

OK, the front-end is really challenging, learning well is a creative experience, learning poorly will become a printer (do the same interface, will press the design barrier plug-in).I hope you all become a great Full Stack Developer. Thank you for watching.

Topics: Javascript Vue React angular