• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

JavaScript Wash - Story of UI Development

  • 2,649 views
Uploaded on

JavaScript Wash - Story of UI Development

JavaScript Wash - Story of UI Development

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,649
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
49
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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)

Transcript

  • 1. JavaScript Wash Story of a UI Development M A Hossain Tonu http://mahtonu.wordpress.com Tweets @mahtonu Improsys, Inc
  • 2. Objective PhpXperts Seminar 2010
  • 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=&quot;all.js“ type=&quot;text/javascript“></script> <script src=&quot;jquery.js&quot;></script> <script src=&quot;jquery.twitter.js&quot;></script> <script src=&quot;jquery.cookie.js&quot;></script> <script src=&quot;myapp.js&quot;></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
  • 40. Tools PhpXperts Seminar 2010
  • 41. Questions 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