Web Development Today


Published on

A look today's Web Application.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Development Today

  1. 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. 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. 3. What is a Web Application?
  4. 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. 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. 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. 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. 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. 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. 10. MVC: Designer Advantages
  11. 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. 12. MVC: Model View Controller
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22. The Life and Death of Design
  23. 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!