Polymer and Angular – A new adventure

For sometime now I have been building out a web app using AngularJS, It’s a great framework and you can build out web applications in no time at all once you overcome the initial and quite steep learning curve. However with all the chat around drastically different Angular v2, the web communities endorsements of Facebook’s react.js and my interest in the Material Design movement pioneered by Polymer, I decided to take a look at these in comparison to Angular.

Facebooks React was a complete departure from Angular and has its own XML like markup which in all honesty I couldn’t really buy into although many praise this feature. Long story short I decided to move on after creating some simple applications.

Polymer was next, as a framework to build entire applications it’s not quite as complete as Angular. Angular does things like routing, application structure, dependency injection very well. Polymer on the other hand is great at creating reusable components, Angular also has directives for this but in my option Polymer components are a lot easier to build/read and test. Over the next couple of weeks I am going to continue experimenting with using Angular for the application structure and business logic, and migrate directive to polymer components.

Hopefully I can get the chance to be a lot more active on this blog during this transition and provide some helpful insights to anyone else who might be partaking on this journey.

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.

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

Yeoman – Nimble Workflow

I came across Yeoman around a year ago and never really paid it much attention, recently I started ramping up the amount of web development I was doing and decided to go back and see what all the fuss was about. Im glad I did, Yeoman is a great way to speed up how you work and reduce the time to get projects up and running

yeoman-logo.a053

1. Great when starting projects

Something I used to do often was copy my old boilerplate code, add all the plugins I needed, edit the html file structures to match and then deploy to a local development server where I would start development. This wouldn’t take a long time somewhere in the realm of 20/30 minutes. Yeoman makes this so simple within 2 minutes I can have a boilerplate Bootstrap website running locally ready for development.

Above and beyond this it has a live-reload feature of Grunt which is part of the Yeoman feature this means that you can have the webpage running and when you change the source code the browser will refresh with your latest changes.

Grunt can also be used to lint your JS, make sure your tests pass before deployment and generally enforce good solid code is being written locally.

It might not seem that this stuff would be hard to do manually but the time it saves is really quite visible, in-fact if it wasn’t I probably wouldn’t be writing this post.

The power lies within creating custom generators specific to the tasks you need automated, Addy Osmani has some generators that remove unused css from your application on compile. You can also write your very own, maybe to switch between local and production environment systems.

I am currently just opening the box to Yeoman and looking forward to exploring the power of Grunt and Bower much more, I really insist you take a look.

Android Studio – Importing Library Projects

So Recently I moved to using Android Studio as my primary development environment for Android of course. The switch was simple and Studio has some really nice productivity feature to help you write code quickly. However I did find that importing library projects a little tricky initially especially having little to no knowledge of Gradle and how it works. So I thought I would write up a short post describing how.

Steps to Import Android Library to your Project

  1. Create folder in top level called libraries (same level as target,.idea)
  2. copy the library project into this folder
  3. Open Project Structure (Right-Click on Top Level Project)
  4. Click + icon towards top left
  5. Import Module
  6. Import the module you copied into libraries
  7. Click on the library name (left hand nav bar)
  8. If the library you are using has any dependencies that your project uses you can remove these on dependency tab (i.e Support Libs)
  9. Click on your project in the left hand nav bar
  10. Select dependency tab and add the new library module to your project, Apply and close

Thats the basic setting to apply a module to your project running the project will probably result in Gradle errors at this stage, because Gradle cant build the project or even find it. Edit the following files

settings.gradle 

include ':libraries:library-name',':project_name'

project_name/project_name/build.gradle

add in

    compile project (':libraries:view-pager')

Finally

If building the code at this point still gives you gradle errors your library project probably cant be built because it doesnt have an appropriate build.gradle using this template build file should help you get the project building.

buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:0.5.+'
    }
}
apply plugin: 'android-library'

dependencies {
    compile 'com.android.support:support-v4:13.0.+'
}

android {
    compileSdkVersion 17
    buildToolsVersion "17.0.0"

    defaultConfig {
        minSdkVersion 8
        targetSdkVersion 16
    }
    sourceSets {
        main {
            manifest.srcFile 'AndroidManifest.xml'
            java.srcDirs = ['src']
            res.srcDirs = ['res']
        }
    }
}

Hopefully this short guide will help anyone that faced the same problems I had at the beginning

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

CSS3 – Animating the DOM – Part 2

Have a look at this JSFiddle to see what we will be creating in this section JS Fiddle with all 4 effects. So last post (see here) we spoke about basic transitions using ease-in-out. In this post we will look at other transitions, transitional properties and maybe some transformations too.

Last time we used ease-in-out to create some basic transformations using the opacity levels of an image to fade it out. Lets start by looking at other kinds of basic transitions available to use.

Basic Transitions

ease-in-out is considered a timing function this states how the animation will play out. Here are some other stock functions you can play with.

  • ease – steady pace of animation
  • ease-in  – slowly build up
  • ease-out – start fast and slow towards the end
  • ease-in-out – slowly build up and slowly come to end
  • linear – same momentum throughout time

You can use these timing functions to modify the execution of your animation based on the time you have specified. Playing around with these alone allows you to create animations and interactivity that most websites today cant offer. You can however build more advanced timing functions using this tool Ceaser Transition Creator however use advanced animations with caution.

TIP – Avoid Motion Sickness in your app.

A tip I have found useful when creating web apps. Once you are comfortable with animation in CSS/HTML the overwhelming urge is to animate everything in your application. You start to look at the static DOM elements as boring because they have no life or activity. Depending on the context of your application start by picking one element that you think “That would be really cool if that moved like this when I done this … that would be impressive”. Take that element and animate it, spend time getting the animation fluid and in keeping with the app i.e no photoshop style sliding text with car engines sounding as it speeds across the screen. If you do this you will find clients and users of your application will notice that one singular animation, and it stands out rather than drowned in a sea of flying divs.

I hope this section has covered the basic concept around transitions and how they work. I could have went into more detail around timings and delays but feel they are pretty self explanatory if there are any gaps let me know im happy to add some detail in. To see a list of all properties that can be animated look here

Transforms

So now you should be comfortable with transitions lets add some transformations to the mix. There are commonly 2 type of transforms 2D and 3D lets start with 2D.

4 Examples of 2D transforms

Skew

Code:

#div1 {
margin:100px;
height:100px;
width:100px;
transition:all 1s ease-in;
perspective: 400px;
perspective-origin: 50% 100px;
background:red;
color:white;
}
#div1:hover {
-webkit-transform:skew(180deg);
}

Result

Skew a square with CSS

Skew a square with CSS

Rotate

Code: change the hover code to match below

#div1:hover {
-webkit-transform:rotate(180deg);
}

css3-rotate

Scale

Code: change the hover code to match below

#div1:hover {
-webkit-transform:scale(180deg);
}

The following link will show all 3 effects in action with code side by side

http://jsfiddle.net/cmac458/FraRU/2/

Hopefully this give you an insight into how to add transforms to you html elements and you can now link these to the transitions as explained in part 1 to create some interesting layouts and effects.

CSS3 – Animating the DOM – Part 1

So recently my focus has moved visibly from native mobile development to web based development, this is mainly due to the constrain of work. As I try to keep my blog up to date it only makes sense that I transition the blog to this area too. No doubt I will be back to mobile soon but for now it’s web stuff and today its CSS3.

So recently I wanted to animate some elements of my web application to add a little more interaction to the application. Traditionally animation has been saved for flash websites and flex RIAs. As HTML5 gains steam so will the users expectations of web experiences so we must adapt to create intelligent and engaging applications and using animations can really give an application the feeling that its a living thing and not just a static page.

CSS 3 Basics

We will start with the basics as always and hopefully build up to some more advance techniques in future posts, However you may find that these basic effects can achieve exactly what you need.

Transitions

If you aren’t familiar with transitions then this brief introduction may help. Transitions basically define the start and end of your animation i.e Moving an object from A -> B should take x amount of seconds. You need transitions to make the movement that appears on screen appear seamless and smooth otherwise you will get a stickato movement that looks horrible.

transition: all 1s ease-in-out;

The above CSS follows this format

You can declare each of the above transition properties in its own CSS rule:

transition-property: background-color,width,height;
transition-duration: 2s, 1s, 0.5s;
transition-delay: 0s, 0.5s, 1s;

So this will animate background-color for a duration of 2 seconds and delay of 0s, width for a duration of 1 seconds with a delay of 0.5.

Using the above method you can achieve effects like this

Css3 Transition Opacity on Hover

Css3 Transition Opacity on Hover

You can transition many properties on elements such as color/background/height/ width and so much more you can also combine these to make nice effects too. The above shows how you can use transitions to fade out an image using the Opacity css property.

.div {
background:url(http://imgurl.com);
transition:all 3s ease;
}

.div:hover {
opacity:0;
}

Have a play around with transitions for now and see what effects you can create with using these basic transitions alone, In the next post we will look at more advance transitions and start to take a look at adding transformations on top too.

Responsive Web Development

I have been struggling recently to find anytime to work on any pet projects due to work commitments. As you may have picked up from previous blog posts my first choice framework for web apps is usually bootstrap, Bootstrap is a framework for rapidly prototyping web applications created by the Twitter team. Over the last year or so Bootstrap has grown in popularity and many sites can be easily recognisable by the default theme.

Twitter Bootstrap Default

Twitter Bootstrap Default

Recently I wanted to try out the responsive functionality of Bootstrap, as expected it is easy and quick to create a simple application that can be scaled across devices without any great need to write any additional CSS media queries. By chance I came across Foundation by Zurb, a framework similar to bootstrap in many respects but maybe for more experienced developers, it also has a great range of templates and mobile specific responsive functionality built in. I decided to take a look and at first I wasn’t so keen but the framework forces you to create more custom elements rather than reusing the standard to death so in practice you will usually end up with a unique looking application. Features like off canvas elements and mobile CSS classes make creating mobile web experiences much easier in Foundation.

Foundation by Zurb Template

Foundation by Zurb Template

I hope to get back to doing some more work on my Dart projects soon but due to work I have been focusing on more traditional technologies. Hope to try update this blog a lot more often this year starting …. Now.

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.

🙂