IntrotoFrontEndDevelopment

BuildingWebApplicationsfortheBrowser

http://bit.ly/ben-fs-219

AboutMe

@bendrucker

github/bendrucker

bendrucker.me

bvdrucker@gmail.com

Columbia-ClassofTBD

Valet.io

Fundraisingtechnologythatdoesn'tsuck

RealtimeDBaaS

NYCEvangelist

ORMforNode.js

Co-Lead

TheJavaScriptEcosytstem

Reuseyourservercodeinthebrowser

nodeJS===webScale

Solveworldhunger!

SoWhatHappened?

Servervs.Browser

Server BrowserUntrustedenvironment

Optimizefor:filesize

Optimizefor:painttime

Services:

DOM

Cookies

window

RemoteAPIs

Consistentenvironment

Optimizefor:Concurrency

Optimizefor:Responsetime

Services:

Databases

Caches

HTTPwebservices

jQueryisthePHPoftheWeb

varuserTemplate=function(user){return'<ul><liclass="user-first-name">'+user.name.first+'</li><liclass="user-last-name">'+user.name.last+'</li>';

$.getJSON('/api/user/1',function(data){vartemplate=userTemplate(data);$('ul.users').append(template);});

KeepingtheDOMinsyncwithourmodelsishard.jQuerydoesn'thelp.

WhatCanaFrontEndFrameworkDo?

Templating

Eventmanagement

Routing

Dependencymanagement

Twowaydatabinding

FrameworkOverload!

WhyDoWeNeed2WayBinding?

Forms

BAD!

<form><inputid="first-name"/><inputid="last-name"/><inputid="username"/></form>varuser={firstName:$('#first-name').val(),lastName:$('#last-name').val(),username:$('#username').val()};

Forms

GOOD!

<form><inputng-model="user.firstName"/><inputng-model="user.lastName"/><inputng-model="user.username"/></form>varuser=$scope.user;

Getters/Settersvs.DirtyChecking

DirtyCheckingExplained

POJOModels–$scope

Watchers–$scope.$watch

Digestcycles–$scope.$digest

Integrateexternalcode–$scope.$apply

FurtherReading:BuildYourOwnAngular

AdvantagesofGetters/Setters

Nodigestcycles

No$scope.digest

No$scope.watch

No$scope.$apply

UAforfree( )

Computedproperties

UniformAccessPrinciple

NativeUAP(ES5)Object.defineProperty

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

Angular/Ember

vs.

EverythingElse

vs.

Let'sWriteSomeCode!

RealTimeWeb:Challenges

Eventhandlingismuchharderthanrequest-reply

Multiplesimultaneouswritescreateconflicts/overwrites

Example:

Heartbeating

Scopedsubscriptions

Networklatency

[].push

FirebasetotheRescue!

RESTvs.EventDrivenData

NomoreGET,POST,PUT,DELETE

Endpoints,justlikeREST(references)

Usedataeventstokeepmodelsinsync:

value

child_added

child_changed

child_removed

RESTStyle

EventStyle

$.getJSON('/users',function(users){$.each(users,appendUser;});

usersRef.on('child_added',appendUser);

:Angular+FirebaseAngularFire

$firebase

Auto-registerslistenerstoupdatethemodelwithremotechanges

Addsmethodsforsavinglocalchangestoremote

Optional:setup$watchtoautosynclocalchanges

MoreCode!