Rest-web-gui NPM

ReST Web GUI

No programming:

Framework to create descriptive web applications for REST/JSON type web services.

Basic functionality of a Web Portal is provided out of the box:

arrange data and content views on GUI
lot of interactive view types available: form, table, lists, map/route, content, feeds, I/O, modal dialogs/forms, trees icon navigation, user feedback
configuration and help functions per view
header and footer offering lots of functionality
i18n: switch languages without changing anything -- just provide a translation map (or web service for that)
user sessions (transfer data between views and pages) and a build in pub-sub event broker
OAauth2 security for web services

features screen shot

Everything runs in browser:

All you need is a modern web browser -- and a web service somewhere.

No web application server (JEE, Tomcat, NodeJS, PHP, ...) is required to run the GUI! So you can serve complex web apps even from a Raspberry Pi really fast.

But to make life easier there are packaged REST backends available:

NodeJS package: npm install easy-web-app
Python package: pip install easy-web-app

Click and try examples

Here are some demos of view type and demo of real world web seb service integration:

Content integration via MediaWIKI API: Example using Wikipedia Web Service API to load some content.
Form and table demo: EBay search via EBay API.
Map with Mapquest location search (geo-coding API).
Docker API Example shows installed containers (requires local Docker installation)
Paste-n-Copy Web App implements an easy web application -- I use it all the time for my bookmarks -- PasteBin for single lines (Source on GitHub).
Portal-as-a-Service runs all examples above with a PHP/MySQL web service backend.
"Arduino" demo or "vacuum lab" simulation with LEDs, switches, buttons, displays, graphs ...

These examples are documented more detailed in the WIKI.

More Tests

Most recent GIT checkout of all ONLINE DEMOS.

For more realistic demos some of the examples use simple REST services implemented in PHP.

How does it work

Portal pages are defined via a plain JSON file / by a REST/JSON web service.
An empty index.html contains only JS calls this framework initialized with a dedicated JSON page description.
The framework injects and initialize all the required page layout and logic: HTML, JS and CSS into the empty page to set up all the views, header and footer.
Every individual view can load configuration and/or data via REST/JSON web services as required

All that runs within milliseconds!

The User can now interact with the page, work with the data, modify it in AJAX mode (no page reload), load further data or navigate to other pages.

Plug-In Architecture

The framework (= portal-ng.js) implements the page life-cycle and contains only some core functions.

All the views, the session functionality, security, i18n is implemented as plug-ins (= subfolders in the "modules" directory). An open plug-in interface and predefined hooks make it easy to add or modify functionality -- if you're really unhappy and a JS programmer (see: Add or extend Plug-Ins).

Why?

It started with some googling and evaluations, how to set up a light weight web application (without coding JS). A lot of existing rapid application frameworks needed an application server. That's not light weight. Other frameworks (e.g. Angular) help a lot, but don't offer that: Creating a web GUI by configuration -- without writing any code.

I decided to do a prototype, how can I solve the challenge. After some lines of JS code, it was doing first things -- more quickly than expected. Pushed by this I couldn't stop ;-) Now I use this framework for a lot of tasks and if you like you can also do.

The heart of the framework file is html/js/portal-ng.js, but you rarely need to touch it -- most things are done in plug ins now.

The plug-ins do all the job in the views (="portlets") for forms, i18n, dialogs, lists, tables, content, navigation etc. The usage of the included set of essential modules is explained in my WIKI. The most complex and flexible is the form module.

Status of the project

You can do a lot of tasks out of the box!
For some "real world task" I still have to add or change some code :-(
The framework is nearly ready to be switched from a version 0.x to a 1.x ;-)

30sec Quick Start

Clone this project: git clone https://github.com/ma-ha/rest-web-ui.git
Open the html/index.html in your web browser. You'll be ready to use a Web GUI (without a dynamic backend).
Open the html/svc/layout/main/structure in an editor and start there to modify the web GUI to your needs.