basic introduction to web development
TRANSCRIPT
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 “[email protected]”
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)