Originally posted on dev.to

Considering that you are reading this post, the title got you intrigued, didn't it? Well, stick with me until the end and you will find out what Something New is.

First, a brief intro about me.

I'm a passionate software developer who likes to learn new stuff. From my early days, I've been pushing myself to work harder and smarter. I always try to improve my code and question myself if something can be done better or more intuitive. The most important thing is to understand the code and how something was implemented because only then you can reach the point when you can start thinking about how to improve it.

If you are wondering why Angular is left out, the reason for it is the lack of support for a good old way of starting a simple project. We are not able to place a bare script tag on our HTML page and start writing the code right away.

Ok, it's time to get into the stuff this post is about.

ReactJS

ReactJS is a declarative, component-based JavaScript library for building user interfaces. This means that we have components encapsulating the logic, which are used later to create complex interactive UIs.

That's really convenient, but I think that the main issue here is that in ReactJS everything is JavaScript. This comes with trade-offs that, in my opinion, are simply not worth it. I mean, what happened to the good old trio HTML, CSS, and JavaScript? We even have a new way of expressing our UI via JSX which moves us further away from the standard web development. It is possible that sometimes this might get in handy, but template as a simple alternative seems more appealing.

Now, let's back up this with Hello World example:

First, we need to place an element on our page to mount on:

<main id="greeting"></main>

Second, we need to create our component:

class Greeting extends React.Component {
  render() {
    return (
      <div>
        {this.props.message}
      </div>
    );
  }
};

ReactDOM.render(
  <Greeting message="Hello World!" />,
  document.getElementById('greeting')
);

For this example, we needed to include three script tags. One for the react itself, one for react-dom and one for babel to compile our ECMAScript code.

The code above will display Hello World! message in the browser. If we take a look at the page source we will see that we ended up with two HTML elements. The element we've mounted on, our main element pre-rendered on the page, and the div element created dynamically during component initialization.

Vue.js

Vue.js is defined as a progressive framework for building user interfaces. Not that much different than ReactJS, right? On the actual comparison page of the Vue.js website, there is a line that says that the two share many similarities.

Vue.js is getting pretty popular which is not strange considering that it's, like ReactJS, a great framework. It also supports components which will, when grouped together, compose an interactive UI. In my opinion, Vue.js is a little more intuitive than ReactJS.

Let's see how Vue.js does a Hello World.

Our HTML markup looks like this:

<main id="greeting">
    <hello-world v-text="message"></hello-world>
</main>

And, our script looks like this:

Vue.component('hello-world', {
    props: ['message'],
    template: '<div>{{ message }}</div>'
});
		
new Vue({
    el: '#greeting',
    data: {
        message: 'Hello World!'
    }
});

For Vue.js example, we needed to include only one script tag which is for the Vue itself. As in our previous example, the Hello World message is displayed in the browser, and again, if we take a look at the page source we will see that we ended up with two HTML elements. The difference is that we've rendered our component by using a custom tag which gets recognized by the framework during rendering. Custom tag names are mapped to the component names.

Something New, a.k.a PlazarJS

To anyone who's stuck with me this far, bravo and thank you! It's time to talk about that new thing I mentioned in the title.

That new thing is called PlazarJS, a versatile framework built to enrich the developer experience in terms of simplicity and speed of application development. It's Object-Oriented, and it can easily be used to create a large Single-Page Application or it can be integrated to a portion of a web page where dynamic workflow is required.

The keyword here is simplicity, and the focus is on the good old trio, HTML, CSS, and JavaScript. It is a component-based framework like the two giants described in the paragraphs at the beginning of this post.

Now, let's see a PlazarJS way of doing things and create a Hello World example. Like we did in the previous two examples, we need to add an HTML markup for our component:

<main id="greeting"></main>

Next, we need to define and load our component:

pz.define('hello-world', {
    ownerType: 'component',
    renderTo: 'main#greeting',
    template: '<div>{message}</div>',
    viewModel: {
        message: 'Hello World!'
    }
}).create().load();

For PlazarJS example, like in the one when we used Vue.js, we needed to include only one script tag which is for the framework itself.

Note that if we set the autoLoad config of the component to true, the invocation of the load function is not required. The component will be auto-loaded upon creation. Also, we've invoked a static method create because we wanted to create the component immediately after we defined it.

We could only have defined the component and used the defined type later in our app dynamically.

In the example above, we ended up with two HTML elements like we did in the previous two, but here, we could set the config replace to true which will result in replacing the original element with the component template.

Check out these and more PlazarJS features (mixins, classes, inheritance, bindings...etc) on the official documentation site.

Source code can be found here.

This was a quick comparison of the three frameworks based on the simple Hello World example.

Thank you for reading and I wish you the best of luck!