AngularJS – Re-imagining the browser – Complexity kills

View Github Repository Open presentation in a new window

skhome

See all presentation from skhome

AngularJS – Re-imagining the browser – Complexity kills

0 0

angular-slides

presentation slides

On Github skhome / angular-slides

AngularJS

Re-imagining the browser

WorldWideWeb (Berners-Lee)

Netscape Navigator

Google Maps

IDE

Current State

Users:-)

Developers:-(

Complexity kills

Hello World

static web page

<p>Hello World!</p>

dynamic web application

var isIE = document.attachEvent;
var addListener = isIE
    ? function (e, t, fn) { e.attachEvent('on' + t, fn); }
    : function (e, t, fn) { e.addEventListener(t, fn, false); };

addListener(window, 'load', function () {
    var greeting = document.getElementById('greeting');
    if (isIE) {
        greeting.innerText = 'Hello World!';
    } else {
        greeting.textContent = 'Hello World!';
    }
});

Tricking the Browser

Remember rounded corners before border-radius ?

But ...

Imperative :-(

Declarative FTW!

<p>Hello World!</p>
<p>{{greeting}}}</p>

Data Binding

Model 
{
  first: "Jean-Luc",
  last: "Picard",
  imgSrc: ...
}
Views
Jean-Luc Picard
First: Last:

Spreadsheet-like updates

Data Binding

  Impl. When AngularJS JavaScript Now Model Driven Views Native Future

HTML can be very verbose

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#tab1">Section 1</a>
    </li>
    <li>
      <a href="#tab2">Section 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>
Tricking the Browser
<tabs>
  <pane title="Section 1">
    I'm in Section 1
  </pane>
  <pane title="Section 2">
    Howdy, I'm in Section 2
  </pane>
</tabs>
Reusable Component
UNLEASHYOURIMAGINATION <google-map> <tabs> <tweet> <message> <avatar> <color-picker>

Reusable Components

  Impl. When AngularJS DOM + JavaScript Now Web Components Native Near Future

Enough talk, lets see some code!