Angular.js

for the skeptics

Richard Bateman
Assisted by:







Rob Porter

Ben Loveridge

Michael Stufflebeam

Jarom Loveridge

Who am I?

  • Amateur Radio operator, KD7BBC
  • Most commonly used nick is taxilian
  • twitter handle is @nailixat
  • Primary github account is https://github.com/nailixat
  • Creator of the FireBreath framework for browser plugins
  • Creator of HamStudy (https://hamstudy.org)

  • Lead Architect at GradeCam

  • Confirmed skeptic on almost any new technology or fad

Presentation goals

Slow presentations bore me -- we're going to be moving right along.
  • If you have a question, speak up! If you don't ask questions and don't understand the presentation, it's your fault and not mine. 

 
We can do this one of two ways: 
  1. I can talk for 50 minutes about Angular and show you code samples and whatever comes to mind.
  2. You can tell me what you are concerned about, and we can have a discussion for 50 minutes about the validity of the concerns and ways to mitigate them.

I would prefer option #2, but the choice is yours!

This talk is not a tutorial


My real goal today is to show you the capabilities of Angular.js.  If you decide you want to learn it, there are lots of tutorials, books, screencasts, and other resources for learning how to use Angular.


This talk is about learning what is possible, what to watch out for, and why you might (or might not!) want to use Angular for your next project.

What is Angular?

  • Open source framework, maintained primarily by Google
  • Frequently used for single-page applications (SPAs)
  • Particular focus on fast development and easy testability
  • Core philosophies:
    • Declarative programming should be used for UI and components
    • Imperative programming should be used for business logic
  • Adapts and extends traditional HTML to allow:
    • Automatic data binding
    • Custom reusable components
    • Views with no javascript code, only "custom" HTML
  • Particular emphasis on separation of concerns
    • A place for everything, everything in its place
    • This is part of what makes it good for testability

What are you skeptical about?

This is Angular.js for the skeptics -- by definition, if you are here, you are skeptics. What are you skeptical about?

  • Isn't there a lot of boilerplate compared to X? Can I avoid it?
  • What if Google drops it? Community support, etc.
  • Difficulty of using Angular with non-REST back-ends (SOAP, etc.)
  • I'm skeptical about using Angular for multi-page SPAs.
  • Angular wraps jQuery, jQuery wraps JS... is it clunky? Too abstracted?
  • Is it worth transitioning to Angular from an existing, working stack?
  • Component availability (jQuery UI, etc.)
  • Reusability of existing components, compatibility with others?
  • Am I better off writing my app in vanilla JS (scalability, performance)?
    • Responsiveness of dirty checking, etc.

What I was skeptical about

  • It's magic
    • magic always comes at a cost
    • magic tends to be opaque and difficult to understand
  • Concerns about flexibility and extensibility
    • Data binding? And what happens when my data doesn't look like you think it should? (and it never does...)
  • Formidable learning curve
    • This sure ain't no backbone.js ...
  • Concerns about interoperability with existing libraries
    • jqlite? Srsly?
  • I am a control freak.
    • I need to know what is happening, where it is happening, and why it is happening at all times.
  • It feels like a Fad.
    • Angular is so over-hyped that it is hard to take it seriously

Problems we've run into


  • There has been a definite learning curve 
  • Many of the tutorials are geared towards use, not understanding
  • Data-intensive pages may have performance issues
    • Primarily this is caused by not understanding mechanics
  • No built-in support for lazy-loading
  • Initial implementation taking longer than expected
    • This is primarily because we keep trying to do things "the right way" and changing our minds -- this may be a process issue.
  • UI library support -- specifically Backbone and Foundation
    • jQuery plugins are a bit awkward, tend to be overly complex in angular.  You can still use them, but it's less clean.
    • Found Angular-Strap.  Good bootstrap UI lib for Angular, but we have needed to submit some fixes / improvements.

Major wins

  • Goodbye boilerplate!
    • Angular does a *fantastic* job of minimizing repetitive boilerplate
  • Directives
    • The ultimate in reusable components and simple templating
  • Powerful dependency injection
    • Testing is a first class citizen
    • Relatively easy to create reusable chunks of code
  • Goodbye boilerplate!
    • Seriously, we have *way* less code than we used to, and what we have is pretty much all useful
  • Very fast prototyping for functionality
  • Excellent separation of concerns
    • MVW - Model, View, Whatever -- very easy to keep display logic and business logic seperate

Let's build something



Want to follow along?




(you'll need node.js and npm installed for this)

Create a basic app


We're lazy, so we're going to start with a seed.

git clone https://github.com/angular/angular-seed.git new_project
cd new_project
npm install

npm start

This will create us a "typical" Angular.js project and start the web server for it.

Obligatory "let's add some data" slide


open app/js/controllers.js
angular.module('myApp.controllers', [])
    .controller('MyCtrl1', ['$scope', function($scope) {
        $scope.data = { text: 'this is text' };
    }])

open app/partials/partial1.html
<p>This is the partial for view 1.  Our data is "{{ data.text }}"</p>
    
<p>While we're at it, this is bound to the data too: <input type="text" ng-model="data.text"></p>
npm start then navigate to http://localhost:8000/app/#/view1

Notice that when you change the text in the input, the other data binding changes too.  This is because each key event triggers a "digest cycle" which propagates all changes as needed.

Creating a bubble answer directive

Let's say we want to create an HTML version of this:

Our company, GradeCam, uses forms like this all the time.
(okay, usually they are a bit more complex)

Copy in the web fonts


You can download the files from:

Extract it in the app/css/ directory.
You can find them at:

Add to app/css/app.css
@font-face {
    font-family: 'GCBubbles';
    src: url('fonts/GradeCamBubbles-Bubbles.eot');
    src: url('fonts/GradeCamBubbles-Bubbles.eot?#iefix') format('embedded-opentype'), url('fonts/GradeCamBubbles-Bubbles.woff') format('woff'), url('fonts/GradeCamBubbles-Bubbles.ttf') format('truetype'), url('fonts/GradeCamBubbles-Bubbles.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Coding the directive

Add to app/js/directives.js
angular.module('myApp.directives', []).
    directive('gcBubbleRow', [function() {
        return {
            restrict: 'EA', // This directive is an element or attribute
            scope: {
                choices: '=' // Map in the choices attribute on the directive element
            },
            templateUrl: 'partials/gcBubbleRow.html', // Use this template
            link: function(scope, element, attrs) {
                // We'll use this later.
            }
        };
    }]). // Leave the trailing . for the next directive
Create to app/partials/gcBubbleRow.html
<div class="bubbleRow">
    <b class="bubble" ng-repeat="bubble in choices">{{ bubble }}</b>
</div>

Add it to a view

Open app/partials/partial1.html
<p>Here is our bubble row directive:</p>

<gc-bubble-row choices="'ABCDE'"></gc-bubble-row>

Make sure you npm start, then navigate to npm start then navigate to http://localhost:8000/app/#/view1

Well, it's cool that we have letters, but let's make them bubbles.

Add to app/css/app.css
.bubbleRow { font-family: 'GCBubbles'; }

Now take a look! It looks like a row of bubbles.

Whats the big deal?

We could have done that with a simple <div> tag!

Directives are reusable; this one may not do much, but with just a bit of expansion it becomes pretty powerful!

For time, we won't code it all out here, but go check out:

https://github.com/taxilian-angular/project2

Discuss the changes in the master branch as well as the optimized branch.

Case study


A simple Reversi game written in Angular




https://github.com/taxilian-angular/revello

Play it at:

https://revello.firebaseapp.com/

Angular.js

By Richard Bateman

Angular.js

Slides / notes for my Angular.js for the Skeptics talk at 2014 OpenWest

  • 4,079