PlazarJS Components by Example - Part 1

Hello my fellow developer. I wish to welcome you to the first article of the series about the new thing called PlazarJS.

You may have read my previous article where I’ve mentioned it and did a Hello World comparison with Vue and React, but stick with me on this one here since we are going to dive a little deeper and focus only on PlazarJS.

When I was deciding what will be my entry point and what is going to be the first thing to talk about when introducing PlazarJS, I asked myself what is now popular and what do people love the most within any JavaScript framework? Well, I came up with the answer: "Components!".

I really think I’m not wrong, because among other great features, the components represent a guideline of all currently popular frameworks.
For starters, I will try to answer, briefly, the "Why" and "What" questions about PlazarJS, so let’s get started.

Why was PlazarJS created?

Let’s see, on my first Angular project a couple of years ago, I think it was AngularJS v1.2.22, so it’s more than a couple of years, I fell in love with the way of how thigs were done and implemented. I’m a big fan of MVC concept, so I’ve embraced the Angular perspective and the way of doing things in no time. Later, when the components came into the picture, everything got even better. So, I guess that the first reason why I started working on PlazarJS was self-learning. I was, and still am, hungry for more knowledge about the software industry.

After a while, when I saw the reusability and the potential of the code I was writing, I started thinking: "Hey, someone might actually be willing to use this on his own project", and when I felt like it’s ready, I decided to share the project with the community. So, the second reason is that I wanted to give back to the community, that gave me so much, something in return.

I will stop here, since I have more to write about. We don’t want this post to turn into a novel!

What is PlazarJS?

PlazarJS is a lightweight, versatile framework for JavaScript. It’s built to enrich the developer experience in terms of simplicity and speed of application development. The framework itself has no dependencies and by leaning on Object-Oriented-Principles (OOP) 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. It is written in plain JavaScript and built to be flexible.

The text above is quoted from the official documentation website and if we read it with meaning, we can extract the following conclusions about the framework:

• Lightweight – place one script tag on the page and you are good to go; umd support has been added as well
• Versatile – can create inline templates, download templates from the server or hook to the pre-rendered html. Supports client and server rendering
• No dependencies – only JavaScript is required
• Modern – it’s written in ECMAScript 6, compiled using babel and maintained by lerna/rollup/uglifyjs combo
• OOP – easily extendable and inheritable components, and I’m not talking just about mixins, we can extend a type, override its method in a child type and call the parent method from the override
• Flexible - can meet your needs and behave like a library or a whole framework
• Scalable - usually, this goes together with OOP; you can scale your app by extending the framework core

Now, when we have a basic answers and understanding of the framework, we can back-up everything with an example. As promised at the beginning of this post, we are going to create an example component.

The example will contain a layout component with header, body and footer as child components. The header and body will be added in a declarative manner, meaning that they will be created by their parent component, and the footer will be added dynamically later, for example, when the layout component is initialized. Our main component template will be pre-rendered on the page and the other ones will be declared as inline templates. Another option is to download a template from the server, but I will cover this in another article.

Let’s start by placing our layout component template on the page (we said it is going to be pre-rendered, right?):

// For the purpose of this example, we will configure the component 
// to select its html element by CSS class.
// Note that we could use any CSS selector
<section class="layout-component"></section>

Ok, now when we have the main template ready, we can start figuring out how our child component templates are going to look like. Let’s say that, in our header we want a menu, in the body we want a welcoming text bound via viewmodel and in the footer we want to have a copyright information.

Header template:

<header>
    <ul> // Note that this menu could be yet another component
        <li>Home</li> 
        <li>...</li>
        // more dynamic items
    </ul>
</header>

Body template:

<main>
    <p>{text}</p>
</main>

Footer template:

<footer>
    <span>Copyright &copy; 2018-present, John Doe</span>
</footer>

Now take a sip of your coffee to juice yourself up. We are going to wrap it all together. Before we do that, it is crucial to mention a function responsible for defining every type in our application. This function is located under the global namespace pz and it's called define. By invoking it, we will create our components. Also, this method is used when defining a class, a mixin or any other custom type, but I will cover this in one of my next posts.

This method will make sure that corresponding type gets defined and stored as a type definition in our application. Later, during runtime, we can use methods like pz.getDefinitionOf and pz.getInstanceOf to reuse or extract our type or instance, but those methods are a topic for another article.

To define a component, we need to set the ownerType of our defined type to component. The component type is one of the core framework types that we can use beside class and mixin. In one of my next posts I will cover custom types and how to extend them.

The following code illustrates our layout component and its children:

pz.define('header-component', {
    ownerType: 'component',
    template: '<header><ul></ul></header>',
    menuItems:[],
    init: function() {
        this.base(arguments); // this will call the init method of the parent type
        pz.forEach(this.menuItems, function(menuItem) {
            var li = pz.dom.parseTemplate('<li><a href="' + menuItem.href + '">' + 
                    menuItem.text + '<a></li>');
            var list = pz.dom.findElement(this.html, 'ul');
            pz.dom.append(list, li);
        }, this); // "this" is passed as a scope variable, it's not required
        // here, we could have used a viewmodel to bind the items via data-each binding
    }
});

pz.define('body-component', {
    ownerType: 'component',
    template: '<main><p>{text}</p></main>',
    viewModel: {
        text: 'Hi, I wish to welcome you to the PlazarJS example. I hope you will like it'
    }
});

pz.define('footer-component', {
    ownerType: 'component',
    template: '<footer><span>Copyright &copy; 2018-present, John Doe</span></footer>'
});

pz.define('layout-component', {
    ownerType: 'component',
    templateSelector: 'section.layout-component',
    autoLoad: true,
    components:[{
        type: 'header-component',
        menuItems:[{
            text: 'Home',
            href: '#'
        },{
            text: 'About',
            href: '#'
        },{
            text: 'Contact',
            href: '#'
        }]
    }, {
        type: 'body-component'
    }],
    init: function() {
        this.base(arguments);
        this.addChild({
            type: 'footer-component'
        })
    }
}).create();

Since we didn't define a SPA, and we could do this by using an override called pz.defineApplication, we've invoked the static method create. What this method will do is that it will create the component immediately after it gets defined. The children initialization and creation is handled by the layout component.

The static method create is available only on definitions, and hopefully I will cover it in another article.

If we take a look at the page source, we will see that our components are rendered within our layout component as desired.

OK, we've reached the end of this article. I tried to be short and concise in order to help you understand how things are done with PlazarJS framework.

Check out the official documentation site or, if you prefer, visit the github page.

Thank you for reading and best of luck.