2005 2006 2007 2008 2009 2010 2011 2015 2016 2017 2018 aspnet azure csharp debugging docker elasticsearch exceptions firefox javascriptajax linux llblgen mongodb powershell projects python security services silverlight training videos wcf wpf xag xhtmlcss

Comic Strip: Enterprise .NET/PHP



Recently I ran across a really awesome web site called ToonDoo.  The web site basically allows you to create your own comic strips using a simple, yet feature rich Flash application.  Today I learned about a few other web sites that do something similar.  In light of the nonsensical anti-.NET drivel I hear constantly from ignorant outsiders, I thought I would put a few of my encounters into a few strips.  Here is the first…

Cwalina's Framework Engineering Lecture Posted



In my mind the single most important aspect of any system is usability.  Unless the context states otherwise, when I use the term "optimize" or "efficiency" I am always always talking about usability optimization and efficiency.  Things can be fast with a small footprint, but if you can't figure out how to use it right away or continually confuses your methods for your fields, then it doesn't really matter.  Fortunately, Microsoft agrees with this.  The days of every company writing their own coding-guidelines are gone and we .NET developers been unified under the great Framework Design Guidelines ("FDG") that Krzysztof Cwalina and Brad Abrams have so graciously given us.

To help further the unity in the community, Krzysztof recently posted a lecture on his blog entitled "Framework Engineering: Architecting, Designing, and Developing Reusable Libraries".  Here is the abstract of the lecture:

This session covers the main aspects of reusable library design: API design, architecture, and general framework engineering processes. Well-designed APIs are critical to the success of reusable libraries, but there are other aspects of framework development that are equally important, yet not widely covered in literature. Organizations creating reusable libraries often struggle with the process of managing dependencies, compatibility, and other design processes so critical to the success of modern frameworks. Come to this session and learn about how Microsoft creates its frameworks. The session is based on experiences from the development of the .NET Framework and Silverlight, and will cover processes Microsoft uses in the development of managed frameworks.

This video is, of course, not the only video on such an incredibly critical topic.  Many years ago, Brad Abrams (and friends) gave a lecture series to Microsoft employees on the topic of framework design guidelines.  These videos don't just cover the critically important topic of name guidelines, but also CLR performance topics, interopability guidelines, security topics, as well as various others.  It's a video series that's essential to serious .NET development.

More importantly then these videos though, is the classic work produced by Krzysztof and Brad entitled "Microsoft Framework Design Guidelines".  At the time of this writing, this book has 28 Amazon.com customer reviews and is still at five stars.  Look at a few of the review titles: "A must have for any C# Developer or Architect", "For the individual who wants to rise above the masses", "If you only ever buy one .NET book, make it this one", "AWESOME * 10 = MUST HAVE;" and my personal favorite: "Passionate About Quality?"  These reviews give you a good idea of the level of community acceptance that the framework design guidelines have.  One reviewer even said "I would pay $5 per page for this book, and have found it to be, by far, the most outstandingly useful technical book I've read."  This book covers in detail many of the aspects (and often times more) that have been covered in the videos.  In fact, the videos are actually on the DVD that comes with the book.

The book is also not simply a set of laws.  Throughout the book Microsoft architects and major Microsoft community leaders like Jeffery Richter make comments on various aspects of the framework.  Sometimes they explain why a rule is stated in a certain way and other times they emphasis how crucially important a rule is.  A few of the comments in the book explain problems in the .NET framework stemming from the fact that the guidelines were still in development (people used to say C# looked like Java-- well, many people used Java's nearly obfuscated coding standard!)  At one point in the book one of the authors explains a usability study for .NET streamed and right-out admitted what most of us already know: .NET streaming is extremely non-intuitive!

Many times I hear people say that the success of the .NET framework comes from it's extremely efficient garage collection model, it's flexible common language runtime (in contrast to Java's platform runtime) and it's powerful JIT model.  All those things are crucial, but ease of use is even more at the heart of .NET.  Abstraction in framework design can be defined as the increasing of the semantic value or usability of any entity and it's at this point where we can see .NET far outshine Java and PHP.  I've all but forgotten how to work with pointers, but it's when I forgot my coding standard that I'll start to become obsolete.  It's been said that the success of Windows was driven by the very open nature of the Win16/Win32 API.  Similarly, I highly suspect that it's the the beautiful abstraction with extremely high usability that explains .NET's sheer success.  There's only so much marketing can do; at some point a product has to stand on it's own (even then, Programmers can see though marketing!).  This beautiful abstraction and extremely high usability if course due to the existence and enforcement of the FDG.

To be clear, when I talk about FDG, I'm not simply talking about FXCop rules.  I typically break the .NET framework rules down into three levels: CLS-compliance, FXCop compliance, FDG compliance, and the iDesign standard.  If you do not strictly enforce CLS-compliance, then you may very well be completely stuck in the next version of .NET.  Who knows how non-Microsoft compilers will become.  FXCop will catch problems in your CLS-compliance and it will also catch many of the FDG violations as well.  The FDG rules, however, also cover various aspects of security and performance that only a human can check.  Lastly, when people often mention the FDG, many times what they really mean is the iDesign standard, edited by Microsoft Software Legend Juval Lowy.

In fact, I often use the terms "Framework Design Guidelines" and iDesign standard interchangeably.  They aren't the same thing, but in some contexts it's acceptable to mix them.  Whereas the FDG is primarily for the public interface of a framework, the iDesign standard covers both the public and internal.  The term "iDesign standard" may not be familiar to all, but what represents is.  It's been the .NET coding defacto standard since 2003.  In fact, when you crack open any APress, Wrox, or Sam Publishing book, you will probably be looking at code following the iDesign standard.  Further, the default settings for Visual Studio is the iDesign code layout. 

Every .NET developer knows it and just about everyone follows it.  Some may think the iDesign standard is optional and since it covers private code and in a sense it is optional, but, to be sure, if you are following the FDG rules and the iDesign standard, you have immediately chopped the learning curve of your system by an enormous factor.  Also, if you ever go public with your application (i.e. go open source), you will need to make sure you follow the FDG standard (which includes CLS and FXCop compliance) and the iDesign standard.  Otherwise, your system will probably have virtually no acceptance.

In closing, I should mention that Krzysztof Cwalina and Brad Abrams are releasing the 2nd edition of their famous book, due September 29, 2008.  You can, of course, pre-order on Amazon.  You can be sure that I will!

Links

Dojr.NET (Dojo RPC Library .NET 2.0)



In my overview of Dojo, I mentioned that Dojo provides a nice service abstraction layer in the form of dojo.rpc.  This is an absolutely astounding feature, yet it's so simple.  Instead of making all kinds of functions and setting up and XHR object, Dojo allows you to call server methods using a very simplified syntax.  The model should be familiar to anyone who has worked with SOAP services.  In these types of services, you are given a scheme and, depending on what client you are using, you can create a client-side proxy for all interaction with the service.  This is how the dojo.rpc feature works.  When you want to access a service, give Dojo the appropriate service metadata it needs to create a proxy and just call your service functions on the proxy.

Using dojo.rpc

In Dojo, this schema is called a Simple Method Description (SMD) and looks something like this.

var d = {
  'methods':
    [
      {
        'name':'getServerTime',
        'parameters':[
          {'name':'format'}
        ]
      },
      {
        'name':'getServerTimeStamp',
        'parameters' :[
        ]
      }
    ],
    'serviceType':'JSON-RPC',
    'serviceURL':'/json/time/'
}

With this SMD data, you create a proxy by getting and instance of the dojo.rpc.JsonService object setting the SMD in the constructor, like this:

var timeProxy = new dojo.rpc.JsonService(d);

From here you can call methods on the proxy and set a callback:

timeProxy.getServerTimeStamp( ).addCallback(function(r) { alert(r); });

Upon execution, this line will call the getServerTimeStamp method described in the SMD and route the output through the anonymous function set in the addCallback function.  If you would like, however, you can defer the callback by calling the service now and explicitly releasing the callback later.  In the following example, the first line calls the server immediately and the second releases the callback.

var deferred = timeProxy.getServerTimeStamp( );


deferred.addCallback(function(r) { alert(r); });

This is great, but what about the server?  As it turns out, Dojo, sends JSON to the service.  You can see this for yourself by taking at keep at the Request.InputStream stream in ASP.NET:

StreamReader reader = new StreamReader(Request.InputStream);
String data = reader.ReadToEnd( );

Below is the data that was in the stream.  As you can see, this is extremely simple.

{\"params\": [], \"method\": \"getServerTimeStamp\", \"id\": 1}

Providing Server Functionality

Since we are working in .NET, we have at our disposal many mechanisms that can help us deal with various formats, some of which that can really help simplify life.  As I explained in my XmlHttp Service Interop Series, providing communication between two different platforms isn't at all difficult, provided that you understand the wire format in between them.  In part 3 of that same series, I explained how you could use XML serialization to quickly and powerfully interop with any XML service, including semi-standard a SOAP service.  Furthermore, you aren't limited to XML.  Provided the right serializer, you can do the same with any wire format.  For our purposes here, we need a JSON serializer.  One of my favorites is the Json.NET framework.  However, to keep things simple and to help us focus more on the task at hand, I'm going to use the .NET 3.5 DataContractJsonSerializer object.  If you are working in a .NET 2.0 environment with a tyrannical boss who despises productivity, you should check out Json.NET (or get a new job).

To begin our interop, the first thing we need is a type that will represent this JSON message in the .NET world.  Based on what we saw in the ASP.NET Input Stream, this should be easy enough to build:

[DataContract]
public class DojoMessage
{
    [DataMember(Name = "params")]
    public String[] Params;
[<span style="color: #2b91af">DataMember</span>(Name = <span style="color: #a31515">"method"</span>)]
<span style="color: blue">public </span><span style="color: #2b91af">String </span>Method;


[<span style="color: #2b91af">DataMember</span>(Name = <span style="color: #a31515">"id"</span>)]
<span style="color: blue">public </span><span style="color: #2b91af">Int32 </span>Id = 0;
}

Having that class in place, we can now deserialize ASP.NET's InputStream into an instance of this class using out DataContractJsonSerializer:

DataContractJsonSerializer s = new DataContractJsonSerializer(typeof(DojoMessage));
DojoMessage o = (DojoMessage)s.ReadObject(stream);

That's it.  Now you have a strongly typed object where you can access the method and parameter information as you need.  From here's it shouldn't be too hard for anyone to use this information to figure out what to do on the server.  After all the logic is in place, the only thing we have left to do is to return the data, which isn't really that big deal at all.  The return data is basically plain text, but you can definitely send JSON back if you like.  If you would like to use JSON, you can even the DataContractJsonSerializer to serialize an object to the ASP.NET Request.OutputStream object:

Object r = GetSomething(o);
s.WriteObject(context.Response.OutputStream, r);

What about a more high-level approach that will allow me to simply write my core functionality without messing with mechanics?  Anyone using ASP.NET AJAX has this already in both their ASMX and WCF/JSON abstraction, but I wanted this functionality for Dojo (and for direct AJAX access).  My requirements were that I wanted to be able to define an attributed service, register it and move on.  Therefore, I build a Dojo RPC .NET 2.0 library called Dojr.NET (short for Dojo RPC, of course).  Dojr is probably the worst project name I've come up with to date, but it saves me from potential legal stuff from the Dojo Foundation.

Using Dojr.NET

To use Dojr.NET, create a class that inherits from DojoRpcServiceBase and apply attribute DojoOperationAttribute on each publicly exposed method.  Be sure to also set the dojo.rpc operation name in it's constructor, this is the name the Dojo client will see.  Since .NET uses PascalCased methods and JavaScript uses camelCased function, this is required.  Here is a complete sample class:

namespace NetFX.Web
{
    public class CalculatorService : DojoRpcServiceBase
    {
        [DojoOperation("add")]
        public Int32 Add(Int32 n1, Int32 n2) {
            return n1 + n2;
        }
    [<span style="color: #2b91af">DojoOperation</span>(<span style="color: #a31515">"subtract"</span>)]
    <span style="color: blue">public </span><span style="color: #2b91af">Int32 </span>Subtract(<span style="color: #2b91af">Int32 </span>n1, <span style="color: #2b91af">Int32 </span>n2) {
        <span style="color: blue">return </span>n1 - n2;
    }
}
}

After this, all you have to do is register the class as an HttpHandler in your web.config file.

<add verb="*" path="*/json/time/*" type="NetFX.Web.TimeService" />

At this point our Dojr.NET service is up and running, but how do we call it?  Actually, the same way you always do with dojo.rpc; nothing changes.  Believe it or not, this is a complete functional example:

var calcProxy = newdojo.rpc.JsonService('json/calc/?smd');
calcProxy.add(2, 3).addCallback(function(r) { alert(r); });
Automatic Service Method Description

But, how did the proxy obtain the required dojo.rpc metadata?  If you look closely at the address given to the proxy you will notice that it's suffixed with ?smd.  When a Dojr.NET service is suffixed with ?smd, it will automatically generate and return the service metadata.  This is similar to putting ?wsdl at the end of an ASMX URI.

Take a look at the metadata that's being automatically generated on the server via the ?smd suffix:

{
  "methods":[
    {
      "name":"add",
      "parameters":[
        {"name":"n1"},
        {"name":"n2"}
      ]
    },
    {
      "name":"subtract",
      "parameters":[
        {"name":"n1"},
        {"name":"n2"}
      ]
    }
  ],
  "serviceType":"JSON-RPC",
  "serviceURL":"http://localhost:3135/Dojo/json/calc/"
}

As you can see, Dojr.NET provides all the metadata required.  Literally all you have to do is inherit from DojoRpcServiceBase, apply the DojoOperationAttribute, and register the class to ASP.NET.  Everything else will be done for you.

Links

Dojo 1.0: Client-Side Web Development Framework



Recently I started a deeper study of the Dojo JavaScript Toolkit 1.0.  When I first got into Dojo, my reaction was something like "my goodness this is complicated", but then I woke up.  In reality, Dojo is not simply a JavaScript framework like prototype or an animation framework like script.aculo.us, but, rather, it's an entire client-side web development framework.  You can think of it as being a client-side version of the ASP.NET.  Because of this, I'm not going to compare it to prototype or script.aculo.us, products, which have completely different applications than Dojo.

Here is a simple break down of an example based on the hello world example found on the Dojo web site.  First let's add the dojo.js file:

<script src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true" type="text/javascript"></script>

What in the WORLD is the djConfig attribute?  Well it's not in any XHTML DTD that's for sure.  This is something to tell Dojo to, obviously, parse the file on load.  Duh.  That's not really the fun part though.  Check this out, you actually use a PHP style "require" statement to load specific portions of Dojo:

<script type="text/javascript">
   dojo.require('dijit.form.Button');
</script> 

By doing this, now we can add the following control into our page structure:

<button dojoType="dijit.form.Button" id="hola">
  Hola Mundo!
  <script type="dojo/method" event="onClick">alert('Hola');</script>
</button>

This creates a simple button which alerts 'Hola' when clicked.  As you can see, it gives you a very nice declarative programming model.  I personally think this is incredible because 1) I believe that we should focus on web development from a client-side perspective and therefore create controls on the client, 2) I love declarative programming, 3) I don't want to build this thing myself.  With Dojo I get a declarative client-side programming model without having to architect the internals.  This is really awesome, since I'm a strong advocate of client-side perspective programming (a.k.a. web 2.0).

One interesting aspect of Dojo is that it loads only the files that you need for that specific page.  This is a rather nice compromise between the Prototype and mooTools methods.  Prototype loads the entire thing into memory and mooTools allows you to download each section you want.  Dojo, however, installs on the server as a set of files that are available for download and you retrieve them as you need them.  To add to this, you don't add them via the <script /> element, you add the dojo.js file that way, but you load the others by calling dojo.require( ).  What's nice about this is that you load modules, not files.  It also gives it a more native programming feel, but it also makes sure you don't load the same file twice.  Here's an example of what I'm talking about:

<script type="text/javascript">
  dojo.require('dojo.parser');
  dojo.require('dijit.form.Button');
  dojo.require('dijit.form.FilteringSelect');
  dojo.require('dijit.form.CheckBox');
</script>

Here you can see that I'm loading up four different modules.  What's interesting about this is that it's kind of similar to how we import .NET namespaces.  However, it's even more like how we load .NET assemblies.  Think of each one of these as being an assembly we need to reference.  In .NET, you add a reference, let fusion and it's buddies find and load the assemblies, and simply use the controls as if they were local; you don't care about "files".  This is very similar to the model presented in Dojo.  It's like you are adding a Dojo "assembly" reference, letting it load it for you, and you access it as it were local.  This is all in direct contrast to the model that PHP as well as most JavaScript/AJAX framework use.  In PHP and in these frameworks, you typically load "files" directly.  One of the hardest things for a PHP developer to do is make the mental transition from file files to "magically loading" .NET assemblies.  In .NET assembly names don't need to match their DLL names, in fact as assembly can span more than a single DLL file!  In the same way, Dojo's module names don't have a one-to-one module-to-file mapping and loads whatever physical files you need based on the logical name you request.  Very nice! The analogy isn't perfect and like I've already mentioned it's a bit like the .NET namespace import model as well.

Dojo contains a number of very nice controls as part of it's Dojo Widjet Library, also known as Dijit.  Many of these are controls that most of us have wanted for years, but just have never had the time to mess with.  For example, Dojo including a slider control, a dynamically expanding textarea, and a filtering select box.  There's a whole host of others, but these are the ones that I personally have wanted to see in a professional framework for a long time.  There's also a progress bar control and a dialog control for those of you who are into business apps.  Dojo actually provides a tooltip dialog control as well.  This control, as the name suggests, shows a dialog as a tooltip.  The only time ever seen a control like this used was on the Facebook login screen, specifically when you check "Remember me".  Another interesting thing related to controls is that Dojo gives you the ability to transform controls into a more beautified form.  It's able to do this because it ships with a few CSS files that give Dojo its initial look and feel.  Furthermore it also includes a number of themes.  You can see this in a few of the more basic demonstrations in the Dojo documentation.

Dojo also includes many layout controls including a split container, accordion, tab control and what is called a StackContainer.  This container shows a pane on the screen and gives you a next and previous button so you can go back and forth between panes.  There's also a rich text editor control.  That should get some people's attention right there.  As cool as that is though, I don't think anything beats the grid control.  The grid is like a combination of ASP.NET's GridView and WPF's Grid.  It allows databinding like GridView, but it also allows complex row and column adjustment like the Grid.  Technically it's not part of the core of Dojo, but it's incredibly amazing.  You can see a great example of a Grid with it's code, see this example.  The code for this Grid is so simple, that you probably won't even believe your eyes.  Even still, the author of that example writes about the example here.  The Grid really is one of the most powerful controls I've ever seen in a client or server technology.  Again, can you see how Dojo is like a client-side ASP.NET?

It should go without saying at this point, but Dojo also includes various validation controls.  You can actually put an <input /> element on the screen and set dojoType="dijit.form.DateTextBox" and you get an entirely new animal that loads a calendar control when you click in the textbox.  If you prefer to type the date out by hand, the field will be validated automatically.  You can also validate against money.  Look at this example from the Dojo documentation:

<input type="text" name="income1" value="54775.53"
  dojoType="dijit.form.CurrencyTextBox"
  required="true"
  constraints="{fractional:true}"
  currency="USD"
  invalidMessage="Invalid amount.  Include dollar sign, commas, and cents." />

That's seriously detailed.  The data is validated as the user types.  If you want to validate numbers that don't represent money, you can use the NumberTextBox Dojo control (also set via the dojoType attribute).  Or, if you want more powerful validation, use a ValidationTextbox and set the regExp attribute and validate directly against a regular expression.  Your regular expression doesn't have to be inline in the regExp attribute either.  Take a look at this example from the Dojo documentation:

<input type="text" name="zip" value="00000"
  dojoType="dijit.form.ValidationTextBox"
  regExpGen="checkForFiveDigitZipCode"
  required="true"
  invalidMessage="Zip codes after 5, county name before then." />

Here you can see that the JavaScript function (checkForFiveDigitZipCode) is called for validation.  To see these examples run and to see more information on validation in Dojo see the validation page in their documentation.

At this point I think I should mention something.  As many of you know, I'm a strong standards advocate and an extremely outspoken opponent of the mere existence of Internet Explorer.  Having said that, laws exist for a purpose and, frankly, only within the bounds of that purpose.  The purpose of standards are to give us a common ground and to help us have cleaner, more professional work (my "having higher web standards" thing I'm always talking about).  In terms of web browsers, each browser needs to continually keep up with the standards.  Why?  Obviously so web developers can ship out content and not want to change their career every single time they realize that browser X, Y, or Z doesn't support a specific feature.  With this in mind, there is absolutely nothing wrong with Dojo using custom attributes on types.  Dojo is requiring new functionality, but it's also providing that functionality at the same time.  That which is requires, it provides.  This is completely legal within the bounds of the purpose of standards.  So, there is no reason for anyone to start crying about Dojo adding custom attributes.  There was a time when I was a standards extremist (~2003), going so far as to even use a custom DTD on my pages where I would use custom attributes (set via JavaScript), but I've since realized that standard extremism is practically a cult and have ran from it.  Also, and you may want to sit down for this one, I think that Dojo holds nicely to semantic web principles.  Notice we aren't creating an input and procedurally making it do validation, rather, we are creating something that is a validation box.  It's not as semantic as a <validationtextbox /> would be, if it were to exist, but as with most things, semanticism (huh?) is a continuum.  If it weren't a continuum, <input type="hidden" /> shouldn't exist or ever be used (I would argue that this does in fact have some semantic value!)  Because of this, I don't see Dojo involving itself with the evils of pragmatism.  However, Dojo would be an evil pragmatic framework with little semantic structure, if it instead tried to setup some type of configuration system by setting class names.  Can you even imagine the chaos?  I've done this before as a standards extremist and it's really nasty.

Another thing that's insanely cool about Dojo is the event system.  As we ASP.NET developers know, events aren't simply things you use on visual controls.  No, you use events to notify entities of (...drum roll please...) events.  So, you could have multiple entities monitoring a centralized entity, perhaps a service and when that centralized entity sends out an update, all the other entities immediately receive the update.  It's the observer pattern, but you may know it as the publish/subscribe model.  Normally when you think of JavaScript events you think of events in terms of visual control events just as you would with ASP.NET.  With Dojo, however your event model gets an upgrade with a publisher/subscriber model.  Here's an example for you to ponder:

<script type="text/javascript">
  function Client (name) {
    this._name = name;
dojo.subscribe(<span style="color: #a31515">'update'</span>, <span style="color: blue">this</span>, update);

<span style="color: blue">function </span>update(args) {
  console.debug(<span style="color: blue">this</span>._name + <span style="color: #a31515">': ' </span>+ args);
}
} var Server = { sendUpdates: function(message) { dojo.publish('update', [message]); } }; var clientA = new Client('Client A'); var clientB = new Client('Client B'); Server.sendUpdates('event occured!'); </script>

One thing on which I would like to warn all my .NET colleagues is this: they use Java terminology.  They fire their events whereas we like our events and think they are doing a great job so we raise them.  Personally, I've never understood that terminology, especially in systems like the web that allow for event bubbling where events are RAISED to the top.  OK, enough rant.  Before moving on though, just think about what I keep mentioning : this is like a fully fledged client-side ASP.NET.  You must surely be noticing that by now.

Dojo, of course, also gives you a XMLHttpRequest abstraction layer so that you don't need to mess with all that browser detection nonsense.  The syntax is rather similar to prototype's very intuitive syntax.  This is fortunate, because not all frameworks have a nice abstraction layer.  I've given up on trying to figure out mooTool's abstraction layer a long time ago.  It's doable, but the complexity curve is very steep.  In Dojo, however, the complexity curve is relatively flat, like prototype's.  Here's an example based on a Dojo documentation example of a simple XHR call (if you like, you can set 'json' instead of 'text' in the handleAs).  This code isn't anything fancy, but that's kind of my point:

<script type="text/javascript">
dojo.xhrGet({
  url: '/file/1.txt',
  handleAs: 'text',
  timeout: 3000,
  load: function(response, ioArgs) {
    alert(response);
    return response;
  },
  error: function(response, ioArgs) {
    console.error('Status code: ', ioArgs.xhr.status);
    return response;
  }
});
</script>

As simple as this is though, you can do much more with Dojo's abstraction layer than what I've seen in any other framework.  For example, there's actually a dojo.io.iframe object to give you the ability to do iframe-based AJAX.  Dojo also includes the dojo.rpc object, which allows for incredibly poweful RPC calls.  Gone are the days of having to choose to either create your own end-to-end communication or to completely use a flawed product.  You now have a nice middle ground for your AJAX service access. In a sense it's kind of similar to .NET remoting, in how it's not SOAP, but it's not quite sockets either.  The dojo.rpc concept is amazing quite possibly my favorite Dojo feature.  You can expect me to write more about this feature in the future.  I'm been completely taken in by this incredible feature and can see an incredible number of applications for it.  If you want to see something else wildly awesome, check out the dojo.data data access layer.  The documentation needs to be developed a bit more, but it's wild.  Whereas dojo.rpc may be similar to .NET remoting, dojo.data is kind of like WCF binding.  You just connect to a built-in or custom data store and your can bind Dojo controls directly to it!  Bind directly to your Flicker.com datastore or write your own.  For a few good examples of using this feature, check out this blog entry.

There are also features which we would kind of expect from a client-side framework like drag-n-drop support, animation support (though barely documented-- here's a PDF of an example), and DOM node selection (see dojo.query).  It also gives you control over internationalization (and unicode encoding) and the power to handle the back button in AJAX applications (of course by using the # syntax).  There's also the ability to create object-oriented class with inheritance.  One downside to this feature is that Dojo went back to the days of C++ and impossibly complex object graphing by allowing multiple inheritance.  You may want to set a corporate guideline to stop people from doing this, lest your object graphs become completely unreadable.  In any case, you also have an abstraction for arrays (to help emulate JavaScript 1.6), cookies, strings and dates.  You are also provided a mechanism for converting the data of an entire form into JSON data.

As if that weren't enough, Dojo also provides a unit testing framework called D.O.H.  You can do anything from simple asserts to full test cases, including grouping test cases.  In addition to the unit testing, Dojo allows you to send informational and debug messages to the Firebug console.  The documentation is packed with more testing samples than you will know what to do with.  Most of them are for testing the Dojo framework, but these tests use D.O.H. and give you a world of insight into the variety of things you can do with Dojo.

As far as documentation, there is more documentation for Dojo than I have seen in all the other JavaScript/AJAX frameworks combined.  The online "Book of Dojo" is incredibly long.  In fact, some may say that it's too long.  The Dojo people thought of this though and allow you to quickly get ROI from their "Dojo for the Attention-Impaired".  This page demonstrates the basic idea behind Dojo by showing a quick Hello World example.  I would recommend you do skim through this page, do the demo, then skim through the rest of the book, doing demos as you go.  One thing I should mention about the documentation is that while there is a lot of it, it's very hard to read at times.  I had to read the event system documentation numerous times before I was able to get anything from it.  This is definitely something the Dojo guys should look into.

Another thing they should look into is their use of double quotes in their JavaScript documentation.  This is something most ASP.NET AJAX books do and it really makes the code hard to read and hard to manage (do you really want to escape every single double quote in your HTML controls? ouch!)  It's makes about as much sense as using double quotes in your T-SQL code (which, yeah, would require a setting, but that's my point-- it's lame).  The Dojo documentation seems to go between various authors who either respect for the JavaScript guidelines (') or who don't even realize it exists (").  To make things worst, at times they use single quotes in their HTML!  There doesn't seem to be any consistency here.  I'm glad they didn't try to mix their code with any type of server-side work.  I don't even want to try to read double-quotes JavaScript in the midst of PHP, Java, or C# code.  That would e painful to read.  Other than these two concerns, the documentation was fairly exhaustive.  Some developers, however prefer to learn by seeing.  If you're one of those, you can check out the official Dojo demos.

In terms of deployment, you actually don't even need to install Dojo.  It's on the AOL Content Delivery Network (CDN), so you can quickly just include the Dojo entry file from their server and be done with it.  If you really want to download it to your system, you can hit up the Dojo web site and download it from there.  You could also head on over the the Dojo web site that parodies the script.aculo.us web site: dojo.moj.oe.  Also, remember that everything you need is accessible from the single Dojo entry file (often dojo.js) and that you use dojo.require( ) statements to bring in functionality at a module level, not a file level.  Therefore, the AOL CDN method should be perfect for most people.

Dojo is currently in version 1.0, however, this is an open source 1.0, not a Microsoft 1.0.  When Microsoft has an alpha, it's a preview.  When they have a beta 1, it's pretty nice.  When they have a beta 2, I'm usually using it in production.  When it's RTM as v1.0, everything breaks and I end up removing it.  Google products as well as Firefox and Dojo on the other hand are hardcore and stable when they hit 1.0.  Their idea of 1.0 is like Microsoft's idea of an SP2.  Shall I remind everyone that Gmail is STILL marked as beta after all these years??  Dojo is a stable system that have been in development and testing for an extremely long time.

Dojo really is a fascinating client-side web development framework which can bring great elegance as well as a great declarative programming model to your AJAX applications.  Furthermore, given it's rich set of controls, Dojo is absolutely perfect for web-based business applications.  Dojo is also probably one of the great technologies of all time that are destined for completely misunderstanding as a product comparable and/or equal with products that don't even come close to it.  There are people living today that still try to compare Internet Explorer with Firefox, VSS with Subversion, Gimp with Photoshop (oh yes, I went there!), the Zune (which is a media player) with the iPod Touch (which is an Internet device)and Gmail with Yahoo! Mail or Hotmail.  Compare them and you will see there is no comparison.  As I said at the beginning, this neither replaces prototype or script.aculo.us, which would be used in more minimal environments.  Dojo is a different framework to be used when a project has different requirements.  Besides, you should never choose one tool as your end all be all for everything.  That's a naive way of thinking, unless you actually think it wise to cut your bread with a butter knife or spread your butter with a bread knife.  Rarely are things in life one-side-fits-all.  Frameworks are free; use them, but use them wisely.  Hopefully many of you will seriously consider using Dojo in your current or future AJAX and ASP.NET projects.

Links

Developers and Web Developers



(This is a sequel to my Coders and Professional Programmers article)

I'm fairly sure the year was 2001. It was before I did my transition from coder to professional, but it was long after I became a real web developer (1994).  This was the year that the web became severely corrupted by an influx of thousands of MFC/VB developers thinking they were web developers simply because they knew how to drag-n-drop a control onto a canvas and make something appear in a web browser. The influx was, of course, due to the release of ASP.NET. These people were not web developers and that same coder-mill continually throws out unprofessional after unprofessional today.  This was the year I got so upset with the pragmatic, unprofessional web developers running around taking my work that I retired for 3 years to go back to college.

So, what is a web developer?  Surely is at least one definition per person in the entire industry, but I must say that, at root, it's a person who understands and can proficiently interaction with web technologies.  What web technologies?  Today, these include, at a minimum, semantic XHTML, CSS, and Modern JavaScript.  In a sense, you could easily mark these as the pillars of web programming.  Without academic and hands-on knowledge of these technologies, there is no web devolvement (yes, both are required-- and despite what the pragmatists think, the former is critical). Furthermore, this technology list changes over time.  If I were to retire today, I have no right to come back in 5 years claiming to be a web developers.  To be a web developer at that time, I need to learn a new X, Y, and Z in including their guidelines and best practices.  You must keep up or be left behind.

Having said that, PHP, JSP, and ASP.NET developers often inappropriately call themselves web developers.  Not all PHP, JSP, or ASP.NET developers are like this, especially PHP developers! Respect, respect!  In any case, I can kind of see the confusion here, but even still, a quick realization of what these technologies are should have killed any thoughts of this a long time ago.  These people work with server-side technologies, not web technologies.  The same CGI model used 15 years ago is the same model today.  The only thing these people are doing is creating code that runs on a server and shipping the output.  Period.  That's not web development; this is the same work you would do if you were to build an Excel report.  It’s just work behind the scenes that may or may not touch a web browser.  Even then, just because it hit a web browser, doesn’t mean its web development.  There’s no client-side technologies involved at all. Without deeply interacting with client-side technologies, there is no web development.  In fact, the inanimate object known as a web server is more of a web development than server-side-only people.

Web development begins at the point when you begin to ponder the technologies and implementation from the perspective of the client-side.  I'm sure most people won't believe me when I say this, but I did web development for my 4 years of high school before I even knew that you could use server-side software to dynamically create pages.  Everything I did was in pure JavaScript and fancy frame manipulation.  This was web development.  I didn't need CGI or Perl.  PHP, JSP, and ASP.NET simply sends out a stream and it just so happens that a web browser may be the one making the request.  The output may be for a web browser, but that in absolutely no way makes it web development.  That's like going to a foreign country and using a translator device and saying because you have that device, you speak the language.  You in absolutely no way speak the language!  Worst, some people will defend, virtually to the death, the idea that they do speak the language simply because they know a few words to "fix" the translation!  We see this in server-side-only developers who, because they know a few HTML tags, think they know the technologies.

Most of the time, however, server-side-only developers really think they are web developers. So, this simple and obvious explanation won't do.  Therefore, we are forced to make a distinction between web 1.0 and web 2.0 developers.  We often think of web 2.0 as being quick, dynamic, and smooth client-side dynamics.  This is from a marketing perspective, but it's hardly a definition that satisfies the computer scientist.  The distinction I use is actually a bit more straightforward: web 2.0 development is development from the client-side perspective.  This definition actually reminds me of the definition of a series I learned in my Real Analysis class in college: a mapping from N to R.  How in the WORLD is that a series!? Isn't a series a set of entities or something?  Well, somehow it's a mapping from N to R (I've yet to hear another professor give this same definition, but the point is that "formal definitions" in mathematics rarely look like their application in reality).

When I talk about web 2.0 to a colleague or a client I'm talking about web-specific design and implementation from the perspective of the client. From this perspective calls are made to various services for interaction with outside data.  In other words, web 2.0 is a client-service model for the web.  In this sense, what is web 1.0?  Just the opposite: development from the server-side perspective.  This is ASP.NET development, for example.  When you are working with ASP.NET, you are working from the perspective of the server and you send data out.  In this model, you have a logically central system with entities accessing it. In reality, this isn’t web development—it’s development of something that may or may not do web development for you. Web 1.0 is a server-client model for the web (notice the word server, instead of service—as seen in the web 2.0 model)  If you are a deep Microsoft developer you recognize the web 2.0 paradigm: WPF/WCF allows you to easy create a client-service model bypassing the client-server model all together.  You create your client interfaces in WPF and access WCF servers as you need them.

In this perspective, what does this mean in terms of the actual technologies?  Well, almost all my web applications are done using the web 2.0 model.  That is, all my programming is done from the perspective of being inside the web browser.  I'll directly modify the DOM and access data via AJAX calls as required.  Some of my applications are pure-AJAX. That is, not single postback in the entire system (like meebo.com-- meebo is a prime example of a web 2.0; everything is from the perspective of the client with communication via AJAX services.)  In fact, my controls are very Google-ish.  Google is also deep into this model.  See their AdSense, AdWords, or Analytics controls; insert a declarative script and it does the rest from the perspective of the client.  As you can see here, you don't even need the XHR object for web 2.0!

What does ASP.NET AJAX bring?  In this model, ASP.NET AJAX is as web 1.0 technology that gives you the dynamics of web 2.0.  This was actual the entire point behind creating it.  Web 1.0 developers (who are often not web developers at all!) can use their existing server-side perspective and paradigms to implement dynamics on the remote system (in a web 1.0 model the client is the remote entity-- whereas in web 2.0 the services are remote).  ASP.NET AJAX very much allows for a web 2.0 model, but that's not how it's primarily marketed.  As a side note, I should mention that, this model for explaining web 1.0 and 2.0 is only a logical representation and therefore can not be right nor can it be wrong.  The fancy marketing representation kind of works too, but it's often too abstract to have real meaning.

Personally, I think the web 1.0 model of development is counterproductive and encourages sloppy priorities.  The user experience is the point of the system. Without that, the entire point of the web site is dead.  One of my problems with ASP.NET AJAX is how it's marketed.  The server-perspective model of development encourages development that seems backwards.  Furthermore, because of this, the aforementioned so-called "web developers" continue to spread their disease of pragmatism all over the world further aiding in the disintegration of quality.  As I've originally stated, most of these people don't understand even the basics of semantic XHTML, which is the single most fundamental aspect of web development, which can be seen in their use of div-soup or <br/> mania.  These people may be awesome server-side professionals putting my enterprise architecture skills to absolute shame and run circles around me in just about any algorithm or design pattern implementation, but they are only coders when it comes to the web.

After years and years of dealing with people like this, I've come to notice a few signs of web 1.0 coders:

  • If someone says "Firefox?  How's that better than IE?", it goes without saying that this person not only hasn't the first clue about web development, they don't even understand the tool which represents the core purpose of web development: the web browser.  People like this are almost always helpless.  You could try to explain the true power of CSS, the fact that SVG, HTML5, and Canvases are in every web browser except IE, or talk about how Firefox has the architecture of an operating system with its console, it's own registry (about:config), as well as the ability to install apps (extensions), but you're probably only going to get the same pragmatic blank stare of a coder. Fortunately, I haven’t heard say this in at least 3 years.
  • If someone says "I know CSS, here…" and shows you how they used font-size, color, and font-weight on a few elements contained in a table embedded in a table embedded in yet another table, then you have your work cut out for you, because you met a person who thinks HTML is the latest cool technology on the block and hasn't the first clue what CSS really means.  As I've stated in my article "CSS Architecture", CSS is not just a styling technology.  Furthermore, we web 2.0 developers realize that CSS is to be used in harmony with semantic XHTML and therefore understand the dangers of using a table.  These people obviously don't.  Of course, the minute their boss asks for mobile support, they come running to you because they now realize "DOH! Tables are too wide! AHH! Tables make the page size too big!" They will have to learn their lesson eventually.
  • If someone says "I know JavaScript, here… " and they show you a validation function, then you need to explain to them that JavaScript isn't merely a scripting language, but is rather a very powerful object-oriented/functional programming language which often puts strongly-typed languages to shame.  It includes closures, namespaces, an extremely rich object system, object-oriented access levels, multi cast events, and a boat load of core JavaScript objects.  Yet web 1.0 developers haven't the first clue. This problem isn’t nearly as bad as it used to be, though. MSDN magazine devoted some time to the topic in the May 2007 issue and the number of JavaScript experts in the Microsoft community is growing very rapidly.
  • If someone says "Hmm… I don't see the control you are talking about in my toolbox", then you know you are dealing with a coder.  Not only that, you're probably dealing with a person who has never, ever learned what semantic development even is.  Typically people like this will use the dead concept of a WYSIWYG designer to drag-n-drop controls and set properties with their mouse.  Clearly, these people focus more on how something seems to look at the moment, not how the page is actually built.  Pragmatists.  Personally, I’ve never designer support into anything, ever. If you can’t program it, don’t develop it! I personally find it extremely unprofessional to even allow designer-support. The target audience typically has absolutely no concept of the difference between a semantic <h1></h1> and a pragmatic <div id="myHeader"></div>.  Not only will their code cause problems down the road, your code will never integrate with it, which, of course, means you will be rewriting everything. Anyone who understands the importance of semantic XHTML understands the sheer severity of this problem.  You will break a page's structure by relying on a designer.  A designer should only be used by a professional who knows how to fix it's flaws.  Since only a professional would be able to fix the flaws, it follows that only a professional should do web development.  Duh?  For more information on semantic XHTML, see any modern web 2.0 book or my mini-article here (a quick note-- when I was formatting this post in WLW, every one of my list items would start a new list-- if I didn't understand semantic XHTML, I would have been completely stuck [also notice I'm using the semantic term "list item" not the syntactical term "<li />"-- focus on what things ARE, not what they DO-- try focusing on what something IS using a WYDIWYG designer!])

I know I've written about this topic before, but it's is just such a critically important topic.  Just because someone does something, that doesn't mean they are in that profession.  I change my own oil and change my tires, but this doesn't make me a mechanic.  A few months ago I was talking to a guy who actually said that he doesn't care about what he produces, because "it's just a job".  Just a job!?  Why don't you just get another one!  These people need to stop masquerading as web developers, stop undercutting my professional company by offering $3.75/hour unprofessional "development", start upping their own standards and start showing a little respect to us that were here first.  To a lot of us professionals this isn’t just a “job”; it’s actually become part of us! Unfortunately, I've learned years ago that people don't change.  Not for their marriage, not for their family, and especially not for their careers.  It's hopeless.  Moving on.

Free Templated Data Bound Custom Controls Chapter



Google Book Search, must like most Google products, is a great gift to humanity.  I often find myself going there to read a chapter in a book to quickly get up to speed or to review a topic.  Today, while I was reviewing a few new ASP.NET books, I came across the book ASP.NET AJAX Programming Tricks on Google Books.  The first two chapters are "Http Modules Demystified" and "Templated Data Bound Custom Controls" and are freely viewable.  This is a great reference for anyone looking to learn how to build more powerful custom controls or for anyone who needs a quick refresher.

One thing I did notice, is that the chapter looks very much like chapter 29 in ASP.NET 3.5 Unleashed.  In fact, not only is the content the same, they had the same order of the content is the same.  Furthermore, they use almost the same "tab control" example.  Ouch.  Before anyone says the P word, I would like to mention that ASP.NET AJAX Programming Tricks was released first. 

Links

ASP.NET 3.5 Web Site and Application



One of the most horrendously thing about ASP.NET 1.1 was that the developers confused a web site and a project.  All that did was allow a severe influx of desktop developers into the web world that had no right to call themselves web developers.  ASP.NET 1.1 even added resx files for web forms and of course since the file was there, many developers (senior level!) actually thought they were required files.  That didn't stop me drop regularly going into CVS and DELETING them.  Worthless.

Fortunately, ASP.NET 2.0 fixed this problem by making sure that people realized that a web site was NOT a project.  This made everything so much easier to work with.  Furthermore, now we had the beautiful CodeFile page directive attribute so that we didn't have to rely on VS for everything.  There was also no need for absolutely ridiculous and redundant designer or resources files for web forms.  The ASP.NET guys were finally conforming to the preexisting conditions of the web, instead of trying to come up with a new [flawed] paradigm.

HOWEVER! Apparently the ASP.NET 3.5 team fell asleep at the wheel because I'm having horrendous flashbacks to the slop of ASP.NET 1.1.  First of all, when you add a web site, you are adding a project.  I don't WANT a csproj file for my web site!  Secondly, web forms have returned to using the completely useless CodeBehind attribute.  It took me QUITE a bit of debugging to finally realize this.  Third, every single web form now has a completely meaningless X.designer.cs file.  This also took me a while to realize.

I realized this when I kept getting an error telling me that type X.Y didn't match type X.Y.  What?  Yes it does!  After I finally fixed that error (can't even remember how), I kept getting that one stupid error telling you that your type is in two separate places.  HOW?  This was a new project!  I haven't done anything yet!  It turns out that the designer.cs file had become out of date between the time I typed up my added my custom control to the page and ran it.  Err… what?  This is beyond frustrating.

There's good news though.  The ASP.NET team wasn't completely asleep.  You can add an ASP.NET web site or an ASP.NET web application.  Yes, I realized there's no REAL difference, but for some reason they decided to make a whimsical split (I suspect it was a political or PM decision-- the ASP.NET team is smarter than that).  Perhaps they wanted to aid the old VB developers, who I would argue have no right to put things on the web anyhow (i.e. they are web coders, not web development professionals!)

If you add a ASP.NET web application, you get the old ASP.NET 1.1 style of hard to use nonsense.  On the other hand, if you add a ASP.NET web site, you get the appropriate ASP.NET 2.0 style.  Personally, I say forget both.  I always just create a folder and then "open web site".  Done.  Most of the time, however, I just start a project by checking my continually changing solution template out of subversion.  Again, DONE.  This is why it took me 8 months to finally notice this.  I don't even want to think about how many sloppy intern or VB6-developer created applications I'm going to have to clean up based on this painfully flawed design.

10 Things Most Developers Didn't Know in 2007



To end 2007, I thought I would make a list of things which I found that most developers didn't know.  To make things more interesting, this list is actually a series of 10 mini-articles that I wrote today.  Since this article has several sub-articles, here's a table of contents to help you out (these aren't really in any order of importance):

#1  SQL Server supports powerful subqueries as anonymous sets.

Many developers don't take the time to seriously look at T-SQL or SQL Server internals.  As such, they miss many of SQL Server's more powerful features.  In January 2007, when co-worker saw he write the following query, he about fell out of his seat:

select MemberName, m.MemberId, count() from (select 
    distinct MemberId, 
    VisitUserAgent 
    from VisitSession 
    where MemberId is not null) a 
inner join Member m on a.MemberId = m.MemberId 
group by m.MemberId, MemberName, VisitUserAgent 
having count() > 1 
order by count(*) desc 

For starters, the guy didn't know you could do a filter after a group by, but that's not my point.  He had no idea that SQL Server (2000) allows you to use subqueries or use subqueries as anonymous sets.  As you can see, you can select from the list as well as use it in a join.  This tidbit alone should toss many painfully slow cursor-based stored procedures into the trash.  It's a simple SQL feature, but it's a powerful one.

#2  Firefox has an operating-system style console for web application debugging.

It's incredibly hard to find an ASP.NET web developer who knows this one.  It's a feature that knocks people right off their seats.  Instead of throwing alerts all over your AJAX applications, you can use the Firefox console and the dump( ) function.  Did I mention this has been a native feature since Firefox 1.0?

Step 1 (start Firefox with -console switch)

Step 2 (add the boolean key 'browser.dom.window.dump' to the Firefox configuration an set it to true)

Then simply call dump( ), instead of alert( ) and you're done. Your output will go to the Firefox console window (which looks almost exactly like a cmd window).

With this technique you can entirely avoid any possibility of having an infinite loops of alerts.  Personally, I like to track all the output of my web applications.  This comes in very handy when I'm using event capturing or need to watch the progressive state of my application.  When I do this, I also like to write an output identifier to each data dump.  Here's a sample of what I usually use for debugging:

var Configuration = { 
    Debug: false
}; 


var Debug = { 
    counter: 0, 
    write: function(text) { 
        if(Configuration && Configuration.Debug) { 
            dump(text); 
        } 
    }, 
    writeLine: function(text) { 
        if(Configuration && Configuration.Debug) { 
            Debug.counter++;        
            dump(Debug.counter + ':'+ text + '\n'); 
        } 
    } 
};

Here's some sample output using the Debug.writeLine( ) abstraction:

Leaves alert( ) in the dust, doesn't it? You can actually learn more about this technique and others from my Firefox for ASP.NET Web Developer video series found on my blog.  These topics are crucial to your understanding of modern web development.

#3  JavaScript has natively handled loosely-coupled multi-cast events for years.

This isn't something just for the Firefox, Opera, Safari world.  Even IE6 has native support for this feature. I'm not sure why this is, but in September 2007 when I was designing the AJAX exam for Brainbench, not a single one of the reviewers knew that JavaScript natively supported loosely-coupled multi-cast events.  I actually comments from almost all of the reviewers telling me that I should "leave server-side questions out of the exam".

JavaScript loosely-coupled multi-cast events are one of the most important core features of AJAX applications. They allow you to quickly and efficiently attach multiple event handlers to the XHTML same element. This becomes critically important when you are with multiple AJAX components, each of which that want to have an event handler attached to the load event of the window object.

I wrote an article about this in September 2007, so I'm not going to go into any kind of details here.  You my also opt to view this file from my SolutionTemplate, which supplements that blog entry.

#4  Not all image formats are created equal.

A few months ago, I came in as lead architect about half way through a project.  After having a few people fired for absolute incompetence, I did find a few people (PHP guys) who were ready, willing, and actually able to learn ASP.NET.  Everything was going well until the designer came back with his new theme and my associate whom I was training implemented it.  Everyone thought the project was going fine until I stepped in the room.  It didn't take but 10 seconds for a red flag to go up.  Just looking at the web site I could tell that this theme implementation was a disaster.  I noticed that there were signs of JPEG compression all over every single one of the images.  However, being a scientist and part-engineer I knew that measurement was a major key to success.  So, I whipped out Firebug, hit refresh and felt my jaw drop.  The landing page was 1.5MB.  Ouch.

You absolutely can not use one single image format for ever image on your web site, especially not the deadly JPEG format which does little more than destroy your images.  There are rules which web developers must need to follow or else a project is doomed to failure.  First off, you need to be using PNG24s for the all important images, while comparing their file sizes and quality with PNG8 compression.  Using Adobe Photoshop's Save For Web feature is very helpful for this.  If the image is a photo or something with many "real life" colors and shades, perhaps you want to do a size and quality comparison against a JPEG version as well.  If you absolutely need to have transparent images for IE6, then you need to take extreme care and either make special PNG versions for each background or, if you don't care too much about quality and the image is small with very few colors, use a GIF with transparencies.  The same goes for Firefox and printing.  Firefox (as of 2.0) does not print transparent PNG images.  So, if you want to support printing in Firefox, then you need to either make special PNG images for each background or make low-quality GIF images.

Needless to say, the designers theme had to go under severe reconstruction.  Not just because of the image sizes, but because he felt the need to design special input box, textarea, and button controls.  His design would have worked well for a WPF application, but this is the web (... but don't even get me started on the fact that his design for a wide screen monitor at over 1300x800.  The design was useless anyhow!)  The next project I ran as lead architect went much smoother.  Because it was extremely AJAX intensive, everything was minimized to the absolute core.  Each page had the minimal default.css plus it's own CSS sheet and only included the JavaScript it needed.  The web site landing page included barely anything and even had it's own extremely stripped down version of the JavaScript files.  For this project, I went from 350K in development to 80k in production.

#5  Custom server controls are not esoteric, complicated, or take too long to create.

  This seems to be a very common misconception amongst ASP.NET developers.  The reality, however, is that creating server controls is often a very trivial task.  Yet, many developers will use a GridView or other canned control for everything.  The GridView is awesome for basic tabular in a very simple, data-driven applications, but I can rarely use it.  On the other hand, I love the repeater and rely on it for almost everything.  Actually, it and the Literal are my two favorite controls.  I have to rely on these two controls to ensure that my AJAX applications are extremely optimized.  One of the beautiful things about .NET is that every ASP.NET control is simply a .NET class, which means that you can programmatically reuse them, inherit from them, and override their internals.  Thus, allowing us to create some powerful and elegant custom server controls.

On the same project with the overly sizes image files, we had an interesting meeting about how to show a media play list on a web page.  There was all kinds of talk about using Flash to create a media play list.  The conversation was quickly giving me an allergic reaction.  So, after hearing all kinds of absolutely insane quotes of time for creating a Flash play list, I decided to take matters in to my own hands.  Two hours later I handed the client a complete play list from A to Z.  To be clear, I had built this one something I had already had, but the grand total of time was them about 3 hours.  It's amazing what you can do when you understand the .NET framework design guidelines and aren't afraid to follow best-practices.

Here is how you would use a similar control:

<%@ Register Assembly="Jampad.Web" Namespace="Jampad.Web.Controls" TagPrefix="j" %>


<j:Media id="media01" runat="server" />

In your code behind, you would have something that looked like this:

media01.DataSource = MediaAdapter.GetContent(this.MemberGuid);

Upon loading the page, the data was bound and the output was a perfect XHTML structure that could them be customized in any number of ways using the power of CSS.  How do you make something like this happen?  It's simple, here is a similar control (Media.cs) placed in a class library (WebControls.csproj):

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;


namespace Jampad.Web.Controls
{
    [ToolboxData("<{0}:Media runat=\"server\"></{0}:Media>")]
    public class Media : CompositeControl
    {
        private Repeater repeater;
    <span style="color: blue">public </span>Media( ) {
    }


    <span style="color: blue">private </span><span style="color: #2b91af">Object </span>dataSource;


    <span style="color: blue">public </span><span style="color: #2b91af">Object </span>DataSource {
        <span style="color: blue">get </span>{ <span style="color: blue">return </span>dataSource; }
        <span style="color: blue">set </span>{ dataSource = <span style="color: blue">value</span>; }
    }


    <span style="color: blue">protected override void </span>CreateChildControls( ) {
        <span style="color: #2b91af">HtmlGenericControl </span>div = <span style="color: blue">new </span><span style="color: #2b91af">HtmlGenericControl</span>(<span style="color: #a31515">"div"</span>);
        div.Attributes.Add(<span style="color: #a31515">"class"</span>, <span style="color: #a31515">"media-list"</span>);


        <span style="color: blue">try </span>{
            repeater = <span style="color: blue">new </span><span style="color: #2b91af">Repeater</span>( );
            repeater.DataSource = <span style="color: blue">this</span>.DataSource;
            repeater.ItemTemplate = <span style="color: blue">new </span>MediaTemplate(<span style="color: #2b91af">ListItemType</span>.Item);
            repeater.HeaderTemplate = <span style="color: blue">new </span>MediaTemplate(<span style="color: #2b91af">ListItemType</span>.Header);
            repeater.FooterTemplate = <span style="color: blue">new </span>MediaTemplate(<span style="color: #2b91af">ListItemType</span>.Footer);
            div.Controls.Add(repeater);
            repeater.DataBind( );
        }
        <span style="color: blue">catch </span>(<span style="color: #2b91af">Exception </span>ex) {
            <span style="color: #2b91af">Literal </span>error = <span style="color: blue">new </span><span style="color: #2b91af">Literal</span>( );
            error.Text = <span style="color: #a31515">"&lt;span class=\"error-message\"&gt;" </span>+ ex.Message + <span style="color: #a31515">"&lt;/a&gt;"</span>;
            div.Controls.Add(error);
        }


        <span style="color: blue">this</span>.Controls.Add(div);
        <span style="color: blue">base</span>.CreateChildControls( );
    }
}
}

Notice the use of the repeater control.  This is the same control we use in ASP.NET as <asp:Repeater />.  Since this is .NET, we can use it programmatically to create our own powerful controls.  Also notice the various templates that are being set on the Repeater.  These are the same templates you would set declaratively in an ASPX page.  In this case, I'm programmatically assigning to these templates an instance of MediaTemplate (in MediaTemplate.cs).  This MediaTemplate.cs is just another file thrown in a class library, in our case the same WebControls.csproj, though since it's just a class, it could be in a different assembly and namespace altogether. Here's what the MediaTemplate.cs looks like:

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI;


namespace Jampad.Web.Controls
{
    internal class MediaTemplate : ITemplate
   {
        ListItemType type = new ListItemType( );
    <span style="color: blue">public </span>MediaTemplate(<span style="color: #2b91af">ListItemType </span>type) {
        <span style="color: blue">this</span>.type = type;
    }


    <span style="color: blue">public void </span>InstantiateIn(<span style="color: #2b91af">Control </span>container) {
        <span style="color: #2b91af">Literal </span>lit = <span style="color: blue">new </span><span style="color: #2b91af">Literal</span>( );
        <span style="color: blue">switch</span>(type) {
            <span style="color: blue">case </span><span style="color: #2b91af">ListItemType</span>.Header:
                <span style="color: blue">break</span>;


            <span style="color: blue">case </span><span style="color: #2b91af">ListItemType</span>.Item:
                lit.DataBinding += new EventHandler(<span style="color: blue">delegate</span>(<span style="color: #2b91af">Object </span>sender, System.<span style="color: #2b91af">EventArgs </span>ea) {
                    <span style="color: #2b91af">Literal </span>literal = (<span style="color: #2b91af">Literal</span>)sender;
                    <span style="color: #2b91af">RepeaterItem </span>item = (<span style="color: #2b91af">RepeaterItem</span>)literal.NamingContainer;
                    literal.Text += <span style="color: #2b91af">String</span>.Format(<span style="color: #a31515">"&lt;div class=\"media-item\"&gt;\n"</span>);
                    literal.Text += <span style="color: #2b91af">String</span>.Format(<span style="color: #a31515">"  &lt;div class=\"media-item-inner\"&gt;\n"</span>);
                    literal.Text += <span style="color: #2b91af">String</span>.Format(<span style="color: #a31515">"    &lt;a href=\"{0}\"&gt;&lt;img src=\"{1}\" alt=\"Media\" class=\"media-thumb\" /&gt;&lt;/a&gt;\n"</span>, (<span style="color: #2b91af">String</span>)<span style="color: #2b91af">DataBinder</span>.Eval(item.DataItem, <span style="color: #a31515">"mediaPath"</span>), (<span style="color: #2b91af">String</span>)<span style="color: #2b91af">DataBinder</span>.Eval(item.DataItem, <span style="color: #a31515">"thumbPath"</span>));
                    literal.Text += <span style="color: #2b91af">String</span>.Format(<span style="color: #a31515">"  &lt;/div&gt;\n"</span>);
                    literal.Text += <span style="color: #2b91af">String</span>.Format(<span style="color: #a31515">"  &lt;div class=\"media-item-bottom\"&gt;&lt;/div&gt;\n"</span>);
                    literal.Text += <span style="color: #2b91af">String</span>.Format(<span style="color: #a31515">"&lt;/div&gt;\n\n"</span>);
                });
                <span style="color: blue">break</span>;


            <span style="color: blue">case </span><span style="color: #2b91af">ListItemType</span>.AlternatingItem:
                <span style="color: blue">break</span>;


            <span style="color: blue">case </span><span style="color: #2b91af">ListItemType</span>.Footer:
                <span style="color: blue">break</span>;
        }
        container.Controls.Add(lit);
    }
}
}


Simply compile those to together and you're set.  You can even embed (hopefully tiny) images in your project to make things even more seamless.  Using this simple pattern, I've created all kinds of things.  You can see a real example of this, including image embedding, in my SQL Feed Framework (formerly known as Data Feed Framework).  It's InfoBlock controls follow this same pattern.  For much better examples, whip out reflector and start digging around the System.Web namespaces.

It's actually rather astonishing to learn of some of the attituted some developers have about custom controls. When I was one of the editors for an ASP.NET 2.0 exam last year, I noticed one of the questions ask which type of control was "harder" to create. The answers were something like "User Control", "Custom Control", and a few others. They were looking for the answer "Custom Control". Since "harder" is not only a relative term, but also a subjective and an abstract one, the question had no actual meaning. Custom controls aren't "harder" than user controls.

#6  Most developers I worked with in 2007 had never heard of an O/R mapper.

Why do most developers still absolutely insist on wasting their time writing a chain of SqlConnection, SqlCommand, and SqlDataAdapter?  Perhaps it's just an addiction to being busy instead of actually being productive that causes this.  I don't know.  I would, however, expect these developers have to have some curiosity that there may be an easier way.  ADO.NET is awesome stuff and it is the foundation for all .NET O/R mappers, but if I'm not throwing around 1,000,000 records at a time with SqlBulkCopy, I'm not interested in working with ADO.NET directly.  We need to have a system that allows us to get what we want instead of forcing us to screw about with low-level mechanics.  It's no secret that I'm a huge supporter of Frans Bouma's work with LLBLGen Pro and I also use LINQ in most of my .NET 3.5 applications.  For a corporate .NET 2.0 project, there's absolutely no excuse to not pay the $300 for LLBLGen Pro.  Managers!  Open the wallets!  It will save you money.

However, it's not always about the money.  Even if the developers knew about O/R mapping, and the company isn't from in a poverty-stricken 3rd world country, sometimes extreme pride, lack of personal integrity, and political alignment can destroy any chance of being productive.  A long time ago I worked at a company where I thought I would be productive.  Five or so weeks into the design phase of the project, we received a politically-focused project manager as big brother.  He was absolutely against the use of any modern technology and despised the idea of an O/R mapper.  He instead told us that we were to write a stored procedure for every possible piece of interaction that would happen.  He also wanted us to use Microsoft's data application block to access the stored procedures.  At one point he said that this was their O/R mapper, showing that he had no idea what an O/R mapper was.

A few days after his reign had started, I took an hour or so to write up a 12 page review document covering various aspects of LLBLGen Pro and how they would work on the project.  I thought it was a very convincing document.  In fact, one guy looked at it and was convinced that I took it from the LLBLGen web site.  The project manager, however, was beginning to be annoyed (this is not uncommon with me and old-school project managers!)  The project manager decided to call together a panel of his "best" offshore developers and put me in what basically amounted to be a doctoral defense.  Prior to the meeting I sent out my "dissertation" and asked everyone to read it before they arrived at the meeting so that they would be prepared for the discussion.  When it was time for the meeting, I was told to sit at one side of a large meeting table and the project manager and his team sat at the other.  Then the disaster began.  First off, not one single person on that team had read my document.  Secondly, for the next 45 minutes they asked me basic questions that the document would have answered.  Even after they admitted that I had answered all of their concerns to their satisfaction and being told by their team that LLBLGen Pro was obviously a very productive tool, they reached the conclusion that they still weren't going to use it.  It was a waste of my time and I still want those 45 minutes of my life back.

What was really interesting about my defense was the developer's code.  In the meeting, the developers had showed me their [virtually unreadable, anti-.NET framework design guidelines, inefficient, insecure] .NET project code and I was shocked to see how much time they wasted on writing the same stuff over and over and over again.  When they showed me their stored procedures, I about passed out.  It's a wonder how any of their systems run.  They were overridden with crazy dynamic SQL and cursors.  They even had most of the business logic in the data access tier.  The concept of N-tier architecture was not something that they understood at all.  I think that's the point where I gave up on my defense.  If a developer doesn't even understand the critical need for N-layer and N-tier architecture, there's just no way they will be able to understand the need for an O/R mapper.  It's actually one of the fastest way to find a coder hiding amongst professionals.  Their SQL/ADO.NET code was also obviously not strongly-typed.  This was one of the core points of an O/R mapper and these developers could not understand that.  They could not see the benefit of having an entity called Person in place of the string "Persno" (deliberate misspelling).

This project didn't really take off at all, but for what parts I was involved, I used the next best thing to an O/R mapper: a strongly-typed data-set.  Read this carefully: there is no shame in using a strongly-typed data set if you don't have an O/R mapper.  They are no where near as powerful, but they are often good enough to efficiently build your prototypes so that the presentation layer can be built   You can replace the data access components later.

The training of developers in the use of LLBLGen Pro and LINQ O/R mapping was one of the main reasons I publicly released both my Minima Blog Engine and my Minima 3.5 Blog Engine source code to the public in 2007.  You are free to use these examples in your own training as you see fit. 

For more information and for some example of using an O/R mapper, please some of my resources below:

#7  You don't need to use SOAP for everything.

This is one of the reasons I wrote my XmlHttp Service Interop series in March and May 2007.  Sometimes straight up HTTP calls are good enough.  They are quick, simple, and light-weight.  If you want more structure, you can simply use XML serialization to customize the smallest possible data format you can think of.  No SOAP envelope required.

Here are the parts to my series:

Also keep in mind that you don't need to keep JSON to JavaScript.  It's a beautiful format that could easily be an amazing structured replacement for flat CSV files.  RESTful interfaces using GET or POST with HTTP headers are also a great way to communication using very little bandwidth.  My AJAX applications rely heavily on these techniques, but I've also used them for some behind the scenes work as well.

One great example of how you can use RESTful services is by looking at the interface of the ESV Bible Web Service V2. In November 2007, I wrote a .NET 3.5-based framework to abstract the REST calls from the developer. By looking at my freely available source code, you can see how I'm interacting with the very light-weight REST service.

#8  A poor implementation of even the most beautiful database model can lead to a disast

IE8, CSS, and Other Critical Standards



Early this morning I read that there is an internal build of IE8 that supposedly renders the Acid2 test perfectly.  When hearing about this, I'm sure there were crowds of naive developers rejoicing and singing praise.  That's great, but I'm not one of them.  The reason is simple: CSS is only one standard.

Passing the Acid2 test brings a great deal of weight of the reliability of a web browser, but as an AJAX specialist, my core technologies are the DOM and JavaScript.  This is why I could use Firefox 1.5 and 2.0 even though they were only somewhat close to passing the ACID2 test (though this didn't stop me writing writing Mozilla a letter or two!)

People seem to forget that JavaScript is also a standard (by ECMA-International, who also has C#-- ironic?)  Furthermore, the DOM is a standard.  I can easily deal with strange stuff going on in CSS by using more images in place of text or by using IE conditional CSS (a feature the other browsers need).  It's just one of the many standards required to be a proper web browser.  Honestly, I can even deal with their weak implementation of JavaScript, because it handles closures, namespaces, and higher-order functions fine.

The problem I hit… every… single… day… however, is their lack of strong DOM support.  There are just SO few things you can do with the DOM in IE!  I don't even mean the awesome stuff like being able to access a mouse selection is a safe way, but something simple and common like being able to use addEventListener instead of attachEvent.  Even the Silverlight team thought it was important to add support for that (in their first release too!)

In addition to the DOM, I should also mention that this is not the end of the standards list.  Firefox, Opera, and Safari all take HTML5, Canvases (part of HTML5), and SVG for granted.  IE has absolutely no support for these standards.  I'm sure more avid standards specialists could go on and on, listing even more standards that IE lacks and that others have had for a while.  We just can't forget about the other technologies.  We only complain about CSS because it's partially supported and therefore it reminds people of its sloppiness in IE, prompting us to talk about it.  Since we haven't seen them in IE, most don't consider than as important, but if we had them in IE, then we wouldn't have to complain so much about the CSS support.  We would have more standards-based visual technologies to help us get to the same end.

Lastly, I would like to mention again that "standard" not only means "common, same, or basis for comparison", but it also refers to a certain level of quality.  So, even if the IE team were to pass the Acid2 test, support JavaScript 1.5+, and add support for the addEventListener function, they would have to continually and consistently prove their integrity by releasing a major update either annually or bi-annually to keep up with the technologies.  It's very important to keep changing with technology and to keep going with the flow.  IE's lack of proper web technology support has held web technology back for way too long.

I don't think most people realize how significance of a technological boost Firefox 1.0 was when it first came on the scene!  It wasn't just a new browser or some neat piece of technology.  It was like someone dropped a Lexus LS 2008 into a local car in 1991.  It shouldn't have been that way though.  The IE team had the most power and with that power came the responsibility to lead the charge.  They failed.  To this day, the Firefox and Opera guys are very hard working people who are constantly putting out new updates and therefore are constantly proving that even though they aren't perfect, they are willing to stay with the times and provide regular updates.  The IE team has to prove themselves in the same way and I'm confident that myself and my fellow web developers will completely accept IE when it becomes a proper web browser.

Therefore, I'm not too excited about IE8 passing the Acid2 test; I was much more excited when Opera did.  It's awesome that they finally got that far, but the IE team has a TON of things that must be done before IE can start playing with the big boys again.  Personally, I think they should just do what Apple did with OS9 and just rewrite the entire thing from scratch.  I also think they should recreate the IE team with some of the best of the best from other portions of Microsoft.  The web browser is arguably the most used application on a PC today and it is therefore worthy of our best resources.  Microsoft could even rewrite the entire thing in .NET to prove to the world the amazing power and efficiency of .NET and feed two birds with one scone!

Opera Sues Microsoft Over Web Standards



I'm not going to go into too many details here, but I just wanted to point out that Opera has filed a complaint with the European Union against Microsoft for "…tying its browser…to the Windows operating system" and for "…hindering interoperability by not following accepted Web standards."  The article goes into all kinds of the same old anti-trust stuff, but it also mentions that Microsoft's technology "creates a de facto standard that is more costly to support, harder to maintain, and technologically inferior and that can even expose users to security risks."

This is tremendous huge win for anyone who 1) has respect for the web, 2) don't like segmenting QA plans to including an entire segment to IE support testing, or 3) likes to have a little self respect left over after a pure-AJAX project.  For years I've been saying that someone needs to take the IE team up on war crimes, but this filing by Opera is definitely a step in the right direction.  Perhaps someday we web developers will have the freedom to create rich client-side applications without having to add special support for the world's most "special" browser.

It's just absolutely unacceptable that someone that can infuse such a product into the world's information infrastructure and think they can get away with it.  If the WCF team had the same quality-control standards as the IE team, then SOAP would never, ever communication with anything.  If the networking stack guys had the that low of standards, can you even imagine trying to communicate between a "Microsoft TCP/IP" client and and Apache server?  Microsoft is an excellent company with great products and amazing standards, but the IE team seems to be absolutely against these things.  Sometimes people seem to forget that the word "standards" isn't just a word meaning "common, same, or basis for comparison", but that it also refers to a certain level of quality.  I've said it before and I'll say it again: the IE team has no standards (I feel a bumper-sticking coming on!)

Do yourself and the world a favor by downloading and supporting Mozilla Firefox, Apple Safari, or Opera.  Each of these are proper 7th generation web browsers, unlike Intranet Explorer whose existence is analogous to those half dead, temporary batteries that sometimes come with your kid's toys.  They are meant to be replaced.  So, if you are getting someone a computer for Christmas, give them the gift of one of these web browsers so they don't have to drag their muddy feet all over the Internet.

Links

  • Mozilla Firefox - Great CSS support, absolutely unsurpassable JavaScript and DOM support, and the ability to write browser extension with just JavaScript and CSS.
  • Apple Safari - Great font anti-aliasing with support for many of the same shortcut keys as Firefox.  A little quirky on the JavaScript and DOM side, but it's constantly improving.  I love Safari.  I usually keep Safari up most of the day when I'm working on Firefox specific projects that require me to do a lot of restarting.
  • Opera - Great support for CSS and continually improving JavaScript support with an amazing set of user features.  A little awkward for people not used to it though.