Reactor JS

Getting Started

To get started quickly, Reactor JS has only two major dependencies. The Jquery library and Angular JS. Reactor utilizes Angular to load pages and allow them to communicate with each other. Reactor also relies on jquery as it is written in Javascript and Jquery.

CDN

You can use the latest version of Reactor Framework by copying the link below from our cdn or downloading it from our server.

What is Reactor JS?

Reactor JS is a highly modular and powerful framework designed to help you create custom web designs with much less code.

The Reactor JS framework enables a web developer to build an instance of an html component and pass that component to another page where it is rendered as many times as necessary. Then, initiating your variables as data-ids in your html elements, you can produce the required output.

If that sounds complicated, here's an example to make it very simple.

Example Demo

We would like to design a featured products page component for an e-commerce website. We go ahead and design the component as shown below. We can first create a new page to write this code in. Let's name it productComponent.html. This page is called a Provider page in ReactorJS

The first thing we do is wrap our code in a div with class name "reactorapp". Every component in Reactor must be contained inside the reactorapp div.

Next we will add our main html elements with which we wish to build our products, as we would do in normal html design.

The code above seems like perfectly normal code except for a few things worth to note.

First, a reactor component is always written inside the indentifier class div called "reactor".Second, the content of that variable element must contain the variable name surrounded by brackets as so: {varname}. Images & videos are the only exception, the variable goes inside the src attribute as displayed above.

Now we must declare those variables before we can use them so that they can be processed by Reactor. This can be done like so. (this code is added above or below the previous code.

This part is self-explanatory. We are declaring the variables we wish to use in our component above. Note that all variables are declared in the reactor-vars tag except images, which are declared in the reactor-imgs tag. The first tag reactor-container contains whatever element tag we wish to contain our iterations of products. Note: this variable name must have a dash in the name, as per html syntax (since all custom element tags we declare must contain a dash. e.g. my-products is a legal tag name, but myproducts is not legal).

Our final code for the productComponents.html page should look like this.

Now we can go ahead and create our Products page which will contain our featured products as displayed in an online shopping website. This page is called the Receiver page in ReactorJS.

Here we wish to create 3 different products. We can do the following.

Our products.htmlpage must first contain the following:

We wrap our page content inside a div with class "app" to reference our productComponent which has the "reactorapp" class, so that they may communicate. Then we add to the body the typical ng-app attribute:

We must also have Angular import our productComponent page. Which must be contained inside our "app" div. (Only what is inside our app div will be rendered by Reactor. This is done for modularity purposes.)

Then our page content will contain each product we wish to display. We insert as many reactor-x elements as we wish. In our reactor-x elements, we initiate the data-ids for each reactor-x element. the convention is "data-" followed by our variable names, like so:

The requirements are the following.

The product containers must be tags which we declared earlier as my-products. The data attributes must match the variables we declared back in the productComponent page. Therefore we have data attributes data-img1, data-title, data-price, etc./p>

That completes the designing of the products page using Reactor JS.

Result

The result is a powerful, flexible and modular method of designing multiple components of different features. All this done with as minimal coding as possible.

This design can be extended to every page we create. Each Provider Page should contain the reactorapp div. Each Receiver Page contains simply the class name app. When we set the prodiver pages within a class div "reactorapp" and the receiver page within a class div "app" we ensure the two can communicate together to produce the required results. All this, done behind the scene in Reactor's framework.

Download Starter Project

Download this starter project to quickly get started with a demo project made with Reactor JS. Use it to learn and get familiar with the framework, so you can udnerstand how to make use of its powerful features and modular structure for your web designs and other projects.

Flexibility

Reactor JS is highly flexible and modular. We can make use of multiple different pages (or apps) in a modular fashion and import them all on one page through angular imports, or we can store multiple apps on a single page, each having its own appid. For instance, in flexibility terms, we can have multiple provider apps stored in one single page and they can all individually link (communicate) with multiple receiver apps also stored in a single page. In modularity terms we can also use a single app per page to keep components modular and organized.

Imports

No scripts or styles need to be imported in any of the components pages besides reactor. Reactor requires only the main html file (index.html) to import the 2 dependencies; jquery and angular js, (index.html does not itself need the reactor script). Every Provider page must have the reactor js script included inside (usually inside head tag).

Naming Conventions

Provider Page

• reactor-app:The reactor-app div contains the following elements: the reactor-vars element for declaring our variables, the reactor-imgs elements for declaring image variables if we wish to use any. Finally, it also contains the main reactor div which is explained below.
• reactor-vars:(Special reactor tag).Our variable declaraion. If we wish to use a product title for instance, or a price, etc. (does not get displayed)
• reactor-imgs:(Special reactor tag). We declare our images variables here. (does not get displayed)
• reactor:This is the main reactor div, where everything we add inside will display inside our web page.
• {variable}:Inside the reactor div the variables which we declared are called inside curly brackets, in between { and }. e.g. {productprice}

Receiver Page

• App:Every receiver page is contained inside a div called "app", this is to ensure reactor will render everything inside this div. Any elements outside this div is not rendered by reactor.
• reactor-x:A special reactor tag, reactor-x is the element which we create as an instance of the content we created inside our reactor div. With the reactor-x tag we then initiate our variables which we declared using data-ids.
• data-:data ids are used inside our reactor-x tags, to initiate the variables which we declared. e.g. data-title="Men's Shoes" or data-productprice=$500". "

Support

Updates are coming everyday as we work hard on developing reactor to imprve everyday and fix any errors which may be found. For all support contact us at info@scorpionedge.com or by visiting our website and using the contact form. We appreciate all your issue reports!

Cross Platform Support

Reactor is supported accross all popular platforms including wordpress, react, angular, vue, typescript, joomla and more. Different structures are used for using reactor with different platforms but one method that works accross all platforms is the method used for wordpress.(as demonstrated below).

Wordpress Support

Reactor JS can also be used with wordpress with little modification in structure. Everything stays the same but here we will combine both receiver and provider pages into one. Our entire reactor code will be contained inside our "app" div. Now we no longer need angular js so we can remove the angular library and imports and instead move the code in our provider page (which is the div with class name "reactorapp") into our div "app" (which was in our receiver page) and once those 2 codes are combined into the single "app" div we can insert that in our wordpress page. The final result should look like this:

App Structure

How We Designed ReactorJS

Why Reactor JS?

Other libraries and frameworks allow you to perform similar techniques as Reactor JS, such as Angular, React JS and a few other frameworks, but Reactor was designed to stand out as an extremely simple system of iteratively creating similar components with much less required code than other frameworks. The main purpose of utilizing reactor is for designing UI for web and apps and doing so using as little code and as quickly as possible. Our powerful system allows for modularity of components so your projects stay organized and your pages are modular.

Dependencies

The only dependency for reactor js (besides for Angular JS and the Jquery library, is that all html files using reactor (which are being imported by Angular) must be contained inside the same directory as the html file importing them (usually index.html), meaning the main root file.