Roslyn: C# is cheating on me with JavaScript (or how to compile C# into JavaScript)

While working extensively on development of the Single Page Applications (SPA) I was facing a fact that my server-side data models were evolving quicker than their JavaScript counterparts. Both the client-side and the server-side data models were getting quickly out of sync.

The brute force solution of using the T4 templating engine to emit both the client-side and the server side data models didn’t look that appealing to me. Primarily due to a simple fact that it’s not that easy to refactor the T4 templates. And, the ReSharper junkie like me, can’t tolerate this fact.

So I’ve decided to give the latest release of Roslyn compiler-as-a-service CTP another spin and use it as part of my build sequence and compile my C# models directly into the appropriate JavaScript ones. This was giving me the advantage of using the C# as a primary development environment and leaving the JavaScript to follow the “big-brother”.

Jinx C#-to-JavaScript compiler was created as a result of this exercise. You’re welcome to get the Jinx source from the GitHub. I’ll appreciate any collaboration on this project.

Note: all of the code is an intermediate solution that was answering my personal needs for the project I was running. It is in no-way represent the full fledge solution. If you want something bigger and more feature-reach, you can either contribute to my solution or look into projects like Script# or SharpKit.

ASPConf 2012: Content for my presentations

Building complex Single Page Application should be as enjoyable as visit to a SPA

You can watch the full Video on Channel9 and get the Source on the GitHub.

Video

---

Tips for Building Responsive Cloud Applications

You can watch the full Video on Channel9 and get the Source on the GitHub.

Video

ASPConf: Generating dynamic views, but Google Chrome was too smart for me

I had a blast presenting for ASPConf 2012. I want to thank all the organizers, presenters and attendees. Without you it wouldn’t have been possible.

One of the questions from one of the attendees during my “Building complex Single Page Application should be as enjoyable as visit to a SPA” talk was:

Q: Is it possible to bring on-demand portions of the application that will be emitted by the Asp.Net MVC Views (aka: dynamic views generation)

A: Sure (see Picture #3).

But when, in fact, I’ve tried to demonstrate it right away – I hit a snag.

What happened is: my implementation was correct but Google Chrome was too smart for me to handle it and wrapped the partial HTML with the full “HEAD” and “BODY” tags [See Picture #1].

I’ve assumed that my server was returning more than the generated by the Raw view content itself. If I would’ve checked a network stream [See Picture #2] (or Fiddler) I would’ve seen another result – the correct one.

Picture #1

Picture #2

So, this is a simple example how you can import a dynamically generated content from an Asp.Net Mvc view into a SPA application:

1. Create a view

	<div id="home" style="border: 2px; background: #FF0097;">
	<h2>Welcome to "Honey-do-list"<br/>from a "@Model.Id"</h2>
	</div>

view raw gistfile1.html hosted with ❤ by GitHub

2. Create a Controller entry (when you’ll navigate to this view you should see a result on Picture #2)

	//
	// GET: /Home/Hello
	public ActionResult Hello()
	{
	var serverInfo = new ServerInfo {Id = "Smart Server "};
	return View(serverInfo);
	}

view raw gistfile1.cs hosted with ❤ by GitHub

3. Change a dependency path in your SPA view to point to the new content (and the final result should look like Picture #3)

	define(["text!/../home/hello"], function (template) {
	// ... Here is your code ...
	});

view raw gistfile1.js hosted with ❤ by GitHub

Picture #3

Tips for building Large-Scale rich Web sites and applications

When you’re building a workflow-rich web site or application, you’re in a danger to get buried under piles of entangled JavaScript code, web pages, styles and other related artifacts.

It’s better to follow the best practices from the beginning to reduce the weight of the complexity and enable easy extensibility of your code. Here are a couple of links that may put you on a good path:

• Patterns For Large-Scale JavaScript Application Architecture
• Code and Slides: Techniques, Strategies, and Patterns for Structuring JavaScript Code
• Backbone.js Patterns
• Introduction To Composite JavaScript Apps
• Organizing your application using Modules (require.js)
• Organizing Your Backbone.js Application With Modules
• Learning JavaScript Design Patterns (book)
• Yet Another Podcast #64 – Building Single Page Javascript Applications
• References, Routing, And The Event Aggregator: Coordinating Views In Backbone.js

Here is an entry list of frameworks to know about:

• jQuery – you HAVE to know this
• Backbone.js – composition, navigation, templating, routing, history
• Knockout.js – data binding
• JsRender – templating
• toastr – display toast popups
• Sammy.js – routing
• SignalR – async signaling library
• require.js – file and module loader
• Amplify.js – communication, store, pub/sub
• JSMock – mock library
• mockJSON – JSON mock library
• JsUnit  – guess what …

I’m not afraid to admit that I’m not a web designer and I struggle with building good-looking sites, but there are a couple of tricks that I use to make sure that I’m not stuck:

• LESS – The dynamic stylesheet language
• SaSS – style sheet extensions
• Twitter Bootstrap templates

Tips for VisualStudio–devoted crowd:

• CoffeeScript, Sass and LESS support for Visual Studio and ASP.NET with the Mindscape Web Workbench
• NuGet: SassAndCoffee
• Mindscape Web Workbench Visual Studio extension

UPDATE:

Here are a couple of more helpful ones:

• async.js – Async utilities for node and the browser

Adding Nancy to the existing ASP.NET MVC site

There is an issue adding Nancy to the ASP.Net MVC site due to a simple fact that MVC controls the routes not through the web.config but through the routing table.

If you adding Nancy to the existing MVC site – make sure to remove the sub-route that controlled by Nancy from the routing table.

Here how it works:

1. Follow all the steps from the Nancy Documentation Wiki

2. Add your module and make sure that it has an “offset” path (via inheritance)

public Module() : base("/nancy")
{
   ...
}

3. Remove the “nancy” route from the Routing table in the Global.asax.cs 
MvcApplication.RegisterRoutes(...)
{
   ...
   routes.IgnoreRoute("nancy/{*pathInfo}");
   ...
}

				

NWT – .Net Web Toolkit

Now, after waiting for quite some time, we finally can implement the real solution for .Net <-> javascript conversion and bridge the impedance gap in the projects that heavily rely on the powerful rich web UI.

Currently we have solutions like Script# and CofeeScript and others. The pros in cons of these systems have been discussed countless times (ex: Hanselminutes -  JavaScript is Assembly Language for the Web: Semantic Markup is Dead! Clean vs. Machine-coded HTML).

With the recently released project Roslyn (or alternatively Mono Compiler Services) it is possible to have a clean solution to the problem:  I write my data and data model in a language and an environment that allow solid validation and refactoring.

I’m ironing out some kinks in my implementation and, as soon as it’ll be in a stable state, I’m going to release a NWT (NeWT) project that will provide a similar to GWT (Google Web Toolkit) functionality.

Now I have ALL of the Microsoft developer certifications – long journey is over!!!

Now I own the full deck of the Microsoft certifications and I can sit back and relax (beer is in order ;-). Unfortunately, in the startup world that I operate most of the time, it’s not very recognizable achievement, but it’s nice to put these logos on my presentation slide decks and, especially now, I have a very powerful bragging rights – I have ALL of the Microsoft developers certifications !!!

It was a lengthy path and, I should add, a very confusing one. It wasn’t very obvious what certification is a prerequisite to which one and, I must add, I’ve made a couple of mistakes on the road until I’ve discovered a developer’s certification map by Jorgen Thelin that put everything in order and cleared all the confusions.

Web Form Validation: Best Practices and Tutorials

Great article about forms and ways of implementing data validation for the web applications.

Highly advised to read.

Adding Watermark to GWT Textbox widget

Let’s see how we can improve our UI by adding some watermarked “spice”:

Let’s define the primary style for the text box (textInput) and the dependent style for the watermark (textInput-watermark):

.textInput {
	border: 1px solid #C9C7BA;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-left: 2px;
	padding-top: 2px;
}

.textInput-watermark {
   /* background-image: url('images/overlay.gif');
   background-repeat: no-repeat;
   padding-left: 20px;
   vertical-align: middle; */
   font-style: italic;
   color: DarkGray;
}

Note that the watermark style can contain images as well (see the commented out piece).
After the styles were defined we need to add some code that will apply it to the text box. To do this I’m going to extend the default GWT TextBox. The trick is to hijack the OnBlur and OnFocus events. When the OnBlur is occurring, we’re going to show the watermark and OnFocus – hide it:
public class WatermarkedTextBox extends TextBox implements BlurHandler, FocusHandler
{
	String watermark;
	HandlerRegistration blurHandler;
	HandlerRegistration focusHandler;
	
	public WatermarkedTextBox( )
	{
		super();
		this.setStylePrimaryName("textInput");
	}
	
	public WatermarkedTextBox(String defaultValue)
	{
		this();
		setText(defaultValue);
	}
	
	public WatermarkedTextBox(String defaultValue, String watermark)
	{
		this(defaultValue);
		setWatermark(watermark);
	}
	
	/**
	 * Adds a watermark if the parameter is not NULL or EMPTY
	 * 
	 * @param watermark
	 */
	public void setWatermark(final String watermark)
	{
		this.watermark = watermark;
		
		if ((watermark != null) && (watermark != ""))
		{
			blurHandler = addBlurHandler(this);
			focusHandler = addFocusHandler(this);
			EnableWatermark();
		}
		else
		{
			// Remove handlers
			blurHandler.removeHandler();
			focusHandler.removeHandler();
		}
	}

	@Override
	public void onBlur(BlurEvent event)
	{
		EnableWatermark();
	}
	
	void EnableWatermark()
	{
		String text = getText(); 
		if ((text.length() == 0) || (text.equalsIgnoreCase(watermark)))
		{
			// Show watermark
			setText(watermark);
			addStyleDependentName("watermark");
		}
	}

	@Override
	public void onFocus(FocusEvent event)
	{
		removeStyleDependentName("watermark");
		
		if (getText().equalsIgnoreCase(watermark))
		{
			// Hide watermark
			setText("");
		}
	}
}

				

Job trends for GWT and jQuery on a sharp rise

Gotta love this …