TurnToTech presentation on web development

1. Web
Development

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

3. Web
Development

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

5. Web
Development

6. How
does
a
web
applicaOon
work?

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

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

9. But
where’s
the
recipe?

10. Business
InformaOon
Technology

11. Focus:
Business
Process

13. Admin
HR
Employee

14. Admin
AP
Vendors

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

16. Business
InformaOon
Technology

17. Focus:
InformaOon
hierarchy,
NavigaOon

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

21. Business
InformaOon
Technology

22. Hardware
System
So[ware
ApplicaOon
So[ware

23. Hardware
System
So[ware
ApplicaOon
So[ware

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

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

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

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

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

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

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

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

33. Alerts
Form
validaOon

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

35. Technologies
derived
from
JavaScript
AJAX
jquery
Angular

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

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

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

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

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

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

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

45. What
is
a
framework?

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

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

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

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

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

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

52. How
about
systems
talking
to
systems?

54. XML
JSON
HTTP

55. iOS
Android
Mobile
Plaqorms

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

57. Just
like
web,
mobile
plaqorms
have
their
frameworks

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

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

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

61. Open
Source

62. Development

63. Agile
Waterfall

64. TDD

65. Deployment

66. Hosted
Public
Cloud
Private
Cloud

69. System
Management

70. A
server
must
be
always
on

72. New
Relic,
Pingdom

73. AnalyOcs

74. Google
AnalyOcs

75. Security
and
Privacy

76. Over
the
wire
At
rest
EncrypOon

77. SSL
Variety
of
standards

78. OAuth

80. New
Developments

82. Web
Sockets

83. HTML5

84. MongoDB
Neo4j
Cassandra

85. Web
Sockets
HTML5
NoSQL

86. The
web
relies
on
open
standards