Intro to Front End Development with Angular + Firebase

40 %
60 %
Information about Intro to Front End Development with Angular + Firebase

Published on February 19, 2014

Author: bendrucker



Intro to front end development and tooling with Angular + Firebase. Originally presented at FullStack Academy in NYC on 2/19/14.

Intro to Front End Development Building Web Applications for the Browser http:/ /

About Me @bendrucker github/bendrucker

Columbia - Class of TBD Fundraising technology that doesn't suck

Realtime DBaaS NYC Evangelist ORM for Node.js Co-Lead

The JavaScript Ecosytstem Reuse your server code in the browser nodeJS === webScale Solve world hunger!

So What Happened?

Server vs. Browser Server Browser Consistent environment Untrusted environment Optimize for: Concurrency Optimize for: file size Optimize for: Response time Optimize for: paint time Services: Services: Databases DOM Caches Cookies HTTP web services window Remote APIs

jQuery is the PHP of the Web var userTemplate = function (user) { return '<ul><li class="user-first-name">' + + '</li><li class="use $.getJSON('/api/user/1', function (data) { var template = userTemplate(data); $('ul.users').append(template); }); Keeping the DOM in sync with our models is hard. jQuery doesn't help.

What Can a Front End Framework Do? Templating Event management Routing Dependency management Two way data binding

Framework Overload!

Why Do We Need 2 Way Binding?

Forms BAD! <form> <input id="first-name" /> <input id="last-name" /> <input id="username" /> </form> var user = { firstName: $('#first-name').val(), lastName: $('#last-name').val(), username: $('#username').val() };

Forms GOOD! <form> <input ng-model="user.firstName" /> <input ng-model="user.lastName" /> <input ng-model="user.username" /> </form> var user = $scope.user;

Getters/Setters vs. Dirty Checking

Dirty Checking Explained POJO Models – $scope Watchers – $scope.$watch Digest cycles – $scope.$digest Integrate external code – $scope.$apply Further Reading: Build Your Own Angular

Advantages of Getters/Setters No digest cycles No $scope.digest No $ No $scope.$apply UA for free (Uniform Access Principle) Computed properties

Native UAP Object.defineProperty (ES5) Object.defineProperty(User.prototype, 'fullName', { get: function () { return this.firstName + ' ' + this.lastName }, set: function (fullName) { var nameParts = fullName.split(' '); this.firstName = nameParts[0]; this.lastName = nameParts[1]; } });

Angular/Ember vs. Everything Else


Let's Write Some Code!

Real Time Web: Challenges Event handling is much harder than request-reply Multiple simultaneous writes create conflicts/overwrites Example: [].push Heartbeating Scoped subscriptions Network latency

Firebase to the Rescue!

REST vs. Event Driven Data No more GET, POST, PUT, DELETE Endpoints, just like REST (references) Use data events to keep models in sync: value child_added child_changed child_removed

REST Style $.getJSON('/users', function (users) { $.each(users, appendUser; }); Event Style usersRef.on('child_added', appendUser);

AngularFire: Angular + Firebase $firebase Auto-registers listeners to update the model with remote changes Adds methods for saving local changes to remote Optional: set up $watch to auto sync local changes

More Code!

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Intro to Front End Development with Angular + Firebase ...

Intro to front end development and tooling with Angular + Firebase. Originally presented at FullStack Academy in NYC on 2/19/14.
Read more

AngularJS — Superheroic JavaScript MVW Framework

AngularJS is what HTML ... most suited to your application development. It is ... library to wire up a Firebase backend to a simple Angular ...
Read more

Angular Summit - Schedule - Angular Summit

Intro to Angular 2 John ... Firebase can replace ... I'll share patterns to help you manage the complexity of front-end development and back-end ...
Read more

angular-firebase |

#angular-firebase. 313 01:06:02 ... End to end single page ... #nodejs tutorial #node.js #node #Startup #Web Development #Dev #Coding #CSS #Landing Page # ...
Read more

AngularJS - YouTube

Angular an application development platform ... Realtime Web Apps with AngularJS and Firebase ... AngularJS Intro + Dependency Injection (AngularJS ...
Read more

Session Details - HighEdWeb 2015: The Annual Conference ...

Light up the Web! An Intro to Building Apps with Firebase and Angular. DPA8 Development, Programming and Architecture. Location: 102D, Wisconsin Center
Read more

Angular 2 Fundamentals for Web Developers Course - Eduonix

Angular 2 Fundamentals for Web Developers ... thing in front-end frameworks. Angular 2 stands miles ... increased support for mobile development.
Read more

Intro to Firebase/AngularFire and Evolution of Android ...

... BKK WEB presents Intro to Firebase/AngularFire and Evolution of Android Development - Tuesday, November 8, 2016 at Launchpad Co., ...
Read more