Switching from React JS to P5 makes you 3.15 times as productive

I figured I’d port the React sample Tic Tac Toe game to Phosphorus Five, to check up how P5 is doing in regards to LOC (Lines Of Code), compared to React JS. I was able to reproduce their tutorial Tic Tac Toe app with 73 lines of Hyperlambda. React JS used 230 lines of code to accomplish the same.

According to several studies in the subject, the number of lines of code in your software project, is directly proportional to the amount of effort you’ll need to invest when creating it. In addition, the number of bugs in your end result, also grows proportional to your LOC.

Hence, according to this study, once you’ve mastered P5 and Hyperlambda, you’ll be 3.15 times as productive with P5 as you previously were with React JS. And you’ll have 3.15 times as many bugs in your React JS solution. Hint; 230 divided by 73 becomes 3.15.

This doesn’t surprise me much though, since I have found similar numbers when comparing Hyperlambda solutions towards literally anything else out there.

Bandwidth performance

It is difficult to figure out the exact bandwidth usage of React JS, since their example is hosted at CodePen, which downloads a shitload of JavaScript and CSS stuff for their boiler plate editors – But simply checking the size of “react-with-addons.js”, it becomes 159KB. Obviously, measuring the markup and CSS necessary for the example, would make this number larger. The Phosphorus Five example, doing the same, downloads 15.3KB in total. Which means that React JS spends at least more than 10x the amount of bandwidth as a similar solution built in P5.

Below is the Hyperlambda code for reproducing my example locally on your own P5/System42 installation. Download P5, System42, create an empty CMS “lambda” page, and make sure you set the “template” settings to “empty”, before you save your page.

p5.web.include-css-file:@MICRO/media/main.css
add:x:/../*/create-widget/**/div
  src
    class:row
    widgets
      literal
      literal
      literal
add:x:/../*/create-widget/**/literal
  src:"innerValue:"
add:x:/../*/create-widget/**/literal
  src
    onclick
      micro.samples.set-check:x:/../*/_event?value
create-widget:foo
  events
    micro.samples.set-check
      _next:node:"_val:X"
      set-widget-property:x:/../*/_arg?value
        innerValue:x:/@_next/#?value
      if:x:/@_next/#?value
        =:X
        set:x:/@_next/#?value
          src:O
      else
        set:x:/@_next/#?value
          src:X
      p5.web.widgets.properties.get:foo
        innerValue
      _data
        O
        X
      _win
        0,1,2
        3,4,5
        6,7,8
        0,3,6
        1,4,7
        2,5,8
        2,4,6
      for-each:x:/@_data/*?name
        for-each:x:/@_win/*?name
          split:x:/@_dp?value
            =:,
          if:x:/@p5.web.widgets.properties.get(/{0}/*/={3}|/{1}/*/={3}|/{2}/*/={3})?count
            :x:/@split/0?name
            :x:/@split/1?name
            :x:/@split/2?name
            :x:/@for-each/@_dp?value
            =:int:3
            create-widgets
              micro.widgets.modal
                class:micro-modal
                widgets
                  h3
                    innerValue:Winner was {0}
                      :x:/@for-each/@_dp?value
  widgets
    text:@"
THIS-IS-A-STYLE-TAG
.row p {
border:solid 1px black;
width:30px;
height:30px;
font-size:26px;
margin:0;
padding:0 0 0 7px;
}
THIS-IS-THE-END-OF-THE-STYLE-TAG
"
    div
    div
    div

For the record, the above code could probably have been commented, and more nicely formatted. But since the same was definitely true also for the Tic Tac Toe game implemented in React JS, I feel the comparison is a just comparison. Since I want to create something as “similar as possible”, I felt justified in not nicely formatting my code in any ways.

Notice; Unfortunately WordPress won’t allow me in any ways to encode HTML elements, so the “THIS-IS-A-STYLE-TAG” and “THIS-IS-THE-END-OF-THE-STYLE-TAG” above, must be exchanged with the “style” element from HTML, with no attributes.

PS!
I know the above Hyperlambda code is crap, but so was the React JS code …!! 😉
I spent 20 minutes on it, and could probably have further reduced it in size. But I think you get the point …

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