SlideShare a Scribd company logo
Intro	to	Front	End
Development
Building	Web	Applications	for	the	Browser

http:/
/bit.ly/ben-fs-219
About	Me
@bendrucker
github/bendrucker
bendrucker.me
bvdrucker@gmail.com
Columbia	-	Class	of	TBD
Valet.io

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">'	+	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.
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		$scope.watch
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
vs.
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!

More Related Content

What's hot (20)

PDF
The State of Rust Web Frameworks
IanWagner10
 
PDF
Getting Started With WP REST API
Kishor Kumar
 
PDF
node-webkit : Make a magic from your a desktop app to desktop app!
욱진 양
 
PDF
Preprocessor Workflow with Grunt
Vlad Filippov
 
PDF
How to make your Webpack builds 10x faster
trueter
 
PDF
MEAN Stack - Google Developers Live 10/03/2013
Valeri Karpov
 
PDF
Alex Pshul: What We Learned by Testing Execution of 300K Messages/Min in a Se...
CodeValue
 
PDF
The MEAN Stack
Md. Ziaul Haq
 
PPTX
We come in peace hybrid development with web assembly - Maayan Hanin
CodeValue
 
PDF
NodeSummit - MEAN Stack
Valeri Karpov
 
PDF
Supercharge your app with Cloud Functions for Firebase
Bret McGowen - NYC Google Developer Advocate
 
PDF
Modern web application devlopment workflow
Hamdi Hmidi
 
PDF
Advanced front-end automation with npm scripts
k88hudson
 
PDF
Modern Static Site with GatsbyJS
Riza Fahmi
 
PPT
Dictionary Within the Cloud
gueste4978b94
 
PDF
WordCamp IL 2016 - WordPress Scale on AWS
Boaz Ziniman
 
PPTX
Super tools to boost productivity in React dev env!
Souvik Basu
 
PPTX
A faster web
Bakani Pilime
 
PPTX
Presentation on Gatsby to SF Static Web Tech Meetup
Kyle Mathews
 
PDF
Progressive Web Apps. What, why and how
Riza Fahmi
 
The State of Rust Web Frameworks
IanWagner10
 
Getting Started With WP REST API
Kishor Kumar
 
node-webkit : Make a magic from your a desktop app to desktop app!
욱진 양
 
Preprocessor Workflow with Grunt
Vlad Filippov
 
How to make your Webpack builds 10x faster
trueter
 
MEAN Stack - Google Developers Live 10/03/2013
Valeri Karpov
 
Alex Pshul: What We Learned by Testing Execution of 300K Messages/Min in a Se...
CodeValue
 
The MEAN Stack
Md. Ziaul Haq
 
We come in peace hybrid development with web assembly - Maayan Hanin
CodeValue
 
NodeSummit - MEAN Stack
Valeri Karpov
 
Supercharge your app with Cloud Functions for Firebase
Bret McGowen - NYC Google Developer Advocate
 
Modern web application devlopment workflow
Hamdi Hmidi
 
Advanced front-end automation with npm scripts
k88hudson
 
Modern Static Site with GatsbyJS
Riza Fahmi
 
Dictionary Within the Cloud
gueste4978b94
 
WordCamp IL 2016 - WordPress Scale on AWS
Boaz Ziniman
 
Super tools to boost productivity in React dev env!
Souvik Basu
 
A faster web
Bakani Pilime
 
Presentation on Gatsby to SF Static Web Tech Meetup
Kyle Mathews
 
Progressive Web Apps. What, why and how
Riza Fahmi
 

Viewers also liked (16)

PDF
Efficient Data Storage for Analytics with Parquet 2.0 - Hadoop Summit 2014
Julien Le Dem
 
PPTX
Node.js Workshop - Sela SDP 2015
Nir Noy
 
PDF
Creating MVC Application with backbone js
Mindfire Solutions
 
PDF
Burgas Conf 21.06.2014 - Single page application Angularjs and Nodejs
Dimitar Danailov
 
PPTX
Node js introduction
Joseph de Castelnau
 
PDF
Parquet Strata/Hadoop World, New York 2013
Julien Le Dem
 
PPTX
Introduction to Node js
Akshay Mathur
 
PDF
Best node js course
bestonlinecoursescoupon
 
PDF
AngularJS application architecture
Gabriele Falace
 
PDF
Node.js 101
FITC
 
PDF
AngularJS - What is it & Why is it awesome ? (with demos)
Gary Arora
 
PDF
AngularJS Basics with Example
Sergey Bolshchikov
 
PPTX
AngularJS Architecture
Eyal Vardi
 
PDF
Nodejs Explained with Examples
Gabriele Lana
 
PDF
API Driven Application - AngulatJS, NodeJS and MongoDB | JCertif Tunisia 2015
Hamdi Hmidi
 
PDF
Bhasma - Nano Medicine (Ancient India - Ayurveda)
Piyush Kapil
 
Efficient Data Storage for Analytics with Parquet 2.0 - Hadoop Summit 2014
Julien Le Dem
 
Node.js Workshop - Sela SDP 2015
Nir Noy
 
Creating MVC Application with backbone js
Mindfire Solutions
 
Burgas Conf 21.06.2014 - Single page application Angularjs and Nodejs
Dimitar Danailov
 
Node js introduction
Joseph de Castelnau
 
Parquet Strata/Hadoop World, New York 2013
Julien Le Dem
 
Introduction to Node js
Akshay Mathur
 
Best node js course
bestonlinecoursescoupon
 
AngularJS application architecture
Gabriele Falace
 
Node.js 101
FITC
 
AngularJS - What is it & Why is it awesome ? (with demos)
Gary Arora
 
AngularJS Basics with Example
Sergey Bolshchikov
 
AngularJS Architecture
Eyal Vardi
 
Nodejs Explained with Examples
Gabriele Lana
 
API Driven Application - AngulatJS, NodeJS and MongoDB | JCertif Tunisia 2015
Hamdi Hmidi
 
Bhasma - Nano Medicine (Ancient India - Ayurveda)
Piyush Kapil
 
Ad

Similar to Intro to Front End Development with Angular + Firebase (20)

PPTX
Real World Azure - Dev
Clint Edmonson
 
PPTX
JavaScript front end performance optimizations
Chris Love
 
PPT
Node js
Chirag Parmar
 
PDF
Frontend Fiesta
Himanshu824124
 
PDF
MongoDB World 2016: Get MEAN and Lean with MongoDB and Kubernetes
MongoDB
 
PPT
(In)Security Implication in the JS Universe
Stefano Di Paola
 
PDF
Intro to mobile web application development
zonathen
 
KEY
Thin Server Architecture
Mitch Pirtle
 
PDF
Building a Global-Scale Multi-Tenant Cloud Platform on AWS and Docker: Lesson...
Felix Gessert
 
PPTX
How to build CDN for your website
Martin Kulov
 
PDF
Azure Functions - Get rid of your servers, use functions!
QAware GmbH
 
PDF
Comet from JavaOne 2008
Joe Walker
 
PDF
Powerful tools for building web solutions
Andrea Tino
 
PDF
Node azure
Emanuele DelBono
 
PPTX
Intro to node and mongodb 1
Mohammad Qureshi
 
PDF
C# Client to Cloud
Stuart Lodge
 
PDF
The Enterprise Dilemma: Native vs. Web
Motorola Mobility - MOTODEV
 
PDF
Petar Nikolow - OA Conf 2021
Internet marketing agency Netpeak
 
PPTX
Debugging with Fiddler
Ido Flatow
 
Real World Azure - Dev
Clint Edmonson
 
JavaScript front end performance optimizations
Chris Love
 
Node js
Chirag Parmar
 
Frontend Fiesta
Himanshu824124
 
MongoDB World 2016: Get MEAN and Lean with MongoDB and Kubernetes
MongoDB
 
(In)Security Implication in the JS Universe
Stefano Di Paola
 
Intro to mobile web application development
zonathen
 
Thin Server Architecture
Mitch Pirtle
 
Building a Global-Scale Multi-Tenant Cloud Platform on AWS and Docker: Lesson...
Felix Gessert
 
How to build CDN for your website
Martin Kulov
 
Azure Functions - Get rid of your servers, use functions!
QAware GmbH
 
Comet from JavaOne 2008
Joe Walker
 
Powerful tools for building web solutions
Andrea Tino
 
Node azure
Emanuele DelBono
 
Intro to node and mongodb 1
Mohammad Qureshi
 
C# Client to Cloud
Stuart Lodge
 
The Enterprise Dilemma: Native vs. Web
Motorola Mobility - MOTODEV
 
Petar Nikolow - OA Conf 2021
Internet marketing agency Netpeak
 
Debugging with Fiddler
Ido Flatow
 
Ad

Recently uploaded (20)

PDF
SFWelly Summer 25 Release Highlights July 2025
Anna Loughnan Colquhoun
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PPTX
✨Unleashing Collaboration: Salesforce Channels & Community Power in Patna!✨
SanjeetMishra29
 
PDF
July Patch Tuesday
Ivanti
 
PDF
Python basic programing language for automation
DanialHabibi2
 
PPTX
MSP360 Backup Scheduling and Retention Best Practices.pptx
MSP360
 
PDF
Windsurf Meetup Ottawa 2025-07-12 - Planning Mode at Reliza.pdf
Pavel Shukhman
 
PDF
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
PPTX
UiPath Academic Alliance Educator Panels: Session 2 - Business Analyst Content
DianaGray10
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PPTX
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
PPTX
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
PDF
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
PDF
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
PDF
Presentation - Vibe Coding The Future of Tech
yanuarsinggih1
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
SFWelly Summer 25 Release Highlights July 2025
Anna Loughnan Colquhoun
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
✨Unleashing Collaboration: Salesforce Channels & Community Power in Patna!✨
SanjeetMishra29
 
July Patch Tuesday
Ivanti
 
Python basic programing language for automation
DanialHabibi2
 
MSP360 Backup Scheduling and Retention Best Practices.pptx
MSP360
 
Windsurf Meetup Ottawa 2025-07-12 - Planning Mode at Reliza.pdf
Pavel Shukhman
 
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
UiPath Academic Alliance Educator Panels: Session 2 - Business Analyst Content
DianaGray10
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
Presentation - Vibe Coding The Future of Tech
yanuarsinggih1
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 

Intro to Front End Development with Angular + Firebase