All Projects

View By

Project Requirements

Let's Design a beautiful Website

Please fill out your requirements for your website project below.
You must preview and save before submitting

Let's create a next level design

Please fill out your requirements for your design project below.
You must preview before submitting
Please select one option above to get started.
+

Add Custom Requirement

Don't forget to save.

Why Requirements?

Client requirements are of paramount importance to us here at Scorpion Edge. Our designs are crafted with our client's requirements as the priority basis and revolve around your needs as a brand. Utilizing your project requirements combined with our creative approach we can create for you the perfect website or design.

Get in touch with us to discover more about our unique creative process on all our websites and designs.

If you would like a free landing page when creating a website project with us, send us an email at info@scorpionedge.com


Apps

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.

<script src="https://reactor-js.com//reactor/reactorjs_2.3.5.js"></script>

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



productComponent.html
<div class="reactorapp"> </div>

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.

<div class="reactor"> <img src='{img1}'> <h4>{title}</h4> <p>{price}</p> <hr/> <p>{descript}</p> <button>Add To Cart</button> </div>

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.

<reactor-container>{my-products}</reactor-container> <reactor-vars>{title, price, descript}</reactor-vars> <reactor-imgs>{img1}</reactor-imgs>

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.

<!DOCTYPE HTML> <html lang="en"> <head> <title>Product Component</title> </head> <body> <div class="reactorapp"> <reactor-container>{my-products}</reactor-container> <reactor-vars>{title, price, descript}</reactor-vars> <reactor-imgs>{img1}</reactor-imgs> <div class="reactor"> <img src='{img1}'> <h4>{title}</h4> <p>{price}</p> <hr/> <p>{descript}</p> <button>Add To Cart</button> </div> </div> </body> </html>

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:

<body ng-app=""> <div class="app"> </div> </body>

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.)

<div ng-include="'flex.html'"></div>

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:

<my-products data-img1="images/p1.jpg" data-title="Women's Dresses" data-price="$450.00" data-descript="Quality women's tops made with authentic wool."></my-products> <my-products data-img1="images/p2.jpg" data-title="Women's Skirts" data-price="$350.00" data-descript="Quality Women's skirts shirts made to last."></my-products> <my-products data-img1="images/p3.jpg" data-title="Men's T-Shirts" data-price="$150.00" data-descript="Strecth quality men's button shirts made to last."></my-products>

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

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:

php wordpress code here... <div class="app"> <my-products data-img1="images/p1.jpg" data-title="Women's Dresses" data-price="$450.00" data-descript="Quality women's tops made with authentic wool."></my-products> <my-products data-img1="images/p2.jpg" data-title="Women's Skirts" data-price="$350.00" data-descript="Quality Women's skirts shirts made to last."></my-products> <my-products data-img1="images/p3.jpg" data-title="Men's T-Shirts" data-price="$150.00" data-descript="Strecth quality men's button shirts made to last."></my-products> <div class="reactorapp"> <reactor-container>{my-products}</reactor-container> <reactor-vars>{title, price, descript}</reactor-vars> <reactor-imgs>{img1}</reactor-imgs> <div class="reactor"> <img src='{img1}'> <h4>{title}</h4> <p>{price}</p> <hr/> <p>{descript}</p> <button>Add To Cart</button> </div> </div> </div>
Note: We also need to add the reactor js library to the header.php file in wordpress' theme editor.

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.