Your SlideShare is downloading. ×
0
Web (UI) Development Michael Kerrin [email_address] http://mkerrin.wordpress.com/
Part 1
Current Web Frameworks <ul><li>Django
Zope
Turbogears
WSGI </li></ul>
Don't Repeat Yourself <ul><li>DRY Principle
“Every piece of knowledge must have a single,  unambiguous, authoritative representation within a system”
Just don't repeat yourself.... </li></ul>
What does that mean? <ul><li>Object-relational mapper
Admin interface / Zope Management Interface / Turbogrears admin
Sessions
Authentication
RSS
.... </li></ul>
Templates <ul><li>Django
Zope Page Templates
Genshi
Kid </li></ul>
Part 2
UI Frameworks <ul><li>jQuery
Upcoming SlideShare
Loading in...5
×

Web (UI) Development

2,047

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,047
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Talk about Web UI Development Work in progress. Wanted to get future along then I am but time doesn&apos;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&apos;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&apos;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&apos;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
  • Transcript of "Web (UI) Development"

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×