Category: Hybrid Web Apps

Adding Buttons to Sidemenu Ionic Template

I’m working on a new Ionic app, one of my own ideas. For the layout of the app I’m using the Sidemenu template instead of the Tabs template, which I’ve used a few times before.

In this app I wanted to have a New button in the top right corner of the app. So you can add a new item to the app from anywhere within the app.

Now I wasn’t to sure how to add this in the Sidemenu template. It looks as though all the views load into <ion-nav-view> which is in the main index.html page. So adding the new button in <ion-nav-buttons> in the index.html page doesn’t work.

In order to add this New button I needed to add it to the menu.html page where the toggle menu button is. This view is displayed all the time, so my New button is available either in a list view or the details view.

To position the button to the right of the app I simply added the side attribute as ‘right’. This is how my page was set up:

 

<ion-side-menu-content>
<ion-nav-bar class=”bar-stable”>
<ion-nav-back-button>
</ion-nav-back-button>

<ion-nav-buttons side=”left”>
<button class=”button button-icon button-clear ion-navicon” menu-toggle=”left”>
</button>
</ion-nav-buttons>
<ion-nav-buttons side=”right”>
<button class=”button”>New</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name=”menuContent”></ion-nav-view>
</ion-side-menu-content>

The Learn Ionic site

I’m working on Ionic app and I need to open a modal in order to record some information. Pretty standard stuff, but sometimes you forget these type of things. Thankfully the Ionic team have the Learn Ionic site.

This great site gives you a sort of cookbook of Ionic recipes of some of the things you may need to have in your Ionic apps.

 

Why is web technology ideal for mobile

I’ve developed websites for over 15 years now, since Netscape came out. So I’ve done a lot of different websites and web applications, recently over the last 2-3 years mobile web has really grown, but there has always been the native vs web argument over which stack to use to develop mobile applications.

As a web developer I’m on the web side of the argument, the reasons for me that web suits me are, it allows me to develop mobile apps for both Android and iOS from one code base. This allows me as to develop both my own as well as apps for clients to reach both of the major platforms quicker and at the same time. 

It brings a real benefit to small to medium business who want to have a mobile app developed to hit both Android and iOS at the same time instead of getting both a iOS developer and a Android developer to create their app. Twice the number of developers cost twice as much and takes twice as long. I believe the mobile web is an ideal solution for SMB to create their mobile strategy.

Also mobile web allows me as a web developer to use the skills and experience I’ve gather over the last few years to create both responsive websites and mobile applications, using a framework like ionic to create cross platform apps.

Native is still a valid choice, but for me as a web developer the web wins.

Ionic are killing it at the moment

I’ve just got the Ionic newsletter email, reading through it I am amazed at the amount of new projects that are coming from Ionic over the next few weeks/months, there is:

The team over in Ionic are really creating a eco system around their product. It’s a great business plan, build a free product that users love, then create paid tools that users will need to support their apps they have created using your free tool. I think using this approach means that users won’t mind paying for a tool like Analytics after they have invested time in creating a product using the free platform you’ve created.

Using Ionic View

Today I’ve used Ionic’s new feature, Ionic view. This is the first time I’ve used this and it’s fantastic.

The basic idea behind Ionic View is that you build your app, then ‘upload’ it to Ionic’s servers. Once there you download the Ionic View app (which is available for both iOS and Android). Then with you use your Ionic.io log in credentials and Ionic View lists the apps that you’ve uploaded.

Then in the Ionic View mobile app you select the project you want to view, this then downloads the files to your phone to view it.

Ionic View is a great system, makes getting a early working version of your app on a phone so quick and easy.

A new series on learning Ionic from Josh Morony

Josh Morony has just started a new series on learning Ionic. So far part 1 is going through the basics of creating and setting up a Ionic app, but it is an interesting series, because Josh has mainly developed mobile apps using Sencha, which I’ve never used. Seeing how a developer moves from alternative technology to Ionic shows that Ionic is getting some real traction and become a real contender for mobile hybrid apps.

 

jQuerymobile – what it needs to be good again

Working with jQuerymobile today, it’s so hard to go back to that after working with Ionic for the last few weeks. jQuerymobile is good and the original mobile/hybrid web framework, but it is now so far behind. For me this it what it needs:

  • A new grid system or one that has more classes and options to layout screens
  • New UI, the current on looks a little dated compared to other mobile frameworks
  • UI support for both iOS and Android, not one look for both platforms. This is especially important with Google’s drive to Material Design
  • Ability to work well with mainstream JS frameworks. If you have tried getting jQuerymobile to work with Angular and the routing within Angular you know how difficult it is to get working.
  • More components

jQuerymobile isn’t terrible its just getting a little stale and needs a new UI and built in support for a major JS framework (KnockoutJS works well with it, so does Backbone and HandlebarsJS).

The main thing jQuerymobile needs is a driving force behind it. Ionic has Drifty, KendoUI has Telerik, both companies are pushing forward with their hybrid frameworks, but who is driving jQuerymobile forward?

 

Ionic CLI tip

Just reading through the CLI documentation on the Ionic site, found this small tip for updating the version of Ionic you have in a project.
To do this go to your project in terminal, then run:

ionic lib update

This then updates Ionic for that project to the latest, nice….