Hybrid apps are getting more and more important in the tech world. Most users of web applications expect or even demand mobile application from their creators. The main reason for that is the popularity of smartphones and public access to the Internet. Another factor is the time – instead of turning on the PC or laptop, we can simply take the phone out of our pocket, start an app and do whatever we want.
Ionic
Ionic is a free open source framework targeted at building hybrid mobile apps for iOS and Android only. For other platforms, you have to use another framework. This framework contains many mobile-optimized HTML, CSS and JavaScript components and tools for building progressive web apps. Styles are built in Sass, but you can use other CSS pre-processor if you want. The whole framework is optimized for AngularJS.
What is the Ionic Lab?
Ionic Lab is a desktop application for creating mobile apps. If you already have a web application and you just want to make a mobile equivalent to this app, it is a great opportunity for you. It can save much time by setting all the configurations without the necessity of reading a lot of docs.
Getting started
To get started with Ionic Lab, you have to be sure that you have the latest version of Cordova in npm. To do that, write
$ npm install -g cordova
in your console. You have to check ionic by writing
$ npm install -g ionic
there as well. After that, go to http://lab.ionic.io/ site, choose your system and download. After the launch, app creators greet us with the welcome screen. Now you can add your existing ionic project or create a new one. When you create a new application, you have to name it and select a path for it. Optionally, you can start with the side menu, maps or tabs. You can enable Sass, which will be useful to speed up your project’s styles, and also enable Cordova which gives you a lot of plugins that you can add to your project.
As I mentioned before, Ionic Lab sets all the configuration for us. So when you create a new project, you should have www, scss, plugins and hooks directories ready and also gulp configured. Since every Ionic app is a web page, there must be an index.html file which should look like this:
<script src="https://gist.github.com/Johny1010/df9ecb7e5df5a19596b55b8454e71490.js"></script>As you can see, there are stylesheet and script sources already linked. Unfortunately, there is no RequireJS or another similar tool, so every new stylesheet or javascript file must be linked manually in index.html.
Ionic Lab features
When you have your app created and you click on its name, it should open a new column. There we have actions and plugins tabs. From actions tab, we can run our app in the browser, on the emulator or even on a device if any is plugged in. From plugins tab, you can simply add any of available plugins that will be added to your project and from now you can use all facilities of a chosen plugin.
When you start a server from actions tab, it loads your whole app into browser view on the right. You can even turn Developer Tools on with Alt + Ctrl + I combination to make debugging easier. Ionic Lab allows you to open your app preview in a separate browser also.
Ionic also provides a huge base of components that you can simply copy/paste into your project and then adjust it to your needs.
Summary
Ionic Lab is still in Beta stage, so there might be some issues, but creators are working to make this tool one of the easiest and fastest tools to make a mobile application. Also, the Ionic team wrote a ton of documentation about how to start and how to use basic components. The Community of Ionic is also large, so you can be assured that if you have some problem, you will find the answer on the Internet. Ionic Lab provides two in one – browser and configuration, so it can save much time and fatigue. Simply divide your screen for code editor and Ionic Lab and see how it works.
