The above might sound like an exaggeration. However, it is not! Simply because in Phosphorus Five, you can reuse almost everything you do. In the video below, I am demonstrating reducing my projects from 388 LOC (Lines Of Code) to 1 LOC, by creating a reusable extension widget, from an existing web app page.
Basically, what this implies, is that you can reuse almost everything you do in one project, to the next. This suggests that if you’re creating more than one project, then every time you start out a new project, you’re almost done with it, before you even start!
You can find the code for this below the video. For the record, I had to slightly modify the code below, to avoid angle brackets, etc, since my blog can’t handle angle brackets in code segments, even if I HTML encode them manually … (Darn it WordPress!!)
Now before you check out the code, realise that we started out with a “page”. Then we turned that page into a reusable extension widget, in roughly 5 seconds. The end result, being a reusable component, we can reuse in other projects, or in other pages in the same solution. Please watch the video for an explanation of how we did this.
Features of our GitHub project browser
The video also demonstrates some other pretty nifty features. For instance, we are able to traverse any project from GitHub, without using any of the GitHub APIs. The way this works, is that we are able to treat HTML semantically, and extract parts of the HTML returned by GitHub, by transforming it into a lambda object, to retrieve its actual “data”. Basically, we’re “scraping” GitHub, and semantically extracting parts of their HTML, to semantically “understand” the structure of the project we’re browsing.
This allows us to treat HTML semantically, as “data”, and create an Ajax TreeView, which you can see either in the video above, or the screenshot below. The Ajax TreeView in our little “app”, is basically created by semantically “scrape” the GitHub project website, retrieving the data for the links to download its folders, and its files, allowing us to recursively traverse any GitHub project, by treating their HTML semantically.
To understand how we do this, take a look at the code at the bottom of this blog.
Our little code snippet, also shows how you can use the System42’s Ajax TreeView, in addition to creating a “datagrid” manually, by creating a table element, wrapping your “grid”. Below is a screenshot of our little app.
Below is the code we ended up with, after having created our extension widget. Evaluate the following code in your System42/Executor.
Then create a “lambda” page in the CMS of System42, with the following code in it, to consume the widget we created above.
/* * This will create a page, consuming our newly created * extension widget. */ create-widget parent:content class:col-xs-12 widgets sys42.samples.git-hub.file-browser
If you want to use the above as a “persisted extension widget”, you’ll need to stuff it in a Hyperlambda file, and make sure your file is evaluated as the server is started.
In addition, I want to give KUDOS to the Knagis for sharing his brilliant CommonMark.NET library with the world! Great work! For the record, I have a feature request for you, which is to have the option of having a separate URL resolver for images and hyperlinks. Pliiis …? 🙂