Presentation Re-imagining the browser with AngularJS

What if you could write modern web apps with dramatically fewer lines of code and improve its readability and expressiveness at the same time? No, there’s no new language to learn. Just familiar old HTML and JavaScript. As a matter of fact, there’s some stuff for you to un-learn. AngularJS is a client-side JavaScript web development framework where we believe we’ve done something special. We’ve approached the problem let’s say differently from the way any other JavaScript tool has before. Instead of asking what kind of functions we could provide to make writing apps smoother, we asked “what if the browser worked differently in a way that eliminates code and gives structure to apps?” This talk will take the audience on a tour of what the web platform of the future will look like and how the AngularJS framework can provide many of the powerful capabilities to existing browsers and bridge the path to web components, model driven views and other platform features that are c...

Speakers


PDF: slides.pdf

Slides

Re-imagining the browser with

Re-imagining the browser with Igor Minar & Misko Hevery Google, Inc. +AngularJS / @AngularJS

Browser?

Browser?

Browser (1994)

Browser (1994)

Browser (2012)

Browser (2012)

Browser (2012)

Browser (2012)

Current State

Current State

Current State

Current State User :-)

Current State

Current State User :-) Developer :-(

Current State

Current State User :-) Developer :-( Complexity Kills!

Hello World

Hello World

Hello World

Hello World Static page Dynamic Web App

Hello World

Hello World Static page Dynamic Web App

Hello World

Hello World Static page Dynamic Web App

img credit: Giulia Bartra http://goo.gl/j7ZhD

img credit: Giulia Bartra http://goo.gl/j7ZhD

Tricking the Browser

Tricking the Browser img credit: Giulia Bartra http://goo.gl/j7ZhD

Tricking the Browser

Tricking the Browser Remember rounded corners before border-radius? img credit: Giulia Bartra http://goo.gl/j7ZhD

Tricking the Browser

Tricking the Browser Remember rounded corners before border-radius? img credit: Giulia Bartra http://goo.gl/j7ZhD

But...

But...

But...

But... = Imperative :-(

But...

But... = Imperative :-( Declarative FTW!

But...

But... = Imperative :-( Declarative FTW!

But...

But... = Imperative :-( Declarative FTW!

Data Binding...

Data Binding...

Data Binding...

Data Binding... View(s) Model { first: "Tony", last: "Stark", imgSrc: ... } Tony Stark

Data Binding...

Data Binding... View(s) Model { first: "Tony", last: "Stark", imgSrc: ... } Tony Stark Spreadsheet-like updates

Advanced Templating

Advanced Templating + =

Advanced Templating

Advanced Templating [{first: "Tony", last: "Stark", imgSrc: ... }, {first: "Clark", last: "Kent", imgSrc: ... }, {fist: "Bruce", last: "Wayne", imgSrc: ... }] + =

Advanced Templating

Advanced Templating [{first: "Tony", last: "Stark", imgSrc: ... }, {first: "Clark", last: "Kent", imgSrc: ... }, {fist: "Bruce", last: "Wayne", imgSrc: ... }] + {{imgSrc}} {{first}} {{last}} =

Advanced Templating

Advanced Templating [{first: "Tony", last: "Stark", imgSrc: ... }, {first: "Clark", last: "Kent", imgSrc: ... }, {fist: "Bruce", last: "Wayne", imgSrc: ... }] Tony Stark + {{imgSrc}} {{first}} {{last}} = Clark Kent Bruce Wayne

Data Binding

Data Binding Impl. When?

Data Binding

Data Binding Impl. AngularJS JavaScript When? Now

Data Binding

Data Binding Impl. AngularJS Model Driven Views JavaScript Native When? Now Future

But HTML can be verbose!

But HTML can be verbose!

But HTML can be verbose!

But HTML can be verbose!

But HTML can be verbose!

But HTML can be verbose!

But HTML can be verbose!

But HTML can be verbose! Tr th ick e in B g ro w se r

But HTML can be verbose!

But HTML can be verbose! Tr th ick e in B g ro w se r

But HTML can be verbose!

But HTML can be verbose! Re Co usa mp ble on en ts Tr th ick e in B g ro w se r

Reusable Components

Reusable Components Impl. AngularJS DOM+JS When? Now

Reusable Components

Reusable Components Impl. AngularJS Web Components DOM+JS Native When? Now Near Future

http://angularjs.org/

http://angularjs.org/

Demo