Nuggets for Noppets

When I first started out with NOLOH, I had a requirement to build a fairly demanding web application. Right here and now, I have a confession to make. Currently, my NOLOH development work is my “evening job”. In my day job, I’m a .NET C# developer. I have done a lot of Rich UI development (Winforms/WPF) but in recent years, my emphasis has been more towards component and framework development for a global software development company. So, the obvious web development platform for me is ASP.NET, right? After all, I’m a .NET developer? Wrong!

I can see where MS came from with ASP.NET. It has a “forms” based approach with the ability to drop widget components onto a design surface. I suppose this was a model to allow VB and Winforms developers to use MS technologies to develop web applications. In reality, what you get is all the ASP.NET angle brackets, code-behind in the .NET language of your choice, coupled with an overarching requirement to understand CSS, Javascript, HTML, the DOM and browser quirks. Couple this with the baggage that is viewstate, there is a significant payload travelling from server to browser and back again. Oh, and did I mention those darn angle brackets!

OK, to some extent, MS have tried to make amends in recent times with their ASP.NET MVC framework but, its implementation is far less capable than RoR, and the developer is responsible for hand-cranking the HTML, CSS and Javascript/AJAX in the view layer. Either way, with the MS web-based offerings, there is no easy transition from their rich UI technology stack. You still need to understand all of the fundamental web technologies before you can build anything.

For my requirement, I originally looked at certain Javascript frameworks but I discounted them fairly quickly for numerous reasons. I actually stumbled across NOLOH after spotting a “rant” by NOLOH co-founder Asher Snyder, in the comments section of a blog post. Intrigued by the common sense and passion in Asher’s “rant”, I followed the link back to NOLOH and the rest is history.

The big difference for typical MS developers is that NOLOH is a superset of PHP and that might initially deter .NET developers from using NOLOH. In reality, for your average C# developer, object oriented PHP is very similar to creating C# based classes as PHP is a C-like language. For my money, the main and obvious differences are weak versus strong typing, the need to put a dollar ($) symbol in front of variables and a requirement to use certain functions provided by PHP that in .NET might be part of the .NET framework classes. Other than that, you can think of NOLOH as the .NET framework part of the equation.

Now for confession #2 – in the 1990’s I used MS Foxpro and Visual Foxpro extensively. I loved the fact that VFP was superb with data, fully object oriented, weakly-typed, late-bound and totally dynamic. Also, like PHP, VFP had a voluminous number of built in functions (often as a result of developer requests) making the language rich and diverse, if not a tad overwhelming by providing many different ways to achieve the same things. I really sense more similarities than differences with NOLOH/PHP and Visual Foxpro/C# .NET. With NOLOH and PHP, I have the dynamic nature and OOP capabilities of PHP, and a brilliant, “AJAX for free” OOP superset of PHP in the guise of the NOLOH framework/platform. Additionally “doing” data with NOLOH is a breeze.

So, how does this relate to .NET developers and what has all of this really got to do with ASP.NET? Well, during the day, I am squarely entrenched inside Visual Studio 2008. I have my font set to 11pt Consolas and I spend most of my time developing classes, components and frameworks extensions. When I get home, I fire up my trusty (old) G5 iMac, load the free (and excellent) Netbeans IDE and start all over again with NOLOH. What amazes me is that oftentimes, I forget that I am actually using PHP or that I am on a Mac. Everything I do is totally object based and takes the form of a NOLOH or extended NOLOH class. But I’m developing web applications, right? Correct. So what about the angle brackets? There are none. What about the Javascript? I don’t need it. What about browser quirks? I am not cognizant of them. What about AJAX or XHR? I don’t think about it. What about state? I don’t think about that either. NOLOH handles everything like this for me. All I do is create objects. I pass in arguments to constructors, or set properties on objects. I can specialise NOLOH classes by extending them or build new objects from scratch or more complex objects using aggregation. This is really obvious stuff for anyone used to OOP-based development. Some of the parameters that may be set on a NOLOH object are its display or positional attributes. For example, I might specify an object’s Top, Left, Width and Height values. I may specify its layout characteristics using a PHP constant eg:

$object->Layout = Layout::Absolute;

Most of the time, these kinds of properties are set in the class definition but clearly, they can be re-specified at design or run time.  Then, all I have to do is simply add the object to another object’s Controls collection array:

$object->Controls->Add(new MyPanel(5, 5));

The display and positional properties of the NOLOH-derived object determine how and where the object will be rendered in relation to its parent container, whether that be at the WebPage level or some more granular container lower down in the visual containership hierarchy.

All NOLOH applications are primarily housed in a WebPage object but you mostly work with Panel controls for layout and the extensive library of NOLOH controls. Most NOLOH controls are visual, whether containers of other controls or UI widgets but, there are other non-visual controls like the Container and Group classes that generally contain other visual controls but add collection based semantics, providing additional capabilities and run-time information to your NOLOH programs about the visual objects they contain.

In this somewhat brief introduction to NOLOH from a .NET developer’s perspective, we have simply referred to classes, objects, properties, collections and containers. Nowhere have we used HTML, Javascript, CSS or angle brackets. We haven’t thought about state or how we maintain it between client/server requests as this is totally automatic. This is nothing like ASP.NET but, it is very much like developing and instantiating C# classes. In my view, this is how ASP.NET really should have been.

It’s worth pointing out though that if you really want to get your hands dirty with HTML, CSS and Javascript, you are completely at liberty to do this as and when it suits the use-case (NOLOH has a brilliant class that allow you to do amazing things with HTML and I will dedicate a future post to that topic). The main point is that you don’t have to. Moreover, this means that you can use the NOLOH/PHP superset language for all of your web development whether this be for typical web site or RIA development, or sites that are a mixture of both.

After daily exposure to the MS desktop and development stack including the weighty Visual Studio environment, contrast that to my seven-year-old PowerPC iMac, Apache web server, Netbeans IDE and PostgreSQL database. It’s a lightweight (free) stack that with NOLOH, allows me to carry on developing OOP based web-applications with almost no change of development style to that utilised during my day-job.

Next time, I will tell you all about how I have just transitioned my NOLOH development and the exact same development tools over to a brand new, low-spec, “cheap and cheerful” Windows 7, Celeron-based laptop using IIS 7. NOLOH is so lightweight and powerful, it absolutely rocks, even on this budget hardware/software combination. Stay tuned!

The NOLOH guys recently presented at Confoo. As you may recall, I’ve been using NOLOH for just over a year and in that time, have become used to the awesome power that is available for very little effort on the developer’s part. However, it was really refreshing to see NOLOH co-founder Asher Snyder put NOLOH through its paces in a fast moving demo that reminded me of just why NOLOH is so cool and unique in the world of PHP frameworks.

Asher shows some simple basics, like instantiating controls, adding them to NOLOH container controls via their Controls arraylist, and some of the syntactic sugars provided by NOLOH like the ability to Cascade an object reference and therefore allow the ability to chain property assignments, call functions and assign Events, all from the initial construction of a NOLOH object. I use these things everyday and believe me, they are real time-savers.

Asher also demonstrated the power of NOLOH’s Shifts. Shifts are simply awesome and the demo shows some neat Shift-based “acrobatics” achieved in just a few lines of server-side code that would take absolutely oodles of client side Javascript to achieve in other systems. Shifts are a typical NOLOH “low hanging fruit” feature that allow you to achieve client-side resizing and dragging of simple or complex patterns of interdependent client-side objects without writing a single line of Javascript. Asher’s demo only really scratches the surface of Shifts and other incredibly powerful features but even so, you can get a real sense of the goodness that is NOLOH.

So as not to be outdone by Steve Jobs, Asher produce one of those “Oh, and just one more thing …” moments by revealing a new NOLOH killer feature in the form of the Listener object. This does exactly what it says and listens to “things”, server-side. It provides server-side push capability right out of the NOLOH box all implemented with typical NOLOH simplicity, consistency and efficiency. To demonstrate, Asher used the Listener to monitor newly published Flickr thumb-size images and download them into a small NOLOH application. He added each image into a NOLOH Panel object, calling the static Animate::Opacity function with the image, using an animation constant of Animate::Oblivion. This assignment reduced image opacity until the image was no longer visible but then did one more trick – it automatically removed the image control from the Panel’s Controls arraylist. The effect was amazing! New images discovered on Flickr by Listener are added at the end of the queue of images in the Panel. As soon as they are added, they start to slowly “fade away”. The “oldest” images in the Panel that are at the end of their Animate::Opacity duration are then removed by the action of the Animate::Oblivion constant and consequently give up their space in the Panel. The net effect is that all of the images in the Panel dutifully shuffle backwards to occupy the vacated space of the auto-deleted images whilst newly “listened-for” images are added and the end of the Panel’s contents. I was really intrigued by this example of total power with elegant simplicity

Even though I was aware of many of the things Asher demonstrated, a lot of the features I had forgotten about and it was great to be reminded of them, along with some very cool new features, too. All in all, I can honestly say I was totally inspired by the demo and thankful that I had discovered the NOLOH framework in the first place. If you have a little spare time, check out the video that you can find here . You won’t be disappointed.

I recently decided to create a new custom class called “ImageLink”. This is a NOLOH Link class extended to do more “tricks” with images. The main use-case was to be able to specify (in NOLOH parlance) “out” and “over” graphics as background images and have the Text value of the Link CSS text-indented using a negative offset. The real requirement was so that I could use fonts of my choice as a graphic without concern as to their availability on an end-user’s machine.

The first twist was that I actually wanted to use CSS Sprites for this requirement. NOLOH tends to use regular image files for these kinds of things but I had my own reasons for wanting to use Sprites. The new class is constructed by simply “feeding” it a configuration “container”. I really like using object literals in Javascript for this kind of thing and in PHP, I use an associative array to do the same thing. It’s not quite as terse as an object literal but it works just the same. In this array you can specify all manner of properties including ServerEvents that are just another NOLOH object that can be passed around and assigned as required. All in all, it works extremely well.

The second twist was that I wanted a “third” background image for a “selected” state. This is where the plot thickens. What I really wanted was to be able to have a NOLOH Group of my ImageLink objects with a “selected” background image, again, provided by a CSS Sprite.

I should state here and now that visually, everything I wanted to achieve is available straight “out of the box” by using a NOLOH RolloverImage; I just wanted to do it my way using Sprites. All I needed to do was make the ImageLink class implement Groupable and it would “play nicely” with the NOLOH Group container. In reality, that meant that I did nothing other than specify “implements Groupable” in the class definition as NOLOH controls provide the required implementation by default. I also needed to create some Javascript to set the “selected” property on the client-side DOM object.

Now here’s the thing. I really like Javascript and enjoy using it but for some reason, this tiny piece of Javascript was causing me a few problems. I couldn’t remember the NOLOH ClientEvent approach or how to add the Javascript into the NOLOH “mix”. Whilst this stuff is in the API documentation, I wasn’t at all comfortable because with NOLOH, I tend to rattle out code all day long without so much as a second thought.

Like all good developers, I decided to refer back to my last NOLOH client-side code to see how I did all of this “black magic”. Of course, it was totally straightforward and simple as are most things in NOLOH. Then something caught my eye; the code file was last accessed in March 2009. After a little more checking, the last time I had done any NOLOH client-side Javascript coding was March 2009.

So, for the last twelve months, I’ve been developing NOLOH PHP/Ajax applications with all the client-side effects, automated state-management, XHR etc., but guess what? I haven’t written a single line of Javascript!

I admit, the title of this post is indeed a misnomer. But the fact remains; I have been creating Ajax applications without hand coding a single line of Javascript and what’s more, you can too. As usual, head over to http://www.noloh.com/ and take a look for yourself.

I was interested to see an article from Dr. Dobb’s that essentially reinforces the long-standing design semantics espoused by NOLOH and its fanatical developers. You can find the article I am referring to here.

Whilst the platform it references is Java based, the message is somewhat similar. NOLOH has long since emphasised the advantage of a server based approach to web development.

Typically, server-side approaches need to be embellished with additional client-side Javascript libraries to give the Ajax capabilities so prevalent and expected in modern web applications. Using Fat/Rich client-side Javascript frameworks, you tend to have to replicate work on the server that you have done on the client. Moreover, that replicated work is generally in a different language. So, duplicated effort combined with a lower security threshold as client-side Javascript can be relatively easily exposed along with your application’s business logic and other internals that you would probably rather be safe and secure on the server.

This isn’t the case in NOLOH. With NOLOH, you just write code and NOLOH delivers on a just in time basis, highly optimized HTML and Javascript. Client side effects that you would usually have to code are just served up by NOLOH and it takes care that what it provides is specific to, and therefore optimized for the browser in question.

So, if you’re a PHP developer and don’t want to be continuously cranking out HTML and Javascript, then look no further. Head on over to http://www.noloh.com/ and give it a try. You won’t be disappointed.

Welcome to my inaugural post on a blog primarily about a really fantastic web technology that I discovered about a year ago called NOLOH (http://www.noloh.com).

NOLOH stands for “Not One Line of HTML” and it really delivers on this promise. However, NOLOH is the proverbial “Wolf in Sheep’s Clothing”, making the complex ridiculously simple whilst “under the hood”,  it is an extremely cool but very accesible Object Oriented superset of PHP.

NOLOH is the brainchild of co-founders, Asher Snyder and Phill Ross, two young guys that are far too smart for their own good (thankfully).

So, I hope you will find my future posts of interest as a I ramble on about my favourite web technology, NOLOH. Stay tuned …