Angular with JQuery

JQuery Plugins with AngularAngular is a powerful framework for creating single page applications, it boasts bi-directional data-binding and use of directives (ala web components). Angular comes with an initial learning curve with its own syntax and custom elements. In the past I have used Angular when starting out new projects, usually simple web apps and was always impressed with how quickly it allows you to develop new features, and keeps the structure of the code clean and straight forward. A problem often faced when writing plain JS or JQuery apps.

Having said that I recently tried to convert a site to Angular, this site included many JQuery plugins for various UI components, all of which seemed to get initialised on document ready several times. I started the conversion and everything went smoothly. I hit the first problem trying to initialize a JQuery UI plugin on a template view. What I mean by template view is a partial view that is replaced at runtime by angular and the data is bound to the view from the $scope. The problem was that the plugin init code was being called before angular had finished the DOM manipulation. A Quick search online confirms this is a common problem, there is also plenty of suggestions. All of them less than ideal. I wont discuss each solution as a Google search will return them in more detail.Here are the two solutions I found to be the best, its very much the best of a bad bunch

 scope.$watch(
 function () { return element.html()},
 function (newValue, oldValue) {
     if (newValue !== oldValue) {
        element.<insertPluginInitHere>({
            autoPlay: 3000, //Set AutoPlay to 3 seconds
            items : 4,
            navigation: false
        });
     }
   });

The watch method takes the directive element and watches for any changes within it, this is especially useful if you have data-binding within the directive that you need to initialise after angular has finished binding. This is my preferred method as its fairly self explanatory, my only concern is the performance implications of having many directives that have this watch function, but I have yet to notice anything substantial.

The other method is to use a timeout to initialise the plugin, similar to watch however you use $timeout and regardless of data change you say execute the init after 300ms for example, my issue with this is that you have to guess how long its going to take get/bind the data.

As I encounter more JQuery plugins and attempt to initialise them sometimes in partials/templates or the controller it gets harder to keep the code clean and the structure simple. My advice would be if facing a project that uses many JQuery plugins on the UI then maybe think twice about Angular, or the plugins that you are using on the site, if you can. Mixing JQuery and Angular isn’t nice.

Advertisements

Grunt – Optimisation of Front End Code


After my adventures with Yeoman I have grown to love the quick scaffolding it offers, but through Yeoman you are introduced to Grunt a task runner for Javascript, which takes more of the pain out of repetitive tasks. Below I will comment on some of the most useful ways to use Grunt to optimise/fix front end code.

In this short post I will give a quick introduction to some of the ways you can improve the performance of your application using really quick and simple techniques.

Performance Optimisation

Below I will list some of the really easy things you can do to speed up your applications, with a little help from Grunt.

1. Folder Structure

This doesn’t have a direct effect on performance of your application, but will aid in making any changes that will. When working with existing or older projects this is often a problem. If your Web application has a ROOT/js folder that has lots of uncompressed development grade javascript files, think about creating a distribution folder for the LIVE version of the app (ie ROOT/dist/js). In here you can also create folders like images, css/styles where you can compress those assets.

2.Uglify

https://github.com/gruntjs/grunt-contrib-uglify

One of the first Grunt tasks that I used and probably the most useful. With Uglify you can point it to the folder that contains all your js files, Grunt will then go off minify them and write them to a chosen destination folder with your chosen extension.

For the minified versions I recommend having a common location for all compressed, production ready scripts/assets, It is helpful to separate the two locations as ideally you don’t want to be debugging minified js in dev environments. So this means you can alter the development grade scripts and have Grunt minify them for use in the application.

Question : Do I need to manually run the Grunt task to see my changes locally ?

Answer : No, There are multiple ways you can get around this, my favourite is by setting up a watcher. Watchers wait for changes on certain files (in this case the dev js) when a file is changed it can trigger a task (in this case Uglify), Using this method means every time you change the development JS its automatically compressed and written to the dist location.

So changing ROOT/js/app.js would create a compressed equivalent in ROOT/dist/js/app.min.js

Next Time – Setting up project for Grunt & Uglify

I’m Back!

Its been a few months since I last posted mainly due to work commitments. During this time however I have also been working on a solo project called WeightMate an app currently available on Android. This post is just a welcome back and intro to my new project.

https://play.google.com/store/apps/details?id=com.babymax.weightmate

motivation_screen_grab

Focussing on good UX Design the aim was to create an application that would stand out in the Weight Tracker category as a “nice looking application” that hopefully people will be attracted to use. It also serves a purpose as an experiment to see if first impressions count when downloading apps. WIll users download an app with less functionality because it looks and feels better ? Will they be more patient because the app looks better ? Many questions I aim to find some answers to with this application.

Most importantly it serves as my dive back into android development after over a year hiatus. I love the design and development process and focussed on how best to do this. Being a developer we are classically tagged as not being able to design but thats not true sometimes we just don’t have the correct tools or knowledge of the correct tools (Il cover in another post). So I spoke to colleagues and friends about how they approach UX design in mobile apps. I looked around the market seen what other apps did and worked backwards from the negative comments to come up with a vision/concept of how I wanted it to look visually I then ran this by friends and family iterating over their feedback to come up with my final design.

From the development perspective I wanted to try something new I had recently read The Lean Startup and once of the concepts mentioned is the Build,Measure,Learn  cycle and MVP(Minimum Viable Product ) which I will discuss in a future post also.

motivation_device_grab

I have quite a few posts I want to cover in the next few days so I figure if I commit to them here I will have to write them

  • Lean Agile Principles
  • Lean Startup
  • Android Studio – Librarys
  • UX Tools for Developers
  • Development Best Practice

Its been a while

It’s been a while since wrote any posts as the Christmas period was very busy and work has continued to act as a roadblock to any free time I may get. However today I had some time and had a realisation that March is on its way already and I have done little work on any of my projects. Q1 is a write off so time to switch attention to rest of the year, so here goes Q1 recap.

    GitHub Game Off 2012

My Last post Dart Canvas I wrote about using Canvas with Google Dart in November this was all in preparation for the GitHub Game-Off, I ultimately ran out of time and couldn’t complete my small platform game. As this was my first game development experience it was a good challenge. Picture of the small game can be found below still very basic. I have to say however I really enjoyed Dart for the development work, It just feels easy and natural to pick up coming from a Java background.

    Android Projects

I did start work on an Android project that I would really like to finish by summer this year all going well. Details of the project still underwraps no its not top secret I just dont know much about it myself. Its a fun app though I think…

    JellyBam Custom Roms

During the first start of the year I had some issues with my Galaxy S3, occasional lock ups forcing a battery removal to return to normal was begin to get more and more common. I took this as an opportunity to try out a custom rom for my device. After looking through a few I liked the UI configuration of Paranoid and the stability of Cyanogen. Jellybam was recommended by a colleague who had installed it on his S2 and combined features from other roms that I had liked. So far I have had a few issues but the stability is better takes sometime for the developer to get the release “Stable” but all in all its been a good experience.

Just a quick update I hope to be writing at least monthly again soon as I start my projects for this year, and learn about all those new features in Dart over the last few months.

🙂

DART – MergeSort

Since I have started using DART many people have asked why I like it so much. As a Java developer at my roots I appreciate being able to code in an environment I am comfortable in, I believe this also makes us more efficient as programmers. As proof to some colleagues I decided to take one of the main sorting algorithms in a CS Grads tool belt the classic Merge Sort and code it in Dart as an experiment to show how similar it is.

class Sorting {

var unsorted ;
List placeholder;

var length;

List sort(List values) {
this.unsorted = values;
length = values.length.toInt();
placeholder = new List(length);
mergeSort(0, length-1);
return unsorted;

}

void mergeSort(low,high){

if(low < high) {
var middle = ((low+high)/2).toInt();
mergeSort(low,middle);
mergeSort((middle+1), high);

merge(low,middle,high);
}
}

void merge(int low, int middle, int high){

for (int i = low; i <= high; i++){
placeholder[i] = unsorted[i];
}
int i = low;
int j = middle+1;
int k = low;

while (i <= middle && j <= high){
if (placeholder[i] <= placeholder[j]){
unsorted[k] = placeholder[i];
i ++;
}else{
unsorted[k] = placeholder[j];
j++;
}
k++;
}

while (i <= middle){
unsorted[k] = placeholder[i];
k++;
i++;
}
}

}

As you can see the above code looks very similar to the Java equivalent. The next step was to create a test package to test the logic of the merge sort. Dart has the very handy unittest.dart package that helps us create JUnit style tests that can be run via the editor or via the command line.

import '../packages/unittest/unittest.dart';
import '/C:/Users/O325882/dart/Sorting/web/Sorting.dart';

void main(){
Sorting sorter = new Sorting();
test('Merge_Worst', () => expect(sorter.sort([5,4,3,2,1]),orderedEquals([1,2,3,4,5])));
test('Merge_Best', () => expect(sorter.sort([1,2,3,4,5]),orderedEquals([1,2,3,4,5])));

}

As everyone can see there are many similarities between DART and more OO focused languages specifically Java. Making it very easier for Java devs to move into doing funky things with the browser and embrace HTML5 technologies.

This Week – Nexus 7, Apps and new ADK

This week has been a busy week, I decided to start some Android Development again and I finally got my Nexus 7 tablet.  Let’s start with the Nexus.

Google’s Nexus 7 Tablet

I own an iPad that I won but other than that I have always owned Android devices and favored them over Apple’s due to the fact I can easily customize and develop applications for them but had to admit the iPad was probably the best tablet on the market albeit overpriced.

The Nexus 7 changes this, starting at £159.00 this tablet is perfect for EVERYONE and that really is the key. The new Android 4.1 Jellybean OS is quick and smooth, the UI is simpler and getting more and more intuitive to use to the extent that I now prefer it over Apples equivalent.  The display is bright and crisp, movies look stunning and apps look better than ever too.  So far I am very happy with my purchase the 7″ isnt too small as I had previously feared when I moved from the iPad, If anything the 7″ feels much more natural when traveling.

The Nexus 7 : Sleek

Apps for Nexus 7

I needed some new apps for my tablet so this forced me into the bowels of the play store where I found a few games that you may not have came across but are definitely worth a download. But first one app that came with the Nexus was Google Now and its really impressing me.

….
Google Now
I launched it and it told me the weather based on my current location, as you may expect this wasn’t a big deal but then I went to work and when I arrived Google now had taken the trouble to work out when the trains where coming to take me home,  how long my journey would take driving, traffic density you name it. It comes with the Nexus if you haven’t played with it please do its a great application.

Major Mayhem 

Adult Swim Games created this side scrolling shoot em up which is one of the best games I have played on the Android platform to date really very addictive give it a try. There are plenty of levels and even replayability with new guns and armor to be unlocked and old scores to be broken. I really like this game one of my favorites on the Android platform.

Dead Trigger 

Zombie Survival game come FPS, great graphics and looks great on the Nexus worth a try. Havent played too much of it yet, All I can say is that the graphics are really smooth and console quality and controls take some getting used to but really nice.

First Android App – Entering week 3

Since my last post I have polished the application up made it look a little nicer and considered some additional features that will improve the game. In this time I have added sound effects and found all about the magic of the MediaPlayer and Vibrator functions to add some subtle user feedback  The difference this makes to an application is astonishing just giving the user some basic feedback when they touch a button or perform an action whether its visible,audible or touch sensitive make user experience much more fun.

As this is my first Android app and game It is a very simple game with a simple premise similar to that of Deal or no Deal, the problem I currently face is what model shall I adopt to publish my app, Hopefully some more established developers can give me some advice here are my 3 options –

  1.  Release trial version with ad’s

If  the game proves popular enough and gets decent ratings I have a full paid version of the app that I can release that has more features that will add a new dimension to the game and adding things like leaderboards.

      2.  Release demo version (without Ads)

Release demo version for free and take the feedback to improve upon in future applications

  3. Release Paid version only (Lease prefferable)

This is the least preferable method as I personally wouldn’t buy anything I hadn’t tried, but I understand that people do make apps using this model and this is there Business model.

So far I am thinking about going with option 1 but any advice from other guys would be great.

The second thing is if I do use ad’s what is the easiest ad provider to use and what ad provider would provide the best income stream for an app of this nature maybe some of you guys can give me some advice!

This app is basic I understand this and as its my first app was more of a learning experience than a quality app building exercise. But I am keen to here from other developers.

I will update about what is chosen

Thanks,