4 tools native devs should be using to transition to the mobile web

The mobile web has long — and we mean long — been mobile developers’ promised land of milk and honey, a world where you never have to care what platform of device shape your end user has. All you have to do is make butter-smooth apps that are a joy to use and that meet the needs of the people.

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":750648,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

In reality, there are lots of speedbumps along the way. For some time, the mobile web itself has been too immature to support users’ app expectations. And then there’s data speeds on cell networks. And then there’s the simple fact that mobile developers have for this long been native developers, and building for the straight-up web on tiny screens is a whole new world.

We’ll be talking about the mobile web, responsive design, and mobile developer tools at MobileBeat 2013, our flagship mobile conference coming up next month. The overarching theme for this year’s event is all about building a better mobile experience — and where does mobile experience need more help than on the mobile web?

Transitioning is a work-in-progress for our industry, but in the long run, it’s a change worth making. Here are some tools to ease the ch-ch-changes.

Adobe Edge

Granted, this is more of a designer tool, but if you know your way around Photoshop, dear hacker, you’ll learn your way around Edge. Edge is actually a suite of tools for web development, and a few tools speak specifically to the needs of mobile developers.

For example, Edge Reflow is a tool specifically for responsive design. It allows you to create (i.e., design) great-looking sites and then quickly scale them for phones and tablets of all sizes. For hackers with an interest in design, it’s a fabulous way to indulge in both pursuits.

From Edge Reflow, you can extract CSS and manipulate it using Edge Code, another tool in the suite. Edge Code is basically an IDE for web development (HTML, JavaScript, and CSS), with code hinting and integrated visual design tooling.

Finally, there’s Edge Inspect, which you can use to browse across multiple connected devices. In other words, you can preview your work in a desktop Chrome browser, and the Windows tablet and Android phone on your desk follow along with your navigation, allowing you to see your work everywhere at once without having to triple down on manual taps, swipes, and clicks.

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":750648,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

Webflow

Webflow is a fascinating tool for would-be mobile web hackers. Another designer-friendly tool, it creates beautiful, responsively designed websites in a simple user interface and then exports production-ready CSS and HTML code. Its interface is like a simpler version of Photoshop, with familiar tools and layers options.

You can check out the dog-foodie demo and play with it yourself, or you can watch this video clip for a better idea of how it works:

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":750648,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

Literally anything from Mozilla

No organization on our planet wants the mobile web to succeed more than Mozilla. Philosophically, the foundation has a single goal: to make the web better. And for phones, that means making mobile apps amazing, even if they run in a browser.

To wit: Emscripten, which converts compiled C and C++ to JavaScript; Asm.js, which optimizes said JavaScript for reliability and speed; and ORBX.js, a JavaScript library for virtualization.

“Because we care a lot about the mobile web, this is very close to our hearts,” said Mozillan Jonathan Nightingale in a recent interview.

“Right around Firefox 4, I spun up the developer tools team. For the last two years, they’ve been cranking out these incredible tools at a breakneck pace.”

[aditude-amp id="medium3" targeting='{"env":"staging","page_type":"article","post_id":750648,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

Mozillans working in the developer tools group been have been laboring for two years to produce a full, mature toolset. More than half of the team is focused on making those tools “remote-able” so you can measure you apps live instead of simulating then.

“It’s something we feel a lot of urgency about,” siad Nightingale. “When someone says, ‘We can’t do it, we have to go back to native,’ that hurts us.” Stay tuned for more dev tools from Mozilla around the end of June.

Famo.us

One of the bigger problems of the mobile web is performance. In a true application, not just a website, you typically have a single-page design with one URL and a lot of motion, interaction, animation — the little bounces and blips that make an application come alive in a user’s hands.

[aditude-amp id="medium4" targeting='{"env":"staging","page_type":"article","post_id":750648,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

Since this is more of a game-dev paradigm than a web-dev paradigm, the folks at Famo.us decided to build a gaming engine for rendering on the web, modeled on stuff like Unity 3D and Unreal 4.

In Famo.us, you no longer talk about divs and documents. Everything is in terms of surfaces. It can render hundreds of surfaces at 60 frames per second; almost every consumer-facing app you’ll see (besides some games) has fewer than 50 surfaces displaying at a time.

Here’s a demo featuring the periodic table of elements:

“This is a fundamental stress test of everything that is ruining JavaScript engineers’ lives right now,” said Famo.us founder Steve Newcomb in a recent interview. “It’s the kitchen sink of HTML5 problems: infinite scroll view with momentum … being in motion in an app, and then changing your mind. … It’s a disaster in HTML5.

[aditude-amp id="medium5" targeting='{"env":"staging","page_type":"article","post_id":750648,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,mobile,","session":"C"}']

“When you code up this motion, it’s actually complex. There’s a ton of these using the CSS3 primitive transform method. We don’t. We actually use a physics engine the way a game engine uses a physics engine. This decreases development time by an order of magnitude.”

Image credits: Shutterstock; AISPIX by Image Source/Shutterstock; Webflow; Mozilla; Jolie O’Dell/VentureBeat