Wednesday, June 27, 2018
First round at converting to CoffeeScript
First round at converting to CoffeeScript
Ive spend a little time last night converting the plain old JavaScript code to CoffeeScript in the daily-time-cutter project. It was quite fun, so let me share my experience in a short post.
When you port code - and the new syntax is really new then you need a good manual. On the official site there is a nice list of all the important elements. Its good, but still leaves some blurred parts on the language. A better version can be found here. This has more details and better explanations.
The conversion process is quite straightforward and contains 2 steps: syntax and structure. First you need to make a compiler ready version, then you can structure your code so you will actually use the benefits of the system.
For the syntax part you only have to look the documentation. Nothing really difficult. One part I was really critical about is how CoffeeScript handles jQuery. We use it extensively and it would be a shame to separate it from the CS code. (Not even talking about using the evil `` (backward quotes) with string code)
Luckily Ive found a very great blogpost about it from Stefan Buhrmester. He explains that basically it works out of the box - and even have lexical support to make it easier. Ive tried it, indeed it works. You can simply port your jQuery code over to the CF script, or use the => and other syntactic sugars.
The compiler is also quite cool. You have to install a node plugin and you get a coffee command in the terminal. By default you get an inline interpreter or you can compile files - or - or you can use -w and setup a watcher that converts all the files automatically when there is a new version. It will let you know if the build was broken - so you can see you have to fix a syntax error. At this point let me warn you - its easy to get the code compiled and still having issues in it. Using the scopes properly takes a little time.
Its also useful to regularly check the compiled code - so at hand you see how its working, the other hand you can be sure its what you wanted. PHPStorms CS extension helps a lot in writing the code and find bugs faster.
I think the next part is gonna be much more interesting, when I have everything in CS and I can concentrate on the structure itself. So whats next? Quick shower, tea, brutal music and coding.
---
Peter
