Web (UI) Development
Download as ODP, PDF0 likes1,172 views
The document discusses various topics related to web development including: 1. Current web frameworks like Django, Zope, and Turbogears as well as principles like DRY. 2. UI frameworks like jQuery, YUI, and Dojo that can be used to build interfaces. 3. Best practices for optimizing website speed according to Yahoo and Google such as reducing HTTP requests, using a CDN, gzipping components, and others. 4. Challenges of maintaining DRY principles and optimizing speed as a site evolves over time with new JavaScript, plugins, and resources added and removed.
![Web (UI) Development Michael Kerrin [email_address] http://mkerrin.wordpress.com/](https://image.slidesharecdn.com/talk1-100721110521-phpapp01/85/Web-UI-Development-1-320.jpg)
Web (UI) Development
- 1. Web (UI) Development Michael Kerrin [email_address] http://mkerrin.wordpress.com/
- 2. Part 1
- 3. Current Web Frameworks Django
- 4. Zope
- 5. Turbogears
- 6. WSGI
- 7. Don't Repeat Yourself DRY Principle
- 8. “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system”
- 9. Just don't repeat yourself....
- 10. What does that mean? Object-relational mapper
- 11. Admin interface / Zope Management Interface / Turbogrears admin
- 12. Sessions
- 13. Authentication
- 14. RSS
- 15. ....
- 16. Templates Django
- 18. Genshi
- 19. Kid
- 20. Part 2
- 22. YUI
- 23. Dojo
- 24. ExtJS
- 25. Part 3
- 26. Speed matters Best practices for speeding up your website Yahoo! http://developer.yahoo.com/performance/rules.html
- 28. Best practice according to Yahoo! 1. Make Fewer HTTP Requests
- 29. 2. Use a Content Delivery Network (CDN)
- 30. 3. Add Expires or Cache-Control Header
- 32. 5. Put Stylesheets at Top
- 33. 6. Put Scripts at Bottom
- 34. 7. Avoid CSS Expressions
- 35. 8. Make JavaScript and CSS External
- 36. 9. Reduce DNS Lookups
- 37. 10. Minify JavaScript and CSS
- 39. 12. Remove Duplicate Scripts
- 41. 14. Make Ajax Cacheable
- 42. 15. Flush Buffer Early
- 43. 16. Use GET for Ajax Requests
- 46. 19. Reduce the Number of DOM Elements
- 47. 20. Split Components Across Domains
- 48. 21. Minimize Number of iframes
- 49. 22. Avoid 404s
- 50. 23. Reduce Cookie Size
- 51. 24. Use Cookie-Free Domains for Components
- 52. 25. Minimize DOM Access
- 53. 26. Develop Smart Event Handlers
- 54. 27. Choose <link> Over @import
- 57. 30. Optimize CSS Sprites
- 58. 31. Do Not Scale Images in HTML
- 59. 32. Make favicon.ico Small and Cacheable
- 60. 33. Keep Components Under 25 KB
- 61. 34. Pack Components Into a Multipart Document
- 62. 35. Avoid Empty Image src
- 63. In nutshell Reduce size (HTML, CSS, JavaScript)
- 64. Reduce the number of resources
- 65. Defer the what you need until when you need it
- 66. Experiment break the rules
- 67. See what works for you
- 68. Its an art! What works on one site may not work on an other
- 69. What was bad experiment on an other site may work on our site
- 70. Cost of implementing a feature
- 71. Cost of not implementing a feature
- 72. Tools Yslow
- 73. PageSpeed
- 74. Speed tracer
- 75. Part 4
- 76. DRY UI
- 77. Speed matters but... Combining JavaScript and CSS files is hard
- 78. Deferring JavaScript is hard
- 79. As a site evolves JavaScript is added
- 80. JavaScript p lug-ins are added
- 81. .... and removed
- 82. … not used often
- 83. Templates But the web is made up of HTML
- 84. JavaScript
- 85. CSS
- 86. And a crap load of images
- 87. … and videos But templates Product textual data into a part or all of a response
- 88. Part 5
- 90. Maybe Widgets
- 92. Python API to dynamically create JavaScript function calls
Editor's Notes
- #2: 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.
- #4: 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
- #5: All frameworks very good in the back end.
- #6: All frameworks are good at this Haven't used Turbo gears admin
- #9: 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
- #13: Deferring JS loading increase the number of requests but the user doesn't notice Not every one can afoard a CDN
- #16: Problem part
- #17: 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
- #18: 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
- #19: 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.
- #21: 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