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.

Advertisements

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.

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.