JavaScript

Working with Excel files using EPPlus and XLSX.JS

February 29, 2016 C#, JavaScript, Opinion, QuickTip, Tools 1 comment

Need to quickly generate an Excel file on the server (.NET) with no headache or need to import  another Excel file in your JS client?

I can recommend two libraries for their simplicity and ease of use.

XLSX.JS

To smooth transitioning from Excel files to electronic handling of data we offered our users possibility of importing data. As our application is web based it meant some JS library to work with Excel files. A bit of complication was that our users over time developed a habit of having all kinds of modifications in their “custom” Excel files. So something that would allow us easily work with different formats was a preference.

XLSX.JS library available on GitHub proved to be a good choice. I could only imagine how much better it is over some monsters that would only work in IE. I think starting documentation is fairly good, so I will just go through some bits and pieces from our use case.

Setting up XLSX.JS and reading files is straight forward: npm or bower, include of file and you are ready to write XLSX.readFile('test.xlsx') or App.XLSX.read(excelBinaryContents, {type: 'binary'}).

Reading as binary is probably a better bet as it will work in IE, though you will have to write some code to implement FileReader.prototype.readAsBinaryString() in IE. You can have a look at our implementation of file-select component on gist.

Using XLSX in your JavaScript is fairly easy, though there might be some hiccups with parsing dates. See this gist.

EPPlus

We also have two use cases where we need to generate Excel file on the server. One was to generate some documentation for business rules so we can have it up to date and share with our users at all times. It was implemented as part of CI that would save a file to a file system. The other use case was downloading of business related data via web interface. These two were super easy to do with open source library called EPPlus.

You just add EPPlus through NuGet and start using (var excelPackage = new ExcelPackage(newFileInfo)). See the gist below. First file demonstrates how to operate with cells and the other one just shows how you can use streams to make file downloadable.

These two libraries really helped me to efficiently implement some of the Excel file business use cases.

Next time I will have to generate Excel file on server or read it on client I will most certainly use these two again.


1 comment


Book Review: JavaScript: The Good Parts

November 29, 2015 Book Reviews, JavaScript No comments

TheGoodPartsBook“JavaScript: The Good Parts” is the book I’ve read too late.

I understand that reading a book on JavaScript is not required as there are zillions of free tutorials, StackOverflow, and online documentation.

But because, JS is the language so popular and where it is so easy to start without reading anything, this is how most of developers start. This ends up in painful discoveries, gotchas that took ages to come to and production bugs no one knows how to reproduce.

I, actually, had a half year formal educational course on JavaScript. Unfortunately, I didn’t take it seriously. Code looked similar to C++, so I wrote few functions here and there and it was working.

Earlier this year I went to a conference where Douglas Crockford had a key note. I decided, I’ve got to read his book on JS.

Review

“JavaScript: The Good Parts“ is a quite short book. You can manage to read it in a full day, even with JS Bin open for trying things out. I’ve read it in two sessions like that.

I think if Douglas had only left the good parts of his book then it would be a really great even shorter book on JS.

Most of the book are good parts. I really liked explanations behind certain language behaviour and design decisions. Especially, I liked Appendixes A “Awful Parts” and B “Bad Parts”

In my own opinion, not so good parts are: pointless Shakespeare quotes at the beginning of chapters, redundant code in examples like a loop for creating cat doing ‘r-r-r-r’, few places where something non-JS specific is explained like RegEx, few places where something self-centric was mentioned like “Beautiful Features” chapter.

Conclusion

It is a really good book, but if you have few years of experience in JS and some more in other languages you will find very little to learn from the book.

If you are going to read any book on JavaScript at all, this one definitely has to be in you priority list.



No comments


Edge.js integration into C# project to run some JavaScript on the server

January 23, 2015 .NET, JavaScript 1 comment

Edge.js allows to run JavaScript from C# in .NET environment. And other way around – running C# from JavaScript executing in Node.js process. There is nice documentation available on Edge.js web site. Here I would like to point out a few of the issues that you might stumble upon when integrating Edge.js into your C# project.

A bit of a story on why we are moving from Jurassic to Edge.js

In a project I’m working on we have plenty of shared logic that we want to execute both on client and server. We decided that we want it to be written in JavaScript. As our backend is .NET we used Jurassic library to compile JavaScript code on the server and then to execute it whenever we needed it. We used Jurassic library for quite some time and it worked fine. It is a bit slow on doing initial compile of all of our JS code, so our startup time lagged (+30 sec or so). Execution time also wished to be better. But recently we started to get crashes that seemed to be from the library itself, but it is a real pain to find out what was the problem since library doesn’t provide JS stack trace.

How to integrate Edge.js in C# project

If everything goes smoothly all you need to do is to reference EdgeJs.dll through NuGet and execute your node script using Edge.Func. But life is not that easy.

I would recommend to create minimalistic project with basic things that are used in the project you are going to integrate Edge into. This will allow you to save time on testing how integration works. You can start with hello world available on Edge.js page. I’ve also created simple project with few things I wanted to test out, mainly loading of modules, passing-in and getting results.

Here below are three files from my sample project. It should be easy to follow the code plus there are some comments just below the code.

In Program.cs you can see how easy it is to invoke Edge and pass in a dynamic object. Getting result back is also super easy. If you are working with large objects you might want to convert the object to JSON and then pass it into your JavaScript. This is what we do using Newtonsoft.Json.

Edge.Func has to accept a function of a specific signature with a callback being called. Alternatively you can have a module that itself is a function and then load it. Exactly what I did with module edgeEntryPoint.js. To do something useful, I’m trying to dynamically find an object ‘className’ and call a function ‘functionName’ on it plus I send some other parameters. This is somewhat similar to what we want to achieve in our project.

calc2D.js is a module with logic that I’m trying to call. There is one interesting thing about it. It is the way how it exposes itself to the world. It checks if there is ‘window’ and assigns itself to it or otherwise assigns itself to ‘GLOBAL’ so this module with work fine both in browser and in Node.js.

Few things that could go wrong

Signing

It is very likely that you are signing your assemblies therefore you will get compile error telling you:

Assembly generation failed — Referenced assembly ‘Edge’ does not have a strong name.

Don’t panic. You can still sign Edge.dll. There are few ways of doing it. You can even rebuild Edge source code with your key.snk or what I find more easier is to disassemble, rebuild and sign from VS console using 2 commands:

ildasm /all /out=Edge.il Edge.dll

ilasm /dll /key=key.snk Edge.il

window is not defined

In case if you want to run same JavaScript both on client and on server you might run into issues of namespacing and global variables. Above I’ve already demonstrated how we exposed our own namespace by checking if ‘window’ is defined. If you are trying to load a lot of modules you might want to assign them to global variables before your callback function returns. For example:

moment = require(‘../../moment.js’);

If you still get error ‘window is not defined’ it could be that some internal logic is relying on global ‘window’ being defined somewhere. In order to fix it you can just have this kind of a hack in front of your entry function:

GLOBAL.window = GLOBAL;

Edge.Func hangs

There is already issue reported on this on GitHub edge#215, which I believe is similar to what we are experiencing (if not exactly same).

In our case we want to run JavaScript from .NET that runs in IIS. I created wrapper around Edge that keeps compiled function, and then Invoking is done whenever we need it. One interesting thing started to happen when I had web site pointing to bin folder. After rebuilding the app initialization would hang on Edge.Func. If I kill the w3wp.exe process and start the app from scratch all works just fine. Unfortunately I was not able to reproduce this with console application. I suspect that this has something to do with how IIS threads run and possibly locks files, but still if I locked node.dll, double_edge.js and edge.node files for console app it was not reproducible.
Issue was solved by ensuring that IIS is stopped before building the web project. This can be achieved by using commands ‘iisreset /stop’ and ‘iisreset /start’ in BeforeBuild and AfterBuild tags of your csproj file.
I don’t think that this is the best way to solve this or that running Edge.js in IIS is very reliable, so I spent a bit of time reading source code of Edge.js and debugging it. And to be honest I don’t quite understand all the things around invoking native code to make all this magic happen. Because of this I’m not 100% sure that entire solution with Edge.js will prove itself to be a decent one.

All in all Edge.js is a really great tool. Not so long ago things it does would be unbelievably difficult to achieve.

I hope this post is of some help to you.


1 comment


Integrating jQuery Chosen plugin with EmberJS and Bootstrap

December 7, 2013 EmberJS, JavaScript, Web No comments

I would like to show you how Chosen can be quickly integrated into your EmberJs application together with Twitter Bootstrap.

If you just want a solution, here is my gist: https://gist.github.com/andriybuday/7849057

Otherwise read a short story with some comments and “excuses” from my side.

I’m currently working on web application. We use JavaScript MVC web framework called EmberJs. It is very cool framework, and I will write about it more in the future. Ember has small set of views and input-helpers. Just using them is not always enough to build solid and rich application. Fortunately there are tons of controls available online, and it is quite easy to write your own controls with Ember.

Most of online available controls/plugins are based on jQuery (no surprises, of course) and they use plain javascript objects. Ember wraps javascript objects into Ember.Object, so it allows for data binding, data tracking and other advanced features, but on other hand it makes impossible to use vast majority of web components right away. You need to adapt them in order to to use them with Ember.

Having component created with Ember would result in application-specific html-tag, that would use JavaScript logic defined by you. Something like: <my-own-html-tag… that does and shows what you want.

Chosen. One of the controls we wanted to use was Chosen. “Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.” It allows you to have nice multi-selects that look like one below:

image

I’ve found a quick way to integrate chosen with Ember. As per me easiest way would be to utilize existing view called Ember.Select. You can embed it into your new component.

To be completely fair, my solution is not perfect, since I needed to hack html generated by Ember and manually handle selection/deselection of elements from the list, but solution below allowed me to achieve results fast without much code.
(Other option would be to avoid using Ember.Select and then play a lot with defining proper view for your component.)

If you are one of my constant readers, it might be bit surprising that I’m writing about web, and not even from .NET perspective. But believe me, you can expect more. I wanted to do more programming in other languages. This is why I struggled to try many programming languages. But thanks to some coincidences I currently code in javascript most of my time.


No comments