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