PlazarJS

A versatile framework built to enrich the developer experience in terms of simplicity and speed of application development.

Table of Contents

• 🔨 Installation
• 📢 Introduction
• 📖 Getting Started and Documentation
• 🔌 Bootstrap Integration
• 👍 Contribution
• 📶 Browser Support
• 📋 Plans

Installation

Run the following npm command:

$ npm install @plazarjs/core

Or, place the script tag on your page:

<script src="https://cdn.jsdelivr.net/npm/@plazarjs/core"></script>

Check out the list of available dependant packages.

Introduction

PlazarJS is a un-opinionated framework for JavaScript. It 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's built to be flexible and designed to help you build the application the way you want it without forcing you to follow a path you don't think is suitable for the application you are developing. The main focus is on good old trio, HTML, CSS and JavaScript.

TL;DR

1. Can define components, mixins or classes by invoking pz.define, pz.component.extend or pz.class.extend. Mixins are not extendable.
2. Reuse each type later in the app as much as needed. One type, multiple instances.
3. Extend each type with another by setting the ownerType. Note that this config is not required when using the extend approach. The ownerType is automatically recognized.
4. Override parent method implementation.
5. Each method overridden in a child type can call its parent by invoking this.base(arguments).

Core Features

1. Modularity
2. Components
3. Mixins
4. Classes
5. Inheritance
6. Bindings and Templating (inline, pre-rendered, async templates)

Getting Started and Documentation

A quick example:

// define the component
import pz from '@plazarjs/core';

const helloWorld = {
  ownerType: 'component',
  template: '<div>Hello from {fw}</div>',
  renderTo: 'body',
  autoLoad: true,
  viewModel: {
    fw: 'plazarjs'
  }
};

export default pz.define('hello-world', helloWorld);

// create the component where required
import helloWorld from 'my-path/helloWorld';
helloWorld.create();

The equivalent of the code above written with the extend API looks like this:

// define the component
import pz from '@plazarjs/core';

const helloWorld = {
  type: 'hello-world',
  template: '<div>Hello from {fw}</div>',
  renderTo: 'body',
  autoLoad: true,
  viewModel: {
    fw: 'plazarjs'
  }
};

export default pz.component.extend(helloWorld);

// create the component where required
import helloWorld from 'my-path/helloWorld';
helloWorld.create();

Detailed documentation can be found here.

Live demo can be found here.

Bootstrap Integration

Checkout the module integration here.

Contribution

Please read the Contributing Guide before making a pull request.

Browser Support

PlazarJS supports all ECMAScript 5 compliant browsers. Check out the compatibility table.

IE Browser Support

Every implementation/change is done in a way to ignore IE version 9 and lower.

Plans

Some of the next major releases will contain:

1. TypeScript support.
2. Core plazar-ui (set of controls out of the box). This will eliminate the need for any external CSS framework integration. Of course, you would still be able to integrate any of them if you choose so.

License

MIT