language high level overview
DESCRIPTION
Language HIGH LEVEL Overview. More to come in future classes. Languages. HTML CSS Javascript PHP / Ruby / Java / ASP / Perl. Client-server model. When searching on Google: Your PC’s browser requests a webpage from Google’s server Google’s server processes that request - PowerPoint PPT PresentationTRANSCRIPT
Language HIGH LEVEL Overview
More to come in future classes
Languages
• HTML• CSS• Javascript• PHP / Ruby / Java / ASP / Perl
Client-server modelWhen searching on Google:
1. Your PC’s browser requests a webpage from Google’s server
2. Google’s server processes that request
3. Google’s server sends your browser anHTML file
4. Your PC’s browser renders what you seeas a webpage from that HTML
Simplest Reply: HTML Page
• Server simply sends you a single .html file• Only HTML, no other programming required• Said to be “static” – never changes• Cannot have any interaction• Cannot pull content from a database• Cannot read or save other files• Cannot log in or log out
HTML• HTML serves one purpose: layout content on a
webpage• Hyper Text Markup Language• Created by Tim Burners-Lee at CERN in 1991• Today universal, open standard supported on all
browsers: Internet Explorer, Firefox, Chrome, Opera, and more
• Also now called “XHTML” – basically the same
HTML - Example
HTML + CSS
• Problem: HTML was limited in how you could display things.
• Solution: Cascading Style Sheets
• Compliments HTML – more control over how things look, in bulk manner
• Introduced idea of “separating form from content”
• CSS can be embedded in HTML or be sent by the server as a second document
HTML + CSS - Example
JavaScript (JS)• Client side script – runs in your browser - NOT THE SERVER
• Server sends JS in HTML or as a separate file
• Makes the web page interactive– Mouseovers– Clocks– Alert boxes– Drag-and-drop
• Much more complicated than CSS or HTML – big leap
• Warnings– Older browsers can’t work with newer commands– Can be disabled by browsers (approx 1-3%)– Code is 100% viewable – people can steal
Server ArchitectureServers run programs, just like your PC:
• Operating System (OS)– Manages server’s hardware and other programs– Linux, Windows
• Web Server Software (HTTP)– Process’s client requests, sends response– Apache, LigHTTPD, IIS
• Database (DB)– Optional, used for large web apps– Stores tables of information – i.e. user info– MySQL, Postgres, Oracle, Microsoft SQL
• Scripting Language Processor– Depends on the language your site is coded in– The “processor” will read your script and execute it
Server-side Languages
• Scripting language generally determines architecture
• PHP, Ruby, ASP, Java, Perl
• Executes code on the server
• Saves files, logs users in/out, queries the database
• Totally invisible to client
• Sends client HTML once completed
Common Web App ArchitecturesArchitecture LAMP Ruby on Rails ASP.NET
OS Linux Linux Windows Server
Server Apache Apache IIS
DB MySQL MySQL Microsoft SQL
Server-side script PHP Ruby ASP
Framework (optional) Rails .NET
Layout HTML HTML HTML
Styling CSS CSS CSS
Client-side script JavaScript JavaScript JavaScript
PHP• “PHP Hypertext Processor” (recursive acronym)
• LAMP architecture– Linux for OS– Apache for webserver software– MySQL for database– PHP for programming
• Advantages: – Large developer base– All open source– Very scalable– Great documentation at PHP.net
• Disadvantages: – Slower development than Ruby or ASP
• Sites that use PHP in parts or all of their site:– Facebook.com– Wikipedia.com– Wordpress.com
PHP Example<html> <head> <title>PHP Test</title> </head> <body> 1+1 = <?php echo 1+1; ?> </body> </html>
Executed by web server
What the browser sees<html> <head> <title>PHP Test</title> </head> <body> 1+1 = 2</body> </html>
Executed by web server
Ruby (on Rails)• Ruby is the language
• Almost always used with Rails – the framework
• Advantages: – Developed specifically for modern web apps– Fastest to develop on– Tight integration between server, DB, front and back ends– Easy to make API’s
• Disadvantages: – Poor scalability (so far)
• Samples of sites using Ruby:– Twitter.com – fail whale– Basecamp.com – 37 signals maintains Rails
ASP• “Active Server Pages” - Microsoft’s web programming language
• Primarily for use if you want to go Microsoft across the board– Windows for OS– IIS for web server– Microsoft SQL server for DB
• Advantages: – Comes with a workflow & website framework– “Enterprise” - geared towards large companies – Microsoft provides customer service
• Disadvantages: – Proprietary– Expensive– Not as popular as PHP or Ruby
• Samples of sites using ASP:– Microsoft.com
Other Languages Java• By Sun/Oracle• Fallen out of popularity for web apps
Python / Django• Google has historically used Django• Runs quickly on the server
Perl• Early Language• Not designed for web, slow development
AJAX• “Asynchronous JavaScript and XML” – is a technique, not a language
• How it works– Javascript sends requests to server– Server-side script (PHP) processes request– Server sends back XML– Browser updates the webpage
• Samples of sites using AJAX:– http://maps.google.com– http://www.kayak.com
Maps.Google.com
Web HostingHosting Option Self-hosted Shared Hosting Dedicated /Co-lo Cloud Hosting
Where You own your box and connect it to the internet in your garage
Your site is one of many on a machine at your webhost’s facility
You get your own private box at your webhost’s facility
Your site is abstracted across many boxes at your webhost
Hardware Access Total None Set-up None
Software Access Total Limited Total Total
Reliability Poor Good Good Good
Scalability None None OK Great
Security Poor Poor Great OK
My Preferred Configuration
Hosting: Dedicated Servers at LiquidWeb.com
OS: CentOS 5 (Linux)Server: Apache 2DB: MySQL 5SS-Script: PHP 5Framework: Proprietary
Benefits: Open source, low cost, stable, scalable, easydevelopment, large developer pool
Why is this important?
Dot Com 1.0 mistake: • I have a great website idea. • I’ll just pay some guy to make it. • Then I’ll make millions!
With Technical founders Without Technical Founders
Successful Web Companies
(quasi-technical)
Dot Com 1.0 Reality• You can’t tell a good contractor from a bad one
• Your contractor tells you all your terrible ideas are great just so you’ll hire him
• ½ of your billings go towards waste-of-time-phone calls
• You end up with a terrible site
• It’s programmed in Java and completely unmaintainable
• You don’t have the capacity to improve it or even fix bugs
• Your “amazing idea” will be copied by a better technical company in a week
• They’ll make millions and you just wasted $50,000
Web 2.0 Lessons
• Every founder needs a basic level of technical proficiency
• At least one founder needs to be technically advanced
• Ideas are worthless, the best execution wins
• Web companies need to be technically driven
• Products need to be constantly iterated and improved
Learn More
• W3Schools.com• Go to any webpage, right click, “View Source”