Prototyping with Web Technologies

Over the years the steady progression of web technologies like HTML, CSS and JavaScript, has meant we’re now able to replicate many of the UI elements and interactions you see in native applications using web technologies.

With that in mind, I’d like to go over a couple of ways we use web technologies in our apps and workflow here at Realmac.

Before we go any further, let me say this: in my opinion, building an entire app using current web technologies just doesn’t cut the mustard. It’s clunky; interactions and animation are jerky or delayed by a split second. Things don’t quite work how you expect them to.

We may see this change in the future (with better JavaScript rending and new HTML and CSS features being developed), but today web-based apps aren’t on the same level as native apps.

Don’t believe me’ Facebook recently re-wrote their iPhone app to be native due to performance issues with the HTML version.

Where I do think web technologies have an advantage over native is when prototyping features. It’s so quick and easy to put together a web page with an element(s) that you want to get a feel for. This is especially true when working within a team; there’s no provisioning profiles or app updates to install, just send out the URL and anyone can test and give feedback.

Another benefit is happy coincidences. When we were building the Analog site, I was coding up the filter switching animation and it got us thinking about adding the animation to the app. If you’ve not seen the animation, go check it out on the site, but basically there’s a bar that swipes back and forth across a photo, removing the old filter and applying the new.

It was so quick to build (finished in literally a couple of hours) and gave us an instant feel for how it might work in the app. In the end we decided to not add it to Analog, but we saved several hours by prototyping it on the web rather than coding it in to the app. It’s situations like this where the web wins over native.

Embedded web views are really popular, you might not realise but I bet many of the apps you use on a daily basis have some form of an embedded web view. The Spotify Mac app, for example, has many web views; “What’s New” page, that’s also a web view and so is the activity sidebar.

We’ve embedded quite a few web views in to our apps over the years; the welcome screen for RapidWeaver used to be a web view which used JavaScript calls to talk to the native code.

So there’s certainly an argument for using web technologies in native apps, I just think you have to pick and choose very carefully so as not diminish the experience of your app.

Future wise I can see prototyping using web technologies becoming a bigger part of our work flow. I can also see, within the next couple of years, more apps adding features programmed using web technologies, especially with all the new shiny features currently being worked on like CSS Filters, HTML5 Fullscreen API and the FileSystem API amongst others. You can also get a glimpse of the future with the amazing HTML demos on the Form Follows Function site. It’s certainly an exciting time to be a web developer!

I’d love to hear how you prototype features in your apps or if you’ve written a web based native app, and how it went. Leave a comment below or tweet me @bencounsell.