How does TypeScript help prevent bugs in JavaScript

JavaScript is an awesome language once you grasp its power and its features. However, like all dynamic languages simple and stupid bugs can creep their way into your code if you are not careful. Many times this happens because types change over type but since JavaScript is dynamic it is really, really hard to detect these changes in an enterprise scale application.

TypeScript helps to solve this problem by providing compile time Type checking. This compile time checking can be used to generate type symbols on your code and alert you, via build errors, when you introduce a simple bug.

Take this code below for example of what I mean
Typescript.Original

Do you see the error? Look carefully, it is there?

Give up? Image blow has it pointed out
Typescript.Underlined

Since I am using KnockoutJs here and trying to set a value on an observable I cannot set the value this way.  I need to set it via method notation.

If we were to add typing to our code as below we would immediately be notified there was an error rather than at run time.

Typescript.Squiggle

Notice how once I added the typing information to the code the TypeScript compiler was able to tell you that you have a issue in your code, red squigglies and all.

Once we fix our code, as seen below, we are golden.

Typescript.Fixed

Now I am not making the claim that TypeScript will fix everything. What I am saying is that by introducing typing into the code and allowing that typing information to flow through your code you will potential to create cleaner and more stable code.

Till next time,

Posted in TypeScript | Leave a comment

Sublime is Sublime 12

OK so we are at the last blog post in the sublime series. I have I hope saved the best one for last. One of the largest questions I have received during this series is how do I get intelisense and that R# is awesome because it supports things like goto definition and rename…

In this post we will add all of these features to sublime. There is a great project out there called OmniSharp that supports most of them (and in the future can support many many more!). Let’s get going then and add our sublime support.

https://github.com/moonrabbit/OmniSharpSublime is the project

So to install:

goto your packages directory (linux here so it may be different in windows or mac, just look in packages in sublime to find the folder)

cd ~/.config/sublime-text-3/Packages/
git clone git@github.com:moonrabbit/OmniSharpSublime.git
cs OmniSharpSublime
git submodule update --init 

Now you have gotten all the needed files. The next thing we will need to do is build OmniSharp

./build.sh

Now edit your project file for sublime and add at the root level

 "solution_file": "./EventStore.sln"

Remember the path is relative from your project file! restart sublime if its running. Try typing out variable names and you will see you have intellisense. If you hit a . you will notice that it does not come up :( by default the auto complete keystroke is alt + / you can remap this to ctrl+space if you want by editing your keymap in sublime.

Want to go to definition of a method? Try f12 by default (again can be remapped its up to you!)

In the next post we will recap everything that we have done so far!

Posted in Uncategorized | Leave a comment

Grunt-Deploy-WPXap: Using Grunt to deploy your Windows Phone application

I like Grunt.js, I think it is pretty easy to use and I think creating custom tasks for it are pretty easy. But I am also currently building Windows Phone applications. Seems like these 2 things do not really mix too well, like oil and water. But I like a good challenge, I also like trying out new things.

One thing I wanted to do as I am building out my tasks for Grunt has been to take a xap and launch it to either a emulator or to a physical device. I had thought this would be a royal PITA, but honestly it was pretty easy.

The result of my effort is a grunt plugin called Grunt-Deploy-WPXap, you can get this off of Github or from NPMJS.org. I hope the Readme has enough information, if not let me know and I will make changes to it.

Keep in mind that I have only tested this on my laptop, with MY project. If this package does not meet your needs let me know and I can fix it, or I take pull requests.

Till next time,

Posted in Grunt, Windows Phone | Tagged , | Leave a comment

Sublime is Sublime 11

So we are now into the 11th post. There are only two more to go after this one. One with some more functionality and one as a summary. In the last post we installed OpenIDE and showed the very basics of its functionality, adding a file to an existing project.

OpenIDE can do much more than this. It has most support for sln/prj that you will need. Let’s start by making a new project.

greg@goblin:~/src/foo$ oi create console src/HelloConsole
Created src/HelloConsole
greg@goblin:~/src/foo$ ls
src
greg@goblin:~/src/foo/src$ ls
HelloConsole.csproj  Program.cs  Properties

This will create a proejct from a template. The following are the available templates (listed from help).

	create : Uses the create template to create what ever project related specified by the template
		console : Creates a new C# console application
			ITEM_NAME : The name of the Project/Item to create
		library : Creates a new C# library project
			ITEM_NAME : The name of the Project/Item to create
		service : Creates a new C# windows service
			ITEM_NAME : The name of the Project/Item to create

You could remove Program.cs with oi deletefile foo/Program.cs if you wanted and it would also be removed from the project as well.

You can create your own templates as well they are just scripts. This applies to both new items and project templates. If for example you wanted to make a custom item for a new item (say a custom xunit testfixture).

Go to your OpenIDE release. cd .OpenIDE/languages/C#-files/

You will see here there is create and new. These hold the templates for the create and new commands they are implemented as python but can be scripted in any language

As an example here is the template for a new interface

#!/usr/bin/env python
import sys

if __name__ == "__main__":
	if sys.argv[1] == 'get_file_extension':
		print(".cs")
	elif sys.argv[1] == 'get_position':
		print("6|3")
	elif sys.argv[1] == 'get_definition':
		print("Creates an new C# interface")
	else:
		classname = sys.argv[1]
		namespace = sys.argv[2]
		parameterfile = sys.argv[3]
		print("using System;")
		print("")
		print("namespace " + namespace)
		print("{")
		print("	interface " + classname)
		print("	{")
		print("	}")
		print("}")

and here is the template for a new Console Application.

#!/usr/bin/env python
import sys
from files.copydir import copy as copydir

if __name__ == "__main__":
	if sys.argv[1] == 'get_file':
		print("Program.cs")
	elif sys.argv[1] == 'get_position':
		print("8|3")
	elif sys.argv[1] == 'get_definition':
		print("Creates a new C# console application")
	else:
		copydir("console", sys.argv[1])

There is still much that can be added to OpenIDE (and it does a ton of other things we have not covered). But in general it can get you around the issues of dealing with project and solution files including references.

Posted in Uncategorized | Leave a comment

Fixing a side effect w/ the Expander Control in Windows Phone

I am a huge fan of the Telerik Windows Phone UI controls, I think they are simple to use and they ‘JUST WORK’.

When building a large list of items performance can become an issue. Because of this the RadJumpList will attempt to recycle objects as you are scrolling rather than create new ones. This is great as it reduces the memory footprint and generally means better performance.

However, this recycling is not without some side effects. Once such side effect pops up when you are using the ExpanderControl to allow your users to expand and collapse data.

Here is the side effect.
Lets say you have a list of 1000 items. If you expand the 1st item in the list and then start scrolling at some point you will see another item which is expanded. This is annoying because your users did not expand that item, well directly that is. This item will be expanded because the underlying object was recycled from the original item you expanded.

Solving this side effect is trivial and easy.
The easiest way to solve this is to setup your ExpanderControl as below
Expander

Notice that ExpanderControl has a binding setup for IsExpanded, this is key. This binding should be bound to a property on your VM, making sure the VM property raises property changed.

Once you have this setup your issues should be solved.

Hope this helps.

Till next time,

Posted in C#, Windows Phone | Tagged | Leave a comment