How do you write great, maintainable code when faced with constantly changing requirements, legacy issues, intensive time pressures and a rapidly evolving environment? And how do you keep that code great after maintenance activities, multiple developers, and the ravages of time?

My new Pluralsight course: Defensive Coding in C# shows you how to write great, maintainable code and keep that code great using defensive coding techniques.

Enjoy!

Check out my Pluralsight courses!

Do you ever work on code that is disorganized; that was too often written the “quick” way instead of the “right” way? You try to make one little change or addition and the existing code makes everything difficult. The code feels like a ball and chain, dragging you down and slowing your progress.

If you have experienced this phenomenon, you have seen the results of technical debt.

Pluralsight just released a new course from Mark Heath entitled “Understanding and Eliminating Technical Debt“. It explores what technical debt is, the problems it causes, and how you can identify and quantify it. Then, the important bit, it shows you how to create an action plan to address the technical debt and provides some practical techniques for repaying it.

I’ve just watched this course and HIGHLY recommend it for any developer.

Enjoy!

Check out my Pluralsight courses!

The SQL Server Data Tools (SSDT) provide access to many SQL Server features from within Visual Studio. One of those features, available from the SQL Server Object Explorer, is the visual Data Editor.

While the Data Editor has always been great for inserting, updating, and viewing data, it did not support any sorting or filtering … until now!

NOTE:

• For an introduction to SSDT and the SQL Server Object Explorer, see this post.
• For an introduction to the SSDT Data Editor, see this post.

The March 2014 release of SSDT added support for SQL Server 2014 databases. But it ALSO provided new features in VS 2012 and VS 2013 for sorting and filtering the data in the Data Editor!

If you are using VS 2012, you can use the update option to get this update (SQL | Check for Updates).

If you are using VS 2013, the update should appear in the Notification window when you click the notification flag:

If not, you can look for it under Tools | Extensions and Updates.

Once you have it installed, your Data Editor will have two additional buttons:

The first button disables sorting and filtering.

The second button displays a dialog for entry of the sorting and filtering criteria.

In this example, I set a sort on the FirstName column. Any number of sorts can be added, either ascending or descending. I also added a filter on the LastName so only customers with a last name that begins with B will be listed.

This dialog also allows you to uncheck columns to remove them from the Data Editor display. This helps you focus on only the columns you need to see.

Notice at the bottom of the dialog is the SQL expression SSDT will use to query the table. This expression changes as you modify the columns, sorting, sort order, or filter.

Clicking Apply immediately executes the query and re-populates the data in the Data Editor. This allows you to view the results without closing the Filter and Sort dialog.

When you have the results you need, click OK to close the dialog.

NOTE: When I attempted to edit the sorted and filtered data, I received an error message:

HOWEVER, the edits were actually made to the data.

Try out these new features any time you want more control over the data displayed in the Data Editor.

Enjoy!

If you are going to Visual Studio Live! in Las Vegas next week (March 10-14), I hope I will see you at my Visual Studio sessions.

I am covering both the new Integrated Development Environment (IDE) and the many very cool new code editor features.

If you want a sneak peak at the code … you can find it here.

Enjoy!

Check out my Pluralsight courses!

This is a continuation of the World’s Simplest AngularJS Example in Visual Studio post. This post adds simple data binding to the example.

Most .NET developers understand data binding from Windows Forms, Web Forms, or XAML.

For example, in Windows Forms you can bind a LastNameTextbox control’s Text property to a LastName property of a Customer class (or LastName field in a data source). When the form displays, the Textbox is automatically populated. If the user changes the contents of the Textbox, the property (or field) is automatically updated.

Angular provides this same type of two-way data binding. It automatically synchronizes HTML elements with data properties.

The key to data binding with Angular is the ng-Model directive. The ng-Model directive binds HTML elements to a property. If no property exists, the property will be created implicitly. We’ll use that default functionality to perform data binding without any real properties for this simple example.

Let’s try some very simple data binding:

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>Acme Customer Management</title>
</head>
<body ng-app>
    <p>Customer Name: <input type=”text” 
                             ng-model=”customerName” /></p>
    <div>{{customerName}} Orders as of {{ “2014-01-31”}} </div>

    <script src=”Scripts/angular.js”></script>
</body>
</html>

• The above code sets the ng-model directive as an attribute on the input tag.
• The value of the ng-model directive is the name of the property to which this input tag is bound. In this case, the property is named “customerName”.
  • This binds the input tag to the defined property.
  • As the user types into the input box, the customerName property is automatically updated.
  • This property is not defined anywhere, so Angular creates it implicitly.
• The div tag displays the value of the property by including it in double curly braces.
  • Double-curly braces define a “binding” and can contain any Angular expression.
  • In this case, the expression is just the property name.
  • So the value of the property will appear where the binding is defined.
• As the user enters text into the input box, that text is immediately displayed in the div tag.

Run it, and you get:

Enter some text, and it appears as follows:

We’ll see lots more about binding once we connect to some data.

Enjoy!

Check out my Pluralsight courses!

This is a continuation of the World’s Simplest AngularJS Example in Visual Studio post. This post adds simple filters to the example.

AngularJS has specialized filter components for:

• Filtering an array by specific criteria (filter)
• Limiting an array to a specific number of items (limitTo)
• Ordering an array by an expression predicate (orderBy)
• Formatting currency (currency)
• Formatting numbers (number)
• Formatting dates (date)
• Converting an object to JSON (json)
• Converting to lower case (lowercase)
• Converting to upper case (uppercase)

Filter components are placed within the double curly braces after the value they are filtering. They are denoted with a pipe character (|) followed by the filter type and then any arguments.

Let’s try out the formatting filters.

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>Acme Customer Management</title>
</head>
<body ng-app>
    <h1>{{10/3| number:2}} Orders as of {{ “2014-01-31” | date:’MMM-dd-yyyy’}} </h1>
    <script src=”Scripts/angular.js”></script>
</body>
</html>

Run it, and you get:

This, of course, makes no sense. You can’t have 3.33 orders. But it does demonstrate how the numeric filter feature rounds numbers. Specifying a number value of 2 rounds to 2 decimal places.

The date has now been reformatted to the desired MMM-dd-yyyy format.

You can add multiple filters for one value. For example, this code formats the date and then displays it in upper case.

<h1>{{10/3| number:2}} Orders as of {{ “2014-01-31” | date:’MMM-dd-yyyy’ | uppercase}} </h1>

This results in:

We’ll look at more filters once we connect to some data.

Enjoy!

Check out my Pluralsight courses!

AngularJS is a new client-side framework for building rich Web applications using HTML and JavaScript.

Instead of starting with "this is everything it does", I thought I would start with a simple step-by-step example. This example is the world’s simplest Angular application. By starting simple, we can build on the concepts one by one.

1) Start with a Web project.

I started with an empty Web project to minimize the extra "stuff" generated when selecting any of the other templates:

• Select Add | New Project to add a project to an existing solution. OR Select File | New Project to create a new solution and new project.
• Select your desired language from the Add New Project dialog (Visual Basic or Visual C#).
• Select the ASP.NET Web Application template. There is now only one project template defined in the Add Project dialog … all of ASP is now under the umbrella of "One ASP".
• Then selected the desired template from the second dialog. I selected the Empty template.

2) Download AngularJS.

A NuGet package is the easiest way to get AngularJS if you are using Visual Studio:

• In Visual Studio, select the new Web project in Solution Explorer.
• Then select Project | Manage NuGet Packages… from the Visual Studio menu.
• Search for AngularJS.
• Click Install.
• When it is finished installing, click Close.

The installation process adds a Scripts folder with many "angular-" scripts in it.

3) Build your first HTML page using Angular.

By convention, the main file of an application is Index.html:

• Right-click on the Web project and select Add | HTML Page.
• Name the item Index. This adds an Index.html file to your project and opens it.

Visual Studio adds the basic HTML tags for you. So when you first view the contents of the file, it will look like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>

• Optionally, give the page a title.
• In the body of the page, add a script tag to include the angular.js or angular.min.js script file.
  Note that it is often easier to debug using the angular.js file. Replace it with the angular.min.js file before deploying.
• In any tag that encloses all Angular code, specify an ng-app directive. In this case, I put it in the body tag. Be sure to remove any attributes for this directive that Visual Studio may attempt to add for you.
• Add any desired code.
• Use double curly braces to define a placeholder, called a "binding", for any Angular expression.

The resulting code could look something like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Acme Customer Management</title>
</head>
<body ng-app>
    <h1>{{4*2}} Orders as of {{ "2014-01-31" }} </h1>
    <script src="Scripts/angular.min.js"></script>
</body>
</html>

Run. The result of the world’s simplest Angular application is:

When Angular processes the page, it evaluates the expressions. so 4*2 = 8 and it displays "8 orders". The date is simply a string literal, which is just displayed as is.

There, we did it! The world’s simplest Angular application!

To summarize:

1) Download the AngularJS JavaScript files (which we did using NuGet).

2) Include a script tag for the angular.js file.

3) Add an ng-app directive in a tag above any usage of Angular (we added it to the body tag).

4) Enclose any Angular expressions in placeholders (called bindings) defined with double curly braces.

Enjoy!

Check out my Pluralsight courses!

I recently completed a .NET project for a client I had been working with since November of 2009 … over 4 years.

It was great fun to help them build their system: client Point of Sale, Silverlight (MVVM/XAML) management package, Web API/JQuery customer facing application, WinForms support tool, over 2100 automated code tests and all of the parts in between. I will greatly miss this code (and my wonderful client of course)!

I am looking for my next .NET project, large or small. I am great at turning nebulous requirements into a successful application. I have experience working in a team or as the sole developer; training and mentoring developers; refactoring existing or building new applications; and using an iterative development approach for a quicker time to market. And I’ve recently been working with JavaScript frameworks such as AngularJS, Backbone and Knockout.

I am located in the Silicon Valley/San Francisco Bay area, but can telecommute to anywhere. (My last several clients required telecommuting, including one in northern California and one in eastern Canada.)

Pass along this link if you know of someone that could use an experienced .NET developer / consultant on a full-time, part-time or one-time basis.

Thanks!

Email to deborahk at insteptech dotcom

I recently wrote a post entitled "Why Use Code Behind?". It outlined several reasons why .NET developers use code behind for the logic of their C# or VB.NET applications, not just for UI management.

This post looks at the down side of using code behind for application logic … in two words: Technical Debt.

From Wikipedia:

"The debt can be thought of as work that needs to be done before a particular job can be considered complete. If the debt is not repaid, then it will keep on accumulating interest, making it hard to implement changes later on. Unaddressed technical debt increases software entropy."

From Ward Cunningham, 1992 (as quoted in Wikipedia):

"Shipping first time code is like going into debt. A little debt speeds development so long as it is paid back promptly with a rewrite… The danger occurs when the debt is not repaid. Every minute spent on not-quite-right code counts as interest on that debt."

Bottom line … using code behind for the logic of an application adds to your technical debt.

Some situations, such as when building a Minimum Viable Product, incurring technical debit is a logical choice. Why not incur debt if the team is not even sure if they are building the right thing?

In other situations, the team may not be aware of the technical debt they are accumulating. Not until the application complexity, testing process, or bug count become unacceptable, or worse the project fails.

Two areas where technical debt becomes apparent are maintenance and testing.

Maintenance

In most cases, writing the initial code is only but a fraction of the lifetime of that code. The vast majority of time is spent on extending, enhancing, modifying, or fixing it.

Writing application logic in the code behind makes maintenance much more difficult (adding interest on the debt). Code behind:

• Prevents Reuse. For example, say a developer has code in code behind that opens a file. If a later feature also needs that same logic, it will need a copy/paste to reuse it.
• Encourages Duplicate code. See the prior example. And if a bug is later found in a routine, will the bug in the copies be found and fixed?
• Adds Complexity. Instead of working with many small routines that each perform one task, code behind often leads to writing very long methods that contain all of the logic required for a particular event. For example, a Save button’s code behind might perform validation, create a transaction, save to the database, generate an email, and print a receipt.
• Prevents Automated Code Testing. See the next section.

By writing logic in components, those components can be reused, preventing duplication. And the methods within the components can be single-purpose, making them less complex and easier to maintain and test.

Automated Code Testing

Writing code without unit tests adds to the interest on the technical debt … and not like a home mortgage 3 or 4% interest … more like a credit card’s 35% interest or more. Let’s look at why…

A developer builds a feature and provides it to someone else for testing. That tester may spend many hours testing all of the possible paths through the code. The code is released and work starts on the next set of tasks.

When that work is finished, the tester needs to test every single path again:  all of the original code paths plus all of the new ones.

In most cases, the developer ran over the schedule, so the testing schedule is cut. The tester needs to test more in less time. And over time, the number of paths to test grows.

Using the built-in MSTest tools or any testing tools compatible with Visual Studio, such as NUnit, you can easily create automated code tests for your logic. But not if that logic is hidden inside a code behind file.

By writing the code in components, the developer can use the automated code testing tools within Visual Studio to test the application logic. And more exciting … the developer can easily retest all of the original functionality with those tests as the code changes over time.

Your thoughts?

I am happy to announce that my latest Pluralsight course: "Visual Studio Data Tools for Developers" went live today!

As C# or VB.NET developers, we often need to work with a database.

This course covers how to:

• Use the many SQL Server Data Tools (SSDT) in Visual Studio
• Manage SQL Server databases with Visual Studio
• Build database scripts (including data scripts) with a Database Project
• Publish Database Scripts
• Unit Test stored procedures
• Generate a DACPAC
• Use a DACPAC to deploy database changes

You NEVER have to write database change scripts again!

Check it out and let me know what you think! Feel free to leave comments here or in the Discussion section for the course.

http://www.pluralsight.com/training/Courses/TableOfContents/visual-studio-data-tools-developers

Enjoy!