After speaking with Jimmy Bogard for an interview for my podcast (to be launched soon), I decided I needed to try ReactJS, a View library for creating user interfaces in JavaScript. It is created, used, and maintained by the nice folks at Facebook. The project on which I am currently working has a web component and an IPad application component. Considering what I needed to do and that I may ultimately hand this off to a team skilled mostly in PHP and JavaScript, I decided that doing a majority of the application in JavaScript. Because of a short timeframe, I created my server in C# to leverage my existing expertise and the built-in authentication and authorization infrastructure in ASP.NET, but with only minimal functionality that can be easily reimplemented in something else more usable to the team (mostly just CRUD). With this in mind, I am using Cordova and React. React is a sweet way of composing user interfaces and binding models to views and reactively dealing with changes in state. I’m impressed and I will be using it more in the future. There are some pitfalls, though, of which you should be aware, if you are going to use it.
Update:
I have launched my podcast and my interview with Jimmy is published.
I ran into a problem that took me way too long to figure out and I wanted to share it here as a word of caution to help others avoid this problem. In retrospect, I should have figured it out a lot faster than I did because there was a clear warning in my JavaScript console, but I was too focused on the server and didn’t realize it. I spent most of a day trying to figure out a problem with trying to post a file from the browser to my server. The short version of the story is that I had the incorrect case on one character and it cost me most of a day. A lowercase “t” instead of a capital “T“ was the entire problem.
To give a little more detail, in HTML, to post a form with an input element with type=”file” and receive the file as expected on the server, the form needs to have the enctype attribute set to “multipart/form-data”. HTML dictates that the attribute be named “enctype”. This is how I had my form set up and I had every expectation it would post my file. This, however, was not meant to be. The problem was that I was creating this form via React using the JSX syntax associate with React for creating user interface elements in a language involving JavaScript and markup fragments that look mostly like XHTML that get compiled into JavaScript to execute in the browser. Because JSX has pieces that look like HTML, it is easy to forget that it is really a programming language based on JavaScript. As a programming language based on JavaScript, it has an expectation that the programmer using it follow JavaScript conventions. Thus, attributes of elements and event names must use camel case and match what the JSX parser expects. I noticed early and without nearly the pain that I needed to use a “className” attribute instead of using “class” as I would in HTML (this is not to say that I have any class at all) and that registering an “onclick” event required specifying “onClick”. It’s something you just need to know if you’re going to use JSX. Thus, in order for JSX to recognize an attribute on a form element called, say, enctype, it needs to appear as encType (note the capital “T”). This was the source of my great consternation and pain. This was the reason my file was not posting to my server when I submitted my web form. This was the reason I lost sleep.
When, in JSX, I had something like this:
<form action="/Video/Upload/" method="post" enctype="multipart/form-data" accept="video/*">
<input type="file" id="videoFileSelector"name="videoFileSelector"></input>
<input type="submit" id="uploadVideoButton" value="Upload"></input>
</form>
my browser was loading a form that looked like this:
<form action="/Video/Upload/" method="post" accept="video/*">
<input type="file" id="videoFileSelector"name="videoFileSelector"></input>
<input type="submit" id="uploadVideoButton" value="Upload"></input>
</form>
Somewhere in the interaction of compiling the JSX into JavaScript and executing the JavaScript to render the DOM, this important attribute was omitted. With no enctype attribute, I received no posted file.
This is an easy trap into which you may fall if you aren’t paying close attention to what you are doing. It should not have been as painful as it was for me. My hope is that by writing this, I’ll save someone else from the same pain. Remember the use of camel case and remember to use your browser’s developer tools to inspect the rendered DOM to make sure it’s what you expect before you spend lots of time trying to debug on your server.