Loading a service at startup in a Ionic app

This is more a note to myself than a full on tutorial.

Some of the Ionic apps I create need to create add something to local storage during startup of my app. The way I’ve been doing this recently is to run a service in the Run function of my app. Something like this:

.run(function(MyService){
MyService.appStartup();
})

I’ve used this a couple of times to load something in local storage, usually app settings. Then in my service (MyService.js) I can check what is stored in my settings, and if there is nothing there I can load them in via the same service.

Review of AngularConnect

At the end of October I went to AngularConnect a massive Angular conference, the biggest conference I’ve ever been to.

The first day of the conference was a series of workshops about Angular 2, Angular 1 and Ionic. I went to the Ionic workshop, which was all about Ionic 2.  It was a great workshop, using the new alpha of Ionic 2. This was my first exposure to Ionic and Angular 2 along with TypeScript.

Like a lot of people I’ve seen the slides from the ng-conf presentation where scope and controllers were both declared dead in Angular 2. So I was interested in seeing how the new version was structured.

Getting to work with Ionic 2 in the workshop gave me a great introduction to both TypeScript and the component based structure of Angular.

That was the Monday, then on the Tuesday the conference started proper. First off was the keynote by Brad Green. I like everyone else was hoping that the alpha of Angular 2 was going to be announced, but it was (though I’m sure it’s close). The keynote was great, full of details about Angular, the Angular eco-system and the performance gains that are coming with Angular 2, really it can’t come quick enough.

Here’s a list of the talks I went:

  • Building cross-platform apps with Ionic 2
  • Routing in Eleven Dimension with Component Router
  • Full Stack Angular 2
  • Extreme programming in a Nutshell
  • Getting Started in Angular 2
  • Building native mobile apps with NativeScript
  • These are not the models you’re looking for
  • TypeScript tooling for greater productivity
  • Building performant components
  • Creating realtime apps with Angular 2 and Meteor
  • Using web workers for more responsive apps
  • How to design large scale AngularJS applications that scale
  • Optimise Yourself

So there was quite a lot of talks, thankfully everything was recorded and the videos are available to see on YouTube. So do yourself a favour go watch the YouTube channel and go next year

Node training course

On Friday I attended a one day Node course by White October. This course was run by Tim Ruffles

It was a great course, pretty full on and fast paced. Tim is a great instructor, who really knows his stuff and was a great tutor.

When I started the course I knew a little about Node and some ExpressJS, but after sitting through the course I realised I need to learn a lot more about Node and how to write Node, especially the callback pattern.  For what I learnt during the course, the callback pattern is extremely important to get right or your Node code can quickly turn into a right mess.

Here’s a good link to understanding the Node way:

The Node Way

I’ve also got a couple of books to read through:

So plenty to get through.

White October put on some good events. The next big event I’m going to is the AngularConnect conference in October

 

 

It is fun to learn

I’ve just read Dan Davies article “It’s fun to learn” it’s a great article where he talks about how he is a self taught web developer and over the last year he has really pushed his jQuery skills building demo sites and projects. It’s a great post and well worth checking out.

While reading I was reminded about that initial fun you get when you start out learning new technologies. Like Dan I’m a self taught developer, who has picked up new skills as I’ve gone along. For me learning a new technology has recently felt like it’s something I have to do. For example as a contractor if I want to earn so much a day then I need to have a particular set of skills (not the set of skills that Liam Neeson has in Taken). Which has lead me to looking to pick up the next thing that is popular.

Really I have  a lot of experience and a good set of skills, and I could easily stick with what I know, but this leads to stagnation and a feeling that you are going nowhere in your career. This takes the fun out of the job.

Dan’s post has reminded me to not learn something cause it’s popular and may increase contract opportunities, but to learn something that I find fun. And the best way to learn a new technology is to build demo sites as Dan lists in his post.

For me I’ve recently been interested in NodeJS (yes I know it is very popular at the moment, but it’s something I want to learn). As a web developer I like the web frameworks that Node supports, the one I am interested in is ExpressJS. So that’s what I’m going to start learning and have fun doing it.

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.