Tuesday, January 29, 2013

What are Single Page Applications (SPAs) Part 1: Explanation, Resource Round-up & Javascript Libraries

Introduction and Breakdown

Firstly let me start by saying that Single Page Applications are in their infancy. The technologies used to create then have been around for a while but with the advent of HTML and the coming of age of some core libraries they now seems to be going mainstream. By this I mean that your average developer should now have enough of the heavy lifting done that they can concentrate on business logic and plug-in syntax rather than build everything from the ground up!

Secondly a Single Page Application in this context can be thought of as:

 "A website that relies almost exclusively on Client Side technology to display and update user interface (UI) elements to provide a more fluid and context based User Experience (UX). Server side technologies tend to be used to query data (or create/update it) and returns data (usually JSON) NOT a rendered page."

Common Features of a SPA

With that sorted lets dig a bit deeper - the following list are common features used within SPAs:

  • Client based routing engine
  • Client based data-binding
  • HTML Templates 
  • Asynchronous Client-Server communication

Visual Studio & SPA

If you're lucky enough to be using Visual Studio 2012 you will be getting a starter template in a coming update details of this can be found on John Papa's blog here - I'm not going to even try and expand on this as it covers things from a Visual Studio stand point extremely well but rather I'd like to talk about SPA's and related technologies to fill in some background information which I've been scratching together over the past week or so. Incidentally John Papa's post will show you how to implement some of the technologies listed below using the SPA template - well worth a read to see how the technologies hang together even if you do not have or intend to use Visual Studio.

Technology & Frameworks

Javascript & AJAX Framework
We're going to need a good JavaScript framework for working with DOM elements & getting and receiving data. My preference (and the rest of the world it seems) is jQuery. if you've not used jQuery I strongly recommend learning it RIGHT NOW it will be your JavaScript crutch throughout this type of development.

jQuery Project Home
jQuery on NuGet
jQuery AJAX Documentation

Data Binding & Templating
When we make an AJAX request we're probably expecting our server to return data in JSON format. Once we have the data we need to BIND that data to some elements or a REUSABLE TEMPLATE. Microsoft package KnockoutJS for this purpose. In essence it allows you to declare (mark-up) your HTML using data- attributes on the HTML nodes. Knockout does this by implementing an MVVM pattern using observable objects.

What this means is that you have a JavaScript ViewModel that can be populated with JSON data returned from the server and bound to HTML to update the interface. Because knockout is bi-directional this whole process can also work in reverse and server updates can be issued from observed client-side events. This all sounds remarkably time consuming and complicated - the key thing to remember is that WHAT it is doing IS complicated but that complication is abstracted by using the library so that HOW you get it to do it is NOT complicated.

KnockoutJS Project Home
Knockout on NuGet
Learn KnockoutJS (Excellent interactive resource well worth using)
Knockout templates documentation

Client-side Request Routing
Whether you're from a Windows background or not the concept Server-side Routing has been around for a while (Common implementations include apache's mod_rewrite and the ASP.NET Routing engine).

Routing allows you to de-couple URL's from files on the webserver. In essence that means that you can navigate from a request to a resource on the server that is not necessarily located at that exact location BUT the server knows where it should go and ROUTEs it to the appropriate request handler.

So the request  http://somedomain.com/page/1/really-interesting-resource  could end up being routed by the server to a webpage or other resource that actually exists here http://somedomain.com/getPageData.aspx?id=1.

This helps us to make URL's human (and search engine) readable and can help with SEO rankings and making links more memorable.

Client-side routing takes this a stage further and uses the anchor mark # in the URL to "overload" the server-side route with client-side requests and navigation. Essentially this means you can make a request like http://somedomain.com/#/page/1 and have the client handle the request and make a server-side call for data and refresh the UI accordingly without a page refresh.

This creates create a better UI/UX in the long run as the web site appears to react very similarly to desktop applications and can update only the areas of the page that concern the request rather than redrawing the whole page.

SammyJS Project Home
Sammy on NuGet
Sammy documentation


I didn't intend this post to be quite as long as it has turned out to be, in short we've looked at the concept of Single Page Applications and the technologies that may be used to create one. In Part 2 I will be walking through some technologies and techniques that can be used to keep all these libraries under control, manage dependancies and helpers that make it easier to bring them all together. Some of these technologies include RequireJS, Microsoft TypeScript, the Durandal project (Nuget & GitHub)  and the Visual Studio Web Essentials plugin.

Read More

Monday, January 28, 2013

Easy PHP Development on Windows

For the majority of my career I've been involved with the Windows stack of development products Visual Studio, SQL Server and so on. However From time to time I've had cause to get my hands dirty with some PHP coding both commercially and in a freelance basis.

Its been quite some time since I've used PHP but the other day a private client requested that I use it to deliver a website and I had to set about building a development environment for this on my PC. As it happened pretty much all the work could be done client side (jQuery, Google Maps API etc) so all I really needed was an IDE and the PHP interpreter.

There are really only 4 steps to getting a basic PHP environment setup which I've tried to detail below as succinctly as possible!

1. Download the software

PHP Binary Interpreter:

NetBeans 7.2.1 IDE:

2. Extract & add PHP location to PATH Environment variable
Create a directory for the PHP files something like:

C:\Program Files (x86)\php-5.4.8\

Extract the php zip file to the above directory.

If you're using Windows 7 hit "Start" and type "Environment" then click "Edit the system environment variables" when the search comes back - for me this is the second option appearing on the start menu.

In the "System Properties" window on the "Advanced" tab click the "Environment variables" button which is on the bottom right just above the "OK", "Cancel", "Apply" buttons.

In the "System variables" list (second one near the bottom of the window) scroll down until you see "path", left click this item and then click the "Edit" button. Scroll to the end of the text box (End key will work best here). Then type/paste the following:

;C:\Program Files (x86)\php-5.4.8

Modify the above accordingly if you've chosen to install to a different location. Ensure it starts with a semi-colon to "close" the previous variable.

3. Install & configure NetBeans
Run the NetBeans installer accepting all the defaults (or changing them where necessary). Open the IDE and then click "Tools" from the menu then Options then PHP. Click the "Browse" button next to the "PHP Interpreter" label and text box and navigate to the PHP directory you created earlier then click on the php.exe file and click "OK".

4. Reboot & Create New Project

Because we added an environment variable we should now close everything down and do a reboot. Once you're back into Windows start NetBeans and create a new project - choose the "Built in Webserver" option when prompted and you're good to go; write some PHP and then click the little green arrow to start!

Read More

Wednesday, January 09, 2013

Empire Avenue - Generating Portfolio Wealth & Eaves

After the initial flush of investments when signing up to Empire Avenue you may find it difficult to get as much interest in your shares as during the first few weeks. This can be frustrating but it is possible to generate continued interest with some savvy investing.

If you've not blown all your eaves on missions or upgrades consider investing in some of the Leader Board users. In effect these are "Top 100" lists for various social networks including those on Empire Avenue.

If you're looking for reciprocal investments I would suggest hitting the Portfolio Wealth section. This section is for those people/companies who are heavy investors (and therefore heavy users of EA). The interesting thing about these users is that they also tend to have high share prices and potentially a lot of Eaves to invest.

Follow this link and you should see the list:

Once you're there go down the list clicking on names and hit the invest button and buy as many shares as you are able! Leave them a shout out or share the buy on a network to alert them to the fact you're buying and with any luck you'll get some investment back (This is more likely with these types of users as previously stated) - the earnings from your share sales can then be funnelled into buying even more shares from the same or other users on the board and hopefully create a positive feedback loop to keep your portfolio & wealth growing!

If you enjoyed this post please also consider buying a share or two of mine here:

A few days after writing this post I thought i would update it with a small graph of what this approach has done for my share price - please see the graph below, the red box shows what happened once I started investing a small amount of Eaves in each member of the Top 100 Portfolio Wealth users. I think it speaks for itself!

Read More