ReactJS PropTypes vs. AngularJS Bindings

Libraries and Frameworks in JavaScript (or any coding language, for that matter) are meant to ease the pain of programming setting up the front end of your app. Each of them has their own ways of doing so; libraries use different methods that they create in the global window, for you as a programmer to use in your way, while frameworks set a foundation for you to build your code upon.

And in these external sources of code, they have different properties and characteristics that define them in unique ways. Let’s take React and AngularJS (not just Angular, that’s entirely different) for example: React uses an extension of JS called JSX, which is compiled back into plain JS to be run. AngularJS has its own interpreter, to change set up components into real HTML and JS elements. That said, they are extremely different but still show some similarities.

Question of the Day

React has a method called PropTypes that is supposed to determine what datatype data being passed down as a property is supposed to be. And AngularJS has bindings which…well, bind values to HTML.

So why is this relevant?

Well, if nothing else, it’s always good to know the components of what library you’re using. But to figure that out, we’d need to delve deeper into each one.

React PropTypes

In React, you can pass data around between parents and children components using props, an object that passes in whatever value you put in, with it tied to the prop name you give it as the key. This data can be literally anything: strings, arrays, objects, functions, whatever. But if something goes wrong and you aren’t passing down the right thing, what’s a coder to do? I mean, sure, you can console.log(), or set up a debugger. But console.log()s are too inconvenient to be of much worth, and debuggers will send you into the deep, dark pit of the library files, and that just makes it take longer than you want.

One word: PropTypes.

PropTypes is a method on the React object that sets up a ‘trap’, per se. When data is passed down using the key of the same name inside of the JSX HTML, it will scan it to check if it is the right data type. If it isn’t, then the console will blast you with two large errors, telling you what happened and where it occurred. Otherwise, it just stays to itself, knowing nothing’s wrong.

// In JSX, we're setting up an HTML template to return
// And in this instance, we're expecting an array named 'children'.
const Buck = (props) => {
    return (
    <div>
        <ul>
        {/* Here we're mapping the items in the array to the list, so amount is irrelevant */}
        {props.children.map(faun => {
            <Faun id={faun.id} value={faun} />
        });}
        </ul>
    </div>
)};

// And down here, we're 'setting the trap', so to speak.
Buck.propTypes = {
    children = PropTypes.Array.isRequired
};

AngularJS Bindings

On the other side of the spectrum, with Angular JS, they have what they call bindings. Bindings are AngularJS’s way of transferring data between models and views, and come in four different flavors:

  • @ (Text)
  • < (Dynamic Expression)
  • & (Output)
  • = (Two-way)

The specific effects of these aren’t incredibly important for the blog but do know that they play a very important role in AngularJS’s functionality. They can transfer data from parent to child, and vice versa, as well as create a dynamic webpage to work in.

So, how do bindings even relate to PropTypes? Well…they kind of don’t. Some people have the misconception of thinking they’re of similar function. And, well…they aren’t. But nonetheless, let’s take a look at an example to show how it would work.

  • index.html
<DOCTYPE !html>
<html>
    <head>
        <title value="AngularJS Examples" />
        <!-- AngularJS script sourcing here -->
        <script src="./index.js"></script>
    </head>
    <body>
        <div id="app">
        <!-- You can set components like this. Neat. -->
        <app></app>
        </div>
    </body>
</html>
  • index.js
// Starting off by creating the module, component and controller
angular.module('example', [])
    .component("app", {
        //Set the binding
        binding: {
            text: '@'
        },
    //And set the controller
    controller: function($element){
      // The text to be dynamic
    this.text = $element.attr("text");
  },
  // Can't forget the template
  template: `
    <div>
    <input type="text" text=$ctrl.text />
    <p>text: <strong>{{$ctrl.text}}</strong></p>
    </div>
    `
});

And with that, you’d get an input box that changes a paragraph element’s inner text as you type. A powerful, and relatively simple layout. For AngularJS, anyways.

Conclusion

React’s PropTypes and AngularJS’s bindings, despite how they might seem similar, are vastly different and do different things. React’s PropTypes is meant to let you know when something is awry in your code, while AngularJS’s binding is meant to allow more convenience in creating a dynamic HTML page.

Leave a Reply

Your email address will not be published. Required fields are marked *