AngularJS


A Brief Introduction

Gias Kay Lee

@gsklee / gsklee.im

jQuery.


Once a best friend forever


...until the era of webapps

It has grown from


a handy DOM manipulation tool...


to an all-in-one juggernaut


without much forethoughts

jQuery + Webapp = Headaches


  • Structureless spaghetti code

  • Selectors creating tight coupling

  • Not enough high level abstractions

Then, there is

Backbone.js



It brings structures to our codes

...but still uses jQuery to handle the Views

Issues Solved by Backbone


  • Spaghetti code



Issues NOT Solved

by Backbone


  • Selectors creating tight coupling

What about

High Level Abstractions?

Well, since Backbone is unopinionated...



It lacks the necessary tools

to easily manage any webapp

above a certain threshold in complexity

From personal experiences...



  • Single view? Cool.

  • Multiple sibling views? Cool.

  • Multiple nested views? OMG.
    (Many real-world webapps belong to this category)

In the end,

Backbone asks you to write

A Lot More Codes

to get what you want

AngularJS


Here to save your day

What the * is

AngularJS

and why should I use it, exactly?

It's

FAST

(Once you two become good buddies)

It brings

QUALITY

(Both in terms of code structure and robustness)

It's

FREE

(w00t!)

AngularJS



puts a heavy emphasis on

Separation of Concerns

HTML

STRUCTURE

JS

BEHAVIOR

CSS

PRESENTATION

The Eval JavaScript Empire

HTML

INTERFACE

JS

LOGIC

CSS

PRESENTATION

The New Angular Republic

AngularJS

returns things to where they belong

in their natural forms


  • HTML? Build UI Declaratively!

  • CSS? Animations!

  • JavaScript? Use it the plain old way!

Intriguingly,

the uprising of AngularJS in 2013

is coincident with...


  • The Extensible Web Movement

  • Increasing Visibility in Web Components

  • The Release of Polymer

It's believed that,

this company is responsible for everything

But this time

they seem to be getting things done right

Questions?