A trillion widgets

Do you think this machine could JIT compile a trillion C# classes without burning?

Imagine having a trillion widgets in your app. If you tried to create something like this in e.g. C#, you’d require at least one class for each widget you create. This would imply a trillion classes, making even the largest super computer on the planet basically start burning, simply due to the JIT compilation process of all these C# classes.

In Phosphorus Five doing this is actually quite simple though! Simply because you could easily store your widgets in for instance a MySQL database, MongoDB, or for that matter on different servers, using HTTP rest web services to access your widgets when they’re requested in some app. Below is a screenshot of a widget that was instantiated by doing a lookup into a MySQL database.

In the video below I am demonstrating how to create a “widgets” database in MySQL, which allows you to move away from the “flat file” structure for your functionality, and store any type of functionality in for instance a MySQL database.

Notice, the above construct is not in any ways restricted to widgets. You could just as easily store function objects in general in your database. Below is the recipe for how to reproduce what I did in the above video.

First you’ll need to create a MySQL database. Then you need to reference this database in your web.config, with the “name” of “widgets-samples”. There is a commented example of how to do this in the default web.config when you download Phosphorus Five. You can find this web.config inside of the “p5.webapp” folder of Phosphorus Five. Then you’ll need to create your table structure, or database schema. You can do this by running the following code in e.g. your System42’s executor. Notice, you’ll need to download both System42 and Micro, in addition to Phosphorus Five (of course).

p5.mysql.connect:[widgets-samples]
  p5.mysql.execute:@"CREATE TABLE `widgets` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(1024) NOT NULL,
  `content` longtext NOT NULL,
  PRIMARY KEY (`ID`),
  UNIQUE KEY `ID_UNIQUE` (`ID`),
  UNIQUE KEY `name_UNIQUE` (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;"

Then you’ll need to actually insert the example widget which we’re consuming in our example. Run the following code through your executor. This will insert your database widget into your MySQL database.

p5.mysql.connect:[widgets-samples]
  p5.mysql.insert:@"insert into widgets (name, content) values(@name, @content)"
    @name:micro.samples.database-widget.git-hub.assign-work
    @content:@"micro.widgets.wizard-form
  class:bg air-inner shaded rounded
  text
    oninit
      p5.web.include-css-file:@MICRO/media/main.css
      p5.web.include-css-file:@MICRO/media/skins/serious.css
    info:Header
    .data-field:header
  radio-group
    .data-field:type
    options
      Bug fix
        .data-value:bug
        checked
      Feature request
        .data-value:feature
      Documentation addition
        .data-value:documentation
  textarea
    info:Description
    .data-field:description
  input
    type:hidden
    .data-field:assigned
  select
    info:Milestone
    .data-field:milestone
    options
      Version 3.4:v3.4
      Version 4.0:v4.0
      Version 5.0:v5.0
  h3
    innerValue:Assigned to
  micro.widgets.grid
    rows
      item
        .row
          onclick
            p5.web.widgets.get-parent:x:/../*/_event?value
            p5.web.widgets.find:x:/-/*/*?value
              element:tr
            delete-widget-property:x:/-/*/*?value
              style
            set-widget-property:x:/../*/_event?value
              style:""background-color:rgba(128,128,128,.2);""
            p5.web.widgets.find-first-ancestor-like:x:/../*/_event?value
              class:bg
            p5.web.widgets.find:x:/-/*/*?value
              element:input
              type:hidden
            set-widget-property:x:/-/*/*?value
              value:Thomas Hansen
        Name:Thomas Hansen
        Email:thomas@gaiasoul.com
      item
        .row
          onclick
            p5.web.widgets.get-parent:x:/../*/_event?value
            p5.web.widgets.find:x:/-/*/*?value
              element:tr
            delete-widget-property:x:/-/*/*?value
              style
            set-widget-property:x:/../*/_event?value
              style:""background-color:rgba(128,128,128,.2);""
            p5.web.widgets.find-first-ancestor-like:x:/../*/_event?value
              class:bg
            p5.web.widgets.find:x:/-/*/*?value
              element:input
              type:hidden
            set-widget-property:x:/-/*/*?value
              value:Thomas Hansen
        Name:John Doe
        Email:john@doe.com
      item
        .row
          onclick
            p5.web.widgets.get-parent:x:/../*/_event?value
            p5.web.widgets.find:x:/-/*/*?value
              element:tr
            delete-widget-property:x:/-/*/*?value
              style
            set-widget-property:x:/../*/_event?value
              style:""background-color:rgba(128,128,128,.2);""
            p5.web.widgets.find-first-ancestor-like:x:/../*/_event?value
              class:bg
            p5.web.widgets.find:x:/-/*/*?value
              element:input
              type:hidden
            set-widget-property:x:/-/*/*?value
              value:Thomas Hansen
        Name:Jane Doe
        Email:jane@doe.com
      item
        .row
          onclick
            p5.web.widgets.get-parent:x:/../*/_event?value
            p5.web.widgets.find:x:/-/*/*?value
              element:tr
            delete-widget-property:x:/-/*/*?value
              style
            set-widget-property:x:/../*/_event?value
              style:""background-color:rgba(128,128,128,.2);""
            p5.web.widgets.find-first-ancestor-like:x:/../*/_event?value
              class:bg
            p5.web.widgets.find:x:/-/*/*?value
              element:input
              type:hidden
            set-widget-property:x:/-/*/*?value
              value:Cynical Developer
        Name:Cynical Developer
        Email:cynical@developer.com
  div
    class:right
    widgets
      button
        innerValue:Save
        onclick
          p5.web.widgets.find-first-ancestor-like:x:/../*/_event?value
            class:bg
          micro.form.serialize:x:/-/*/*?value
          add:x:/+
            src:x:/@micro.form.serialize/*
          micro.samples.widgets.database-widget-1.on-save"

Then you’ll need to create your database extension widget. This is the event that will lookup into your database, and fetch the requested widget, according to the specified name. If you execute the following code in your executor, you will create this event.

create-event:micro.samples.widgets.database-widget
  p5.mysql.connect:[widgets-samples]
    p5.mysql.select:@"select content from widgets where name = @name"
      @name:x:/../*/name?value
    hyper2lambda:x:/-/*/*/content?value
    add:x:/+
      src:x:/@hyper2lambda/*
    return

Now, finally, you can start consuming your database widget. Create a new lambda page in System42, make sure its “template” settings is set to “empty”, and paste in the following code.

create-widget
  class:container
  events
    micro.samples.widgets.database-widget-1.on-save
      .data
      add:x:/@.data
        src:x:/@.data/--/<-(!/_event)
      create-widgets
        micro.widgets.modal:my-modal
          class:micro-modal
          widgets
            h3
              innerValue:Report
            pre
              innerValue:x:/@.data
            div
              class:right
              widgets
                button
                  innerValue:Close
                  onclick
                    delete-widget:my-modal
  widgets
    div
      class:row
      widgets
        div
          class:col
          widgets
            micro.samples.widgets.database-widget
              name:micro.samples.database-widget.git-hub.assign-work

Save your page, view it, and enjoy!

Notice, the [name] argument in our invocation to [micro.samples.widgets.database-widget] above, is mapped towards the “name” field in your MySQL database table. You can of course insert as many widgets as you wish into this table, effectively creating a trillion different “types of widgets”, without even having to harm as much as a single super computer.

Disclaimer; No super computers were harmed in the creation of this blog!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s