My Experience With Rule 3: Buy Time

Rule Three: Buy Time

Buying time. It could be argued that rule one covers buying time, however I have about a month under my belt of learning about the power of delegation.

A really excellent service I have been trying out for the last month is http://getleverage.com (formally less doing). I have to say that this service has been fantastic for me. The whole idea behind get leverage is to offload time consuming tasks to someone else. In essence, you are buying time.

Here’s a few examples:

  • Find a restaurant in Seattle that can seat 40 people for our conference.
  • Find transportation for 40 people to and from hotel for the dinner.
  • Make travel arrangements.
  • Convert a screen shot of a table (why do people do this?) into a spreadsheet so we can actually work with it.
  • Update a website
  • Create a webpage
  • Find a driver to haul a trailer from one state to another.

There are more, but each of these tasks took time. I could have done each and every one of these myself, but by delegating these tasks I freed up nearly 20 hours in a month.

Not only that, I learned to:

  • be clear about the outcome I wanted before I started a task
  • gather all the necessary resources into one place so that the person I was paying to do the work could be more productive
  • set the context for a task so the person doing the work could improvise correctly if necessary.

So far I have been really happy with the service and it has expanded the capability of our organization without the need to add more staff, but more importantly it has freed me and some of my team members up – giving us to more high value tasks.

I am sure there are other ways to buy time, but for me this has been one of the most effective.

 

I Use This: Best Score Keeping Pen Ever

I recently came across an amazing multi-color pen that reinvigorated my enjoyment for keeping score at baseball games.  With Spring Training starting this week in Arizona, you might get a kick out of this as well.

The pen is called a FriXion 4 color from Pilot.  What makes the pen so great, is that it features the Frixion erasable ink from Pilot.  This means, you can keep score in ink and not worry about making mistakes.  

Personally I enjoy scoring plays in black, outs in red (as well as errors), and player changes in blue.  RBI’s, and outstanding plays earn green ‘!’s or ‘*’s.  The 0.5mm gel ball tip writes smooth, and for the most part the ink rarely binds or runs dry.  The fine tip makes it easy to make small annotations in score keeper boxes.

How does it work?

The ink is like a bit of science magic.  When you heat the paper – say with friction, over 140 degrees Fahrenheit, the pigment molecule switches places with a transparent molecule and voila!  It appears at though the ink has been erased.  However, in reality the “ink” is still on the paper.  In fact, if you freeze it, it will come back.  However, I put the 140 there for a reason.  In most parts of the world this is rarely a problem.  In Phoenix however… 140 is easily attained in the summer in a closed car.  So you could see all your hardwork quite literally vanish before your eyes.  So don’t put your pen or scorebook anywhere you wouldn’t put your dog. 

How do you get one?

I bought my Pilot Frixion 4 color from JetPens.com for about $11, but they now sell them on Amazon (with Prime) for less than $9

Good luck and happy score keeping!

The One Thing And Impact Areas

Jay Papasan presents The One Thing.

This week I was able to attend an amazing presentation by Jay Papasan about his latest book, co-authored with Gary Keller called, The ONE Thing: The Surprisingly Simple Truth Behind Extraordinary Results.

The associated website http://the1thing.com has some great resources where you can download, including most of the graphics from the book. I had the chance to ask Jay why they felt their was room for another time management book. He explained they were creating a course for the Realestate business and that Gary had written an outstanding 12 page intro to the course. “When I saw it, I thought, this needs to be a book.” Five years later they were on the New York times best seller list.

The One Thing and Impact Areas

When I compare this book with the time keeping advice in Chet Holmes “Time Management Secrets of Billionaires,” I find a useful tool for staying on task. For me, the key is to have a clear list of impact areas, key areas of your business, personal, and community life. It is a bit like keeping 6 or 7 different lists, but the within each list do you have a top priority.

During his presentation, Jay talked about having 7 bubbles, or domains you need to keep in balance. But for each one, do you know the most important thing?

Prioritizing lists is not new, but I loved the way Jay said put it. “You can not live in complexity.” Extraordinary success can be achieved through exceptional focus. The ideas in the One Thing help me focus on my Impact Areas. These impact areas help me (and my team) focus on what is important to drive the success of my business.

Having spent time with a number of time management strategies, including Getting Things Done, Stephen Covey’s weekly time blocks, and Chet Holmes Time Management Secrets of Billionaires, I have found the process I am able to apply most consistently is:

  1. Make a list of 6 things I need to do daily.
  2. Prioritize my daily list.
  3. Do the hardest thing first, early in the day.

How do I keep track of ALL the things I need to do? Two steps.

  1. Weekly check my list of impact areas and goals.
  2. Keep separate notepads for each impact area.

— Scott

Goals are for Losers

Scott Adam’s Fun, Informative, and Controversial Book Shares Some Interesting Ideas

My latest good read, is Scott Adams, “How to fail at almost everything and still win big at life.” To be honest, I have not actually “read” it. I listened to it on my iPhone via Audible. The book was read by Patrick Lawlor, who does an excellent job narrating the unabridged tome.

I won’t bother trying to review the whole book here – I highly recommend the read (or the listen).  But I will share an interesting idea he introduced and tell you my thoughts on the subject.

Goals are For Losers

Scott Adams controversial asertion that “goals are for losers” is a sensational way of selling his real idea.  His real idea is that successful people pick systems over goals.  That might sound like splitting hairs, and indeed he admits it himself, but he does have a point.

When you chase a goal:

  1. By definition you have not achieved your goal.  Therefore, by default, you are “losing”.  Long periods of losing can sap your energy.
  2. You can lose your way after you reach your goal because goals are specific, like lose 10 pounds.  What happens after you lose the weight?

In contrast, systems for success can produce different, sustainable outcomes.

  1. Every time you apply your system you are “winning”  regardless of the outcome.  This provides positive feedback. When you operate your system, you have done something positive.  This positive energy is important because it encourages you to keep applying your system.
  2. Success systems in theory have no end, they can cary you far beyond the end point defined by a single goal.
  3. Systems are open ended and therefore more opportunistic, they can lead you to outcomes goals never envision.

I like Scott Adams writing because he is inherently cynical and that pleases the engineering part of my brain.  However, there is some merit to his assertion about systems versus goals. There seems to be value sustaining positive energy versus living in a negative state. He has a number of other very interesting ideas.

I highly recommend giving it a listen.

Scott

You can find the Audio Addition Here

Or the Kindle Addition

Clunkdroid- Why does Android Still Feel Unfinished?

Is it Just Me?  Or does Android still feel unfinished?

Recently I had to switch to owning a connected a google device for one simple reason.  I needed my Google Calendar when I was on the road.  I don't know what's going on or why, but my Apple Calendar will not sync with my Google Calendar and we pretty much run our whole company on Google Apps (gmail, calendar, docs). 

While  I could use the google iOS apps, for reasons unknown I am required to login every, single, time.  This is a huge problem for me as I use a complex password with lots of symbols.  Try typing a 16 character (4×4) password with symbols and case changes on an iOS keyboard.  It's PAINFUL to impossible.

Therefore, I went to the AT&T store and they tried a couple of things, but nothing seemed to produce the consistent sync I need.  This has been made worse given a recent change in the way we operate.  Our new task management process relies heavily on Calendar scheduling.  So not having my schedule has become a very real problem.

The most cost effective mobile solution for me is the new Samsung Galaxy Tab 4 eight inch tablet.  While the Galaxy Note phone looks appealing, the cost is more than twice as much ($700 instead of $300) and the monthly charge is was < 1/4 – about $15 a month to add to our business plan instead of $65 for a new phone line.  So here I sit and type. 

It works.  Mostly.

Well, the number one critical feature I needed works like a Champ.  I can get my Google calendar but with one caveat.  The Samsung application does not fully sync with google either.  So the default calendar from Samsung is almost completely useless.  Changes made to the default calendar app do not propegate through the Calendar ecosystem.

Despite that, I now have reliable email and Calendar for the road.  But what about my other critical apps?

The quality of Apps for iOS really seems to outshine Android.  I have not one, but 3 decent Markdown editors on my iPad.  My favorite right now is Editorial because of the power it has to format your markdown into HTML you can paste into web apps like WordPress and so on.  ByWord is another classic editor that is extremely powerful.  What I really like about both of them is

  • They format the markdown in the text.
  • They have lots of options like setting the font size, or saving to dropbox.

These features really make these applications easier to use.  The formatting is like syntax highlighting.  It's eye-candy, does not change the actual content but helps you catch mistakes in real time. 

The options like setting font sizes let older folks like me concerned with eye strain pick a comfortable font.  The linking to DropBox gives me confidence I can get my files later from another device.

On Android?  Not only are there very few markdown editors, not a single editor offers all three of these features.  Writely Comes close, but they don't support indocument formatting.  Writer supports in document formatting, however you are stuck with their "font for 18 year olds", and no linking to an external service.

Given the sheer number of Android devices in the world it is shocking that more apps are not available.

Device Compatibility

So I have my shiny new state of the art Android device, but I kid you not, two apps I went to download right away had warnings that the apps were not compatible with my device.  Seriously?

In another review, the app maker complained that they could not garunatee their app would work in the future.  They already supported 1,200 devices.  With all the changes they had no idea if they would or could support what ever new things came along.

Nice.

Is Android a Viable Market for Independent Develpers?

The other challenge with Android devices is that because they are cheap, so are many of the clients.  Apple users pay a lot.  They expect to.  But this also means they will pay for quality.  I have never seen one, but I would love to see a comparison if Android software developers actually can make any money.  The numbers are huge so I would assume so, but I don't understand why there are so few quality apps that maximize the latest hardware.  Even Microsoft seems to understand that when you release new tech there should be marquee apps to give you reasons to buy the newer hardware. 

This seems lost in the Android space.  My Samsung tablet has an absolutely amazing screen.  And yet most of the games play at a very low resolution and look terrible.  That is hardly what I would think either Samsung or Google would want – their latest tech looking bad.  But I don't know why that is.  I think I take it for granted what Apple has built.

On the surface, they are so similar, but just below that shallow surface is a depth of features and quality that only seems to exist in the Apple-sphere. 

I can go on, the list of applications that are available on my iOS and work flawlessly that I can find no equivalent of on the Android.  There are a few notable exceptions, mostly business and productivity apps like Everynote, and Todoist, but where is Solebon the outstanding solitaire game for iOS?  Or how about Textastic?  And while it gets slammed more often than not, I would love to have Safari on my Samsung.  I long for a browser that does not freeze during page loads or jump around constantly as it rerenders the page adverts during loads.

Interactive Map Shows Where the Fans Are

Gmail_-_Scott_NovisThis nifty Map from the New York Times shows By Tom Giratikanon, Josh Katz, David Leonhardt and Kevin Quealy. While people do not often respond to surveys, they do post many of their preferences on Facebook. As the Onion once quipped, Facebook is the greatest domestic spying tool ever created.

Sarcasm aside, this map is very clever.

AngularJS for jQuery Developers – Part 3: Modules

In part 1 we talked about Angular JS compared to jQuery, direction instead of manipulation. Then in part 2 we reviewed that AngularJS wants you to be able to do virtually everything with JavaScript, including test.

AngularJS for jQuery Developers – continued

Let’s get down to some coding shall we? Our original Angular JS file looked like this:

While it feels like we might be far away from our original topic, AngularJS for jQuery developers, we are just about to dive into the heart of it, how to make test part of our regular development. As a refresher, let’s take a second to look at what we have in our angular module..

ng-app tells the angular engine that this block contains an angular application.
ng-init runs some initialization code. Here it creates our trivial model, the variable named name.
{{ name }} is a handlebars like template substitution. The angular engine replaces the double braces with the results of the expression. You could just as easily have put {{ 1 + 2 }} inside the code and it would have evaluated the expression and put the number 3 into the document and rendered the answer in the browser. (Try it if you like).

Finally, the <input> tag is perhaps the most interesting. After specifying a text field, we use the attribute, ng-model. This binds the input element to the model.

But what if we want to do something more complex? Chances are we want to create a controller.

Making our first controller

First, we need to remove the ng-init and introduce the ng-controller directive.

The HTML File or VIEW Code

Here is the html file, updated to use the most trivial controller possible:

So what changed? First, we moved the ng-app to the <html> tag. Now we replaced the ng-init with the ng-controller directive and told it which controller to look for.

Also, I moved the script calls to the end of the <body> tag which is fairly common with Boostrap applications (I’m thinking ahead). It runs just as well with the scripts at the top as the bottom, but putting them at the end prioritizes the page load.

This script also demonstrates a problem we will come back to later to address. Namely, we get a FUCO – a Flash of Unformated COntent. The template expression {{ name }} is briefly visible until the controller script runs.

The Controller Code

The controller code is overly simplified. In fact it is too simple. Why? Because it puts all of our data and functions into the global scope. We don’t want that. However, we’ve already taken a lot of time on peripheral topics and as much as I would love to talk about scope, here let’s just stay on task, getting the simplest possible controller to run.

As you can tell, the controller MyCtrl is passed a parameter named $scope. The angular framework creates $scope and passes it to the controller. The scope of $scope is the block where the controller is active. If we assign any values to any members of $scope inside our controller code, those members will show up as variables inside the body block. Hence the name in the ng-model attribute is referring to the $scope.name inside our controller.

If you want to make Javascript functions available to your HTML page, you would assign those to the $scope variable as well inside your controller.

You could then call {{ mySquare(2); }} to print the number 4 in your document. Trivial, but you get the point. At this point we are not concerned with the complexity of the functions, just the complexity of the relationships of how things fit together.

To test this you load the file into your web browser and look at it. I use MAMP so I am using a genuine apache webserver. In my experience loading from a file does not always work and can cause more problems then it is worth. Besides, MAMP pretty closely imitates my target environment, an inexpensive shared linux host like those available from (1and1, Dreamhost, and A Small Orange).

Despite the fact this javascript controller is a tad simple, now is a great time to introduce the idea of testing. Notice that our “controller” has no idea of the HTML document structure. That means it should be easy to test this functionality independent not only of the browser, but of the application itself. In short, we should be able to test it as an isolated unit.

So how would we go about doing that?

To answer that question we are going to touch three technologies:

  1. Jasmine
  2. Node.JS
  3. NPM

Hello Jasmine

Jasmine is a nifty unit test framework for Javascript. What makes it nifty is that it lets you write JavaScript tests with Javascript. Do you sense a theme here?

By focusing on one language we just might be able to make our lives easier… maybe.

We are going to look at Jasmine 1.3.1. Jasmine 2.0 is in development but none of the tutorials I had found worked with it so I am sticking with 1.3.1.

There are probably many ways to do this, but here is how I did it. I found this tutorial: How Do I Jasmine. It refers to a stand alone version of the library. I wanted to learn Jasmine before I got into node.js and npm. It turns out the standalone version of Jasmine is a little hard to find. At the time of writing this, I located the files on Github.com/pivotal/jasmine under the Distribution Tab.

When you download the library and unpack the zip file you get the following:

The SpecRunner.html is an html file that loads the source files and and the specification files (test suites). It then runs the Javascript tests against the source files and displays the results in your browser.

The output looks like this:

Jasmine_Spec_Runner

The SpecRunner.html file looks like this:

So let’s review. You write your javascript controller. You then write a test suite for that functionality. You include both the controller file and the test suite (called a spec) in the ScriptRunner.html file and the simple act of loading this document will test your function.

Let’s try it.

A Trivial Test File for a Trivial Function

So how do we write test scripts? By using three key Jasmine functions:

  • describe()
  • it()
  • expect()

These functions will be the backbone of your testing tools. The describe() function creates a scope for your testing, and will group a number of tests into one logical block. The it() function logically handles a single test or specification. The expect() function tests the results of your functions to make sure they behaved as expected.

Here is a prototypical Jasmine script:

Let’s break this down.

describe is a function that takes a meaningful label and associates it with an anonymous function. This manages Javascript’s scope (scope is a really big deal in Angular development). Then comes the test. The it() function also takes a meaningful label and it is attached to another anonymous function. This is the test. The expect() function determines whether or not a test passes or fails.

In our first example, the test passes. If a test fails (say edit the expects() to be different) and this is what you get:

Jasmine_Spec_Runner-2

Failing a test immediately raises the red flag.

The Big Idea

The big idea is that if you consistently test your software, you can catch bugs before they are hard to find. Expanding your test suite as you develop will make it easier to implement with confidence. As we expand our modules functionality we are going to also expand our suite of tests.

Controller Test

So how do we test our simple controller?

Copy the Jasmine 1.3.1 folders into your project. We want the SpecRunner.html file in the root folder. Source files go into the src directory, Spec files go in the Spec directory.

Now let’s write a test for MyCtrl. Since it does one thing, we only need one test. Create a file called MyControllerSpec.js and enter the following code:

This test file contains a describe() function call which groups together all the tests. It contains an it() function call to define our first specification.

Now why are we declaring a scope variable? Because angular will not be calling our module, our test code will. So we have to create the context. One of the biggest challenges we will deal with later is how to integrate all the dependencies from angular. Just trust for now that the smart people at Google figured all of this out and it is possible.

Finally, we expect(scope.name).toBe("World-Controller"). It almost reads like english does it not?

Try it out.

Running Your Test

Edit the SpecRunner.html file to look like this:

The source files are included before the test files.

If you load SpecRunner.html into your browser you would see…

Jasmine_Spec_Runner-4

This is just about the most trivial test you could run. One function. One specification. We are testing to see if our controller function sets the scope member name to be a certain string.

If something went wrong (say the name string was different) then you would see:

JasmineFailedTest

Go ahead and edit MyController.js and try it out. Or change the specification to expect a different string. Either one will cause the test to file.

This is great and all… but do I have to load SpecRunner.HTML?

You now have an environment where you could play around all day learning Jasmine. You can add more complexity to MyCtrl and you can write more tests. Have at it.

However, loading and reloading the SpecRunner.html by hand is hardly ideal. If we want an automated build process, manually executing tests is a problem. How do we solve that?

Enter Node.JS

I won’t waste your time on how to install NodeJS. (I do everything on a Mac, so my examples will reflect that). Please install it then continue.

To make sure you have node.js open a terminal and run

You should get a version very similar to the one shown in the example. What are we going to do with nodejs? We are going to set up jasmine tests we can run from the command line. So see how this works, run a trivial JavaScript using node.

Create file is called alive.js

Yup, it is a one line Javascript file that writes a single message to the console. Let’s run it with node. To do that enter the command:

Not terribly exciting, but you get the idea. Node.js can execute javascript outside the browser! How cool is that?

Well, it’s about to get a lot more interesting…

NPM – The Node Package Manager

Like many other scripting languages, Node operates on the idea of packages, external bits of code you can include into your runtime environment. PHP has PEAR, Python comes with a host of powerful packages. NodeJs includes a utility called npm. Npm allows you to install packages for nodejs.

You can find a vast library of packages at the website npmjs.org. Nearly all packages come with instructions on how to install them. There are two ways to install packages.

Global Installation

Using the -g argument will require the use of sudo, or at least you need to be running with root level capability on most *nix installations. Why? Because this will install the package for ALL users.

Local Installation

Or, you can install modules locally, so they are only available in your project, on your account.

In this case, it matters where you run the npm command because the package will be installed inside your project directory, into the node_modules subdirectory. This can be good if you want to have different modules that do similar things for different projects.

Now, what if we could find a command line version of Jasmine?

Turns out there are lots and lots of them. The one we are interested in is jasmine-node. It can be found at: https://github.com/mhevery/jasmine-node. To install it run

You need to use the -g option otherwise the you have to do a lot of work to make this run properly from a local installation.

To use Jasmine with Node.js we also have to make a couple of key changes to both our controller and our spec file. Basically, it is time to make our controller a real module and tell our script to require it.

Feasts and Fits: JavaScript / NodeJS and Modules

Once upon a time, a consultant once taught me certain words are “feast” words. He meant that some words have so many meanings attached to them that no one can be sure what anyone is talking about when they use those words. A great feast word is quality. MVC has become very feast like – it means different things to different people.

Module has become another feast word.

Just google “JavaScript” and “Modules” together and you will likely come across the excellent tutorial on JavaScript module patterns, however this will not explain how NodeJS handles modules.

Basically, NodeJS uses different rules. NodeJS is not a browser so it behaves differently than javascript running in a browser. It turns out the runtime environment for a language can have a very powerful if subtle impact on the language itself and it’s behavior. For example, if there is no HTML document to render, how do you include other files in your application?

Please check out Node.js, Require and Exports for more details, but here’s the core idea. In a browser environment, we create modules to achieve a level of isolation because JavaScript makes everything global if it can (not completely true, but true enough).

Node.JS on the other hand inherently restricts scope to the file level. This means our test script can not access MyCtrl because it is in a different file. Put another way, ScriptRunner.html made our test file aware of MyCtrl because the document included it which put it into the global scope. With Node.js (a command line environment) we need to be more explicit.

In short, we need require() and we need module.exports to indicate which JavaScript files have access to which modules. So Let’s update our JavaScript source file:

The key here is that we added that last line. module.exports makes MyCtrl available to other modules (files), such as our test file. I feel compelled to let you know that how module.exports is used makes a difference, but you can see the above mentioned tutorial for a great explanation. I want to get on with running a command line test suite.

Next, we have to tell our test spec to require our controller.

At the top of our file we added the call to require(). Now from the command line we can run:

Voila! We can now run test scripts in a batch file! Wow, that was a long time in coming. Getting a module that we can test using a batch file. But we got there.

AngularJS for jQuery Developers : Recap

So with AngularJS you isolate your functionality into a standalone module. Jasmine provides a nice behavior driven library we can use to write test specifications for our code. Using NodeJS and its package manager we can automate our testing.

We have covered a lot of ground, but we are still not where we want to be. AngularJS for jQuery Developers is supposed to help you use angular – but we took a detour to talk about test. Because Angular test uses so many different technologies, we needed to touch each of those to get an understanding of what they are and where the come from. Now that we have done that, we can move onto the next part of the process.

Completely automating test with Karma, and starting to explore more complex controllers.

Part 4 – Karma, Karma, Karma Cameleon

AngularJS for jQuery Developers – Part 2: Test

Thanks for joining me in part 2. Now in this edition there will be very little code. Okay, there won’t be any code. I have to introduce some concepts first. I know, I know, but this is the stuff I was looking for when I started digging into Angular and I could not find it. Hopefully, armed with some context you will be more productive as we progress.

AngularJS for jQuery Developers – Part 2

In part one, we learned that AngularJS handles updating the DOM very differently than jQuery. jQuery< is a great tool for manipulation HTML documents. Angular does that manipulation for you by letting you “direct” how the HTML should change when a data model changes.

Angular is much different in jQuery in another respect, however.

When I first used jQuery I only needed to learn jQuery to use it. For me a website was simple. Put your JavaScript in the js folder, the CSS in the css folder, images in the img folder and go to work. That was it. Testing meant, “Does this look good in my browser?”

The AngularJS community has a very different approach to web application development. In short, they are extremely passionate about application development. That means they want you to learn many, many new things.

Here’s a short list of the tools that sprang out of the AngularJS box at me, BEFORE I found one shred of documentation or tutorials on how to handle forms:

What!?
All of these tools fall into ONE big idea. If you are going to make web applications, you need a process. It’s not enough to just throw some files in directories and start hacking. The AngularJS community wants you to know that if you plan to build a web application, then you need to understand how applications are built.

AngularJS for jQuery Developer Screen Shot - Coda2

Most of the web development tools I have used, whether it was Dreamweaver, or the excellent Coda 2, or Komodo IDE have virtually no concept of a build process. Or to put it more accurately, they do not require that you have a build process.

AngularJS for jQuery Developers- jQuery tools

Most of these tools help you manage and move files from your local machine to the server. The interaction of three technologies (css, html, and javascript) is daunting enough.  Add server side scripting with PHP and a MySQL database and in that context jQuery (and Javascript) is just one tiny part of a whole website creation chain.

But Angular wants to turn all that on its head. With Angular, Javascript is the be all, end all, of your application. We are not building websites. We are building applications. And as much as possible you should do it all with javascript.  Ah… The tyranny of the should…

So how does that effect you the jQuery developer? You have to understand…

Angular Loves Test.

AngularJS – because of the code can be so completely separate from the HTML document, it is now easier (possible even?) to create automated tests for your javascript. What’s more, if you are releasing code into the wild, you will likely have more than one kind of build. You may have a build for development – readable javascript and css files, lots of debugging information. But when you release it into the wild for users, you want your code fully optimized. This means minification (uglify), concatenation (stick files together to reduce server requests), and things that generally make your code hard to understand but improve performance.

You might also want to incorporate tools that help you keep your code clean and bug free like lint, or give added functionality like LESS and SASS, but at the expense of requiring you to compile files first before you include them in your html.

All this means you will start to get comfortable with some software you never knew you needed.

Node.JS

– The software you did not know you needed,

   – Did not ask for,

      – And don’t know how to use.

Node.JS is also a piece of software you can’t live without. If you want to build AngularJS applications, you will want to know about node.js.

 AngularJs for Developers - key tool Node.js

Here’s the big idea: JavaScript as a language has evolved and matured. For most of its life it was that funny little language that ran inside the browser to help you manipulate HTML. Then in the 2000’s, people started writing some applications with it – all still in the browser. Now people are writing serious applications, and they want it out of the browser. Developers want Javascript on par with Python, Ruby, and Perl. They want it in a stand alone context.

Enter Node.JS.

Node.JS takes javascript out of the browser and lets you run it as a true scripting language. What’s more, putting JavaScript in a stand alone environment opens up other interesting possibilities such as… batch scripting Unit Test.

But I thought this was a tutorial about AngularJS!?

It is.  However, we have to back up for a second and wrap our heads around the idea that part of the “angular” way is to test code as we write it. And that is exactly what we are going to do.

I am now going to show you how to write an AngularJS controller, and then test it.  In order to do that, I plan to share with you what I had to do. I stopped and learn each piece along the way.

The biggest challenge I found with AngularJs is that most angular developers assume you already know about Node.js and karma and Jasmine, all these other tools. The trouble is that I never needed any of these other tools when I used jQuery.

Now I need them.

So, let’s dive in… On to Part 3

AngularJS for jQuery Developers

Or… AngularJS for people with less than 80398091709870 transactions per second

A friend of mine mentioned that he was working on his application using AngularJS. AngularJS is Javascript framework created by Google. It sounded very interesting to me so I checked it out.

AngularJS for jQuery Developers

If you are like me, most of your coding has been in jQuery. Now am I a jQuery developer? Not professionally no, but I do use the framework to make my life easier. I own several websites. WordPress is my CMS of choice. I write plugins and small apps. I’m curious about writing more complex web applications. AngularJs intrigued me.

AngularJS is great – it’s the rest of the baggage that’s heart breaking. In a nutshell, Angular is a very clever active template technology that tightly binds a JavaScript data object to an HTML document. The Data object is the model. The document is the view. Model-View. And yup, you guessed it, there is also a controller. MVC.

How is Angular different from jQuery?

For me, jQuery is great for manipulation. jQuery makes it trivial for you to navigate and manipulate the DOM, or Document Object Model. jQuery has very poweful selectors which help you locate, and then modify elements on your web page. jQuery’s write less and do more philosophy probably resonates with you as well.

AngularJS, however is a different beast. It uses what are called directives. Directives are fundamentally different than selectors and manipulators. Basically, AngularJS binds data to an element in the DOM. With binding, changes in the data automagically produce changes in the DOM.

Why is data binding special?

Because it means your JavaScript code – the code you write – does not actually need to know anything about the structure of the document displayed to the user.

Let me Give you an Example

Let’s say, I wanted to capture the data entered into a text input field, and as the user types I want that text to update in the page heading. Yes, this is the classic web version of hello world.
Menubar_and_the_jQuery_Way_and_Angular_vs_jQuery_md_and_AngularJS_—_Superheroic_JavaScript_MVW_Framework

The jQuery Way

Now, you my choose to do this your own way, is how I’ve seen it done.

So if you look at our file we have two elements, an h1 header and a text input. The scripts are loaded after the document is loaded and parsed. Our Javascript is saved in a separate file.

The jQuery code that makes it work is:

Now.. What is the code doing?
First, we have our snippet to tell the JavaScript to wait until the document is ready…

Then, we use jQuery selectors to find the input and attach a keyup handler. When the user releases a key, we will take the results from the input and copy them over to the span.

Finally, as a bit of book keeping we initialize the Span to say something. This is probably unecessary but it is what it is.

Not overly complex, but… you can tell right away that our Javascript MUST know something about our document to make this work. Also note that I don’t even have a variable here that stores the value. It’s saved in the input field right?

Angular Way

With Angular, this exact same functionality is done using directives. In fact the demo renders the same in the browser.

The_Angular_Way-2

Okay, you are probably wondering where the JavaScript file is listed. It isn’t. There is no JavaScript file.

At this point you say, What!?

You probably noticed that the HTML file had a few extra attributes. If you are like me someone told you ages ago not to add extra attributes to HTML files because that’s BAD. You might get in trouble.

However, some clever fellow at Google decided to break the rules (good for him). These extra attributes are called directives, and they represent a completely new way of manipulating a web page. In fact, you don’t think of it as a web page at all. Here’s how you think of it.

With Angular, there is a model, in this case our simple variable named… well name. And we bind that model to the DOM. When the model changes, Angular updates the DOM automagically.

How cool is that?
But how did it do it? That’s what the Angular engine does. It uses the browser itself to parse the dom and when it comes across custom attributes it does it’s magic. In essence it extends the HTML language. Very slick indeed.

The key AngularJS directives used in this example are:

  • ng-app tells us that it is an angular application.
  • ng-init is a bit of a hack, it lets me initialize the model, there are better ways to do this (if you had not guessed).
  • ng-model binds our model to the input field.
  • {{ name }} This little bit of sweetness is an expression. Angular replaces double curly braces with the values of the expressions contained in them. This is very similar to the handlebarsjs Javascript Template language.

Angular does all the magic of keeping the document in sync with the data. This is what it means to declare instead of manipulate. We use these extra attributes inside the tags to declare how we want them to behave. Then we let the framework do all the nitty gritty work of making that happen.

It’s Extremely Cool

No doubt about it…

But…

But… Google does not write apps for 1 or 2 people. Or 100 or 200. or 1,000 or 2,000. They write applications for everyone. That’s right. The whole planet. One million people a minute search google looking for something. When google builds something they expect 7,000,000,000 people to use it. Probably all at the same time.

So?

So, Google wants their applications to be robust. They want to make applications, real bonafide, performance tuned applications. If you came into this like I did, looking for a nifty way to make adding some functionality to your web site easier you are in for a nasty shock….
Suddenly your nice simple development environment starts to look like a franken-monster. It reminds me of the line from Wreck-It Ralph when Sergeant Calhoun said, “Doomsday and Armageddon just had a baby and it is ugly!”

Please don’t misunderstand. I love open-source, but angularJS is more than a framework, it is a way of life and a school of thought all rolled into one. Still don’t know what I’m talking about? Then read on to Part 2 where we talk about… shudder… test.