Home

Welcome to the OGX.JS wiki!

Concept

OGX.JS (or OrganixJS) is a JavaScript framework to rapidly create web, desktop and mobile applications (via webview), built by globules.io. It uses some popular builders such as Apache Cordova and/or Electron, Neutralino or any other platform using a webview, to generate applications for Android, iOS, Windows, MacOS and Linux with a single code base.

OGX.JS is stage based. An app can have more than one stage (virtual app). Each stage holds views, windows and popups, which can also hold views or any other type of component (virtually unlimited). A stage, in other words, is a virtual app inside your app. Every app has at least one stage (one virtual app). You can also use a theater to navigate from one virtual app to the other.

Stages and views in OGX.JS are objects that have their own behavior and are each linked to a HTML element or a template, via a display. Each stage and view is its own controller, though you can use optional controllers if you wish to have a proxy to control multiple views and components. Views, stages and templates can be created using the CLI.

All of the components can be written into a JSON tree, which is like a DOM for objects, that we call OML (short for Object Markup Language), for the framework to render, while parts of the tree can be automatically generated based on data passed to one or more components of the tree upstream.

OGX.JS also comes with a scripting engine that we call OSE (short for Organix Scripting Engine), that can be used within templates and OML, for dynamic operations, such as data transformation, loops, dynamic templating and more.

OGX.JS comes with, out of the box, a multitude of components, commonly used in apps, that save you a lot of time and lines of code, without having to add another library. A lot of components use one-another to function properly, which makes them very efficient while keeping the framework size low. Most of them extend the Uxi class, which represents a node of the tree. Nodes of the tree have a parent/children relationship, and stored into a cache, accessible from any node.

OGX.JS has a router that allows you to navigate from one route to another, or from one OML tree to the other, that mimics URL rewriting commonly found in a web server such as Apache Httpd or Microsoft IIS (...). All the routes and trees by route are set into a configuration file, app.json, that can also be encrypted.

OGX.JS is scope based, scope as in Oauth scope, meaning that routes, views and (most) components are scope sensitive and can display different information based on the scope (or permissions) passed to them (ie. user, admin, support...). The scope can also be encrypted and embedded into a JWT token.

OGX.JS is oriented ease of use and maximum compatibility and is fast and light weight! It's around 200KB minified while including all the components! In comparison, it's about the same size as the framework with sharp angles but OGX.JS has every component and mechanic embedded so you really don't have to code as much to produce a quality app! It is also thoroughly tested on both Android (inluding ChromeOS) and iOS webviews. And of course, it work just as good in any browser!

OGX.JS is all about data! It's built to display and manipulate objects in a light and efficient way through out many of its built in components! It also requires moment.js as many components require it to manipulate objects with dates and times.

Getting started

The easiest way to get started with OGX.JS is to check out the demo app, the Neutralino demo app, the Open Source Operating System and also check out the quick start-up guide

Installation

To install the CLI (recommended)

 npm install @globules-io/ogx.cli -g

Then, to install the framework in the www folder of your project

 ogx update --force

Or, you can do it via npm

 npm install @globules-io/ogx.js

Create default structure

 ogx init

If you are building apps with Cordova and/or Electron you can streamline the installation/creation by doing

 cordova create myfolder com.company.myapp
 cd myfolder
 cordova platform add electron //if you use electron via cordova
 npm install @globules-io/ogx.cli -g
 ogx update --force
 ogx init

All necessary files will be copied in the www folder. You can of course use this framework for a webapp by pointing your vhost root to the www folder.

Components in depth

To get more information about each component and how to use them, check them out individually from the right navigation pane.

Dependencies

• jQuery
• Moment
• Howler
• CrytpoJS