Web Development Today
- 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!
- 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!