A look today's Web Application.

1. B E S T P R A C T I C E S F O R P R O D U C I N G T O D A Y ’ S
W E B A P P L I C A T I O N S .
B Y
B R E T T M I L L E T T
H T T P : / / S L I D E S H A . R E / W E B S U U
Web Development
Today!

2. 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)

3. What is a Web Application?

4. 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!

5. 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

6. 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.

7. 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!

8. 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…?

9. 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!

10. MVC: Designer Advantages

11. 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! ;-)

12. MVC: Model View Controller

13. 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.

14. 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.

15. MVC: The View
 User Interface
 HTML
 RSS
 JSON
 Accepts data from Controller
 Logic 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>

16. Popular MVC Frameworks
 PHP
 Zend Framework
 Symfony
 Cake
 CodeIgniter
 Python
 Django
 Perl
 Catalyst
 Ruby
 Ruby on Rails
 Java
 Struts
 .NET
 ASP.NET MVC Framework

17. 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.

18. 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.

19. 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!)

20. 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.

21. 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.

22. The Life and Death of Design

23. Questions & Answers
 Brett Millett
 Slides:
 http://slidesha.re/websuu/
 Twitter (pretty boring really):
 http://www.twitter.com/brettm73/
 My Website:
 http://www.brettic.us/
 Thank You!