Web Development Today

BEST PRACTICES FOR PRODUCING TODAY’S WEB APPLICATIONS.

BYBRETT MILLETT

H TT P : / / S L I D E S H A . R E / W E B S U U

Web Development Today!

What is a Web Application?

A Web Application is a collection of several separate, but integrated technologies. A Web Application typically has scripting on both the client and server “sides.” Web applications typically have many layers.

Server-side Web Server (HTTP Protocol)

Apache Nginx IIS

Programming Interface (Various computer languages) PHP Ruby Python

Database MySQL Postgres Couch DB

Client-side Web Browser JavaScript

AJAX Cascading Style Sheets (CSS)

What is a Web Application?

Server-side Components

Which components do you choose?Factors include:

Operating System Linux or Microsoft?

OS most often determines Web Server Linux: Apache (most common, but there are others) Windows: IIS

Web Server often determines Database & Language IIS: Microsoft SQL Server & ASP.NET Apache: MySQL & PHP (most common)

Many other alternatives!

Client-side Components

Which components do you choose?Not so many choices.You must support all browsers but they

typically follow standards (C’mon IE!)Cascading Styles are pretty standard (new

CSS3 spec is pretty useful)JavaScript frameworks are all the rage.

JQuery Protocol MooTools

Server-side Components

Which do I typically choose? LAMP. Linux as OS Apache for Web Service MySQL for database PHP for programming language

LAMP is an acronym for a solution stack. Server-side technologies to provide a Web application.

Probably the most common solution stack for Web Development.

Advantages to the LAMP stack

The LAMP stack is widely used because it offers a great number of advantages for developers: Easy to code: Novices can build something and get it up and

running very quickly with PHP and MySQL. Easy to deploy: Since PHP is a standard Apache module, it is

easy to deploy LAMP web applications by uploading .php files to an Apache server and connecting to a MySQL database.

Develop locally: LAMP can be set up so an app can be built locally, then deployed to the Web.

Cheap and ubiquitous hosting: Many inexpensive web hosts provide PHP and MySQL services.

None of the above reasons mean it’s always the best solution stack!

Server-side Best Practices

The Model, View, Controller paradigm Greatest thing since sliced bread…for Web developers

anyway!Web server is abstracted away from this

approach. Any Web Server can be used. It’s a developer thing. If you’re a designer

you may only ever deal with the View side of MVC

So…why is it so great again…?

MVC: Designer Advantages

Clean HTML templates.No need to understand complex

programming in a dynamic Web Application.A Website may be completely changed in

terms of design and overall layout without requiring a programmer!

MVC: Designer Advantages

MVC: Programmer Advantages

“Pretty” SEO-friendly URLs.Keep business logic separate from layout!Modularity. Models can be reused.Same code can be applied to numerous

formats Standard and mobile versions of website. Feed formats like Atom or RSS Data formats like XML or JSON

Designers can’t mess up your code! ;-)

MVC: Model View Controller

MVC: The Controller

Routing Determines which controller is called via URL. Example: http://your-web-site.com/controller/home

Controls flow of the Web application.Convention over configuration.

Application entry point: URL Routing (configuration) “Friendly” URL’s

Requests data from Models.Passes data to Views.“Thin controllers, fat models…”

Controllers “know” little about data. Concerned only with aggregating data and passing it to view layer.

MVC: The Model

Creates and returns application data XML PHP arrays Database Object JSON

Business logic relating to application data.Returns data to Controller on request.

MVC: The View

User Interface HTML RSS JSON

Accepts data from ControllerLogic Concerned with layout only

Looping structures to present data (foreach, for, while)Templates

Special markup tags: Smarty:

Name: {$name}<br>Address: {$address}<br>

PHP: Name: <?=$name?><br>

Address: <?=$address?><br>

Popular MVC Frameworks

PHP Zend Framework Symfony Cake CodeIgniter

Python Django

Perl Catalyst

Ruby Ruby on Rails

Java Struts

.NET ASP.NET MVC Framework

Client-side Best Practices

Use the least amount of HTML as possible.Rely on CSS for layout.Unobtrusive JavaScript.Implement AJAX after non-script functionality

is assured.

Client-side Best Practices

Use the least amount of HTML as possible. Do not rely on WYSIWYG Editors (Dreamweaver.) Do not Use HTML tag attributes for layout purposes.

Only for meta data.

Client-side Best Practices

Rely on CSS for layout. CSS is yet another abstraction that separates your

design elements from your content. Makes your webpage yummy for Search Engines

(search engines prefer vitamin supplements over Seven Layer Dip!)

Client-side Best Practices

Unobtrusive JavaScript. Use a JavaScript framework

JQuery Prototype

“Latch onto” DOM elements and apply events (English for non-programmers, “onclick in your tag is so 2001!”)

Create your HTML layout as if JavaScript wasn’t an option.

After your website is functional without JavaScript, come back and add JavaScript functionality.

Client-side Best Practices

Implement AJAX after non-script functionality is assured. Short for Asynchronous JavaScript and XML. Create your HTML forms as if AJAX wasn’t an option. After your website is functional without AJAX, come

back and add AJAX functionality. JQuery’s (or Prototype’s) selector syntax is perfect for

overriding typical form functionality.

The Life and Death of Design

Questions & Answers

Brett MillettSlides:

http://slidesha.re/websuu/Twitter (pretty boring really):

http://www.twitter.com/brettm73/ My Website:

http://www.brettic.us/

Thank You!