Azure pulls closer to AWS

May 11, 2013

It is no secret that Windows Azure has historically lagged far behind Amazon EC2 in the market and in the hearts and minds of most developers.  Azure started out life (in 2008) as a somewhat clunky 1.0 offering.  The initial Platform as a Service (PaaS) model was really only useful for running .Net applications in the cloud.  While the process was straight-forward and the applications worked well in the cloud, publishing the project to Azure was slow.  Further, once you had the project in the cloud it was not very intuitive how you could scale the application.  Finally, there was not much support for languages other than C#, VB.Net, or C++ or common frameworks like Drupal, WordPress, etc.

Things have really changed in Redmond and I am actually thinking that Azure may have actually pulled even with or even eclipsed in some areas Amazon.  In mid-2011 Microsoft moved their best development manager Scott Guthrie onto Azure.  Also working on the Azure project since 2010 is Mark Russinovich arguably Microsoft’s best engineer.  At this point Microsoft truly has their “A” team on Azure.

I used to say that what most developers was is Infrastructure as a Service (IaaS) – like Amazon EC2 has had since day one.  The difference between PaaS and IaaS means that you can deploy and manage your own application in the cloud vs. being constrained to compiled / packaged offerings.  I’ve not been a fan of PaaS based on my early experience with Azure, Google AppEngine, and Salesforce.com Force.com.  The common thread in all of these platforms was that you were by design limited in terms of your ability to manage the underlying platform.  If a particular technology was not installed on the platform you could not use it.  For example, AppEngine only supports Java, Python, and Go.

I’ve since changed (or possibly evolved) my thinking about PaaS.  As a developer I want to focus on delivering features to customers.  I would prefer not to have to worry about hosting as long as the platform gives me enough control to get my job done.  Hosting should provide easy deployment, ability to tune the application, ability to debug the application, and easily scale.  Azure’s initial PaaS solution was none of these.  In the middle of 2012 Azure began supporting a PaaS technology called Web Sites.  Web sites allow you to quickly and easily create a site, deploy pretty much any language to it, and scale it with only a few clicks.  Is so slick that it’s caused me to re-think whether I really need IaaS on Azure.  If I don’t have to why would I mess with my own VMs?  At this point Microsoft seems to have the best of both worlds (PaaS and IaaS) – a more mature version of web roles, web sites, and VMs.  Here is a nice comparison of the applications for each model and an analysis of the pros and cons of sites vs. roles.

Amazon has been innovating at such a rapid pace that pretty much at every turn Azure has historically looked like an inferior offering by comparison.  Again it would seem like Microsoft is not satisfied with also ran status.

  • One of the big things that was missing from Azure ability to connect to corporate networks.  Microsoft recently announced that they would be adding additional networking capabilities to Azure.
  • Amazon has for a while had a marketplace for products and services that are add-on offerings to AWS.  Microsoft announced a similar offering the fall of 2012 at the Build Conference and has come a long way in a short period of time.  Microsoft actually has two offerings the Azure Store for developers and the Azure Marketplace analysts and information workers.  My sense is that the Marketplace has been around for longer than the Store as it has a much richer set of offerings.  Some of the offerings overlap between the Store and the Marketplace. For example, the Worldwide Historical Weather Data can be access from both places.
  • Finally, and perhaps most significantly as part of their General Availability announcement for IaaS Microsoft committed to matching Amazon’s pricing on commodity services – compute, storage, and bandwidth.

Leave a Comment » | cloud computing, SaaS | Tagged: , | Permalink
Posted by scooter998

Visual Studio Code Metrics

April 5, 2013

I recently stumbled across a feature in Visual Studio called Code Metrics.  As the title would imply the feature calculates information about the quality of your code.  As with most things like this your mileage may vary and developer instinct will kick in when the results don’t make sense.  On the other hand this is a quick and easy to use tool to use which can give you a sense of where you may have an issue.  I found the feature to be very straight-forward to use.  You access it by right clicking in the Solution Explorer.

Image

After running it, five pieces of data are provided.  See the MSDN Reference for more detail.

Image

  • Maintainability Index (scale 0-100, where higher is better).  Good is 20 to 100, Warning is 10-19, and Issue is 0-9.
  • Cyclomatic complexity (lower is better).  This measures the number of independent paths through a program’s source code.  I remember from my Computer Science days that any given module with a value greater than 10 is unmaintainable.  Switch statements have the characteristic of driving up the CC metric but in practice are generally not hard to maintain.
  • Depth of Inheritance (lower is better).  The theory goes the more the inheritance the more difficult it may be to find where a given function is defined.
  • Class Coupling (lower is better).  Obviously the more one class can stand on its own the better and more maintainable it will be.  Ideally you want something to be loosely coupled with high cohesion.
  • Lines of Code (lower is better).  Again from the common sense department the smaller the module the easier it is to understand.

Some things to note.

  • The “X” icon exports the data to Excel
  • Functions rollup into collapsible rows.  In my example below a complexity of 133 is a rollup of all the underlying methods.
  • There is a useful filter function to find code that meets a specific minimum or maximum criteria.

This feature comes pre-installed in Visual Studio 2012.  For older versions I believe you may need to use a plug-in.

Leave a Comment » | Programming | Tagged: , | Permalink
Posted by scooter998

Best Practices for Tracking Agile Velocity Using Story Points

March 16, 2013

Scrum breakfast has a a great blog post which talks about Story Points:

  • Estimates are done by the team (if possible, the whole team) who will actually perform the work. So the team defines what a story point is. The classical approach is to look at list of backlog entries, take what appears to be the easiest, and declare that is a 2. Everything else is estimated relative to that task.
  • Story Points are usually estimated on the Cohn Scale (named for Mike Cohn, who popularized the concept): 0, 1, 2, 3, 5, 8, 13, 20, 40, 100.
  • So if we want to answer how long will it take to develop a particular software, we add up the story points, divide by the velocity, and that gives us the time.
  • Where does velocity come from? Before the first sprint, we guess. In the first sprint, the team accepts work based on gut feeling and discussion. After each Sprint, we measure the velocity. After two or three Sprints, the average measured velocity can be used to predict the velocity in the future, and thereby the completion date.

Mike Cohn’s blog on Story Points.  In this blog post he recommends that the best practice is to use both story points and hours for estimating the product backlog. 

  • I don’t use story points for sprint planning because story points are a useful long-term measure. They are not useful in the short-term.
  • Velocity is a useful long-term predictor but is not a useful short-term predictor.
  • Velocity will bounce around from sprint to sprint. That’s why I want teams to plan their sprints by looking at the product backlog, selecting the one most important thing they could do, breaking that product backlog item / user story into tasks and estimating the tasks, asking themselves if they can commit to delivering the product backlog item, and then repeating until they are full. No discussion of story points. No discussion of velocity. It’s just about commitment and we decide how much we can commit to by breaking product backlog items into tasks and estimating each. This is called commitment-driven sprint planning.
  • When a team finishes planning a sprint in this way it is indeed likely that the number of story points they have unknowingly committed to should be close to their long-term average but it will vary some. It will also be true that a team will commit to approximately the same number of hours from one sprint to the next. I use the term capacity to refer to this number of hours because velocity is reserved for referring to measuring the amount of work planned or completed as given in the units used to estimate the product backlog (which I recommend be done using story points).

Leave a Comment » | Agile | Tagged: , | Permalink
Posted by scooter998

Learning about Hadoop on Azure

May 18, 2012

In order to learn about Hadoop on Azure I crunched 5GB of ftp logs and counted the top 100 messages.  This is a variation on the code sample that counts words in Leonardo Da Vinci Project Gutenberg EBook.  There is a similar Hadoop application that extracts information from IIS logs.  

 

1.       Sign-in using access code and  provision a cluster. 

·         NB: This takes approximately 20 minutes.  The cluster appears to be very temporary – ~48 hours.   

·         Reference: Windows Azure Deployment of Hadoop-based services on the Elastic Map Reduce (EMR) Portal

2.       Load up analysis data on Azure Blob storage. 

·         Once the data is loaded you can query the ABS using the command #ls asv://ftplog/sample

 

[21] Sat 15Oct11 00:00:31 – (013831) 220 Serv-U FTP Server v11.0 ready…

[02] Sat 15Oct11 00:00:31 – (013831) Closed session

 

·         NB: Transferring 5GB to ABS took approximately 8 hours

·         Reference: Setup Azure Blob Store for Hadoop on Azure CTP

3.       Copy the data from ABS to Hadoop (Optional)

·         NB: This process took about 60 seconds

·         Reference: How to transfer data between different HDFS clusters.

4.       Execute the counter job

·         Upload “FTPLogMessageCounter.js” using fs.put(“bin”)

 

var map = function (key, value, context) {

    if (!value) {

        return;

    }

    var words = value.substring(37);

    context.write(words,1);

 };

 

var reduce = function (key, values, context) {

    var sum = 0;

    while (values.hasNext()) {

        sum += parseInt(values.next());

    }

    context.write(key, sum);

};

 

·         Run the query interactively – using the command: pig.from(“asv://ftplog/sample”).mapReduce(“bin/FTPLogMessageCounter.js “, “word, count:long”).orderBy(“count DESC”).take(100).to(“log_output”)

·         View the results using the command: file = fs.read(“log_output”)

·         NB: Make sure to use the word “pig.” Many of the Hadoop on Azure docs leave this part out.

·         Reference: Running a JavaScript Map/Reduce Job from Interactive JavaScript Console

 

General Reference:

·         Hadoop-based Services on Windows Azure How To Guide

·         Introduction to Hadoop on Windows Azure (video)

·         Hadoop on Azure (video)

·         Hadoop on Azure Yahoo Message Group

 

Leave a Comment » | cloud computing | Tagged: , | Permalink
Posted by scooter998

What do you do when demand for your application outgrows the capabilities of an RDBMS?

February 11, 2012

Relational Database Management Systems (RDBMS) systems date back to the early 1970s and are characterized by a fixed schema, SQL (structured query language), and ACID compliance. (Atomicity: Transactions are complete or not complete, Consistency: leaves the system in a known state, Isolation: impacts only itself, and is Durable: permanent.) Data is organized in rows and columns like a spreadsheet and relationships can be built between different tables. In general relational databases work incredibly well until you hit “big data.” Big data is often defined using the three V’s velocity, volume, and variety.

  • Volume – multiple terabyte or more
  • Variety – numbers, audio, video, text, streams
  • Velocity – how fast the data is collected and requested

clip_image001

Source: Montis.com

With the volume of data they need to process every second, it is easy to see why Google, Twitter, Facebook, and many other sites like them had to look for options beyond RDBMS. Over the past 10 years a technology known as NoSQL has emerged largely in response to the challenge of solving big data problems. Generically speaking NoSQL solutions have the following characteristics.

  • No-schema required upfront
  • Can store massive amounts of data
  • Auto-sharding / elasticity (spreading data over multiple machines)
  • Distributed query support (ability to execute a query on shared data)
  • BASE (basically available, soft state, eventually consistent) not ACID

There is a raft of NoSQL solutions available for a variety of different business problems. The following figure from the 451 Group is an interesting illustration of the current marketplace. The acronym SPRAIN refers to:

  • Scalability – hardware economics
  • Performance – MySQL limitations
  • Relaxed consistency – CAP theorem (*)
  • Agility – polyglot persistence (use the right database for given problem)
  • Intricacy – big data, total data
  • Necessity – open source

* CAP (or Brewer’s) theorem says that a distributed computer system can only simultaneously satisfy two of three guarantees: consistency, availability, and partition tolerance.

clip_image002

Source: 451 Group

Having spent time putting a NoSQL (Mongo) database into place I can attest to the fact that it’s harder than it looks (hard to query directly, limited support, limited reporting, and steep learning curve). That said, the products and documentation are getting better, developers are becoming more comfortable with the technology, and companies like Couchbase are sprouting up to provide support. Today NoSQL is a great thing if you have the opportunity to start from a clean sheet of paper. In particular the no upfront-schema works really well with the MVC programming model (i.e., Rails, ASP.Net MVC3).

Many organizations don’t have the luxury of starting over and have RDBMS-based applications that for one reason or another face performance or scalability challenges that for business reasons (time, cost, skill, etc.) not technical challenges cannot be addressed with a new database. As Couchbase points out RDBMS developers have resorted to “sharding” – putting data across multiple servers, denormalizing data – adding redundant columns to the schema to optimize performance, and adding memory cache to optimize query performance. None of these solutions is really the answer and for an organization facing a big data problem.

Another way to optimize the performance of a database bound application is by minimizing query time by loading the database itself into an SSD or flash memory. The “catch” so to speak is that flash memory is not cheap but on the other hand it is much much less expensive than re-writing software. FusionIO makes a flash memory product called ioDrive. IoDrive is a PCI card that effectively behaves like an SSD drive. Because FusionIO has designed the card to integrate at the memory tier they have managed to minimize I/O bottlenecks. “Spinning disks” have a read rate of approximately 200-300 IOPS (I/O Operations per second); IoDrive can achieve a rate of almost 100K IOPS.

References:

Leave a Comment » | cloud computing | Tagged: , , | Permalink
Posted by scooter998

Hosting an MVC3 (with membership) application on EC2

February 4, 2012

One of my side projects was to get an MVC3 application that uses the Razor View Engine and Membership hosted on EC2 running Linux. I found some amazingly helpful resources along the way – particularly from Nathan Bridgewater at Integrated Web Systems.

Step one of the project is to get an EC2 instance prepped and ready.  Basically I followed the cookbook instructions on Bridgewater’s site - Get Started with Amazon EC2, Run Your .Net MVC3 (RAZOR) Site in the Clould with Linux Mono.

The exact commands I used:

Create new AMI ID ami-ccf405a5 and associate elastic IP (xx.xx.xx.xx)
sudo apt-get update &;& sudo apt-get dist-upgrade –y
wget http://badgerports.org/directhex.ppa.asc
sudo apt-key add directhex.ppa.asc
sudo apt-get install python-software-properties
sudo add-apt-repository 'deb http://ppa.launchpad.net/directhex/ppa/ubuntu lucid main'
sudo apt-get update
sudo apt-get install mono-apache-server4 mono-devel libapache2-mod-mono
cd /srv
sudo mkdir www; cd www
sudo mkdir default
sudo chown www-data:www-data default
sudo chmod 755 default
cd /etc/apache2/sites-available/
sudo vi mono-default (see mono-default, change IP address)
cd /etc/apache2/sites-enabled
sudo rm 000-default
sudo ln -s /etc/apache2/sites-available/mono-default 000-mono
sudo mv /var/www/index.html /srv/www/default
sudo vi /srv/www/default/index.html
sudo apt-get install apache2
sudo service apache2 restart
Test in a browser via IP address (you should see the default apache page)

My mono default:

# xx.xx.xx.xx is my Elastic IP address
  ServerName xx.xx.xx.xx
  ServerAdmin myemail@domain.com
  DocumentRoot /srv/www/default
  MonoServerPath xx.xx.xx.xx "/usr/bin/mod-mono-server4"
  MonoDebug xx.xx.xx.xx true
  MonoSetEnv xx.xx.xx.xx MONO_IOMAP=all
  MonoApplications xx.xx.xx.xx "/:/srv/www/default"

    Allow from all
    Order allow,deny
    MonoSetServerAlias xx.xx.xx.xx
    SetHandler mono
    SetOutputFilter DEFLATE
    SetEnvIfNoCase Request_URI "\.(?:gif|jpe?g|png)$" no-gzip dont-vary

    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/javascript

Step two is to test mono with a simple Asp.net page.  Put this file into /srv/www/default.  Edit with sudo and view via browser at http://xx.xx.xx.xx/test.aspx.

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ASP.Net Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script runat="server">
private void Page_Load(Object sender, EventArgs e)
{
lblTest.Text = "This is a successful test.";
}
</script>
</head>
<body>
<h1>
This is a test page</h1>
<asp:Label runat="server" ID="lblTest"></asp:Label>
</body>
</html>
If problems are encountered check logs in /var/log/apache2/access.log or /var/log/apache2/error.log
Step three is to get MySql installed and tested with this simple application.
sudo apt-get install mysql-server
sudo apt-get install libmysql6.1-cil
CREATE DATABASE sample; USE sample;
CREATE TABLE test (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(25));
INSERT INTO sample.test VALUES (null, 'Lucy');
INSERT INTO sample.test VALUES (null, 'Ivan');
INSERT INTO sample.test VALUES (null, 'Nicole');
INSERT INTO sample.test VALUES (null, 'Ursula');
INSERT INTO sample.test VALUES (null, 'Xavier');
CREATE USER 'testuser'@'localhost' IDENTIFIED BY 'somepassword';
GRANT ALL PRIVILEGES ON sample.* TO 'testuser'@'localhost';
FLUSH PRIVILEGES;

Put this file into /srv/www/default. Edit with sudo and view via browser at

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="MySql.Data.MySqlClient" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ASP and MySQL Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script runat="server">
private void Page_Load(Object sender, EventArgs e)
{
string connectionString = "Server=127.0.0.1;Database=sample;User ID=testuser;Password=somepassword;Pooling=false;";
MySqlConnection dbcon = new MySqlConnection(connectionString);
dbcon.Open();

MySqlDataAdapter adapter = new MySqlDataAdapter("SELECT * FROM test", dbcon);
DataSet ds = new DataSet();
adapter.Fill(ds, "result");

dbcon.Close();
dbcon = null;

SampleControl.DataSource = ds.Tables["result"];
SampleControl.DataBind();
}
</script>
</head>
<body>
<h1>Testing Sample Database</h1>
<asp:DataGrid runat="server" ID="SampleControl" />
</body>
</html>

Step four is to get the simplest possible MVC3 Razor application functioning on Ubuntu / EC2.  Again Bridgewater has a more detailed explanation of what to do at his website linked here.

  1. Go into Visual Studio 2010 and create a new project MV3 / Razor project making no changes to the default project template.
  2. Build it and locally.
  3. Ensure that these references are set to “copy local”: System.Web.Mvc, System.Web.Helpers, and System.Web.Routing
  4. Copy System.Web.Razor, System.Web.WebPages, System.Web.WebPages.Razor, System.Web.WebPages.Deployment into your application’s bin directory.  You will find these files in in C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblies
  5. Publish the application to a scratch directory
  6. Copy the published application to your EC2 machine.  I used git bash to tar (tarr –zcvf aws.tar.gz *) the files as Bridgewater recommends but could not get scp to work so I ftp’d the file over.
  7. On the EC2 machine cd /srv/www/default; sudo mv /home/ubuntu/aws.tar.gz; sudo tar –zxvf *.gz; sudo chown –R www-data;www-data *; sudo chmod 755 *; sudo service restart apache2 restart
  8. Confirm working from browser by checking default IP address http://xx.xx.xxx
  9. NB: I had to hit refresh several times before the application would work.

Step five is to use implement membership using MySQL.

  1. On your Windows machine.  Edit the default controller and decorate it with the [Authorize] attribute.
  2. Edit your web.config shown below.  This is where it can get hairy.  If you want to run this locally on Windows you need to install the MySQL connector for .Net and Mono http://dev.mysql.com/downloads/connector/net/.  Make sure that you reference system.web.  On Ubuntu the application uses system.data.  The trick is to add them both so you can run the same code on Ubuntu and Windows.  Also notice that I’ve made database password clear text.  As Nathan notes this is not a good practice.
  3. On the Ubuntu machine Go into MySQL and create a database called membership.
  4. Deploy the application to EC2 and test the application using step 4.
<?xml version="1.0"?>

<!--
 For more information on how to configure your ASP.NET application, please visit

http://go.microsoft.com/fwlink/?LinkId=152368

 -->

<configuration>
 <connectionStrings>
 <add name="Default"
 connectionString="data source=127.0.0.1;user id=aspnet_user;
 password=secret_password;database=membership;"
 providerName="MySql.Data.MySqlClient" />
 </connectionStrings>

<system.web>
 <compilation debug="true" targetFramework="4.0">
 <assemblies>
 <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
 <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
 <add assembly="System.Web.Mvc, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
 </assemblies>
 </compilation>

<authentication mode="Forms">
 <forms loginUrl="~/Account/LogOn" path="/" timeout="2880" />
 </authentication>

<!--NOTE that "hashed" isn't supported with the public release of MySql.Web 6.3.5 under
 Mono runtime. But I can't bring myself to share sample code that doesn't hash the
 passwords by default. ;)  The version included with this sample project is slightly modified to
 allow hashed passwords in Mono. I highly recommend checking out the latest version of
 MySql .NET Connector. http://dev.mysql.com

 Also, I found that you have to rebuild MySql.Data and MySql.Web
 using .NET 4.0 profile if you want it to work with Asp.Net 4.0 under Mono. This is a known bug and should
 be published in upcoming versions of the connector. -->
 <membership defaultProvider="MySqlMembershipProvider">
 <providers>
 <clear/>
 <add name="MySqlMembershipProvider"
 type="MySql.Web.Security.MySQLMembershipProvider, mysql.web"
 connectionStringName="Default"
 enablePasswordRetrieval="false"
 enablePasswordReset="true"
 requiresQuestionAndAnswer="false"
 requiresUniqueEmail="true"
 passwordFormat="hashed"
 maxInvalidPasswordAttempts="5"
 minRequiredPasswordLength="6"
 minRequiredNonalphanumericCharacters="0"
 passwordAttemptWindow="10"
 applicationName="/"
 autogenerateschema="true"/>
 </providers>
 </membership>

<roleManager enabled="true" defaultProvider="MySqlRoleProvider">
 <providers>
 <clear/>
 <add connectionStringName="Default"
 applicationName="/"
 name="MySqlRoleProvider"
 type="MySql.Web.Security.MySQLRoleProvider, mysql.web"
 autogenerateschema="true"/>
 </providers>
 </roleManager>

<profile>
 <providers>
 <clear/>
 <add type="MySql.Web.Security.MySqlProfileProvider, mysql.web"
 name="MySqlProfileProvider"
 applicationName="/"
 connectionStringName="Default"
 autogenerateschema="true"/>
 </providers>
 </profile>

<pages>
 <namespaces>
 <add namespace="System.Web.Mvc" />
 <add namespace="System.Web.Mvc.Ajax" />
 <add namespace="System.Web.Mvc.Html" />
 <add namespace="System.Web.Routing" />
 </namespaces>
 </pages>

<!--Don't forget to update this... I left it open to make it easier to debug.-->
 <customErrors mode="Off"/>
 </system.web>

<system.data>
 <DbProviderFactories>
 <clear/>
 <add name="MySQL Data Provider"
 description="ADO.Net driver for MySQL"
 invariant="MySql.Data.MySqlClient"
 type="MySql.Data.MySqlClient.MySqlClientFactory, MySql.Data"/>
 </DbProviderFactories>
 </system.data>

<system.webServer>
 <validation validateIntegratedModeConfiguration="false"/>
 <modules runAllManagedModulesForAllRequests="true"/>
 </system.webServer>

<runtime>
 <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
 <dependentAssembly>
 <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
 <bindingRedirect oldVersion="1.0.0.0" newVersion="2.0.0.0" />
 </dependentAssembly>
 </assemblyBinding>
 </runtime>
</configuration>

Leave a Comment » | Programming, web 2.0 | Tagged: , , | Permalink
Posted by scooter998

HTML5 Validation using Yepnope

November 23, 2011

In this months’ MSDN magazine there is an interesting article on Browser and Feature Detection.  What really caught my eye was the piece on Modernizr, the JavaScript library that implements browser feature detection.

Modernizr has built-in detection for most HTML5 and CSS3 features that’s very easy to use in your code. It’s very widely adopted and constantly enhanced. Both Modernizr and jQuery are shipped with the ASP.NET MVC tools.

As HTML5 and CSS3 become more and more prevalent feature detection is increasingly relevant.

A growing number of ready-made “fallbacks” for many HTML5 features, known as shims and polyfills, can ease that burden. These come in the form of CSS and JavaScript libraries or sometimes even as Flash or Silverlight controls that you can use in your project, adding missing HTML5 features to browsers that don’t otherwise support them. The difference between shims and polyfills is that shims only mimic a feature and each has its own proprietary API, while polyfills emulate both the HTML5 feature itself and its exact API. So, generally speaking, using a polyfill saves you the hassle of having to adopt a proprietary API.  The HTML5 Cross Browser Polyfills collection on github contains a growing list of available shims and polyfills.

As .Net developers we are usually insulated from browser incompatibility issues, however, there may be situations where you are not using the .Net framework.  There is a good example of using yepnope (a conditional resource loader) for HTML5 Form Validation at CSSKarma.  I tweaked and re-implemented  the example using a .Net MVC application which you can see below.  A couple of “gotchas”:

· Modernizr is part of the .Net MVC tools that come from Microsoft, however, yepnope is not in the release of the MVC tools that at least I have on my machine.  You will need to download version 2.0 from modernizr.comto get yepnope support.

· The JQuery syntax for working with YepNope takes some getting used to.  Make sure to load JQuery first.

· Visual Studio 2010 does not seem to know about HTML5 and will warn of a validation when you use its attributes. See figure #2.

clip_image002[4]

Figure 1 – MyValidation.js – based on the example at CSSKarma

clip_image004

Figure 2 – HTML5 Source

clip_image006

Figure 3 – Output

References:

http://yepnopejs.com/

http://haz.io/

http://modernizr.com

Leave a Comment » | Programming, web 2.0 | Tagged: | Permalink
Posted by scooter998

« Previous Entries
Follow

Get every new post delivered to your Inbox.

Join 46 other followers