WEB  DEVELOPMENTTOOLS  &  FRAMEWORKSBURHAN  KHALID  (@BURHAN)

GUST  – MARCH  30  2015

Today’s  TalkBrief  History  of  Web  Development

Stages  of  Web  Development◦ Concept  Development◦ Prototyping◦ Development◦ Testing◦ Launch◦ Maintenance

Tools  &  Frameworks

Next  Generation  Development  (exciting  stuff!)

Q&A

A  brief  history  of  Web  Developmenthttps://pantheon.io/blog/history-­‐website-­‐development-­‐infographic

Web  Development  Stages1  – Concept  DevelopmentWrite  down  the  following:

◦ Who  is  this  website  for?  (the  types  of  users)

◦ Why  am  I  making  it?  (what  is  the  problem?)

◦ What  is  the  most  important thing  visitors  should  do  on  your  website.

◦ Write,  read.  Write,  read.  Repeat.

◦ Sketch  (draw)  your  website  outline.

Web  Development  Stages2  – Prototype  DevelopmentA  “broken”  version  of  your  website:

◦ Links  work,  but  don’t  lead  to  any  content.

◦ “User  Journey”  is  complete:◦ “As  a  _______  I  want  to  _______  “

◦ Quick  to  change  and  move  things  around.

Web  Development  Stages3  -­‐ DevelopmentIdeally,  your  requirements  are  complete

◦ Work  at  an  iterative  pace:◦ Develop  at  the  lowest  possible  work  unit

◦ Use  the  tool  that  suits  you,  and  makes  you  the  most  productive:◦ Text  Editor◦ IDE◦ Terminal◦ GUI

Web  Development  Stages4  -­‐ TestingIf  you  don’t  test;  prepare  to  fail.Types  of  testing:◦ Functional  Test  (does  the  feature  work?)

◦ User  acceptance  test  (is  it  what  the  user  wants?)

◦ Unit  test  (is  the  code  stable?)◦ Coverage  tests  (are  all  code  paths  executing?)

Web  Development  Stages5  -­‐ DeploymentDeployment  Process  Should  Be:

◦ Documented

◦ Repeatable

◦ Predictable

◦ Rehearsed

◦ Tools  help!

Web  Development  Stages6  -­‐ MaintenanceSmall  effort,  big  rewards

◦ Enable  maintenance  by  tracking:

◦ Successful  requests

◦ Failed  requested

◦ Repeated  failed  requests

◦ Key  function  execution

◦ Infrastructure

Tools  &  FrameworksUSE  THESE  TO  JUMPSTART  YOUR  DEVELOPMENT

Categories  of  Tools  &  Frameworks:Server  Side  Development

Categories  of  Tools  &  FrameworksFrontend  Development

Categories  of  Tools  &  FrameworksPlatforms

Categories  of  Tools  &  FrameworksDevelopment  Helpers

A  quick  note  about  workflowsA  good  development  workflow:

◦ Helps  you  get  started.

◦ Maintains  your  dependencies.

◦ Enforces  best  practices.

◦ Prepares  your  tools.

◦ Fights  regressions.

◦ Eases  the  release  process.

Quick  DemoWeb  DevelopmentQUICKEST  WAY  TO  PUBLISH  A  WEBSITE  – GUARANTEED!

Demo  Requirements  – 30  minutes

Windows

• git• Text  Editor• github.comaccount

• Python  (2  or  3)

Mac

• Same

Linux

• Same

Demo  Steps  – Phase  1Local  Development  &  Testing1. Create  a  directory  anywhere  in  your  file  system,  and  change  (cd)  into  this  directory:

1. On  Windows  – recommended  to  use  a  path  without  spaces,  so  D:\gust_demo2. On  Mac,  default  path  is  /Users/yourloginname/gust_demo3. On  Linux,  default  path  is  /home/yourusername/gust_demo

2. Create  a  index.html file  in  this  directory,  with  any  content  you  like.

3. Start  a  local  server:1. Python  2:

1. python –m SimpleHTTPServer 8000

2. Python  3:1. python –m http.server 8000

4. Browse  http://localhost:8000

Demo  Steps  – Phase  2Publishing1. Commit  your  files  to  git:

1. git init2. git add .3. git commit –m “initial commit”

2. Create  a  repository  on  github:1. Login  to  your  github account  https://github.com/name/2. If  you  are  creating  an  account  for  the  first  time,  click  on  the  welcome  email  to  verify  it.3. Create  a  repository  called  name.github.io4. Type these commands to configure git:

1. git config –global user.name “Your Name”2. git config –global user.email “you@email.com”

3. Push  your  website:1. git remote add origin https://github.com/name/name.github.io.git

2. git push –u origin master

Q&A

Web  Development  –RecapLETS  STOP  AND  LOOK  BACK  AT  WHAT  WE  DID

How  Does  It  All  Work?THE  DETAILS

The  Internet

A  LARGE  NETWORK  OF  COMPUTERS,  CONNECTED  THROUGH  A  COMMON  NETWORK  SPREAD  ACROSS  A  LARGE  AREA.

World  Wide  Web

AN  INFORMATION  NETWORK BUILT  ON  TOP  OF  THE  INTERNET  USING  HYPERLINKED  DOCUMENTS.

HTML  &  HTML5

HYPERTEXT  MARKUP  LANGUAGE.  A  LANGUAGE  CONSISTING  OF  A  SERIES  OF  TAGS  USED  TO  ANNOTATE  DOCUMENTS  THAT  ARE  TO  BE  LINKED  TOGETHER  ON  THE  WEB.  THE  LATEST  VERSION  IS  5

CLIENT  SIDE

A  TERM  USED  TO  DESCRIBE  TECHNOLOGY  THAT  RUNS  ON  THE  DEVICE  CONNECTED  TO  THE  INTERNET  AND  REQUESTING  DOCUMENTS  FROM  A  SERVER.  EXAMPLE:  JAVASCRIPT,  FLASH

SERVER  SIDE

A  TERM  USED  TO  DESCRIBE  TECHNOLOGY  THAT  RUNS  ON  THE  SERVERS  CONNECTED  TO  THE  INTERNET  PROVIDING  ONE  OR  MORE  SERVICES.

USER  AGENT

THE  TECHNICAL  TERM  FOR  THE  PIECE  OF  SOFTWARE  THAT  IS  USED  TO  DISPLAY  DOCUMENTS  ON  THE  WORLD  WIDE  WEB  (WWW).

DOCUMENT  OBJECT  MODEL

A  CONVENTION  OF  DESCRIBING  AND  INTERACTING  WITH  HTML  DOCUMENTS  AS  A  SERIES  OF  NODES  ON  A  TREE.  

TELNET

A  PLAIN  TEXT  BI-­‐DIRECTIONAL  PROTOCOL  USED  TO  COMMUNICATE  WITH  SERVERS.   IT   IS  ALSO  THE  NAME  OF  A  PROGRAM  THAT  IS  USED  TO  CONNECT  OT  SERVERS.

TCP/IPIPv4IPv6

PROTOCOLS  USED  TO  COMMUNICATE  WITH  SERVERS  ON  THE  INTERNET.  EACH  DEVICE  THAT  CONNECTS  TO  INTERNET  NEEDS  AN  IP  ADDRESS.

DOMAIN  NAME  SYSTEM

A  DISTRIBUTED  SYSTEM  DESIGNED  TO  ASSIGN  NAMES  TO  IP  ADDRESSES,   IN  ORDER  TO  IDENTIFY  RESOURCES  ON  A  NETWORK.

WEB  SERVER

A  PIECE  OF  SOFTWARE  CODE  THAT  LISTENS  TO  CONNECTIONS  AND  RESPONDS  WITH  DOCUMENTS  OR  OTHER  RESOURCES  ON  THE  WORLD  WIDE  WEB.

APACHEIIS

NGINXPOPULAR  WEB  SERVER  USED  ON  THE  INTERNET.  APACHE  CONTROLS  THE  MAJORITY  OF  THE  MARKET.

HTTPHTTPS

HYPERTEXT  TRANSFER  PROTOCOL.  A  TEXT  PROTOCOL  CONSISTING  OF  A  SERIES  OF  COMMANDS  USED  TO  SEND  DATA  AND  REQUEST  DOCUMENTS  OVER  THE  WEB.

REQUEST/RESPONSE

THE  NAME  GIVEN  TO  THE  COMPLETE  CYCLE  TO  FETCH  DOCUMENTS  AND  RESOURCES  USING  HTTP.  THE  CLIENT  INITIATES  THE  REQUEST,  AND  THE  SERVER  SENDS  THE  RESPONSE.

FTP/SFTP

FILE  TRANSFER  PROTOCOL.  A  METHOD  OF  TRANSFERRING  DATA  BETWEEN  SERVERS.  SFTP IS  SECURE-­‐FTP

SECURE  SHELL  (SSH)

AN  ENCRYPTED  METHOD  OF  CONNECTING  TO  REMOTE  COMPUTERS  AND  EXECUTING  COMMANDS.

GITMERCURIALSUBVERSION

POPULAR  REVISION  CONTROL  SYSTEMS.  THESE  SYSTEMS  TRACK  CHANGES  IN  FILES  ALLOWING  EASY  RECOVERY  OF  PREVIOUS  VERSIONS.

DEMOPLEASE  FOLLOW  ALONG  IF  YOU  CAN

Classic  Web  Application  ArchitectureBASIC  BUILDING  BLOCKS  FOR  MOST  WEB  APPLICATIONS

The  old  (and  current)  way

DATABASE  (the  models)

Server  Code  (controllers)

View(code  to  render  

HTML)

Client  Side  Javascript (jquerycomponents)

HTML  Templates;  CSS;  layouts

Modern  Web  Application  ArchitectureADVANCED  APPLICATIONS  – FOR  ADVANCED  DEVICES

Modern  Applications  (Simplified)

Models(database,  document)

Services(API,  Authentication,  

Caching,  Serialization)

Business  Logic(controllers,  routers)

View  Layer(code  to  render  

HTML)

Models(client  side  models)

Presentation(HTML,  CSS,  Responsive)

Local  Storage  (HTML5)

DEMOCREATING  A  CMS  FROM  SCRATCH

Web  Development  –Part  IIUSING  A  WORKFLOW  FOR  WEB  DEVELOPMENT

Demo  Requirements  – 1  Hour  (excluding  download  time)  J

Windows

•git•Text  Editor•Python  (2  or  3)•node  &  npm•virtualenv &  pip•A  fast  Internet  connection•Vagrant•VirtualBox

Mac

• In addition  to  Windows• Homebrew• Xcode &  Xcode Command  Line  Tools

• brew  install  libpng libjpeglibxml2  postgresql

Linux

• In  addition  to  Windows• Development toolchain

Pre-­‐requisites  – All  Platforms

Demo

Q&AThank  YouSLIDES  AVAILABLE  (@GDGKUWAIT /  @BURHAN /  @SIRDAB_LAB)