An easier development flow using Javascript and WKWebView on iOS
Syrmo is an IoT (Internet of Things) startup that provides skateboarders with insights into tricks they perform. How is this possible? A small device is attached to the skateboard. It is kind of a ‘smart riser pad’.
This is a blog post about Javascript and iOS. Keep reading, trust me ;-)
This device senses the movement of the skateboard and has an algorithm that can differentiate between different kinds of skateboarding trick. Once a trick is detected, the device sends movement data via Bluetooth LE to its companion smartphone app.
One of the many features Syrmo has is the ability to provide a 3D animated replay for every trick. Skateboarders can analyze how they perform their tricks by changing camera angles, zoom and playback speed.
OK I like skateboards but why the hell I am telling you about this? Well, obviously skateboards and Javascript have so much in common … just kidding
Now let’s talk about some programming stuff
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.
See also: Introducing Loadjs
After a while, we found ourselves waiting between 8 to 15 seconds every time we changed a line of Javascript and we were definitely not happy about this. We wanted to recover our fast development cycle again, just hit save and reload the changes without having to wait for XCode to compile anything. To do this, we developed WLXWebViewReloader: a simple pod that extends the behavior of WKWebView to automatically reload its content when source files change.
Well, that’s not entirely true, it is not just a pod. You also need to install the webview reloader server. A small npm package that serves files over an HTTP server and sends a push event (using socket.io) to the client to tell it that the source code has changed. When the web view receives a push event from the server running on your dev machine, it reloads its content.
Check it out! The project’s page has an example of how to configure your WKWebView in order to support the auto-refresh feature. As always, pull requests are welcomed.
Posted by Guido Marucci Blas (guidomb@wolox.com.ar), (@guidomb).
