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

1. Intro to Front End
Development
Building Web Applications for the Browser
http:/
/bit.ly/ben-fs-219

2. About Me
@bendrucker
github/bendrucker
bendrucker.me
bvdrucker@gmail.com

3. Columbia - Class of TBD

4. Valet.io
Fundraising technology that doesn't suck

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

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

7. So What Happened?

8. 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

9. jQuery is the PHP of the Web
var userTemplate = function (user) {
return '<ul><li class="user-first-name">' + user.name.first + '</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.

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

11. Framework Overload!

12. Why Do We Need 2 Way Binding?

13. 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()
};

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

15. Getters/Setters vs. Dirty Checking

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

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

18. 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];
}
});

19. Angular/Ember
vs.
Everything Else

20. vs.

21. Let's Write Some Code!

22. 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

23. Firebase to the Rescue!

24. 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

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

26. 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

27. More Code!