Digging Angular

After diving into backbone last month, I thought it’s time to have a look at AngularJS. What’s the hype with AngularJS? Why is it a popular choice for large scale websites? I often ask people at meet-ups whether their company uses Backbone, Ember and/or Angular and quite a few people usually reply with ‘Angular’. My next question usually would be why they have decided to choose AngularJS and majority of the responses is that AngularJS is backed by Google and that there is a wider support and documentation.

AngularJS is considered a new paradigm for web development. Why? Well, here are some Angular vocabulary and examples to show you just how powerful Angular can be…

Directives

One of the first observations I made when I first started looking into Angular was the statement on the AngularJS website; “AngularJS is what HTML would have been” – that’s a pretty strong and bold statement! AngularJS allows you to ‘extend’ the HTML vocabulary. You can set your own ‘directives‘; custom attributes and elements.

<html ng-app="ngApp">

The ng-app attribute in the html tag above is an example of a directive which is used to auto-boostrap the application. This is commonly forgotten by beginners.

Data Binding

The two way data binding in Angular is extremely powerful and simple – it’s automatic synchronisation! When the model changes, so does the view.

<input type="text" ng-model="firstName" />
hi {{firstName}}!

Filters

AngularJS comes with many handy filters built-in. Filters allow you to manipulate and filter the presentation of your views. You can apply Angular filters directly by extending the bindings in your HTML views

{{ 12 | currency }}

The Code School “AngularJS Tutorial for Beginners” is also a great way to get an insight of what it’s like to code in Angular.

There are still lots to learn in AngularJS – will definitely write more as I dive deeper… stay tuned!

Advertisements

My very first backbone app

At work, we thought we would try to integrate a mini backbone app into the main site. We chose to take the out log in status on the header into a backbone app.

So what is Backbone.js?

Backbone.js is a JavaScript frontend framework that provides structure for your application code, the event-based communication for your application, and the necessary interconnectedness for your data, application logic, and user interface. Simply put, Backbone.js allows us to develop applications much easier and better (more scalable, reusable, and modular code).

What stood out to me straight away is the structure of setting up a Backbone app. As I have been writing php for some time, I am familiar with MVC structure and so I was immediately intrigued. There are many different ways you can design and make your own decisions with the architecture for your app in Backbone.js.

Great reads to get started

Grrrrrunt… I wish I met you earlier…

Thanks to my new manager, Chris Iona, we have put aside time to experiment with a new tech stack at hipagesGroup! All that time in the past few years spent on concatenating, obfuscating, minifying and versioning files along with slow and manual deployment processes… gee, I wish I have been introduced to Grrrrunt earlier! It may have taken some time for me to get on the band wagon, but it’s better to be late than never!

So what is Grunt?

Grunt is a Javascript Task Runner which helps you automate repetitive tasks and simplify chores. To experiment with Grunt, you will first need to get familiar with npm (node package manager) and node.js.

Here are some helpful links to help you get started:

I would personally recommend the following plugins:

On a GTM high!

For those of you out there who work on legacy code, A/B testing and third party javascript libraries throughout your site… check out the Google Tag Manager!

Enhance your site performance, we have managed to improve our page speed by simply moving 3 javascript tags into GTM.

Need to include a tracking script for the marketing team of your company? Welcome to the world of streamline tagging. Get them to manage the tags themselves within GTM. “Cut tag deployment from days to hours”