Converted HTML5+JavaScript app to TypeScript

Below are me experiences in converting one of my small personal project from HTML,JavaScript to TypeScript.

Converting Karel to TypeScript

The application is simple one screen. Its used for teaching programming basics.

The conversion has mainly 2 steps.

Get the .js to .ts

1. Create new TypeScript project in Github. Checkout the same in local machine.
2. Create a new TypeScript project in Visual Studio. Better have Web Essentials installed.
3. Copy paste the existing JavaScript code.
4. Rename the .js files to .ts
5. There may be validation errors on compilation. But it will generate .js files.
6. Add jQuery map file via nuget 
1. install-package jquery.TypeScript.DefinitelyTyped -version 2.0.0
7. Better use Local IIS server setup from Visual Studio
8. Run the app and make sure it works as usual.
9. Commit the project.
10. Host to staging. No need to deploy any .ts files to server.

Some steps are solely related to Github source control repository not at all related to TS. The project is live at https://github.com/joymon/karel-typescript

Use the .ts features

Now leverage TypeScript features one by one. Below are some examples.

world.ts - added class support

https://github.com/joymon/Karel-TypeScript/commit/9a4d0bd9a1d8eb279ac584bc35d61dfc2c972f2f?diff=split

https://github.com/joymon/Karel-TypeScript/commit/bc80e03ad8c112df82a791a77c2b43568a5e26dc?diff=split

https://github.com/joymon/Karel-TypeScript/commit/c4667d3f765e183db9d85938488a760cd526485d?diff=split

TypeScript clearly shows the dead code. Remove everything. Refactor with confidence as it will show errors early.

How to convert from JavaScript to TypeScript is now a solved question. This approach can be used on even large apps. There are chances that somethings may show compilation errors due to lack of type definitions. eg: FileReaderSync class. Ignore those as any valid .js is valid .ts and .ts compiler will produce the code for everything.

Happy conversion.

Karel source hosted to Github

2 years back, I have created a educational tool called Karel in Javascript. The idea was not at all mine. I just visualized the idea in Javascript only as part of learning HTML5 canvas. The idea was to publish the source in some open source public repository. But unfortunately that missed from my attention.

Recently I could see a repo which is based on my Karel. There the language is changed to Czech and used Jison parser. I really don't know what is that Jison parser. He might have done some work to extract the code from the application page. It will never be easy as forking from Github.

It really made me to publish the code in open source space as soon as possible. In case somebody needs to do something on top of it, they should be able to jump start in couple of clicks.

Here is the repo in Git

https://github.com/joymon/Karel

---

I am planning to convert Karel to TypeScript. TypeScript really gives a feel that we can develop big maintainable applications in Javascript.

Online Karel Simulator based on HTML5 & Javascript

Karel is an educational programming language for beginners, created by Richard E. Pattis in his book Karel The Robot: A Gentle Introduction to the Art of Programming @wiki

If you are not familiar with what is Karel in programming, please read this wiki page. As I mentioned in one of my previous blog post, I got to know about Karel, while preparing for a session of Programming for non programmers. It's such a simple language that, anybody can teach programming or use for self study. Universities such as stanford are using this simple language to teach programming methodology to it's students. If you studied / studying in new generation Indian engineering colleges, sorry you don't get this easy option of studying programming. I don't want to use the term 'self financing colleges' where your teachers will be your seniors who just passed in the previous year. I am sure on this, because I studied in this type of college, where I had seen people repeatedly saying 'public static void main...public static void main' during the lab exam days.

Whatever it is, this post is written to not to describe about the colleges, but to talk about Karel language, and a small HTML5 based Karel simulator, I wrote in the javascript language to execute Karel programs. The story which lead me to develop this simulator is as follows.

• I found the language very simple & interesting to teach programming.
• The main attraction is the way, we can teach programming to non programmers by simply saying we are controlling a Robot named Karel by some instructions.
• I could see some interesting simulators where an animated character Karel, is acting as per the program execution.
• None of those simulators are easy to set up in our environment.
• Either they are written in Java or other language which is not easy to set up in my environment.
• Got one .Net simulator using Visual J++, and that story I explained in previous post
• No HTML JS based simulators, which can be easily set up as browsing a web site.
• After more google, I decided to create the first one myself.

Karel the robot learns javascript

If you go to the Stanford page, you can see "Karel the robot learns Java". I just borrowed that and changed it to javascript, on a belief that, they will not file patent case on me. This means the simulator is not supposed to run the original Karel language. It can run the Javascript, which will take effect on the Karel standing at the right side simulation area.

What Karel language supports

There are fundamental 2 things which Karel can do.They are

• turnLeft
• move (move one cell in the direction which Karel facing at the moment)

This turns to 2 methods in the Javascript. These methods can be used to write the program in conjunction with the other javascript language features such as if, loops, methods etc...If you want to turn the Karel to right direction you need to issue 3 turnLeft instructions or write a turnRight method which contains these 3 instructions or a loop which does the same.

Javascript function to Turn Karel right

---

//Program to turn Karel right
turnRight();
function turnRight(){
    turnLeft();
    turnLeft();
    turnLeft();
}

---

How to work with Karel simulator

Write the javascript program at the right side text area and click on "Run program" button at the bottom of text area. You can see the Karel is obeying your instructions.

Want to try HTML 5 JS Karel simulator 

I have hosted it in my own website http://joymononline.in . URL link is 

http://joymononline.in/apps/karel/karel.htm

Source code of Karel simulator

If you have experience in Javascript you might have guessed the core technique behind the simulator. It's the same eval() function in Javascript. There are 2 global functions turnLeft() and move() written and those functions are being invoked from the user input program by using eval method.

I will upload the source later to one public repository.

Where is vjslib.dll located?

Recently I had to prepare for a session related to "Programming for non programmers". I thought of starting with what is computer and programming using some day to day examples. But there is no meaning in talking 1 hour about programming to such an audience who comes from non programming background. To obey the famous "A picture is worth a thousand words" saying, I thought of giving a demo of programming to the audience. But it was tougher than showing a demo in a session about Node.JS or DSL because in normal technical sessions we can show demo using the corresponding language and the related tool. Here which language I should choose? In what tool I can select? Will the surroundings of Visual Studio take the attention of these people from the code window? 

Karel the Robot learns programming

These questions lead me to the famous Karel programming language. The first time, I came to know about Karel the Robot is in the programming paper CS106a of Stanford university syllabus. Don't think that, I studied in Stanford but attended their free online programming course via iTunesU iPad application. But most of the Karel runtime environments are available in Java and Java is not setup in our machines. Googled for online simulators but failed. So decided to go with one .net implementation found in the below site.

http://www.acthompson.net/DotNet/Karel.htm

Location of vjslib.dll

I downloaded the project but it failed during build. The reasons was simple. Its based on Visual J# which was included in earlier days of .Net and slowly removed from Visual Studio suite. It needs a dll named vjslib.dll. I searched for all the folders in my machine related to .Net 2.0 but cannot find. 

Finally google gave me the location of the Microsoft Visual J# Version 2.0 Redistributable Package which contains the vjslib.dll file. Installed it and things started working.Below the location where we can find the vjslib.dll file

C:\Windows\Microsoft.NET\Framework\v2.0.50727\vjslib.dll

Location of Microsoft Visual J# Version 2.0 Redistributable Package 
http://www.microsoft.com/en-us/download/details.aspx?id=4712

I don't think this post will be useful if you are developing a new project. But useful, if you had to maintain or work on legacy code base or ended up in a sample which is created using VJ# assemblies.