Closure; the missing piece


White jigsaw puzzleWhile doing a code review this week, the developer asked me if we could refactor some TypeScript. Basically take some repetitive client side code, pop it into a new file and make it easier to implement elsewhere.  The project is using the powerful DevExpress ASPxGridView control in a lot of places (multiple controls on a page and multiple pages) and in batch edit mode. The users wanted the ‘Save / Cancel’ panel to be at the top of the screen instead of the default location in the grid footer. Simple enough process, we can create a user control to handle a couple of nicely themed ASPxButtons, link to a helper class for the common work on the grid and we should be done.

First we take a look at the original markup, the client side client event is being wired to a TypeScript method


Inside the TypeScript file, the method was doing some checks and calling another method on the grid control, gvTemplates.UpdateEdit(); This is where the repetition was, each grid had its own ‘save’ method.

helper.saveGrid = function ( ) {
        gvTemplates.UpdateEdit();
}

In order to optimise the code, we have to pass in the name of the grid being edited, then find the grid in the DOM and execute the method on it.

The first part was to update the markup to call to the helper class


The key difference here is the introduction of the brackets into the assignment, we are no longer just pointing the click event to our TypeScript method, but actually executing it, which is bad. This is where the closure comes in. For more information about closures I suggest you read the following article from Julian Bucknall.

For our needs, the code should look something like this

helper.saveGrid = function (gridId: string) {
        return function (s, e) {
            var grid: ASPxClientGridView = ASPxClientControl.GetControlCollection().GetByName(gridId);
               grid.UpdateEdit();
      }
}

The ‘gridId’ parameter is going to contain the grid’s client side ID, the saveGrid() method then returns a function that is passed back to the click event handler on the button. There are a few cool things going on with the new code. Firstly (and this is where you can come unstuck very quickly) is the use of the parameter that is passed in. The inner function can use the value from the outer function. The second thing to note is the nice helper class provided by DevExpress to get access to the control, so you don’t need to go searching through the DOM. Code cleaned, duplication removed and a much nicer way to handle calls from multiple controls and/or pages.

While this serves as a very quick tutorial on being able to call common methods, I really want to highlight a) the power of the closure, b) the frustration they can cause to JavaScript / TypeScript beginners.

For more detailed information on closures and best practices please see these fantastic articles:

Caught out with closures

The module pattern

Approaching Angular 2 from a WebForms perspective


hires-small

Omelettes anyone?

Sometimes we spend so long working in a technology it is a difficult to make a switch. If it ain’t broke, don’t fix it, right!?  The problem is, the world moves on. Using server side technologies like ASP.NET WebForms is something I still love to do, add a few DevExpress components onto a page, set the properties, bind some data and boom, almost no code and I have a working web application. There are many debates scattered on the internet about WebForms been deprecated, that they are evil, I simply disagree. Now, if you are wanting to target a wider range of web servers and operating systems, use .Net Core, have light weight UI then you would start looking at some of the popular frameworks like Angular 2. Herein lies the dilemma, how does someone with many years experience as a WinForms and WebForms developer make the jump to a client side driven application? I’m pleased you asked…

Julian and I are presenting a free webinar on this exact topic on November 3. Specifically we will take an existing WebForms application and create an Angular 2 version using the DevExtreme Web controls.

The goal is to show how a C# (or VB) developer with a background in WebForms can get started in the client side world. As with most of my presentations lately, we will also be using TypeScript.

Take part in the fun by Registering here,  seats are limited.

a MUST for ASP.NET Devs…


JavaScriptIf there is one thing I have learnt in the last month, its how little I really understood about the use of JavaScript inside ASP.NET applications. Sure I could mash a <script> tag together and get something happening on the browser, but as far as best practices, lexical closures, correct use of the global stack, well, it left a lot to be desired. Thankfully I get to work with someone whom I think is a JS Guru… Mr Julian M Bucknall, esteemed CTO of DevExpress.

Next week, Julian will be presenting a short but thorough overview on what you should and should not be doing as an ASP.NET developer when it comes to JavaScript.  I would highly recommend anyone in this space to register and watch.

Julian’s blogs are available here and here.

Register / info here.

Building dxHotels from the ground up


webinar

Following a recent webinar on what went into the building of DXHotels a lot of people got in touch and asked if I could show how to actually *build* it. That sounded like a great idea since it is a good example of a real world scenario website and the hurdles faced would provide beneficial discussion points. The challenge of course is condensing weeks of work and demonstrating the core elements in only a couple of hours. Lets face it, no one really wants to see me typing code do they!?

During 2 x 1 hour live sessions I will be taking you through creating the DX Hotels WebForms application from scratch… you will see how;

– To create a new ASP.NET WebForms application with the DevExpress Wizard.
– Easy it is to build stunning looking pages with very little code behind.
– To embed the powerful DevExpress ASP.NET controls to save time and provide amazing results.
– Use CSS to extend the look, feel and functionality even further.

It’s going to be a fairly fast paced, technical presentation but as always recordings will be made available via YouTube on the DevExpress channel.

dxHotels

You can follow along even if you are not a DevExpress customer by downloading a FREE trial copy of the components here.

To register for the webinar click here.

If there are topics or technologies you would like to see me present on, please feel free to leave a comment below, email me or send a tweet.

Discover ASP.NET MVC and the DevExpress Extensions


With only a couple of weeks to go before the exciting new launch of the DevExpress v14.2 release, I decided to start taking a look at ASP.NET MVC and how WinForm and WebForm (ASP.NET) developers can make the leap into this ever expanding, ever trending technology.

Join me as I take the lid off the mysteries, review where it came from and why, and how easy it is to start building stellar websites when you add the DevExpress ASP.NET MVC extensions to a project.

As always, for the APAC region it is an early start, but don’t let that stop you, register and receive a link to the YouTube recording later in the day 🙂

[[ click here to register ]]

Discover DX Hotels


This week Julian M Bucknall and I are going to take you on a tour behind the scenes of DX Hotels, the mock hotel booking site we introduced in 14.1.

From it’s conception to final publishing, DX Hotels contains best practices, stunning graphics, design and layout as well as a rich mobile and desktop UI.

Join Julian and I as we show you how to extend the DevExpress ASP.NET controls to achieve some of the beautiful effects in the demo, examine the code behind and explore the client side tips and tricks. 

To register click here.

Yes, it is another early presentation, so if you cannot make it, register anyway and receive the link to the recording afterwards 🙂