loading...
Cover image for React or Vue or Something New?

React or Vue or Something New?

proticm profile image Milos Protic Updated on ・4 min read

Hello my fellow developer, 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 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 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, 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 best of luck!

Discussion

pic
Editor guide
Collapse
revskill10 profile image
Truong Hoang Dung

It depends on your favorite paradigm. ReactJS code tends to be functional. Let me tell you the way how a React component get rendered on browser.

An application needs a currentUser, so i create a withAuth higher order component.
A component needs to authorize that currentUser to display/allow/disallow action on that component, so i create a withPermissions hoc.

A page needs a layout, so i create a withLayout hoc.

A component might get rendered differently based on current route, so i create a withRouter hoc.

In the end, your page is rendered as

compose(
withAuth,
withPermissions,
withLayout,
withRouter
)

I must say, i love this style of application design and implementation also.
In Vue, i couldn't, because the way to code Vue is to use a Vue component, not function.

Or am i missing something in Vue ?

Collapse
ozanmuyes profile image
Ozan Müyesseroğlu

Actually there are functional components in Vue. The document says

Since functional components are just functions, they’re much cheaper to render.
(snip)
They’re also very useful as wrapper components. For example, when you need to:

  • Programmatically choose one of several other components to delegate to
  • Manipulate children, props, or data before passing them on to a child component
Collapse
proticm profile image
Milos Protic Author

Hi, your question was already answered by Ozan. As you can see, Vue does support JSX as well. And I agree with you that everything is in personal preference when you have great frameworks to choose between.

Collapse
antonfrattaroli profile image
Anton Frattaroli

For the specific example you've given, my first instinct would be to check out Vue mixins. The react team has a different philosophy about mixins and prefer compositions as you've shown. Could read Dan Abramov's "Mixins considered harmful" article for their perspective. On the other hand, The Vuetify library is an interesting Material implementation that relies heavily on Vue's mixins.

Collapse
sergiu profile image
Sergiu Butnaraşu

Maybe Stencil can help you. He generates web components that can be integrated with other frameworks (Angular, React, Vue) or can be used without a framework (stenciljs.com/docs/javascript).

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'hello-world'
})
export class HelloWorld {
  @Prop() message: string;

  render() {
    return (
      <div>
        {this.message}
      </div>
    );
  }
}

And use it like this:

<hello-world message="Hello World!"></hello-world>
Collapse
gluons profile image
Saran Tanpituckpong ✔️

Wow! I can write similar code with Vue + TypeScript (feat. Vue Property Decorator).

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({
  name: 'hello-world'
})
export default class HelloWorld extends Vue {
  @Prop(String) message: string;
}
</script>
<hello-world message="Hello World!"></hello-world>
Collapse
sergiu profile image
Sergiu Butnaraşu

Nice, but I personally like the Stencil syntax.

Collapse
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Did you know the web platform has its own built-in component model? You can use shadow DOM to encapsulate your css - no more compound selectors, verbose naming conventions, preprocessors, etc. You can define your own html elements with custom elements and add your special behaviours, and you can efficiently render with template elements.

Check out my series on web components to learn more.

Collapse
proticm profile image
Milos Protic Author

Hi, yes, I'm aware of the web components and the shadow DOM, but I didn't get super deep into them. Very useful features, but it feels like that on every new project we need to recreate the framework.

Collapse
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

The web components standards are very low-level. You're really not meant to use the vanilla APIs exclusively for large projects. On some projects, like you said, the best choice will be to write your own library to handle things like data binding, data flow, state container etc. But in most cases, the smart move will be to use an off-the shelf base class like LitElement for your components, with a state container like redux, or for example lit-apollo for graphql projects.

You can also use web components inside your existing framework code, since they are just html elements. I've used web components to solve problems in existing Vue apps, for example.

Collapse
chiangs profile image
Stephen E. Chiang

Starting a new angular project is very easy. Install the cli and node, type in ng new projectName in the terminal and then you can start writing code!

Collapse
proticm profile image
Milos Protic Author

Hi, yes, but I just wanted to do a simple Hello World example comparison. I think installing CLI and Node is a bit overkill in that scenario.