Web
Development

Aditya
Narayan
CEO,
TurnToTech
mobile
technology
school
and
incubator
Past:
2
startups,
chief
architect
at
Marvel,
head
of
security
at
Starwood

Web
Development

1989,
CERN
The
web
server
Tim
Berners-­‐Lee
The
browser
HTTP
HTML
URL’s

Web
Development

How
does
a
web
applicaOon
work?

Web
Server
HTML Files, JPGs, business logic
1.
Type
info.cern.ch/TheProject.html
in
the
browser
2.
Browser
connects
to
server
named
info.cern.ch
3.
Browser
asks
for
a
resource
called
TheProject.html
5.
TheProject.html
is
sent
back
to
the
browser
4.
TheProject.html
may
have
links
to
other
websites
Tim Berners-Lee
1989

Domain
name
Server
Browser
Login
Database
Secure
Reliable
Graphics
designer
Should
work
on
mobile
Fast
Future
proof
Cost
AnalyOcs
Data
Developer
Features
Let’s
develop
a
web
app
APIs

But
where’s
the
recipe?

Business
InformaOon
Technology

Focus:
Business
Process

Admin
HR
Employee

Admin
AP
Vendors

Focus:
Business
Process
Outcome:
User
roles,
System
features
and
capabiliOes
Business

Business
InformaOon
Technology

Focus:
InformaOon
hierarchy,
NavigaOon

Focus:
InformaOon
hierarchy,
NavigaOon
Outcome:
Data
model,
Screen
layout
InformaOon

Business
InformaOon
Technology

Hardware
System
So[ware
ApplicaOon
So[ware

Hardware
System
So[ware
ApplicaOon
So[ware

Backend,
Frontend,
CSS,
HTML,
HTTP,
Framework,
Ruby
on
Rails,
JavaScript,
Database
server,
Web
Server
…

1.
User
types
www.webapp.com/index.html
in
the
browser
2.
Browser
connects
to
server
named
www.webapp.com
3.
Browser
asks
for
a
resource
called
index.html
5.
The
final
index.html
is
sent
back
to
the
browser
4.
index.html
may
need
some
data
from
a
database
server

Browser
(Thin
client)
Downloads
UI
code
from
server
and
runs
it
Web
Server
Contains
business
rules
and
generates
code
for
the
browser
Database
Server
Holds
the
data

Database
Server
Holds
the
data
Web
Server
Contains
business
rules
and
generates
code
for
the
browser
Browser
(Thin
client)
Downloads
UI
code
from
server
and
runs
it

Q:
How
are
different
browsers
running
on
different
operaOng
systems
able
to
use
the
same
web
app?
A:
Standards
such
as
HTML
and
HTTP

Code
that
runs
in
the
browser
is
front-­‐end
code
HTML,
CSS
and
JavaScript
QuesOon:
How
are
different
browsers
able
to
work
with
the
same
web
app?
Answer:
HTML,
CSS
and
JavaScript
happen
to
be
standards
accepted
worldwide
without
excepOon

HTML
will
let
you
write
UI
code
in
without
wriOng
‘real’
code
<bufon
type="bufon">Click
Me!</bufon>

CSS
adds
‘personality’
<bufon
type="bufon">
Click
Me!
</bufon>
<bufon
type="bufon”
style="
background-­‐color:orange">
Click
Me!
</bufon>

Alerts
Form
validaOon

JavaScript
HTML
and
CSS
can
make
your
pages
look
nice
But
they
don’t
make
the
pages
appear
responsive
JavaScript
was
created
as
a
simple
language
to
address
this
need

Technologies
derived
from
JavaScript
AJAX
jquery
Angular

And
code
that
doesn’t
run
in
the
browser
is
back-­‐end
code

Typical
backend
code
runs
on
the
Web
Server
and
the
Database
server

Typical
backend
code
runs
on
the
Web
Server
and
the
Database
server

RelaOonal
Database
Typically,
code
wrifen
in
SQL
runs
on
the
database
server
And
SQL
code
is
all
about
performing
CRUD
operaOons
on
Data
Create
Read
Update
Delete

Typical
backend
code
runs
on
the
Web
Server
and
the
Database
server

Web
Servers
There
are
several
compeOng
frameworks
for
running
code
on
Web
Servers
JEE,.NET,
Rails,
Django,
PHP

Web
Servers
There
are
several
compeOng
frameworks
for
running
code
on
Web
Servers
JEE,.NET,
Ruby
on
Rails,
Django,
PHP

What
is
a
framework?

Architecture
and
standards
of
the
web
constrain
the
kind
of
code
you
can
write.

The
general
pafern
receive
request
from
browser
connect
to
database
generate
page
send
page
to
browser

Imagine
a
web
app
with
1000
pages
receive
request
from
browser
connect
to
database
generate
page
send
page
to
browser

Frameworks
do
all
the
plumbing
You
write
code
specific
to
your
app

PlaKorm
Language
Supported
by
JEE
Java
Oracle
.NET
C#
Microso[
Ruby
on
Rails
Ruby
Community
Django
Python
Community
PHP
PHP
Community

Backend,
Frontend,
CSS,
HTML,
HTTP,
Framework,
Ruby
on
Rails,
JavaScript,
Database
server,
Web
Server
…

How
about
systems
talking
to
systems?

XML
JSON
HTTP

iOS
Android
Mobile
Plaqorms

Mobile
changes
the
noOon
of
front-­‐end
and
backend

Just
like
web,
mobile
plaqorms
have
their
frameworks

A
mobile
app
is
self
contained
server
only
provides
data,
not
code

XML
JSON
HTTP
ObjecOve-­‐C
Java
{Watching=7,
Buying=23,
Selling=5}

How
much
so[ware
do
we
need
to
build?
How
much
can
we
license?

Open
Source

Development

Agile
Waterfall

TDD

Deployment

Hosted
Public
Cloud
Private
Cloud

System
Management

A
server
must
be
always
on

New
Relic,
Pingdom

AnalyOcs

Google
AnalyOcs

Security
and
Privacy

Over
the
wire
At
rest
EncrypOon

SSL
Variety
of
standards

OAuth

New
Developments

Web
Sockets

HTML5

MongoDB
Neo4j
Cassandra

Web
Sockets
HTML5
NoSQL

The
web
relies
on
open
standards