Post on 03-Dec-2014
description
transcript
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!