Web (UI) Development
Upcoming SlideShare
Loading in...5
×
 

Web (UI) Development

on

  • 2,491 views

 

Statistics

Views

Total Views
2,491
Views on SlideShare
2,491
Embed Views
0

Actions

Likes
0
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Talk about Web UI Development Work in progress. Wanted to get future along then I am but time doesn't stop. Going to concentrate on Django but all I say is equally applicable to the other frameworks.
  • Back-end web stacks all very similar. Request in page out. Template based, very easy to produce one One framework is missing - ToscaWidgets Very good support DRY
  • All frameworks very good in the back end.
  • All frameworks are good at this Haven't used Turbo gears admin
  • This are very good. DRY – makes it easy to do a lot of stuff Lots of extensions, make your site look all pretty and stuff, and interactive
  • Deferring JS loading increase the number of requests but the user doesn't notice Not every one can afoard a CDN
  • Problem part
  • Always repeating yourself – cut and paste Integration with the UI and the back-end Cut and paste CSS How much of your CSS are you actually using How much of the JavaScript are you actually using
  • No best practice for deferrnig doing so – looking at analytic , etc is too low level. You can't debug Knowing what JavaScript / CSS to include in the file is hard and
  • This means – templates very good at producing HTML content for a fragment of the page. But when the page is returned we may have wanted to add JavaScript and CSS to animate and style the content we just returned. To do this and play nice with best practice in web site performance is hard.
  • Intentionally left out of the first round of frameworks Resource injection JavaScript calls – integration with framework Researching at the moment Want to get to work with Django

Web (UI) Development Web (UI) Development Presentation Transcript

  • Web (UI) Development Michael Kerrin [email_address] http://mkerrin.wordpress.com/
  • Part 1
  • Current Web Frameworks
    • Django
    • Zope
    • Turbogears
    • WSGI
  • Don't Repeat Yourself
    • DRY Principle
    • “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system”
    • Just don't repeat yourself....
  • What does that mean?
    • Object-relational mapper
    • Admin interface / Zope Management Interface / Turbogrears admin
    • Sessions
    • Authentication
    • RSS
    • ....
  • Templates
    • Django
    • Zope Page Templates
    • Genshi
    • Kid
  • Part 2
  • UI Frameworks
    • jQuery
    • YUI
    • Dojo
    • ExtJS
  • Part 3
  • Speed matters
    • Best practices for speeding up your website
      • Yahoo! http://developer.yahoo.com/performance/rules.html
      • Google http://code.google.com/speed/page-speed/docs/rules_intro.html
  • Best practice according to Yahoo!
    • 1. Make Fewer HTTP Requests
    • 2. Use a Content Delivery Network (CDN)
    • 3. Add Expires or Cache-Control Header
    • 4. Gzip Components
    • 5. Put Stylesheets at Top
    • 6. Put Scripts at Bottom
    • 7. Avoid CSS Expressions
    • 8. Make JavaScript and CSS External
    • 9. Reduce DNS Lookups
    • 10. Minify JavaScript and CSS
    • 11. Avoid Redirects
    • 12. Remove Duplicate Scripts
    • 13. Configure ETags
    • 14. Make Ajax Cacheable
    • 15. Flush Buffer Early
    • 16. Use GET for Ajax Requests
    • 17. Postload Components
    • 18. Preload Components
    • 19. Reduce the Number of DOM Elements
    • 20. Split Components Across Domains
    • 21. Minimize Number of iframes
    • 22. Avoid 404s
    • 23. Reduce Cookie Size
    • 24. Use Cookie-Free Domains for Components
    • 25. Minimize DOM Access
    • 26. Develop Smart Event Handlers
    • 27. Choose <link> Over @import
    • 28. Avoid Filters
    • 29. Optimize Images
    • 30. Optimize CSS Sprites
    • 31. Do Not Scale Images in HTML
    • 32. Make favicon.ico Small and Cacheable
    • 33. Keep Components Under 25 KB
    • 34. Pack Components Into a Multipart Document
    • 35. Avoid Empty Image src
  • In nutshell
    • Reduce size (HTML, CSS, JavaScript)
    • Reduce the number of resources
    • Defer the what you need until when you need it
    • Experiment
      • break the rules
      • See what works for you
  • Its an art!
    • What works on one site may not work on an other
    • What was bad experiment on an other site may work on our site
    • Cost of implementing a feature
    • Cost of not implementing a feature
  • Tools
    • Yslow
    • PageSpeed
    • Speed tracer
  • Part 4
  • DRY UI
  • Speed matters but...
    • Combining JavaScript and CSS files is hard
    • Deferring JavaScript is hard
    • As a site evolves JavaScript is added
    • JavaScript p lug-ins are added
    • .... and removed
    • … not used often
  • Templates
    • But the web is made up of
      • HTML
      • JavaScript
      • CSS
      • And a crap load of images
      • … and videos
    • But templates Product textual data into a part or all of a response
  • Part 5
  • Solutions
    • ToscaWidgets
    • Maybe
      • Widgets
      • Resource injection
      • Python API to dynamically create JavaScript function calls
  •