Tag Archives: web development

professional, software development, tech

Web page memory usage: how much is too much?

I have a web application that loads names into a picklist and the question came up: how many names would be too much for the web page to handle? What about 5,000 names, for example?

Modern web browsers have a memory snapshot built in. Just press F12 and there it is. So I fired up my application with over 5,000 names loaded into an array and displayed in a scrolling div. 2.5 MB.

Then I visited Facebook. Logged in, the page reported over 78 MB.

image

Google’s clean-looking home page? Not logged in, 11.2 MB.

image

Twitter? Logged in, 83 MB.

image

This was enough for me to stop worrying about the memory impact of 5,000 names in my web application. With our casual acceptance of multi-MB web pages it is easy to forget that the complete works of Shakespeare in plain text is 5.5 MB and compresses to less than half of that.

Just because you can do something, does not mean you should. Smaller is better and faster, and software bloat of various kinds is responsible for many performance issues.

There are trade-offs though both in time and in performance. Maybe it is better to load just a few names, and retrieve more from the server when needed. It is easy to test such things. Nevertheless, I found it useful to get some perspective on the memory usage of modern web sites.

.net, professional, software development, visual studio

Visual Studio LightSwitch HTML: mainly for mobile

3 Comments

Microsoft’s Visual Studio LightSwitch is an innovative development tool that lets you build multi-tier database applications without ever designing the user interface directly. Instead, you work with defining the database and the the features you want on your screens. LightSwitch generates the user interface for you. You can also add code snippets, and advanced developers can create custom controls and extensions.

The thinking behind LightSwitch was to make it easy for non-developers to create database applications, though it is not the most intuitive of tools and in reality it is developers looking for rapid application development who are most likely to use it. There is a lot to like in the way it is designed, like the data-first approach and the easy to use database designer, but this is spoilt by some odd decisions. One is that the LightSwitch team are seemingly averse to reference documentation, preferring to deliver various how-to walkthroughs, which is frustrating if you want to find out in detail how it is meant to work.

The initial release of LightSwitch, as well as the new edition in Visual Studio 2012, generates only a Silverlight client, making it useless for mobile devices and somewhat annoying on desktop PCs since you have to install the Silverlight runtime. Microsoft has addressed this by creating an HTML client update, which lets you generate an HTML user interface. This is now at Preview two, and I downloaded it to have a look.

Since LightSwitch generates the user interface from metadata, you might hope that the HTML version would let you take a project created for Silverlight, and simply generate a functionally equivalent HTML application instead. Even if some touching up was needed, such as rewriting C# snippets in JavaScript, this would be a nice option. However that is not the approach Microsoft has taken. It has added an option to create an HTML client for a LightSwitch project, but you have to redo all the screens. In addition, the HTML client is intended mainly for mobile, and is designed for touch control, as explained by Microsoft’s Joe Binder here:

We are not expanding the HTML client’s scenario target to include desktop in our first formal release.  The first release will be based exclusively on JQueryMobile and be optimized for building touch-oriented apps.  We’ll stay tuned to your feedback to sort out where/when we go after that, but we still have some issues to sort out for our mobile story and we’ll remained focused until we feel confident that we have a viable mobile offering.

Of course it is still HTML, and will run on modern desktop browsers, though the generated user interface uses JQuery Mobile extensively. Another of the issues here is that HTML 5 may be better supported on smartphones running WebKit-based browsers than on desktops such as Windows XP running Internet Explorer 8, creating problems for LightSwitch. It is also hard to create a user interface that is equally well suited to touch control as to keyboard/mouse interaction; this issue is a common complaint about Windows Store apps on Windows 8.

The HTML client is still interesting, more so than the original LightSwitch with its Silverlight web or desktop clients. Rapid database app development for mobile devices is an key area, as businesses work to enable their mobile users to access company data.

After installing the preview, I built a quick HTML client app, based on a contact database.

image

It did not take long to build a working application, though there are some puzzles. My first effort at creating a contact list only displayed the firstname of each record. Apparently that is the “summary” layout, and I cannot see any quick way to change the summary definition to something more useful. Instead, I changed it to a Rows Layout which shows all the fields, but lets you delete those which are not required. Then I added an Edit contact button, though it appears as plain text without even an underline to show that it is a hyperlink, and I cannot see quickly how to change this:

image

The button’s “Appearance” properties are not helpful:

image

I also found an annoyance that may be a bug. I created several new contacts via a Contact details form (the first illustration above). I saved each contact with the tick button, whereupon they appear in the contact list. However they are not yet really saved. To save the contact to the database, you have to execute the save action, which is a built-in button on the BrowseContacts form. When I tried to save, the phone number fields (defined as Phone Number fields) failed validation, even though they would be valid phone numbers in the UK, and the records were not saved. Fair enough I suppose, but why did they pass validation in the Contact Detail form?

I am sure there are easy fixes for all these niggles, but I mention them to illustrate the point about this not being the most intuitive of tools.

The general approach also takes some mental adjustment. Here is a tool that makes web apps, but you cannot use a web design tool to customise the user interface.

As a tool for building mobile web apps, LightSwitch does show promise and I look forward to the final release. That said, it would be good if Microsoft could adapt the HTML output so you can make it suitable for desktop browsers as well.

.net, adobe, open source, professional, Web

Adobe Creating the Web, offers Edge animation tool for free

It is less than a year ago that Adobe pivoted wholeheartedly from Flash to HTML, a moment that to mind was marked by the acquisition of Nitobi, the PhoneGap company, announced at MAX in October 2011.

Yesterday Adobe clarified its plans for its new wave of web design tools branded Edge. These are as follows:

Edge Animate

A motion and interactive design tool for animating web content with HTML, JavaScript and CSS.

image

Edge Inspect

Preview HTML content on mobile devices for test and debug.

image

Edge Code

This is a commercial product based on the open source Brackets project – a similar relationship to the one that exists between Adobe PhoneGap and the open source Cordova project.

Edge Code adds Adobe integrations such as with Edge web fonts and Typekit, and with PhoneGap Build.

image

Edge Reflow

image

Design tools for CSS, preview expected by end of 2012.

Edge Web Fonts

Free web font service for open source fonts.

TypeKit

Commercial font library service.

PhoneGap Build

Package web apps as native apps for mobile platforms, without needing to install SDKs on your own machine.

PhoneGap Build is free for open source apps, or costs $9.99 per month for up to 25 private app builds.

The Edge tools are only available through Creative Cloud, Adobe’s subscription service, cementing the company’s move to a subscription model for its products. As a tempter, Edge Animate is currently available even to those with the base, free subscription – though you have to agree to be on a marketing list for email, mail and telephone.

image

Will the Edge tools replace Dreamweaver, the web design tool in Creative Suite? I was told not, and that an update for Dreamweaver is in preparation. Dreamweaver is the “one production tool” as opposed to the Edge tools each of which focus on one narrow area of features. Adobe describes this as task-focused tools.

More information in yesterday’s San Francisco keynote here.

javascript, software development, web authoring

Dropbox turns to CoffeeScript to beat JavaScript syntactic noise

2 Comments

Dropbox is a high-profile convert to CoffeeScript, a language that has the elegance of Ruby or Python but compiles into clean JavaScript in order to run in the browser. The Dropbox team says that CoffeeScript fixes many of JavaScript’s “syntactic problems.” In addition, a porting exercise reduced 23,437 lines of JavaScript to 18,417 lines of CoffeeScript, code, and this brevity was considered the “strongest argument” in favour – even though many of those eliminated lines were just curly braces and parentheses.

In order to port the code, the team used the Js2coffee tool; a bit of a brain-twist, a tool to convert JavaScript to a language that later compiles back to JavaScript.

The whole post is worth a read, and gives before and after examples.

Consider also the following:

Google’s Dart is an alternative web language that compiles to JavaScript, as is Google Web Toolkit

Microsoft’s Office Web Apps are written in C# compiled to JavaScript with a version of Script#. Microsoft’s Roslyn compiler as a service project lets you copy and paste VB code as C# and vice versa, and is already also being used to compile C# as JavaScript. Microsoft’s Anders Hejlsberg is rumoured to be working on a JavaScript project.

JavaScript seems to be becoming the new Common Language Runtime, not that Microsoft’s .NET CLR is going away, but rather that JavaScript now better fulfils the goal: pick whatever language you like and run it in the browser. 

PostScript:

I was intrigued to note that the Dropbox post does not render properly in Internet Explorer 10. For some reason that must appeal to geeky humour, it includes code spoken as audio, but the audio tags fail:

image

instead of

image

Possible reasons: the Dropbox page has a DOCTYPE of XHTML 1.0, and the files are in .wav format where IE is documented only to support MP3 or MP4. IE10 therefore refuses to play the audio, which works fine in Google Chrome and Mozilla Firefox.

The significance of this is not so much the technicalities, but rather what it implies about how many people now use IE in the community most likely to read this post.

.net, professional, software development, web authoring

The mystery of unexpected expiring sessions in ASP.NET

2 Comments

This is one of those posts that will not interest you unless you have a similar problem. That said, it does illustrate one general truth, that in software problems are often not what they first appear to be, and solving them can be like one of those adventure games where you think your quest is for the magic gem, but when you find the magic gem you discover that you also need the enchanted ring, and so on.

Recently I have been troubleshooting a session problem on an ASP.NET application running on a shared host (IIS 7.0).

This particular application has a form with some lengthy text fields. Users complete the form and then hit save. The problem: sometimes they would take too long thinking, and when they hit save they would lose their work and be redirected to a login page. It is the kind of thing most of us have experienced once in a while on a discussion forum.

The solution seems easy though. Just increase the session timeout.  However, this had already been done, but the sessions still seemed to time out too early. Failure one.

My next thought was to introduce a workaround, especially as this is a shared host where we cannot control exactly how the server is configured. I set up a simple AJAX script that ran in the background and called a page in the application from time to time, just to keep the session alive. I also had it write a log for each ping, in order to track the behaviour.

By the way, if you do this, make sure that you disable caching on the page you are pinging. Just pop this at the top of the .aspx page:

<%@ OutputCache Duration="1" Location="None" VaryByParam="None"%>

It turned out though that the session still died. One moment it was alive, next moment gone. Failure two.

This pretty much proved that session timeout as such was not the issue. I suspected that the application pool was being recycled – and after checking with the ISP, who checked the event log, this turned out to be the case. Check this post for why this might happen, as well as the discussion here. If the application pool is recycled, then your application restarts, wiping any session values. On a shared host, it might be some else’s badly-behaved application that triggers this.

The solution then is to change the way the application stores session variables. ASP.NET has three session modes. The default is InProc, which is fast but not resilient, and for obvious reasons not suitable for apps which run on multiple servers. If you change this to StateServer, then session values are stored by the ASP.NET State Service instead. Note that this service is not running by default, but you can easily enable it, and our helpful ISP arranged this. The third option is to use SQLServer, which is suitable for web farms. Storing session state outside the application process means that it survives pool recycling.

Note the small print though. Once you move away from InProc, session variables are serialized, not just held in memory. This means that classes must have the System.Serializable attribute. Note also that objects might emerge from serialization and deserialization a little different from how they went in, if they hold state that is more complex than simple properties. The constructor is not called, for example. Further, some properties cannot sensibly be serialized. See this article for more information, and why you might need to do custom serialization for some classes.

After tweaking the application to work with the State Service though, the outcome was depressing. The session still died. Failure three.

Why might a session die when the pool recycles, even if you are not using InProc mode? The answer seems to be that the new pool generates a new machine key by default. The machine key is used to encrypt and decrypt the session values, so if the key changes, your existing session values are invalid.

The solution was to specify the machine key in web.config. See here for how to configure the machine key.

Everything worked. Success at last.

adobe, professional, Web, web authoring

Adobe extends SVG, HTML 5 support in Illustrator

Adobe has released a preview of the Illustrator CSS5 HTML5 Pack. There is already an HTML 5 Pack for Dreamweaver.

Illustrator CS5 could already export in SVG (Scalable Vector Graphics) format, but the pack adds some interesting features.

One is the ability to specify strokes and fills as variables, so that you can modify them in JavaScript.

image

Exporting an image that uses this feature creates a JavaScript file as well as the SVG itself.

You can also mark an Illustrator object as Canvas. This will convert the object to a bitmap that is drawn to a Canvas element within SVG.

There is also increased support for CSS (Cascading Style Sheets). You can use CSS to define fills, strokes, opacity, gradient, position, and named character styles.

Other features in the Pack include the ability to detect the HTML window size and vary the SVG that is delivered accordingly – to support mobile browsers.

When Apple’s Steve Jobs posted his thoughts on Flash – still online despite the company’s change of heart on cross-platform development tools for iPhone and iPad – he remarked:

Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.

Of course Adobe was doing this anyway, but it is interesting to see HTML 5 support now being extended. Export more HTML 5 goodness at the forthcoming MAX conference next month.

If you try the new HTML5 Pack read the installation instructions carefully. You have to back up certain files, otherwise it may affect whether you can apply future official updates.

internet, microsoft, professional, software development, web authoring, windows

Internet Explorer 9 Preview gets to 95% on Acid 3

8 Comments

Microsoft has released the fourth platform preview for Internet Explorer 9, which you can download here. This is the last preview before the beta release, expected in September.

When IE9 was first previewed, back in March, it scored only 55% on the Acid3 standards test – well ahead of IE8 which scores around 20%, but far short of rivals like Google Chrome and Apple Safari which achieve full marks. Mozilla Firefox is at 94%.

Acid 3

The new preview is at 95%. IE9 is now up there with them – but why not 100%?

According to UK Web Product Manager Mark Quirk, it is down to three features, two of which are related to SVG (Scalable Vector Graphics). Two points are lost because of SMIL (Synchronized Multimedia Integration Language) presentations, which Microsoft does not intend to support because a similar feature will be part of CSS in future. Two points are lost because of SVG fonts, which again Microsoft does not intend to support because it sees WOFF (Web Open Font Format) as the future standard here. One point is lost because of the inability to draw SVG fonts on a path, though there are other ways to draw fonts on a path.

The bottom line: IE9 will most likely stay at 95% right through to its final release.

Incidentally, IE9 JavaScript performance is wildly faster than IE8, thanks to the new “Chakra” engine. IE9 is on the left, Firefox 4 on the right :

image

So when will we get IE9? Although it is not long to September, there is a major difference between the preview and the coming beta, which is that the preview does not have a full user interface. It is mainly to show off the rendering and JavaScript engine. Therefore we can expect new features in the beta versus the preview. Despite that, Quirk says that Microsoft intends the beta to be “good quality for any user”, not just for brave developers and testers.

But how long before the final release? Microsoft is not saying, though when I suggested the first half of 2011 as a reasonable guess, Quirk reminded me that the beta will be high quality and that the release should therefore follow “not too long” after.

Since we will get much of HTML 5 in IE alongside the other popular browsers, do we still need Silverlight?

“As the number of the things you can implement with HTML clearly goes up, the need for Silverlight and Flash goes down,” said Quirk, though he added hastily, “The value that those players add needs to go higher.”

I’d add that even if IE9 is all that we hope, it will take years before older versions fall out of use. Recently the UK government said it will stick with IE6, and whatever you think of that decision, it shows how hard it is to get browsers upgraded everywhere. By contrast, plug-ins like Flash and Silverlight get updated rather fast. I noticed on Riastats today that over 50% of browsers now have the latest Silverlight, and 39% already have Flash 10.1 – over 90% have Flash 10 or higher.

image

If you combine that issue with things like video playback that are problematic even in HTML 5, it suggests that plug-ins will be with us for the foreseeable future, though it is quite possible that their use may decline.

Another factor is tool support, mature for Flash and Silverlight, but not for the newest features of HTML. After IE9 appears, will Microsoft come up with tools that properly support it, in Expression Web and Visual Studio? “We have to, it’s as simple as that,” says Quirk, though he adds, “we haven’t said when.”

adobe, apple, flash, professional, software development

Adobe financials: strong Creative Suite 5 and Flash, claims company undervalued

Adobe has released its financial results for its second quarter, reporting $227.3 million net income (GAAP) compared to $161.4 million in the same quarter last year; and revenue of $943 million which it says is 34% year on year growth.

Much of this is thanks to a successful launch for Creative Suite 5, which accounts for 56% of Adobe’s revenue. However, Adobe has also reported 12% year-on-year growth for LiveCycle, its enterprise server products about which I learned last week in Amsterdam. The “platform” segment, which includes the Flex development tools, Cold Fusion, and Flash media services, is also growing, from $36.8 million in Q2 2009 to $45.4 million in Q2 2010.

CEO Shantanu Narayen is upbeat, saying “we believe Adobe is significantly undervalued today” and backing his judgement with a share buyback program.

I was particularly interested in the focus on Flash in Adobe’s statements and conference call:

Approximately 3.5 million Flash designers and developers are working with Flash-based solutions today, and their ranks grew by 59 percent in 2009

said Narayen; while Executive VP Mark Garrett noted:

CS5 products containing Flash authoring and output as a product component achieved revenue growth of 22% version-over-version to date

making the point that this exceeded the growth of CS5 overall.

Any clouds on the horizon? Two that I can think of. One is that Apple wants to kill Flash. CEO Steve Jobs says:

Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.

The other issue is that Adobe is dependent on Creative Suite, desktop software that arguably will be a business hard to sustain in the cloud and device era.

Still, these are good figures, the best we have seen from Adobe for a while, and despite the efforts of Steve Jobs both Adobe and Flash are prospering right now. A side-effect of Apple’s Flash downer is that competitors have hastened to support it, with Google building Flash support deeply into its Chrome browser.

Detailed figures from Adobe are here.