JavaScript Wash - Story of UI Development
•Als PPT, PDF herunterladen•
3 gefällt mir•1,399 views
JavaScript Wash - Story of UI Development
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (12)
Andere mochten auch
Andere mochten auch (12)
Ähnlich wie JavaScript Wash - Story of UI Development
Ähnlich wie JavaScript Wash - Story of UI Development (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
JavaScript Wash - Story of UI Development
- 1. JavaScript Wash Story of a UI Development M A Hossain Tonu http://mahtonu.wordpress.com Tweets @mahtonu Improsys, Inc
- 3. Contents • JS in Mobile Application Development • Interactive UI samples • Open Source JS Libraries • The High-Performance JS Mantra • Tools PhpXperts Seminar 2010
- 4. Some Common Issues • JavaScript != Java • Client/Server Side JS = YES • Non-Web-related apps = YES • OOP Support = YES • Multi-threading PhpXperts Seminar 2010
- 5. Only for web browsers? No Rhino - Open source JS engine for Java. Aptana Jaxer - Server side JS Node.js – Client- Server JS PhpXperts Seminar 2010
- 6. Runs within a host environment Web browser Adobe Acrobat Photoshop Windows Scripting Host Yahoo! Widget Engine and more... PhpXperts Seminar 2010
- 7. JS in Mobile Application Development Titanium RhoMobile PhoneGap PhpXperts Seminar 2010 Devices = Dev. Platform =
- 8. Interactive UI using JavaScript PhpXperts Seminar 2010
- 9. Interactive UI using JavaScript PhpXperts Seminar 2010
- 10. Interactive UI using JavaScript PhpXperts Seminar 2010
- 11. Interactive UI using JavaScript PhpXperts Seminar 2010
- 12. Interactive UI using JavaScript PhpXperts Seminar 2010
- 13. PhpXperts Seminar 2010 = Yes
- 14. All you need • JavaScript Libraries • High Performance JavaScript Mantra PhpXperts Seminar 2010
- 15. Open Source JS Libraries • General Purpose: – Prototype – jQuery – Yahoo! UI – Dojo – Ext JS • Task Specific: – Script.aculo.us (Effects) – moo.fx (Effects) – $fx() (Animation) – Rapheal (Vector Graphics) – Glimmer (Interaction)PhpXperts Seminar 2010
- 16. Why JS Libraries? • High Performance • Development -> faster • cross-browser PhpXperts Seminar 2010
- 17. High-Performance JavaScript Matters • Fast apps = • Slow apps = • AJAX = responsiveness!! • User experience = WOW! PhpXperts Seminar 2010
- 18. The High-Performance JS Mantra • Be Lazy • Be Responsive • Be Vigilant PhpXperts Seminar 2010
- 19. The High-Performance JS Mantra • Be Lazy : Nothing is faster than doing nothing • Be Responsive • Be Vigilant PhpXperts Seminar 2010
- 20. Be Lazy: Nothing is faster than doing nothing • Write less code • Frequent code releases Frequently re-download • More code = more to download, execute, maintain, etc PhpXperts Seminar 2010
- 21. Be Lazy: Nothing is faster than doing nothing • Before: • After: PhpXperts Seminar 2010 /** * The dom module provides helper methods for * manipulating Dom elements. * @module dom * */ (function() { var Y = YAHOO.util, // internal shorthand getStyle, // for load time browser branching setStyle, // ditto propertyCache = {}, // for faster hyphen converts reClassNameCache = {}, // cache regexes for className document = window.document; // cache for faster lookups YAHOO.env._id_counter = YAHOO.env._id_counter || 0; (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.en v._id_counter||0; MINIFY = Good
- 22. Be Lazy: Nothing is faster than doing nothing • Load JS on-demand • Less HTTP Requests Before: After: PhpXperts Seminar 2010 <script src="all.js“ type="text/javascript“></script> <script src="jquery.js"></script> <script src="jquery.twitter.js"></script> <script src="jquery.cookie.js"></script> <script src="myapp.js"></script>
- 23. Be Lazy: Nothing is faster than doing nothing • Draw UI as late as possible Draw less DOM = faster Pre-draw hidden UI = No Cache = Yes Hidden UI updating = No PhpXperts Seminar 2010
- 24. PhpXperts Seminar 2010 Never pre-draw hidden UI
- 25. PhpXperts Seminar 2010 Never pre-draw hidden UI
- 26. PhpXperts Seminar 2010 Never pre-draw hidden UI
- 27. PhpXperts Seminar 2010 Never pre-draw hidden UI
- 28. PhpXperts Seminar 2010 Never pre-draw hidden UI
- 29. The High-Performance JS Mantra • Be Lazy • Be Responsive: Jump when the user says jump • Be Vigilant PhpXperts Seminar 2010
- 30. Be Responsive: Jump when the user says jump • Minimize initial load time CSS at top JS at bottom UI placeholder > “loading” Load in stages • Yield early and often do min. work, use setTimeout() to yield PhpXperts Seminar 2010
- 31. Be Responsive: Jump when the user says jump PhpXperts Seminar 2010 Load your app in stages
- 32. Be Responsive: Jump when the user says jump PhpXperts Seminar 2010 Load your app in stages
- 33. Be Responsive: Jump when the user says jump PhpXperts Seminar 2010 Load your app in stages
- 34. Be Responsive: Jump when the user says jump PhpXperts Seminar 2010 Load your app in stages
- 35. Be Responsive: Jump when the user says jump PhpXperts Seminar 2010 Load your app in stages
- 36. Be Responsive: Jump when the user says jump PhpXperts Seminar 2010 Load your app in stages
- 37. Be Responsive: Jump when the user says jump PhpXperts Seminar 2010 Load your app in stages
- 38. The High-Performance JS Mantra • Be Lazy • Be Responsive • Be Vigilant: Only you can prevent slow web apps PhpXperts Seminar 2010
- 39. Be Vigilant: Only you can prevent slow web apps • Profile like crazy Use firebug’s profiler (Joe Hewitt, you rule! ) Use timestamp diffs and alerts PhpXperts Seminar 2010
- 42. References JavaScript: The World's Most Misunderstood Programming Language Private Members in JavaScript Books: JavaScript: The Good Part by Douglus Crockford JavaScript: The Definitive Guide (5th Edition) by David Flanagan jQuery Cheat sheet Server side JS PhpXperts Seminar 2010
Hinweis der Redaktion
- When it comes to Object Oriented issue: it does have constructors which do what classes do, including acting as containers for class variables and methods. It does not have class-oriented inheritance, but it does have prototype-oriented inheritance. The two main ways of building up object systems are by inheritance (is-a) and by aggregation (has-a). JavaScript does both Capable of information hiding JavaScript objects can have private variables and private methods JavaScript supports not only classical inheritance, but other code reuse patterns as well.
- While JavaScript is most widely used for client side scripting in a browser, it is a fully fledged language and can be used anywhere.
- Cross platform mobile apps development for JavaScript developers
- A JavaScript library is like a toolbox You can build any number of things using the tools
- Write less code Each line costs parsing time Can’t rely on browser caching to excuse large code size Yahoo study: surprising number of hits with empty cache Frequent code releases frequently need to re-download
- You just saved 3 HTTP requests
- Draw UI as late as possible Draw less DOM = faster to draw, browser less saturated Never pre-draw hidden UI if you can avoid it Cache previously drawn HTML when appropriate But have to know when to invalidate the cache Don’t keep hidden UI up-to-date behind the scenes Just re-draw next time you show it (simpler, one-time cost)
- Put CSS at the top of your page and JS at the bottom Draw major placeholder UI with “loading…” first Load / draw your app in stages (lazy, on-demand)