PoNG

Aus MH
Wechseln zu: Navigation, Suche

IMHO there is no good reason to render dynamic web pages server side.

Server side HTML rendering prevents easy scaling, simple architecture, barrier free content and device independence.

Everything may get easy, when you throw all legacy truth away and rethink the web.

A prototype I made is PoNG.

BTW: It is ridiculous: If dynamic HTML is rendered client side, server can be reduced to serve static files -- so no Tomcat, Sharepoint, Liferay, PHP ... is required (OK, that is only half the truth ;-).

Vision

Wouldn't it be fine to say: "I need these content, that data tables, blog, these forms on my web page without any HTML coding."

For all standard tasks, the browser should be able to render an appropriate web page, described with a few information only. Also the data and content can be given to the browser in a structured and raw, but non HTML format. Data can be any product catalog, any blog messages, any database result.

Of course -- the description of the page layout and the content data should be in a machine readable format and precise enough, that your browser is able to understand it. But these description of layout and data must still be human readable, self explaining and without HTML.

Why?

HTML can do a lot of good things and it will still be the best way to explain the browser how to do the rendering details. But is there a reason that humans write HTML? There are so many standard tasks on the web, which are always the same. I looked through a bunch of web sites and found always the same elements. Only the layout and graphical design looks different -- and of course the content.

An other good thing is, that you only have to provide the "raw information" and all the rendering is transfered to the frontend. In the past, there was a huge gap of computing power of servers and clients. The gap has been closed and there is no reason to have all the workload in the backends. We have no good reason to render all dynamic web pages in the backend.

Rendering HTML in the backend is also a bad idea, since the client types of are so different and you have to do all the client specific decisions on the wrong point.

PoNG is "Portal NG" (next generation):

  • It is a prototype or study, how it may work!!
  • Collect information from different RESTful resources into one HTML5 + JavaScript portal
  • Easy set up: Complete separation of layout, information, style
  • Modular: see PoNG Modules
  • Flexible backends: Static HTML, PHP, Java Web Container, JEE, ...

Things that are implemented already:

Planned:

  • I18N
  • Security model: Authentication
  • Personal customizing
  • Zoom views to full width
  • Tomcat Backend
  • PHP Backend
  • Dynamic Administration

How does PoNG works

  1. The browser loads a standard index file (do not edit this file)
  2. The index file pushes the browser to request the layout resource for the layout information and renders the response
  3. The layout in the browser will contain different additional information resources, which are loaded and processed to a web page

Layout Configuration

The layout-structure is a JSON file, requested by the layout resource. By default the /svc/layout/main/structure is loaded first.

Your site may have other layouts than "main", e.g. /svc/layout/admin/structure.

The "structure" JSON format

PoNG Example1.png

The basic object hierarchy of the objects are:

  • layout
    • title
    • header
    • rows
      • cols
        • rows
          • ...
    • footer

The rows can contain either nested cols or alternatively a resource. The same for cols. A resource specifies the URL, where to load information about the content, has some meta data to define its layout, actions and dialogs.

You can get every possible layout with this nesting of rows, cols and resources.

Please refer the PoNG Structure Specification for details.

The example shows, that you can set up a complex portal page with different information resource views on it with a very view lines of meta data definition. The result of this example is shown on the screen shot on the right (no fake). BTW, I would describe it in this way: "This "portal" has a header, then two rows, the second row contains two columns, and then there is a footer."

So how can you explain your browser this w/o any HTML code? Let's try:

Example

{
 "layout": {
   "title": "Title",
   "header": {
     "logoURL": "logo.png"
   },
   "rows": [
     {
       "rowId": "myBlog",
       "height": "185px",
       "resourceURL": "blog",
       "type": "pong-list",
       "decor" : "decor"
     },
     {
       "rowId": "r1",
       "height": "450px",
       "cols": [
         {
           "columnId": "tbl",
           "width": "40%",
           "resourceURL": "resX",
           "type": "pong-table",
           "decor" : "decor",
       	"actions" : [ { "actionName": "Help", "type": "pong-help" } ]
         },
         {
           "columnId": "plot",
           "width": "60%",
           "decor" : "decor",
           "resourceURL": "gnuplot",
           "callback": "grmh()",
           "actions" : [ { "actionName": "Config", "type": "modal-form" },{ "actionName": "fullWidth" } ]
         }
       ]
     }
   ],
   "footer": {
     "copyrightText": "Copyright 2013, MH.",
     "linkList": [
     	{ "text":"Impressum", "url": "impress.html"},
     	{ "text":"Privacy Note", "url": "privacy.html"}
     ]	
   }
 }
}

This example layout structure will result in a "myBlog" box of full width and below are two columns, one with the "resX" and the other smaller one with a "plot". If you just starts with this file, all views will be empty, because no one defined the resource details, that are just resource names at the moment.

And if you think, the there is a bunch of work in defining e.g. the "blog", then check out, what is the todo of this resource definition.

Test the prototype

Installation Manual

Please refer also the PoNG Release Notes.

Static HTML Installation

Simply load and extract the PoNG Static HTML Distribution to any subdirectory of your web server and customize the structure file /svc/layout/main/structure, logo and CSS files to your needs.

Tomcat based Installation

TODO

PHP based Installation

Simply load and extract the PoNG Static PHP Distribution to any subdirectory of your PHP-enabled web server and customize the structure file /svc/layout/main/structure, logo and CSS files to your needs.

Browser Support

PoNG is tested with

  • Firefox 27.0.1 (Ubuntu 13.10 64bit)
  • Safari (iPad, iOS 7)

PoNG License

The MIT License (MIT)

Copyright (c) 2014 Markus Harms, ma@mh-svr.de

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.