Cross-Browser Javascript Development Lessons and Tips
Friday, January 13th, 2012 at 10:45am -- Adam Griffis
Over the past several months here at Hannon Hill, I’ve gotten to work on more projects to increase my exposure to Javascript development and I've learned some really helpful tips for cross-browser testing. Prior to working here, I worked on a Swing-based thin client, so most of my Javascript exposure was from personal projects. Six months ago, I decided to push myself by volunteering for a Javascript-heavy project: the Twitter Feed Block. After a week of development, testing my prototype in Internet Explorer showed that it didn’t work at all.
Last month, I worked on another Javascript-heavy project, and in addition to normal QA, remembering my past experience, I made sure to make sure that the major features worked in Internet Explorer, Firefox and Chrome. Feeling more confident, I added a small side feature--almost as an afterthought--that broke the whole thing in Internet Explorer. At this early stage of enterprise Javascript development, I’ve learned a few basic lessons that I wanted to share with those of you who are just getting started in Javascript development or having issues with cross-browser testing:
- You can’t use browser development tools like true IDE's. I still remember the first time I used an Integrated Development Environment (IDE) for development; it was a revelation. The first feature I really appreciated was the ability to stop execution of code and inspect objects. Not only did it give me a better picture of the state of the application at a point in time, but often I could shortcut looking up the API documentation by looking at the methods and member variables in the debugger. The first time I used Firebug, I started back with those old habits, but quickly learned my lesson: Firefox, IE and Chrome implementations of Javascript objects vary widely, so digging through the object for an obscure method that does exactly what you want is begging for trouble.
- Use API frameworks as much as possible. This is related to the prior point: since browser implementations of Javascript objects and methods vary, it’s important to use API frameworks like JQuery or Prototype whenever possible to hide these details.
- Develop in one environment; test in another. My favorite browser is Chrome, and its development tools are great, so I found myself using it both to develop and QA my work. In retrospect, it’s clear that this is a bad habit, but it’s easy to see how one can fall into this trap. Going forward, I plan to do all my testing in my most troublesome browser: IE.
- If something feels like a hack, it’s a great candidate for breaking in some environment. My first iteration of the Twitter Feed Block used what felt like a hack at the time. It added a new script object to the div which would perform a refresh when loaded. It felt like a hack, but I got it from the blog of a guy much smarter than me, so I ran with it--at least for the prototype. Almost immediately, it broke in an older version of IE due to an issue with adding objects to the parent object of a script. When working with finicky environments, good practice is even more important than normal.
- BrowserStack is fantastic. BrowserStack is a great tool that allows you to see how your website renders and runs in several different versions of all major browsers in different operating systems. I first used BrowserStack to avoid booting up my virtual machine to do some IE testing on my Macbook, but now I’ve found that it makes it much easier to test your page in multiple browsers quickly and in multiple versions (something essentially impossible with even a few different computers). It even gives access to some development tools, allowing you to debug problems.
Doing this unfamiliar work has certainly been a humbling experience, and I’ve learned a lot from my mistakes, but I’d love to learn from you as well. What are some tools and practices you use to avoid browser issues? What are some more general Javascript best practices?
You Might Also Enjoy
Category
- News