When we started thinking about how we were going to implement the 3D animated replay, we decided to base the development on two premises: fast iterations and the ability to write the same code on Android and iOS. After carrying out some research and tests, we decided to go for Javascript and WebGL. Javascript is a language that we feel really comfortable with. We have plenty of experience with it and by using ThreeJS, managing the 3D rendering was super easy.

Soon after we had our first version of the 3D animated replay working, iOS 8 was launched and the new WKWebView API became available. We were really excited about this because we did not have to hack UIWebView to support WebGL and the performance was way better.

Using Javascript gave us another advantage: we could develop using the browser instead of XCode. This made the development cycle much faster. There is no need to compile code, you just have to hit CMD / CTRL + S on your text editor and refresh the browser window. This worked pretty well for a while but soon enough we had to test it running inside a web view on a real device. That was the moment when we realized that our happy development cycle wasn’t working any more.

The problem was that by including Javascript, HTML and CSS code in your iOS project, XCode copied those files in what it calls the main bundle. If you happen to change the Javascript code and then hit run or CMD + R, XCode does not update the files copied to the main bundle. To make new changes in the Javascript code available to the app running on a real device, you have to clean the build, CMD + Shift + K, and then run it.

The big issue is that every time you change a line of Javascript, you have to run the app again, losing your navigation stack and everything you were doing. Apart from that, you have to do a clean build which could take a lot of time because XCode has to compile every single class again. There are no incremental compilations here.