Year: 2015

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.

My approach to responsive web

Over the last few weeks I’ve been working on a large responsive site using Sass.

Starting working on a responsive site as opposed to a mobile app using something like Ionic, means a lot more thought has to go into how you’ll manage and set out your sass files and use media queries.
When I worked on other responsive sites I always created a separate ‘responsive’ sass or less file (I’m mainly using Sass now, but did use Less a while ago), which contained all my media queries.
I would then load that as the last Sass/Less file, so it would pick up any styles that I wanted to amend in my media queries. This was fine, but as the site grew and there was more and more in my media queries, the single Sass/Less file became huge.
So now I’ve changed my approach, what I’ve been doing to separating my Sass files into components, so I’ll have a Sass file for each page, one for the header, one for the footer section, one for fonts and one for constant variables. I took this approach after reading this great article in SitePoint (http://www.sitepoint.com/architecture-sass-project/).
Now instead of having this single ‘responsive’ file, I’m putting all my media queries in each separate Sass file. So for example in my header Sass file I may have to site title. Within that css class I’ll have the media query for each screen size.
One extra benefit this has, besides getting rid of the massive ‘responsive’ Sass file. Is that when you work as part of a team, with other developers who are not focused on the front-end, if they are .Net developers who work a bit with the front-end work, but leave it mainly to the front-end developer. Which is how I’m working now.
If they need to amend a style that is in a media query they will be able to find the correct style a lot easier. This removes the problem where another developer may want to add a new style, and they are not sure where to add the style so they add it to a new Sass file. With this more modularised approach if they want to amend a media query based style they know where to go. Then as the main front-end developer I can manage the Sass files a lot easier.
This approach may have problems, but I’m going to give it a go on the project I’m working on.

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.

Bower or NPM

I’ve been trying to chose between Bower or NPM as the tool I’m using for installing libraries. After using both for a little while I’m going to use Bower.

The main reason for this is because Bower is more for ‘front-end’ work, while I see NPM as more of a Node library loader. For me as a front-end developer I use Bower to get all the libraries I need for a project, for example AngularJS, Bootstrap and Gulp.

I see NPM as more of a tool for creating and managing your Node projects. As my experience using Node/ExpressJS grows I’ll probably use NPM a lot more.

But for me both package managers are a fantastic, when I look back at when I started building websites and I had to find, download, unzip, copy over to my folder, update the links in my HTML, all to install jQuery. So now we as web developers are lucky to have tools like Bower and NPM.

 

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.

 

First Blog Post Using Desk

Using Desk for the first time. I’ve been a fan of Desk for a while, reading John’s blog and his videos about developing Desk.

So finally I thought I’d pay for the app. And this is my first post using Desk.

A couple of the things I like about Desk is the full screen editing, which forces you just to write. I also like that it links to multiple blogging platforms, there aren’t many apps that link with so many different blogging platforms. So I was really impressed with Desk.


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….