Creating an SPA with Polymer

I maintain a medium sized Microsoft Access application that is the operational system for a small business.  This business has offices in London, Birmingham Leeds and a copy of the Access application runs on PCs within the office system of these offices, allowing the staff to run the business.  A SQL Server database runs in the London office and all the Microsoft Access clients connect to it.

For reasons of confidentiality I wont give too many more details about the business, but this article and those that follow will concentrate on the technical aspects of creating a web based replacement that can sit alongside (but maybe eventually replace) the existing Access client.  The reasons for taking this path are both business driven and technical.  The key drivers are:-

  • Access is Windows only, but there is a desire to connect from other devices (such as iPads and Macintosh laptops).
  • Difficulties in distributing each new release of the Access client to all offices.  A web application doesn’t have this problem
  • Difficulties in doing multiple changes to the Access client simultaneously through lack of version control. The web application is essentially textual source code and can be version controlled (I will use git).
  • Ability to explore different UI approaches to existing processes to improve usability.

I am undertaking this project in the background, and expect it to take quite a while to complete.  For this reason, a key underlying driver is that the new and old applications sit side by side.

I have decided to build the web application as a Single Page Application (SPA) .  I did start this project before, about two years ago, and at that time started with JQuery Mobile.  A characteristic of this was I started to see quite large and complex files that would have become increasingly difficult to maintain.  The essence of using Polymer is that it possible to build relatively small self contained custom web elements, that comprise both the html user interface, but also the control logic surrounding it.  This encapsulation is what I am looking for.

The SPA will communicate with the database with small self contained PHP scripts called via AJAX requests.  They will use PDO to access the SQL Server database.  I could have chosen from a wide range of approaches, but this one is one I know and feel confident with.

My efforts at writing a series of posts to cover a project have, in the past, led to nothing.  I write the first post like this, then get dragged into the project and by the time I have emerged from the other side I have no desire to talk about it further.  This may go the same way, or maybe not.  Polymer, and web components in general, is a new technology that has yet to be fully explored.  I have some opinions about application structure and approaches that I hope to discuss in further articles.  Whether they see the light of day is another matter.  Lets just wait and see.

 

 

 

 

 

Displaying my RSS feed on Hartley Consultants’ front page

I had always planned to replace the feed on the front page of Hartley Consultants web site with a summary of recent posts from this blog.  I had previously sucked in news articles from the local SMF Forum that is on site, but I intend to remove the forum shortly because I am setting up the equivalent on this site, where it is more appropriate.

It turned out to be remarkably easy to achieve.  A call to “file_get_contents” with the url of my feed returned the raw xml into a variable, whilst a call to “preg_match_all” enabled me to parse the feed content and find the relevant information to display.  The formatting of the articles was already achieved by matching the same format as I had used for the forum feed.

Here is the code I used

	$feed = file_get_contents('http://www.chandlerfamily.org.uk/feed/');
	//having got the xml feed from chandler's zen we parse the xml looking for all the entries
	$pat = '#<item>.*?<title>(.*?)</title>.*?<link>(.*?)</link>.*?<pubDate>[^,]+,\s+(\d+)\s+([[:alpha:]]+).*?</pubDate>'; 
	$pat .= '.*?<description><!\[CDATA\[(.*?)\[\.\.\.\]\]\]></description>.*?</item>#sm';
	if (preg_match_all($pat,$feed, $topics,PREG_SET_ORDER)){
		$item = 0;
		foreach($topics as $newsitem) {
			$item++;
?>    <div class="newsitem">
        <div class="date"><h4><?php echo $newsitem[4]; ?></h4><h5><?php echo $newsitem[3]; ?></h5></div><h3><?php echo $newsitem[1]; ?></h3>
        <p><?php echo $newsitem[5];?></p>
        <p><a href="<?php echo $newsitem[2]?>" title="view full post at www.chandlerfamily.org.uk (in a new window)" target="_blank">More ...</a></p> 
    </div>
<?php
			if($item > 2) break;
		}
	} else {
		echo '<div class="newsitem">Sorry No Data</div>';
	}
	unset ($feed);
	unset ($topics);

The most important part is the pattern to match. But even that turned out to be quite straight forward, even in it did take a bit of trial and error to get it exactly right. I hope someone trying to do the same thing can use this as a starting point.

AKC Money is born

At work I got my new laptop last October. But I couldn’t get my Palm Pilot to Sync with it, so was getting increasingly worried that my data, particularly my diary, was getting out of date. Also, I had an application for managing my accounts (Micromoney) that contains absolutely critical financial data holding the state of my personal finances.

Near the end of November I decided to try and sync with firstly my Linux Desktop, and then when that didn’t work my old laptop. None of them worked anylonger. It looks as though something has gone wrong with the Palm.

At work I got my new laptop last October. But I couldn’t get my Palm Pilot to Sync with it, so was getting increasingly worried that my data, particularly my diary, was getting out of date. Also, I had an application for managing my accounts (Micromoney) that contains absolutely critical financial data holding the state of my personal finances.

Near the end of November I decided to try and sync with firstly my Linux Desktop, and then when that didn’t work my old laptop. None of them worked anylonger. It looks as though something has gone wrong with the Palm.

A bit of searching on the internet found that a possible cause is static charge buildup, but the only way out of this is to let the battery run down and destroy the contents.

So I decided on a different approach. Build an application to run on my web site that replicated the functionality. From a security point of view that required both login and https – so that I could get at the data from work when filling in my expenses, but I also felt I could improve the application in a few areas (such as the management of foreign currency) that the existing application was poor in.

So I have taken a step sideways and stopped working on my blog, to urgently build this new application.

Its taken about one month – which was longer than I had hoped, but its working. Of course I don’t want you all to see my financial data, so I also installed demo copy with its own database and not protected via login and https.

Things I added

  • The ability to work in Foreign Currencies for transactions. I must admit the way I have done this is slightly strange, but it matches my own workflow, in which I claim my expenses either as
    • the result of transactions where I have paid for cash (and therefore need to remember the exchange rate at the last converion, or
    • the result of credit card transactions where I will initially guess at the conversion rate using the same rate as the cash transactions, but which will be accurately reflected in actual GBP figures when the statement comes through
  • Items have to be separately cleared from both the source and destination accounts. My old version tried to implement this with a single cleared flag and it didn’t always work. I have two specific flags for each end of the transaction
  • recognise that some accounts normally have the majority of transactions as debit (e.g. my bank account where there is a single salary credit, and then lots and lots of debit transactions. On the other hand my Company Expenses account is a credit account (I credit it with debits from other accounts for every expense, its debited – and normally by bank acount is credited when the company repays me those expenses.

I will release source code soon (under the GPL) – as soon as I can get the site tidied up

A little test Java v PHP

I was curious as to the relative speeds on Java versus PHP. So I created a couple of simple applications (see below).

PHP took approximately 2.5 seconds to execute the core part of executing a loop a million times.

Java took about 0.045 seconds to do the same thing, over 50 times faster.

I was curious as to the relative speeds on Java versus PHP. So I created a couple of simple applications (see below).

PHP took approximately 2.5 seconds to execute the core part of executing a loop a million times.

Java took about 0.045 seconds to do the same thing, over 50 times faster.

I know its a very crude measure, but it did suprise me how much better java is at executing than php. Of course the overhead of getting the results to and from tomcat sitting behind apache, compared to running php within the apache process might be pretty significant, but it does encourage me not to worry so much about whether I did the right thing building my application in Java.

For PHP


<html>
    <head>
        <title>PHP speed test</title>
   </head>
   <body>
        <p> This is a test to see how good php is in executing a loop a million times</p>
        <p>Times are: 
<?php  

/* Copyright (c) 2005 Alan Chandler, licenced under the GPL */

define (LOOPS,1000);
$x=3.0;
$start=microtime();
for ($i=0;$i&lt;LOOPS;$i++) {	
    for ($j=0;$j&lt;LOOPS;$j++) {
        $y=$x*3.0;
        $x=$y/3.0;
    }
}
$end=microtime();

list($su,$ss) = explode(" ",$start);

list($eu,$es) = explode(" ",$end);

$start= date('H:i:s',(float)$ss).":".(int)((float)$su*1000);
$end =  date('H:i:s',(float)$es).":".(int)((float)$eu*1000);

echo $start." ".$end;

?>     </p>

    </body>
</html>

For Java, the tapestry page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Java Speed Test</title>
</head>
<body>
<!-- Copyright (c) 2005 Alan Chandler, licenced under the GPL -->
<p> This is a test to see how good java is in executing a loop a million times</p>
<p>Times are: <span jwcid="@Insert" value="ognl:times">hh:mm:ss:mmm to hh:mm:ss:mmm</span></p>
</body>
</html>

and the Java

package uk.org.chandlerfamily.tapestry.speed;

/* Copyright (c) 2005 Alan Chandler, licenced under the GPL */

import org.apache.tapestry.html.BasePage;

import java.util.Date;import java.text.SimpleDateFormat;

public abstract class Home extends BasePage {	
    private static final int LOOPS=1000;	
    public String getTimes() {
        int i;	
        int j;
        float x=3;
        float y=7;
    
        Date start = new Date();
        for (i=0; i&lt;LOOPS;i++) {
            for (j=0;j&lt;LOOPS;j++) {
                y=x*3;
                x=y/3; // Waste time
            }
        }

        Date end = new Date();
        SimpleDateFormat fmt = new SimpleDateFormat("HH:mm:ss:SSS");
        return fmt.format(start) +" to " + fmt.format(end);	
    }

}