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!
Top comments (12)
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
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 ?
Actually there are functional components in Vue. The document says
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.
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.
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).
And use it like this:
Wow! I can write similar code with Vue + TypeScript (feat. Vue Property Decorator).
Nice, but I personally like the Stencil syntax.
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.
Lets Build Web Components! Part 1: The Standards
Benny Powers
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.
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.
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!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.