Technology Selection, Life of Microsoft Frameworks and lessons learned

When you are choosing a technology / framework from a specific Vendor (Microsoft in this case) for a product development effort, you definitely expect the technology / framework to have a long life and continue to receive due investment and attention from the Vendor.

Not only for Product Development effort, if you are betting your career on a Microsoft Technology / Framework (which is a wrong in the first place, balancing your portfolio is very important) proceed with caution.

We all know these kind of stories when we read them.

ASP.NET Web forms to ASP.NET MVC, Yeah Yeah I know the typical Microsoft answer to these kind of strategic shifts. It is not dead yada yada yada.

http://weblogs.asp.net/despos/archive/2009/10/01/the-dead-end-of-web-forms.aspx

Linq to Sql to ADO.NET Entity Framework

Moving forward, Microsoft is committing to supporting both technologies as important parts of the .NET Framework, adding new features that meet customer requirements. We do, however, expect that the bulk of our overall investment will be in the Entity Framework,

http://msdn.microsoft.com/en-us/data/bb525059.aspx#Q3

http://blogs.msdn.com/b/adonet/archive/2008/10/29/update-on-linq-to-sql-and-linq-to-entities-roadmap.aspx

The same political management speak and yeah it is not dead.

.NET Remoting to .NET WCF

WCF to WCF Web HTTP

Silverlight for Cross Platform Web Development to HTML5 (oops HTML otherwise the whatwg folks will be angry).

Silverlight Questions

Where our strategy has shifted since we first started working on Silverlight is that the number of Internet connected devices out there in the world has increased significantly in the last 2 years (not just with phones, but also with embedded devices like TVs), and trying to get a single implementation of a runtime across all of them is no longer really practical (many of the devices are closed platforms that do not allow extensibility).  This is true for any single runtime implementation – whether it is Silverlight, Flash, Java, Cocoa, a specific HTML5 implementation, or something else.  If people want to have maximum reach across *all* devices then HTML will provide the broadest reach (this is true with HTML4 today – and will eventually be true with HTML5 in the future).  One of the things we as a company are working hard on is making sure we have the best browser and HTML5 implementation on Windows devices through the great work we are doing with IE9.

This by no means should be interpreted as Silverlight not being important.  We all know the importance of having the richest possible experiences for key platforms and form-factors, and the value that consumers (both end-users and enterprise) attribute to it. This is not just a true statement for Microsoft platforms – but has obviously been demonstrated by many others as well (Apple being an example).  Silverlight is a strategic technology from Microsoft that enables developers to build those, and we think our investments and focus (in particular with the above three areas) provides us with an incredibly compelling and differentiated platform to do so.

The Managed Extensibility and Add-In Framework which kind of disappeared.

What prompted this post suddenly was the information I read on the net about the future of WPF.

The rise and fall of the Microsoft UX platform Part 1

The rise and fall of the Microsoft UX platform Part 2

The rise and fall of the Microsoft UX platform Part 3

The rise and fall of the Microsoft UX platform Part 4

WPF has no Product Manager

Hey Scott WPF isn’t dead he just said so

WPF Lip Service at it again

WPF vNext

WPF Dead?  Silverlight Dead?

*Dead* is an over dramatic and vague term.  BUT it does make one lend an
ear. The better questions to ask IMO, are "Is WPF winding down
for maintenance mode?" or "What is Silverlight’s place on the web with
Microsoft’s HTML5 push and where is it’s place on the desktop given it’s not
designed as a full featured desktop technology?"

You can look at WPF’s new features and enhancements from 3.0 – 4.0 and come
up with a huge list of goodies.  Beyond just new controls and bugfixes, we
need to look at changes to the runtime because those changes ultimately move
the bar higher in the context of what is possible with WPF in the context of
making a competitive (as in iPad) UX.

Microsoft has known of WPF’s performance problems since the first time they
wrote a line of code for it.  You will be hard pressed to find a customer
that hasn’t complained about perf issues.  And you will not have gone to a
PDC in the last few years and not hear folks bring this up to the WPF team.
This is 3rd party info by now, but I’ve been told the issues I have noted
have been brought up internally, only to be disregarded.  Why?  It’s only my
guess when I say "time and resources."  But where have all the
development *resources
*gone?

Silverlight has pretty much taken over Microsoft’s spotlight in terms of UX
platform.  If you look at they history, they actually started on WPF/E even
before WPF was RTM.  They started on Silverlight before they even FIXED WPF!
They jumped on their own bandwagon, maybe with aims of taking over the rich
web from folks like Adobe.  Now with HTML5,* I don’t even think Microsoft
really knows what it’s going to do with Silverlight*.

Fix WPF

What should we do as a developer in the Microsoft Stack?

The lessons for us as passionate developers on the Microsoft Technology Stack –

• Treat the new technologies / frameworks that come out of Microsoft with a grain of salt. This is especially true if the framework does the opposite of what community wisdom is (example, the complex page lifecycle of asp.net and stateful model of web development using viewstate)
• Invest on open source alternatives if any (ex: use NHibernate over Linq to Sql and you do not give a damn when Microsoft declares Linq to Sql dead – oh it is not dead I know).
• Invest to learn what other (non Microsoft) communities are doing in similar frameworks / technologies
• I wish the ALT.NET movement is active, but you know the ALT.NET guys – see where they are headed.
• The Core Microsoft platform hardly changes. A few examples – WCF’s ChannelModel is solid and can support WCF Traditional as well as WCF Web HTTP. Its the higher level abstraction of ServiceModel that went for wild swings. HttpHandlers and HttpModules are the same foundation on which ASP.NET Web Forms as well as ASP.NET MVC were built with. Invest in learning the core.
• Invest in meta learning. Example: learning Linq to Sql / Entity Framework as a Object Relational Mapper at conceptual level than as a tool. UnitOfWork is UnitOfWork in any ORM, Concrete Table Inheritance Mapping is Concrete Table Inheritance Mapping in any ORM.

Web Development basics for ASP.NET Developers – Floating

One of the interesting and powerful ways you can affect normal flow using floats. A floated element is removed from the normal flow and shifted towards either right or left edge of the containing block as far as it can go. When the width is not enough the floated element box wraps below the first row of floated elements.

float:left

Left Float

An example of float left. See how the text content flows around the right edge of the left floated element. See how the line boxes are shortened, more on that later. Float left thus shifts element from normal flow and moves it as much left as possible.

float:right

Right Float

An example of float left. See how the text content flows around the left edge of the right floated element. See how the line boxes are shortened, more on that later. Float left thus shifts element from normal flow and moves it as much to the right as possible. Next we will see what happens when there are multiple floats.

Multiple floats

Right Float 1

Right Float 2

Right Float 3

Right Float 4

Multiple floats, See how the 4 the div is pushed down as the width is used by this text content and the other elements in the first row. The same applies to left floated content as well. Next we will see what if a float’s height exceeds the containing block’s height.

What happens when a float’s height exceeds the containing block’s hieght

Left Float where height exceeds that of the container. I have also removed the float’s background here.

In this example the float’s height exceeds the containing block’s height.

How block level elements after the float are affected by the float

Left Float where height exceeds that of the container. I have also removed the float’s background here.

In this example the float’s height exceeds the containing block’s height.

Let us say that this paragraph should have been below the left float as per our requirement. Notice how the first line box is still shrunk. More on line box later.

Clearing

Left Float where height exceeds that of the container. I have also removed the float’s background here.

In this example the float’s height exceeds the containing block’s height.

Now this paragraph is actually beginning below the left float as per our requirement. This is the power of clear. clear: left doesn’t allow any element to float to the left of the element box, right doesn’t allow any element to float to the right of the element box and both doesn’t allow elements to float on both left and right

Line box shortening

Left Float

Notice how the background of this paragraph is bleeding into the floating element as well. But the text doesn’t bleed into the floating box. That’s because the anonymous boxes for each line of content inside of the block level box of this paragraph (called line boxes) are shortened

Use your favorite browser’s development tools to view the markup

Read the following articles for a better understanding of floats:

CSS Floats 101

Web Design 101: Floats

Autistic Cuckoo on Float Layouts (via the Internet Archive)

Web Development basics for ASP.NET Developers – Positioning

As I mentioned in the post about Normal Flow the rendering can be modified by using CSS positioning and floats. We will look into positioning in this post.

position: static implies Normal Flow, the flow is not modified.

All other positioning is relative to something else

position:relative is relative to the element box itself. For example Specifying position: relative and left: 5px, top: 5px renders the element moving it 5px down and 5px to the right of the actual element box. It is useful to shift rendering location of the element relative to its original element box by a few pixels to the left, right, top or bottom.

position:absolute is relative to the containing block. The containing block is the ancestral element which is positioned relative, absolute or fixed. If there is no such element then a hypothetical initial containing block (the viewport usually) is used. Viewport is the visible area of the browser window that can show html content (excludes addressbar, menubar, statusbar, toolbar etc.). When an element is positioned absolute it is removed from the document flow and positioned relative to the containing block as specified by the top, left, right, bottom attributes.

position:fixed is similar to position:absolute but the containing block is always the initial containing block. This is useful when you want to create a menu that is always at the top of the page and doesn’t scroll as the user scrolls content vertically in the viewport.

The stacking order is controlled by the z-index css attribute. Element boxes with higher z-index appear above element boxes with lower z-index.

I recommend you to read the following excellent articles on positioning:

Web Design 101: Positioning

CSS Positioning 101

Web Development basics for ASP.NET Developers – Normal Flow

Normal flow (or document flow as some people call it)  is the manner in which a browser renders html elements in the absence of any float / position related css attributes applied to the elements.

Block elements are rendered one below the other / stacked vertically in the order in which they appear in the html document. They can contain other block level elements, inline elements, text.

Inline elements are rendered in the same line stacked horizontally next to each other (left to right in most of the languages) in the order in which they appear in the html document. They cannot contain block level elements. If the width is not sufficient to display all the inline elements / content then  rendering starts in the next line.

The visual layout of  each element is governed by a box generated as as per the css box model.

This is rendering in Normal Flow. But float and position which affect the normal flow are what make css powerful enough to do visual layouts.

Web Development basics for ASP.NET Developers – Block vs. Inline elements

	Block	Inline
Width	Takes up whole width available	Takes up only much width as needed
line breaks	Generates line-breaks before and after	Does not force any line break (except <br /> which is a special case)
width, height – css attributes	applicable	ignored
max-width, max-height – css attributes	applicable	ignored
min-width, min-height – css attributes	applicable	ignored
examples	div, h1,h2…h6, p, ul, ol, dl, li, dt, dd, table, blockquote, pre, form	span, a, strong, em, img, br, input, abbr, acronym
Layout behavior in normal flow	stacked vertically one below the other (top to bottom) in order they appear in the document	stacked horizontally one after the other (left to right) till width permits and then continues in the next line
What can it contain?	other block level elements, inline elements, text data	other inline elements, text data – cannot contain block level elements

Though HTML elements have their default display styles as block or inline, we can change the behavior using the display css attribute (block, inline and other exotic stuff). For example you can change the list item’s display to inline to have a horizontally stacked menu instead of a vertical one.

References:

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

Web Development Basics for the ASP.NET Developer – What is Box Model?

All document elements (visible) generate an element box which describes the amount of space that element occupies in the layout of the document. As per the CSS specification the box consists of the element’s content area, padding, border and margin.

The margin is always transparent and reflects the containing block’s background properties, whereas the content and padding reflect the element’s background properties. The border assumes the foreground properties of the element unless explicitly specified.

The CSS box model

References:

http://www.w3.org/TR/CSS21/box.html

Web Development basics for ASP.NET Developers – What is DOCTYPE?

Most of us conveniently ignore the DOCTYPE in an ASP.NET Page, What is DOCTYPE in the context of web development?

It is an instruction to the web browser that

• Defines which version of (X)HTML our document is actually using
• Triggers a rendering mode in most of the families of browsers

The most commonly used DOCTYPEs

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Not Allowed	Not Allowed	Not Required

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Allowed	Not Allowed	Not Required

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Allowed	Allowed	Not Required

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Not Allowed	Not Allowed	Required

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Allowed	Not Allowed	Required

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Allowed	Allowed	Required

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;

Presentation, Deprecated elements (ex: FONT)	Framesets	Well formed XML
Not Allowed	Not Allowed	Required

HTML 5

<!DOCTYPE HTML>

Some rules

• The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
• The doctype declaration must be exact (both in spelling and in case) to have the desired effect

We saw about the versions / flavors of (X)HTML, now lets return to the rendering modes of the browsers.

In Netscape and Internet Explorer 4 days CSS standards compliance was really patchy, but moving forward the newer browser version were getting closer to the standard. The browser vendors faced these major issues

• allow web developers who knew their standards to choose which mode to use.
• continue displaying old pages according to the old (quirks) rules.

Thus all browsers needed two modes: quirks mode for the old rules, strict mode for the standard.

The right DOCTYPE declaration will trigger the strict rendering mode in most families of browsers.

References & Further Reading:

http://www.w3.org/QA/Tips/Doctype

http://www.w3.org/QA/2002/04/valid-dtd-list.html

http://www.w3.org/QA/2002/04/valid-dtd-list.html

http://www.alistapart.com/articles/doctype/

http://www.quirksmode.org/css/quirksmode.html

http://www.quora.com/Without-a-version-number-in-the-HTML5-doctype-how-will-we-specify-future-versions-of-HTML