Blog 52: Posts

Using JSONP at MVC3

Brenda Valadez — Mon, 14 Nov 2011 21:29:38 GMT

Body:

By Sergio Cavazos.

Quite recently we had to develop an API to expose some data among a MVC3 site, this data would be consumed at 3^rd party domains via JSON, thus meaning that due to browser security restrictions, asynchronous requests to cross domains are restricted. Researching a little we found that there’s a technic called JSONP which allows you achieve this.

What is JSONP ?

Known for JSON Padding, in this technic, an “?callback= “ is added to the querystring, so server would process the request, and instead of returning a JSON object or XML, it responds with an “application/x-javascript” response using the callback parameter as a wrapper function, so when request is answered, the browser will execute the JavaScript returned.

Note: Serverside services have to be enabled or tweaked to handle JSONP requests

Applying JSONP in MVC3

First of all let’s see the code that makes the magic:

public class JsonpResult : JsonResult

{

public override void ExecuteResult(ControllerContext context)

{

if (context == null)

{

throw new ArgumentNullException("context");

}

var request = context.HttpContext.Request;

var response = context.HttpContext.Response;

string jsoncallback = (context.RouteData.Values["callback"] as string) ?? request["callback"];

if (!string.IsNullOrEmpty(jsoncallback))

{

if (string.IsNullOrEmpty(base.ContentType))

{

base.ContentType = "application/x-javascript";

}

response.Write(string.Format("{0}(", jsoncallback));

}

base.ExecuteResult(context);

if (!string.IsNullOrEmpty(jsoncallback))

{

response.Write(")");

}

If you notice, our class JsonpResult extends from JsonResult, it overrides the ExecuteResult method in which it seeks for the callback parameter, and if found, it changes response.ContentType and wraps the resulting JSON data using the callback parameter value.

Heres an example of a method of a controller using it

public ActionResult GetJsonFeed(string eventIds)

{

//get rid of any spaces

eventIds = eventIds.Replace(" ", string.Empty);

//cast so we get a long[]

var resp = GetEvents(eventIds.Split(new char[]{','})

.Select(x=>long.Parse(x)).ToArray());

return new JsonpResult{

Data = resp,

JsonRequestBehavior = JsonRequestBehavior.AllowGet

} ;

}

And finally to consume this, we might find Jquery pretty useful

$.ajax({

url: "http://3rdpartydomain.com/EventFeedJson",

type: "get",

data: {

eventIds:"1059849, 1059850, 1059851, 1059852, 1059853, 1059854, 1059855, 1059856, 1059857, 1059858"

contentType: "application/json; charset=utf-8",

dataType: "jsonp",

jsonpCallback: "myFunct",

error: function(jqXHR, textStatus, errorThrown){

alert(errorThrown + textStatus + jqXHR);

}

});

function myFunct(data){

alert(data);

}

So if you are in the need to expose data so it can be consumed via asynchronous requests from other domains you can use this. Hope you found this useful.

Published: 12/20/2011 3:30 PM

BlogTitleForUrl: using-jsonp-at-mvc3

Adding a rating column to default Blog Site’s Page in SharePoint 2010

Brenda Valadez — Mon, 14 Nov 2011 21:19:23 GMT

Body:

By Rosario Almaguer.

When we create a Blog site for our Site Collection, the default page doesn’t show a rating section, like in the follow image:

So if you want to show a rating you can do it following these steps:

1. Firstly, you have to click in Site Actions and select View All Site Content, in the Lists section you will find a Posts list, click on it.

2. Next, you have to access to List tab on the Ribbon and click on List Settings section. You will see a page like this:

You can see which columns are parts of the Posts list in the Columns section.

3. In General Settings section, select Rating settings and you will be linked to the follow page:

Here, you have to allow items in the Posts list to be rated, so select Yes and click OK. Wait a moment while the changes are applied to the list.

1. Now, you can see in the Columns section that two new columns were added:

5. After that, go to Posts list and see that a new column is showed in the list:

But if you go to your default page you will see that the Rating section isn’t showed. So, firstly you have to create a new view which will include:

· Title

· Created By

· Category

· # Comments

· Rating

· Body

6. So, to show the rating column in our default page, we have to open Site Actions and click on Edit Page, Click on the Post Web Part Menu

Select Edit Web Part. On the List View section, select the view that you have created and click ok.

7. Now, you will see the Post Web Part like this:

Click on Stop Editing.

8. You can edit the View of the Post Web Part opening the site in SharePoint Designer 2010, open SharePoint Designer and open the Site, in the Customization section select Edit Site Home Page.

9. On the default.aspx tab select Advanced Mode

10. Display the Split View and Select the WebPartPage:XsltListViewWebPart, The ribbon will display four new tabs, select the Design Tab and you will be able to modify the style of the list, you can play with the columns that are showed in the view.

11. Finally, when you finish of edit the List View, save your changes and click on preview in browser.

12. As a result...

Published: 12/15/2011 3:20 PM

BlogTitleForUrl: adding-a-rating-column-to-default-blog-site’s-page-in-sharepoint-2010

Categories: The Web;SharePoint;SharePoint 2010

Design Patterns for Data Persistence

Brenda Valadez — Mon, 14 Nov 2011 20:29:27 GMT

Body:

By Carlos Martinez.

Repository Pattern

The repository is useful when trying to separate the domain logic from the logic that retrieves the data and maps it in entity objects.

The repository is a small layer between the data source layer and the upper domain layers of the application. Gets the data from the data source and retrieves it to the upper layers. Also the repository contains the persistence logic of the domain objects. This logic separation has 3 benefits:

· The logic for web services and data are centralized

· It simplified the unit test.

· It provides a flexible architecture that can be adapted as the overall design of the application evolves.

Lazy & Eager Loading

When working with roots objects, a common issue is that sometimes it is need to navigate to his child properties, but those values are not needed at all times, that’s why is not recommendable to load all values any time the root object is loaded.

There are four main varieties of lazy load. Lazy Initialization uses a special marker value (usually null) to indicate a field isn't loaded. Every access to the field checks the field for the marker value and if unloaded, loads it. Virtual Proxy is an object with the same interface as the real object. The first time one of its methods are called it loads the real the object and then delegates. Value Holder is an object with a getValue method. Clients call getValue to get the real object, the first call triggers the load. A ghost is the real object without any data. The first time you call a method the ghost loads the full data into its fields.

When using Eager loading, the attempted situation is to get all the data from the sources, with a minimum amount of queries in the process. So the code can archive some level of performance by avoiding querying multiple times the same data.

Published: 12/12/2011 2:28 PM

BlogTitleForUrl: design-patterns-for-data-persistence

Categories: .NET;Software;The Web

About Feedback & Tunnels (SDLC)

Brenda Valadez — Mon, 14 Nov 2011 20:25:09 GMT

Body:

By Daniel Ramirez.

An important thing through the Software Development Cycle is the feedback a developer gets during or after iteration. He/she gets all kinds of it, from internal things such as code, to all the way up to what’s shown to the end users.

Feedback is important

In any kind of work, I believe we should always look for some kind of feedback. Feedback does not necessarily means you have done things the wrong way, it can help you see how other people see your work, and lets you know if they understood correctly the idea behind it.

Feedback lets you know if things can be improved, motivates you to continue your work. If you get an email saying "Amazing work!", "Your strategy is going correct!", or a simple "+1!" it certainly - correct me if I'm wrong - makes your day and makes you feel valuable. I'd like to believe you learn you did it correctly and will make it again like that, or even challenge you to improve it.

But how do we get feedback? We just ask. "How are we doing?", "Is this how you visualized it?".

If you've got doubts, ask. The ways to get feedback are endless. For instance we could do a survey, a poll on Facebook, or ask a question on Quora, or discussing it on Convore.

Tunneling is simple

Now what about tunneling?

At its core, tunneling is creating a channel of bidirectional communication between two endpoints, carrying a payload/data inside. For example I'd like to access a remote machine's port by accessing a my local machine port, let’s say I want to connect to MySQL 3306 port, but it has been blocked by the firewall. By using SSH, I could establish port forwarding and then connect to my local port.

It is basically a simple command, ssh. It is available via the openssl package in unix boxes Or downloading Bash for windows. Don't know if there is any kind of native port redirection in PowerShell though.

Anyway, to link a local port to a remote port on a server it is done by the following command:

ssh -f -L {localport}:{remotehost}:{remoteport}

Exposing a port is even simpler

What do Tunneling and Feedback have in common? Well, a few months back I discovered showoff.io, and then another Open source service called localtunnel, developed by Twilio. They both make it easy to share our web development progress to the world, and get feedback.

If we would like to show a friend, or a client our progress on development it should be easy. There are some times where a proper dedicated dev box is a better solution, but for instant feedback, seeking confirmation on certain things, this could help. There is no need to go through all the dev build hassle just to show a change.

In both services, it is just a simple as a:

$ gem install localtunnel -- Just once to install it.

$ localtunnel 8080

This will generate a random subdomain of the service which is publicly accessible to the people you share it with.

The only drawback of this is this requires Ruby; however a few days ago I ported it to c# and created a console and a UI file. So feel free to try it out.

Under the hood

You could just read the code, but the client basically does this few things:

1. The service listens for the 80 port,

2. A request for a tunnel is made

a. The ssh public key for authentication is registered on the machine

b. A subdomain is randomly generated

c. A server port is opened, which will be the one connected to the developer's machine.

3. Localtunnel's client now creates a ssh tunnel with forwarding from the developer's localport to the open port

4. Now when a request is made to the subdomain, the service will catch it, identify the tunnel it has associated and redirect the packets.

The server is also hosted on the localtunnel’s repo, if you would like to set up your own. It requires Python + Twisted lib.

Published: 12/8/2011 2:22 PM

BlogTitleForUrl: about-feedback-amp-tunnels-sdlc

Categories: Best Practices;.NET;Software;The Web

How to set Favicon to the SharePoint 2010 site?

Brenda Valadez — Mon, 14 Nov 2011 20:16:03 GMT

Body:

By Rosario Almaguer.

SharePoint 2010 comes with a orange Favicon and it's present in SharePoint Root Folder\Template\Images [eg. C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\IMAGES\]. Open this folder and search for favicon.ico and rename the file to FaviconBackup.ico. Now copy your favicon to this folder and make sure it's named as "favicon.ico", you can change the name of you favicon [eg. MyFavicon.ico]. Now restart IIS(open Command Prompt -> IISReset), clear browser cache/temproary internet files. Close the browser and reopen then browse the SharePoint site.

In SharePoint Designer 2010 select Master Pages, then select the master page that will show the new favicon. Now click “Edit File” link to add the favicon code. If it asks for check out, click yes and continue.

Find <SharePoint:SPShortcutIcon ID="SPShortcutIcon1" runat="server" IconUrl="/_layouts/images/favicon.ico"/> and change the name of the favicon. Save and close (If you have checked out then you need to check in and site collection administrator has to approve it via Site Settings -> Galleries -> Master pages and page layouts -> Check in and Approve). Now reset IIS/clear browser cache and check.

If mulitple sites are hosted in same farm and need to set different favicons for different sites then we have to update Master Page Code. Open the site with SharePoint Designer 2010 and select Master pages -> v4.master. The default.master is still present in SharePoint 2010 for backward compatibility and visual upgrade. But SharePoint 2010 uses v4.master only. Now click "Edit File" link to add the favicon code. If it asks for check out, click yes and continue.

Find <SharePoint:SPShortcutIcon ID="SPShortcutIcon1" runat="server" IconUrl="/_layouts/images/favicon.ico"/> and change the path of favicon. Save and close (If you have checked out then you need to check in and site collection administrator has to approve it via Site Settings -> Galleries -> Master pages and page layouts -> Check in and Approve). Now reset IIS/clear browser cache and check.

Published: 12/5/2011 2:13 PM

BlogTitleForUrl: how-to-set-favicon-to-the-sharepoint-2010-site

Categories: SharePoint 2010;SharePoint;The Web

Why does my VS2010 project seem to forget assembly references at build time?

Brenda Valadez — Mon, 14 Nov 2011 20:03:52 GMT

Body:

By: Alejandro Villarreal

I recently experienced one of the most puzzling issues I’ve dealt with: after I finished coding my project in Visual Studio 2010 I tried to build it but it failed, complaining of namespaces that didn’t exist (which means a bunch of types that weren’t declared and thus code that the compiler didn’t understand). This didn’t make sense because the assembly that contained those namespaces was still in the “References” part of my project, and I had used IntelliSense with the types it contained. So I knew for a fact that Visual Studio did know that the assembly was there, and was able to analyze it and use it.

But then why couldn’t I build my project? I tried removing and re-adding the reference, which fixed the “syntax errors” detected by the compiler when it lost memory of the namespaces in the external assembly, but trying to build it again caused VS to forget about them one more time.

So I turned to the Internet for a solution to this issue, and I quickly found the answer: my project was set to target the .NET Framework 4 Client Profile. First of all, what’s that? Well, MSDN says: “The .NET Framework 4 Client Profile is a subset of the .NET Framework 4 that is optimized for client applications”. Furthermore, a note in the same article states

If you are targeting the .NET Framework 4 Client Profile, you cannot reference an assembly that is not in the .NET Framework 4 Client Profile. Instead you must target the .NET Framework 4.

That explains the whole thing, and the solution is indeed as simple as changing that property of the project from one value to the other, which can be done as follows:

1. Right click on your project in Visual Studio, and click on Properties:

2. In the “Application” tab, change the value of “Target Framework” from .NET Framework 4 Client Profile to .NET Framework 4.

I’m not sure if the Client Profile should be default for new projects, or for what types of projects is it the default, but at least the problems that it might cause are easily identifiable, and the solution for them is simple.

Published: 12/1/2011 2:01 PM

BlogTitleForUrl: why-does-my-vs2010-project-seem-to-forget-assembly-references-at-build-time

Categories: .NET;Software

How to use Fiddler as an Ad Blocker

Brenda Valadez — Mon, 14 Nov 2011 18:55:03 GMT

Body:

By Fernando Mendoza.

I’ve been using Fiddler a lot these days. To test how requests and responses go to and come back from the server, being HTML responses, SOAP responses or custom responses from web services.

One website I like a lot is StackOverflow; I use it to find answers when I’m stuck with a programming or configuration issue. I like this site, and even though they don’t have too many ads it still bothers me a bit. So one day I was thinking if it was possible to use Fiddler to modify the HTTP response from the StackOverflow server before it’s rendered by the browser.

Turns out it’s possible, Fiddler has something called Rules that allows you do that. Let’s see how to do that step by step.

The following is a sample page from the site before configuring Fiddler with those changes we want it to apply to the HTML response:

Then we identify those areas we don’t want to be displayed by inspecting the rendered HTML. In my case I use Firebug to help me with this:

Now we start Fiddler and go to the Rules menu and select the Customize Rules option (Ctrl + R).

The CustomRules.js file will open (typically in Notepad) and we can start editing it. If we want to use another text editor we can go to the C:\Users\[USER]\Documents\Fiddler2\Scripts folder and open it from there.

Once opened, we search for the OnBeforeResponse function and we make our changes there by using the utilReplaceInResponse() method. Following are the replaces necessary to the HTML response so that the browser doesn’t show the ads and other elements we don’t want to be displayed.

Highlighted code:

static function OnBeforeResponse(oSession: Session) {

...

if (oSession.HostnameIs("stackoverflow.com") && oSession.oResponse.headers.ExistsAndContains("Content-Type","text/html")){

oSession.utilDecodeResponse();

oSession.utilReplaceInResponse('<div class="nav askquestion">','<div class="nav askquestion" style="display: none;">');

oSession.utilReplaceInResponse('<div class="everyonelovesstackoverflow">','<div class="everyonelovesstackoverflow" style="display: none;">');

oSession.utilReplaceInResponse('<div id="footer">','<div id="footer" style="display: none;">');

oSession.utilReplaceInResponse('<form id="post-form"', '<form id="post-form" style="display: none;"');

oSession.utilReplaceInResponse('<div id="sidebar">', '<div id="sidebar" style="display: none;">');

}

Once this is done, we save the file and refresh the page. The elements we don’t want to be displayed will be hidden thanks to the HTML replaces in the rules file.

Following is the final result:

Published: 11/28/2011 12:58 PM

BlogTitleForUrl: how-to-use-fiddler-as-an-ad-blocker

Categories: HTML;.NET

Beware of RequestUri when exposing WCF REST services through HTTPS

Brenda Valadez — Mon, 14 Nov 2011 17:58:41 GMT

Body:

By: Alejandro Villarreal

We recently implemented a WCF REST service which authenticates the caller before executing any of the operations it exposes. It also has help page (so users can see the supported operations and the expected inputs) which we want to expose to any user, regardless of authentication. In principle this is very easy: we just needed to identify requests to the “help” section of our service (http://myServiceUrl/help) and allow them to go through without further validation.

We have a method that returns “true” for requests that should go through, and “false” for those that shouldn’t, so originally our code to solve the problem looked like this:

if (requestUri.RequestUri.ToString().Replace(requestUri.BaseUri.ToString(), String.Empty).StartsWith("help"))

{

    return true;

}

Simple, right? Check the URI that was requested, remove the base URI, and check if the remaining string starts with “help”.

And indeed, this solution worked perfectly at first. The problem came when we moved the site from an http binding to https. The service itself worked fine, but we just couldn’t access the help page. This particular piece of code seemed like the only candidate where something could be going wrong, but what was it? To find out, I created a self-signed SSL certificate in my machine, configured the development site to use it, and attached Visual Studio to the IIS worker thread for that site.

And oh surprise! It seems that for sites with an https binding, IIS sets the RequestUri property to the host-header configured in the certificate, not the host-header in the actual request (at least for single-domain certificates, like the one I created; it’d be interesting to know what does it do for wildcard certificates). So if the certificate was issued for myCertifiedDomain.com, but we access the help page through https://myServiceUrl.com/help, the RequestUri property will contain https://myCertifiedDomain.com/help, while the BaseUri property will contain https://myServiceUrl.com/ (note that it does not have the “help” segment at the end, since this is the base URI). Given these inputs, the String.Replace logic that we had implemented wasn’t ever going to work.

To make things a bit more interesting, our service is hosted as an application inside the site in IIS. So in reality, the URLs look something like this:

· RequestUri: https://myCertifiedDomain.com/serviceApp/help

· BaseUri: https://myServiceUrl.com/serviceApp/

The solution was clear: we had to modify the condition that verifies if the requested resource is the service’s help page. I browsed through the properties exposed in the Uri class (of which both RequestUri and BaseUri are instances), and found a suitable candidate: AbsolutePath. According to MSDN “[AbsolutePath] does not include the scheme, host name, or query portion of the URI”. In my example, this means that I would see the following (highlighted in bold):

· RequestUri: https://myCertifiedDomain.com/serviceApp/help

· BaseUri: https://myServiceUrl.com/serviceApp/

Voilà! With those inputs we could keep the condition we already used, replacing the URI’s with their corresponding AbsolutePath properties. The code ends up looking like this:

if (requestUri.RequestUri.AbsolutePath.Replace(requestUri.BaseUri.AbsolutePath, String.Empty).StartsWith("help"))

{

    return true;

}

As you can see, the fix was really simple… once we understood where the problem was. I couldn’t find any documentation for this URL-replacing behavior, or other instances of the same problem, so I hope this post will help somebody in the future.

Published: 11/24/2011 11:57 AM

BlogTitleForUrl: beware-of-requesturi-when-exposing-wcf-rest-services-through-https

Categories: WCF;The Web

SQL Server: Fix duplicate values for uniqueness constraint.

Brenda Valadez — Mon, 14 Nov 2011 17:48:20 GMT

Body:

By: Alejandro Villarreal

During database development, unique indexes (or constraints) are very important part of the design. There’s always data for which you do not want to have repeated values, like usernames or email addresses. Different applications might have their own uniqueness requirements, but they all usually have at least one. It’s great when we can identify those requirements from the start and create the appropriate indexes up front.

But what if your application now needs to enforce uniqueness on the values of a million-row table which has tons of duplicates in the production environment?

A naïve solution (and definitely not appropriate for a production environment) would be to replace all the values in that column with uniquely generated IDs, converted to the appropriate data type (I would guess varchar, most of the time). This, however, implies losing any reference to the original data, and looking for a particular record might become hard (in addition to the already stated problem that it just won’t cut it for a production environment).

A better solution is to keep the original duplicate value, and number the duplicates consecutively (i.e., change 3 instances of “test value” for “test value 1”, “test value 2” and “test value 3”). Depending on the application (and environment) at hand, this might or might not be appropriate, but if it is, then a simple query can help us achieve it. Let me show you with an example:

I’ll first create a very simple test table with 2 columns: a numeric ID and a string value. The second column will have duplicates that we want to remove.

CREATE TABLE #Table (Id int, Value varchar(20))

INSERT INTO #Table (Id, Value)

VALUES (1,'test'),(2,'test'),(3, 'test'),(4, 'another test'),(5, 'another test'),(6, 'another test')

The table then looks like this:

	Id	Value
1	1	Test
2	2	Test
3	3	Test
4	4	Another test
5	5	Another test
6	6	Another test

To remove the duplicates, we will first determine the different values that the column currently has. Then we’ll iterate over them, and for each value, “iterate” over its duplicates (actually we’ll let SQL iterate over them), updating each one with a counter that will get incremented each time it’s used. That said, we execute the following statements to do it:

SELECT DISTINCT Value

INTO #Duplicates

FROM #Table

DECLARE @currentDuplicate varchar(20)

DECLARE @counter int

WHILE EXISTS (SELECT 1 FROM #Duplicates) BEGIN

SET @counter = 0

SELECT TOP 1 @currentDuplicate = Value FROM #Duplicates

UPDATE #Table

SET Value = Value + ' ' + CAST(@counter as varchar(3))

,@counter += 1

WHERE Value = @currentDuplicate

DELETE FROM #duplicates WHERE value = @currentDuplicate

END

DROP TABLE #Duplicates

After running those statements, the table contains the following:

	Id	Value
1	1	Test 1
2	2	Test 2
3	3	Test 3
4	4	Another test 1
5	5	Another test 2
6	6	Another test 3

As you can see the duplicates are no more, and now we can create the desired unique index/constraint over the column. You should be careful and give enough range to the counter when casting it to a varchar: if at least 1 of the duplicate values has 1000 or more instances, then you’ll need a varchar(4) to store the number.

As a reminder, this solution might not be the most appropriate for all applications, but hopefully it will come in handy to someone in the future, as it has to me.

Published: 11/21/2011 11:30 AM

BlogTitleForUrl: sql-server-fix-duplicate-values-for-uniqueness-constraint-

Categories: SQL Server;The Web;Software Architecture

SQL Server: Tip for Setting up replication in Virtual servers

Brenda Valadez — Mon, 14 Nov 2011 17:52:19 GMT

Body:

By: Alejandro Villarreal

Debugging replication-related problems can be extremely hard if you do not have access to an environment with the exact same replication architecture where the problem occurred in the first place. As consultants working for several clients, it is not feasible to have an exact replica of each of their environments, so a feasible solution is to set up a copy of the desired environment “on demand”, on virtual machines.

This is exactly what we did a couple of weeks back, and although we finally got replication to work, we had to deal with this error first:

Error 18483: Could not connect to server '<Server>\<Instance>' because '<login>' is not defined as a remote login at the server.

This happened while configuring the distributor, which was the same server as the publisher (local machine), so it didn’t make sense at all. Why was it attempting to connect to a “remote” server?

We finally figured out it was because when we installed SQL Server in the virtual machine, its NetBIOS name was not the one we later gave it (the one we wanted to use to access it). Thus, the @@Servername global variable had a value that we did not expect, and our replication script was inadvertently trying to connect to a server other than the local machine (run Select @@Servername to find out the name of the server under which SQL thinks it’s installed).

The fix is pretty simple. You just need to tell SQL Server to lose that reference, and create a new one with the appropriate NetBIOS name:

sp_dropserver @server='Incorrect-Server-Name'

sp_addserver @server='Correct-Server-Name', @local='local'

Once we did this, our replication scripts ran successfully and we could start working. Hopefully this will save someone else a bit of a headache while trying to figure out why their replication scripts won’t work in a virtualized environment. You can find more details regarding this problem in this Microsoft KB article: http://support.microsoft.com/kb/818334

Published: 11/14/2011 11:51 AM

BlogTitleForUrl: sql-server-tip-for-setting-up-replication-in-virtual-servers

Categories: SQL Server;Software Architecture

Powerful Javascript

Brenda Valadez — Mon, 14 Nov 2011 16:58:58 GMT

Body:

By Guillermo Cedillo

C# is becoming more like a functional language in every release; by the other side Javascript is a functional language that was treated as a misunderstood-object-oriented-script language ¬_¬. I hope in the next years these two languages become so closer that they share the same basic principles of the functional languages.

Right now I'm looking closer to two technologies that I think they are going to be something extraordinary: RX and LINQ .

LINQ is already a powerful extension to C#, but also there's an extension for Javascript . LINQ gives you a lot of freedom in data manipulation, together with jQuery gives you flexibility and lightness in reports of complex data, in custom controls, and in all that I thought were impossible in the client side.

Look at this example of LINQ in javascript:

// $.Enumerable

$.Enumerable.Range(1, 10).Where("$%2==0").ForEach("alert($)");

// TojQuery - Enumerable to jQuery

$.Enumerable.Range(1, 10)

.Select(function (i) { return $("<option>").text(i) })

.TojQuery()

.appendTo("#select1");

// toEnumerable - jQuery to Enumerable

var sum = $("#select1").children()

.toEnumerable()

.Select("parseInt($.text())")

.Sum(); // 55

It's the same thinking of LINQ in C#, and it's integrated with jQuery with endless possibilities!

The next technology is RX -as in Reactive Extension-. It's similar to LINQ and is also in C#, but it's focused to events. The beauty of RX is that suddenly something as complex as drag and drop in javascript is though and wrote as:

//Get the context with jQuery

var mouseDragMe = $("#mouseDragMe").context;

//Make it observable

var mouseMove = Rx.Observable.FromHtmlEvent(mouseDragMe, "mousemove");

var mouseUp = Rx.Observable.FromHtmlEvent(mouseDragMe, "mouseup");

var mouseDown = Rx.Observable.FromHtmlEvent(mouseDragMe, "mousedown");

//Describe the gesture

var mouseMoves = mouseMove

.Skip(1)

.Zip(mouseMove, function(left, right) {

return { x1 : left.clientX,

y1 : left.clientY,

x2 : right.clientX,

y2 : right.clientY };

});

var mouseDrags = mouseDown.SelectMany(function(md) {

return mouseMoves.TakeUntil(mouseUp);

});

mouseDrags.Subscribe(function(mouseEvents) {

$("#results").html(

"Old (X: " + mouseEvents.x1 + " Y: " + mouseEvents.y1 + ") " +

"New (X: " + mouseEvents.x2 + " Y: " + mouseEvents.y2 + ")");

});

If you followed the code you should notice that it is very clean and understandable, and it also integrates with jQuery... you know, endless possibilities ^_^

Javascript is something extraordinary, I'm looking forward to these and other technologies. With all the new concepts and new ideas that every day arise, I love more my profession as a humble Developer.

Published: 11/14/2011 11:05 AM

BlogTitleForUrl: powerful-javascript

Categories: Best Practices;JavaScript;The Web