A blog about software development

Why you should use Steroids

The sweet treats of Steroids.js in building your next app

This is an introductive article to the benefits of using Steroids to build native-like mobile apps featuring multi-page architecture, hybrid UI, and hardware features.

See your changes instantly with Scanner app

Steroids goes hand-to-hand with the AppGyver Scanner app. You don’t need to use browser windows as you create your application. As you “connect” your Steroids terminal client (basically run it), you will see a QR code on your computer screen. The Scanner app can read that special code and establish immediate connection to your Steroids client.

Now, when you click “enter” on the client terminal, all the connected devices will instantly update the project and you’ll see the results of your latest changes. This was an amazing thing to see when I first witnessed Steroids in use. The live reload has made my life so much easier. Running your project on the device with the Scanner app enables you to develop using all the native features and hardware APIs.

Note! You can connect multiple devices at once. You can even use Xcode iPhone simulator as a device by running command “simulator” on the terminal once Steroids client is “connected”.

The best thing is, you don’t need to build your app with Xcode or AppGyver buildservice to run it in the Scanner app.

Multi-Page Architecture (MPA)

Multi-page architecture means that the individual views in the app can be separated in their own webviews. For a developer this means that the state of the previous views are available on return (navigating back) which makes changing states between views so much smoother (eg. retain position in a list view). It also means that the next view can be completely preloaded for seamless switching. For the app’s end-users this means enjoyable, slick experience as one would expect from a native app.

Plain old single-page apps are supported as well… If you wish to keep making apps that way.

Hybrid UI

Steroids enables the developer to easily mix native UI features (eg. navbar) with HTML5 layouts. Effectively, this gives the developer an opportunity to take the best of both worlds: native performance and conventions & HTML5 flexibility and speed of development.

Some neat native UI features to mention:

  • Animated view transitions
  • Modal windows
  • Navigation bar
  • Tabs
  • Drawer menu (on both sides with multiple animations!)
  • File preview

Native & hardware features through JavaScript API

Navigation between views, enabling and editing native UI features, using device hardware features (eg. camera, sensors, storage). That can all be done using Steroids’ JavaScript API.

Debugging with Safari and Chrome dev tools

Debugging you app’s JavaScript code is a cake walk using the familiar dev tools of Safari and Chrome. Through the dev tools you can access the individual web views inside your app. It doesn’t matter whether the app is running in the Scanner app on your device or in the iOS simulator on your Mac.

No need to build your apps with Xcode

The AppGyver platform boasts a buildservice for building your custom Scanner apps (with all your plugins), making debug builds or builds ready for the App Store or Google Play. You can simply upload your certificates, icons & splash screens and details about your app, then hit the button. After a few minutes, your app is built and ready for download.


As you would generate parts of your web projects with Yeoman, you can do the same with your Steroids project. The builtin generators are ideal for generating CRUD views for data in your application. As a result you will get all the necessary HTML layouts and Angular.js modules.

Sharing your app

You can deploy your project to the AppGyver cloud where it is instantly shareable with your co-workers, clients and quality assurance. Sharing your app is as easy as using it with the Steroids client: share the link to the QR code page. After that your co-worker or client can use AppGyver Scanner app on their device to run the project directly from AppGyver cloud. Nice!

Further reading:

Sweet coding ;)

Tomi Hiltunen

Senior Full-Stack Developer @ Hubchat

Helsinki, Finland