Webriko overview

Webriko is an online application for software development.

Its main feature is to allow the code to be divided into nodes that can be connected to each other.

Each node contains a piece of code: a method, a function, a piece of inline code.

A project can contain all the code arranged in multiple pages: Javascript, HTML, CSS and PHP.

Node code or structure?

Below is an example of Javascript code to show the difference

what is between reading code to locate classes, inheritance, methods

and reading the same code with Webriko's node graph. (see the picture below)


  class Geometry {

    constructor(_fill,_stroke,_sWidth)
    {
      /* code */
    }

    draw(_context)
    {
      /* code */
    }

    setFill(_fill)
    {
      /* code */
    }

    setStroke(_stroke)
    {
      /* code */
    }

    setStrokeWidth(_strokeWidth)
    {
      /* code */
    }
  }

  class Ellipse extends Geometry {

    constructor(_x, _y, _rx, _ry )
    {
      /* code */
    }

    draw(_context)
    {
      /* code */
    }
  }


  class Rectangle extends Geometry {

    constructor(_x, _y, _w, _h )
    {
      /* code */
    }

    draw(_context)
    {
      /* code */
    }
  }


  class Line extends Geometry {

    constructor(_x1, _y1, _x2, _y2 )
    {
      /* code */
    }

    draw(_context)
    {
      /* code */
    }
  }

Javascript Node representation

In this image there are the same classes and methods as in the previous code.

The graphical representation of the nodes allows you to easily identify the classes and the connections clearly indicate their hierarchy.

HTML Node representation

In this image there is a graphic representation of the nodes of an HTML page.

As you can see, the different contexts of the page are contained in connected nodes.

This allows you to develop your code in a highly organized way

simplifying any intervention without having to open dozens of files and scroll through hundreds of lines of code.

CSS Node representation

In this image there is a graphical representation of the nodes of a CSS page.

Each node defines the style of one or more HTML contexts.