Getting Started
PlazarJS is a versatile framework 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.
For example, in ReactJS everything is JavaScript, and Angular has a forceful opinion about how your application should be constructed. PlazarJS is designed to help you build the application the way you want it without forcing you to follow a path you do not
think is suitable for the application you are developing. The main focus is on good old trio, HTML, CSS and JavaScript.
Check out and download the source code on GitHub.
GitHub
PlazarJS/Bootstrap-UI/ECMAScript demo can be found here.
- ➊ PlazarJS Core (core)
-
➋ PlazarJS Static Utilities:
- • PlazarJS Http (http)
- • PlazarJS Binder (binder)
- • PlazarJS Array (array)
- • PlazarJS String (string)
- • PlazarJS Dom (dom)
- • PlazarJS Object (object)
- • PlazarJS Events (events)
-
➌ PlazarJS Asset Types:
- • PlazarJS Base (base)
- • PlazarJS Component (component)
- • PlazarJS Class (class)
- • PlazarJS Mixin (mixin)
-
➍ Bootstrap UI Integration:
-
➍ ➊ Components:
- • UI Base Component (ui-base-component)
- • UI Alert Component (ui-alert-component)
- • UI Breadcrumb Component (ui-breadcrumb-component)
- • UI Button Component (ui-button-component)
- • UI Button Group Component (ui-button-group-component)
- • UI Button Toolbar Component (ui-button-toolbar-component)
- • UI Card Component (ui-card-component)
- • UI Carousel Component (ui-carousel-component)
- • UI Collapse Component (ui-collapse-component)
- • UI Container Component (ui-container-component)
- • UI Dropdown Component (ui-dropdown-component)
- • UI Form Component (ui-form-component)
- • UI Grid Component (ui-grid-component)
- • UI Input Component (ui-input-component)
- • UI List Group Component (ui-list-group-component)
- • UI Nav Component (ui-nav-component)
- • UI Navbar Component (ui-navbar-component)
- • UI Progress Component (ui-progress-component)
- • UI Select Component (ui-select-component)
-
➍ ➋ Mixins:
- • Form Field Mixin (form-field-mixin)
-
➍ ➊ Components:
Place the following scripts at the end of your page and you are good to go:
<script src="https://cdn.jsdelivr.net/npm/@plazarjs/core/dist/core.min.js"></script>
// Optionally, you can include Bootstrap UI
// css
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
// js
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@plazarjs/bootstrap-ui/dist/bootstrap-ui.min.js"></script>
<script>
pz.plugin(pzBootstrap);
</script>
PlazarJS can be installed via NPM as well by running the following command(s):
$ npm install @plazarjs/core
After setting up your project, for example, to be compiled by babel, and bundled with rollup.js, all you have to do is to import the module:
import pz from '@plazarjs/core';
Optionally, you can include Bootstrap UI. Check out the guidelines here.
The following example illustrates how to use PlazarJS together with RequireJS. The first step would be to install it and place the relevant script tag on your page:
// NPM command:
$ npm install requirejs
// script tag (note that data-main attribute should hold the path to the entry script of your package):
<script src="./node_modules/requirejs/require.js" data-main="index.js"></script>
Next, configure the path for the PlazarJS module
<script>
requirejs.config({
paths: {
'@plazarjs/core':
'./node_modules/@plazarjs/core/dist/core'
// note that requirejs doesn't recommend to point directly to the node_modules folder, therefore you should consider copying the modules you need
}
});
</script>
At this point there should be no problem with requiring our core module. The content of your index.js file should look like this:
require(['@plazarjs/core'], function (pz) {
// here, you should be able to use the pz namespace
});
-
1. If you intend to create a Single Page Application, these four short steps will get you started in no time:
- Example applications can be found here and here.
- Step 1.1 Create an index.html page.
- Step 1.2 Create root.js file and define your root component. This component will automatically load it's children upon creation.
-
pz.define('main-component', {
ownerType: 'component',
autoLoad: true,
template: '<main></main>',
renderTo: 'body',
components: [{
type: 'my-header-component' // assuming that this is defined also
}, {
type: 'my-body-component' // assuming that this is defined also
}, {
type: 'my-footer-component' // assuming that this is defined also
}]
// other configs
}); - Step 1.3 Create app.js file, define your application and setup the root component.
-
pz.defineApplication({
name: 'Quick Start',
namespace: 'qsApp',
components: [
'main-component'
],
init: function() {
// do something on init
}
// other configs
}); - Step 1.4 Place the following scripts at the end of your page:
-
<script src="https://cdn.jsdelivr.net/npm/@plazarjs/core/dist/core.min.js"></script>
<script src="..script-path/my-header-component.js"></script>
<script src="..script-path/my-body-component.js"></script>
<script src="..script-path/my-footer-component.js"></script>
<script src="..script-path/my-root-component.js"></script>
<script src="..script-path/my-app.js"></script>
- Fiddle:
-
2. In case you need a widget on the page, or you need to integrate some logic with a portion of your page, you don't need to define an application, you simply need a component. Check out the example bellow:
- Step 2.1 Locate an element on the page you wish to integrate with, and choose a way how you are going to identify it. Set the CSS class, or attribute, or id. Do it as you desire, but preferably it should be a unique value.
-
<div class="my-css-class">
<p>
<span>Hello, my name is {name} {surname}, and </span>
<span data-text="sayHello"></span>
</p>
</div> - Step 2.2 Create a file my-component.js and setup the component which will hold the logic.
-
pz.define('my-component', {
ownerType: 'component',
autoLoad: true,
templateSelector: 'div.my-css-class', // this config holds the CSS selector
viewModel: {
name: 'John',
surname: 'Doe',
sayHello: function() {
return 'I salute you!';
}
}
// other configs
}).create(); - Step 2.3 Place the following scripts at the end of your page:
-
<script src="https://cdn.jsdelivr.net/npm/@plazarjs/core/dist/core.min.js"></script>
<script src="..script-path/my-component.js"></script>
- Fiddle: