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.

Sometimes it takes a day or two

One of the things I have come to learn about technology is that you may not get it right away.  I think that makes Apple products pretty magical as you tend to get them instantly.  This makes them “intuitive”.  However, for other things it takes a few passes.

Yesterday NextGen Gallery  was hopeless.  Today?  I figured it out and it’s pretty nice.  Sometimes you have to give it a day or two.

Turkey Cooking Time Start Calculator

Okay, I realize this may be late for this year (given that Thanksgiving was last week), but I have noticed that useful websites can last for years and I know I will need this next yar. So, I thought I would put this up.  This little web-app/form helps you calculate when to start your Turkey Bird!  It’s a Turkey Cooking Time Calculator.

Turkey Calc

You know the Turkey size! You know when you want to eat! But when do you START to cook it? How do you substract 280 minutes from 4:30 PM!? It is enough to give you a headache!

The solution? Turkey Calc! This little calc will tell you when to start your Turkey if you know how long it will take to cook. The cook types are averages, or you can simply enter your estimated cook time in minutes.

mpp = minutes per pound



 Oven (20 mpp)
 BBQ Grill (15 mpp)
 Deep Fry (3 mpp)
 Infra-Red Frier (10 mpp)

lbs
(in min)
Please enter dinner time as h:mm p


Start Prep at: 10:45AM

Start Cooking at: 11:00AM

Start Carving at: 3:15PM



— Scott

Cooking

Every year I cook at least 2 birds, one on the Grill (BBQ Style) and one fried. Since the cooking times vary with the cooking methods I wrote this tool to make it easier to know when to start each bird.

Turkey cooking time

This year I tried the Char-Broil Infra-red turkey frier and I have to say everyone loved it. The Turkey was incredibly juicy, but it did cook much faster than I expected. At the same time I put a nice big 20 pounder on the BBQ (shown in the picture). That one cooked quite a bit faster also. So I still have some work to do. The math is not precise.

Turkey Cooking Times

The Infra-red cooked a fully thawed 15 pound bird in just about 2 hours. I would suggest you use a real meat thermometer and not the plastic pop up, as the plastic pop up on mine stuck causing me to leave mine in 15 minutes longer than I wanted. The BBQ cooked in just 3 hours – finishing a whole hour ahead of schedule. Again that was something I did not expect.

So the key is to play it safe and check your Turkey often while it is cooking. Turkey cooking time is just as much an art as a science. The Turkey Cooking Time Calculator is more of a guide than a hard rule.

On the US Gov Site for food safety they point out that Turkey cooking is not linear. But once you cross the 12 pound threshold (which is typical for big holidays) they are more uniform. I don’t think I have ever even seen a 6 pound turkey.

Useful Links

About.com Turkey Roasting Times Chart

Butterball Calculators

Government Roasting Chart