Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

June 20, 2014

ACM Seminar: Getting Started with AngularJS

Filed under: AngularJS @ 8:57 pm

 

My business partner, Jerry, and I are presenting a full day session on AngularJS to the Association for Computing Machinery (ACM) on Saturday, June 21st 2014. Should be fun!

Check out this link for more information.

The code for this seminar is here.

NOTE: To make this code easy to execute and try out, the calls to a Web Service are commented out and the data is instead hard-coded into the controllers.

  • The movies controller has a hard-coded list of movies.
  • The movie detail controller has ONE hard-coded movie. So no matter which movie you select to detail, only the ONE hard-coded movie is displayed.
  • Same for the actors controller and actor details controller.

Enjoy!

June 18, 2014

JavaScript Function Terminology

Filed under: JavaScript @ 12:43 pm

I have been working on and off with JavaScript since 2001. But its one thing to use JavaScript functions and another thing entirely to know the vocabulary of JavaScript functions.

So here are some common JavaScript function terms:

Function Declaration

Defines a named function.

function onClick(buttonName) {

    return “Clicked: ” + buttonName;

}

Calling:

  • onClick() – executes the function and returns the value.
  • onClick – references the function.

In JavaScript, function declarations are always moved (“hoisted“) to the top of their scope at runtime. This means that the function does not need to be declared before it is used.

So something like this is valid:

onClick(“OK”);

function onClick(buttonName) {

    return “Clicked: ” + buttonName;

}

Function Expression

Defines a function as part of a larger expression such as a variable assignment.

The function can be named, as with the onClick function below:

var buttonClick = function onClick(buttonName) {

    return “Clicked: ” + buttonName;

}

Or anonymous as with this function:

var buttonClick = function(buttonName) {

    return “Clicked: ” + buttonName;

}

Calling:

  • buttonClick() – executes the function and returns the value.
  • buttonClick – references the function.
  • onClick() – generates an undefined error.

Function expressions are not “hoisted”. So attempting to use them before they are defined generates a type error:

buttonClick(“OK”);

var buttonClick = function(buttonName) {

    return “Clicked: ” + buttonName;

}

NOTE: The variable declaration (buttonClick) does get hoisted, but only the definition, not the assignment. So at runtime, var buttonClick = undefined is hoisted. But the assignment does not occur until the un-hoisted assignment statement is executed.

Function Statement

Basically a function declaration. (See above).

Guidance

In general, guidance says to favor function expressions over function declarations (or function statements) for the following reasons:

  • The hoisting of function declarations can cause confusion or hard to find bugs.
  • Function expressions more clearly imply that the function itself is an object.

See this link for more examples and an enhanced discussion of function declarations vs function expressions.

Enjoy!

June 4, 2014

"I Don’t Have Time for Unit Testing!"

Filed under: C#,Testing,VB.NET @ 12:50 pm

So, be honest, when you hear someone talk about unit testing … what is your first thought?

  • Is it: “I just don’t have the time to do unit testing”!
  • Or “Our management will never approve the time for unit testing”?
  • Or something similar?

Let’s look at what unit testing can do for you:

Save you Time

Yes, that’s right!

Throughout my career as a software developer, I have seen how much time unit tests can save.

Let’s think about this …

  • Any developer that has written more than a few lines of code knows that it needs to be run to verify that it operates as expected. Right?
  • You need to execute the feature to confirm that it takes appropriate inputs and produces appropriate outputs. You may need to go through this process several times.
  • And as you build more features, it requires more effort to manually test it.
  • For example, say you write a pedometer application that takes in a step count goal and an actual step count and then calculates the percent of goal you have reached.
    • To test the pedometer feature you need to execute the application, navigate to the appropriate feature, enter all of the required data, and then validate the results.
    • And if you find a bug you may have to repeat this process again, and again, and again.
    • For the feature you are working on now, how many times have you run the application to try it out? 10? 20? more?
  • The idea of an automated code test is that you can write code to perform that testing.
  • So if you want to test that the pedometer calculation is correct, you write an automated code test that defines appropriate inputs, calls the function under test, and verifies the results.
  • Then when the users want a change to that code (and you know that they will), you can make the change and just re-run the tests.
  • No need to slog through the UI again for each possible set of inputs.

This can save you LOTS of time.

Help you Find Bugs Faster

You just received a bug report. Something in the code does not work.

Instead of trying to reproduce the problem by wading through a bunch of UI, you can instead use your unit tests to quickly reproduce, find, and fix the error.

Allow you to Refactor Safely

So you are working on some code that is just too painful to deal with.

You’d like to apply some refactoring techniques to make the code cleaner and easier to use.

With no tests, you are running a risk of introducing bugs if you rework the code.

If you have unit tests in place, you can safely perform a refactoring because when you are done with the refactoring, you can rerun the tests to confirm that all is well.

Readily Add Features

You can add new features and rerun all of the existing tests to ensure that the new feature does not adversely impact any existing features.

No more worry that adding feature b will adversely affect feature a.

Minimize Those Annoying Interruptions

So you are in the middle of coding the next feature and you have to drop everything because someone entered something bad somewhere in your application and now it is crashing.

Bummer!

Having a good set of unit tests can minimize those annoying interruptions.

Enhance your Value

Don’t you just hate it when the “QA” person emails you to let you know your code doesn’t work?

This is especially difficult if that “QA” person if your boss or your client.

Having a good set of unit tests can make you look like a coding master!

Or what if the person after you changes something and now it looks like your code doesn’t work.

Unit tests help the developers that come after you to better understand and modify your code. They can re-run the tests to ensure the code still works after their changes.

Having a good set of unit tests verifies that your code works over the lifetime of the application.

Conclusion

Writing unit tests isn’t hard or time consuming once you get into the habit. And these benefits look pretty good!

For a gentle introduction to automated code testing, see my Pluralsight course: “Defensive Coding in C#”.

Enjoy!

PS circleCheck out my Pluralsight courses!

Code Quality and Automated Code Testing

Filed under: C#,Testing,VB.NET @ 12:31 pm

I’ve heard it said that the top three techniques for improving code quality are:

  • Unit testing
  • Unit testing
  • Unit testing

There is no better defense for the quality of your code than a set of automated code tests.

Automated code testing involves exercising code and testing its behavior by writing more code. So you have a set of code that tests your original code.

The goal of unit testing is to isolate each unit of code in an application and verify that the unit of code behaves as expected in both valid and invalid conditions.

To achieve this goal, we can:

  • Refactor our code where necessary into individual units (methods) that can be tested.
  • Create a set of tests for each method.
    • Tests with valid inputs.
    • Tests with invalid inputs.
    • Tests that could produce exceptions.
  • Execute those tests using a testing framework, such as MSTest or NUnit, both of which are executable from with Visual Studio (ALL editions, including the free Express edition!)

Don’t have time to test? See this post!

For a gentle introduction to automated code testing, see my Pluralsight course: “Defensive Coding in C#”.

This is what one reviewer said about the “Automated Code Testing” module of this course:

This module is an excellent introduction to unit testing with C#!

In fact it should be recommended to C# subscribers as the first place to go to learn about unit testing, before they take any of the .NET unit testing courses in the library. For many this is all they will need,

It takes a viewer on a clear path from zero-knowledge about unit testing to being able to doing useful, real development, unit testing in 45 minutes.

It does a very good job of covering both the mechanics and how to make practical use unit testing.

Enjoy!

PS circleCheck out my Pluralsight courses!
May 16, 2014

What is Defensive Coding?

Filed under: C#,Testing,VB.NET @ 10:40 am

From Wikipedia (as of 4/14/14):

… an approach to improve software and source code, in terms of:

General quality – Reducing the number of software bugs and problems.

• Making the source code comprehensible – the source code should be readable and understandable so it is approved in a code audit.

• Making the software behave in a predictable manner despite unexpected inputs or user actions.

Let’s consider each of these bullet points…

General quality

Coding defensively means to actively code to reduce bugs. One of the key techniques for improving quality is through automated code testing.

Don’t know that you have time in your project schedule for automated code testing? That’s a topic for another blog post. Or check out my “Defensive Coding” course referenced at the bottom of this post for a demonstration of some simple automated code testing techniques and a discussion of the “no time for testing” issue.

Comprehensible

It is not just computers that need to read and understand your code … people need to read and understand it as well.

If another developer doesn’t understand your intent, they may make incorrect assumptions about that code and make inappropriate code changes … causing your code to fail.

Plus if the code is easy to read and understand, it will be easier and less time consuming to modify as the application is maintained or enhanced over time.

The key to making source code more readable and understandable is by building “Clean Code”. The concept of “Clean Code” was first presented by Robert Martin in his book: “Clean Code: A Handbook of Agile Software Craftsmanship”.

The cleaner your code is, the easier it is to understand, maintain, and test.

Predictable

Predictable code should handle unexpected inputs or user actions by anticipating them and responding accordingly.

This includes techniques such as guard clauses, validation, and error handlers.

Putting these three concepts into a picture summarizes the goals of defensive coding:

image

For more information on Defensive Coding, see my Pluralsight course: “Defensive Coding in C#”.

Enjoy!

PS-circle22

 

Check out my Pluralsight courses!

May 9, 2014

Defensive Coding in C# Course Went Live Today!

Filed under: C#,Visual Studio @ 11:45 am

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.

image

Enjoy!

PS-circle22

 

Check out my Pluralsight courses!

May 7, 2014

Does Your Code Feel Like a Ball and Chain?

Filed under: C#,VB.NET,Visual Studio @ 11:06 am

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.

image

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.

image

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

Enjoy!

PS-circle2

 

Check out my Pluralsight courses!

April 17, 2014

SSDT Data Editor Now Has Sorting and Filtering!

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!

image

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:

image

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:

image

The first button disables sorting and filtering.

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

image

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.

image

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:

image

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!

March 7, 2014

VSLive! Visual Studio 2013 New IDE Features Part I and II

Filed under: Visual Studio @ 4:00 pm

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.

vslive_lasvegas_2014

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!

PS-circle
Check out my Pluralsight courses!

AngularJS in Visual Studio: Data Binding

Filed under: AngularJS,Data Binding,Visual Studio @ 12:15 pm
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http':’https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);

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.

image

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:

image

Enter some text, and it appears as follows:

image

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

Enjoy!

PS circle


Check out my Pluralsight courses!

« Previous PageNext Page »

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs