Javascript Libraries: Prototype

1,002 views
945 views

Published on

Cameron West (http://www.bigbangtechnology.com/) talks about Prototype at Refresh Events.

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

No Downloads
Views
Total views
1,002
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Big Bang Technology, June 2008, Max Cameron, iPhone, Web Dev, Flex Development, Bigbangtechnology.com






  • abstract away inconsitencies in browser.
    each does it different
    functionally equivalent
    small differences in edge cases

  • interesting history.
    one of the first modern JavaScript frameworks
    designed to mimic the Ruby in the browser.
  • Interactive sophisticated programs in the browser.
    Typically without page refreshes.



  • Most of those accomplishments go to jQuery, and I'd highly recommend using it for most simple JavaScript implementations.



  • * visual representation of the class instances
    * events are bound
    * loaded via ajax from a json feed

  • Creating a class instance with optional parameters
    Inserting custom instances into the DOM
    Accessing the public API of a class instance
    Class instances maintain state regardless of whether they are in the DOM or not.


  • explain the html structure of the dom nodes

  • Object.extend overrides default options with whatever is passed into the constructor
    If something isn’t passed in, the default value is used

  • you can take any DOM element and use the .insert method on it to insert custom classes as long as they implement toElement as an instance method.
  • Element is a class built just like Ninja. It takes two arguments, the tag name, and a hash of attribute values that you’d like to see on the element.
    Update is an Element method that lets you add elements or text as children

  • if you don’t use bind on event listeners. “this” references the element that dispatched the event.
    but we want to reference the class instance to access properties inside it.
    interpolate makes adding variables to strings a lot easier
  • custom events need to be bound to dom elements.
    use custom events for public methods that change the visual appearance of the class


  • iterate through the JSON to create new class instances for each record found.
    typically would be database driven.
    don’t forget to store a reference to the class instance or JavaScript will garbage collect it
  • Notice how the JSON feed is styled with the same key values as our class constructor options.

  • Javascript Libraries: Prototype

    1. 1. Thursday, February 19, 2009
    2. 2. Agenda • General Framework Overview • What Prototype Isn’t • The Ninja Database • Questions? Thursday, February 19, 2009
    3. 3. jQuery Awesome. Thursday, February 19, 2009
    4. 4. Prototype Awesome. Thursday, February 19, 2009
    5. 5. Frameworks Awesome. Thursday, February 19, 2009
    6. 6. Javascript Awesome. Thursday, February 19, 2009
    7. 7. Browsers? Thursday, February 19, 2009
    8. 8. Prototype == jQuery Come on, they all basically do the same thing. Thursday, February 19, 2009
    9. 9. Ruby in the Browser? Not quite. Thursday, February 19, 2009
    10. 10. AJAX The umbrella term Thursday, February 19, 2009
    11. 11. So why Prototype? Thursday, February 19, 2009
    12. 12. Light as a … NO. Thursday, February 19, 2009
    13. 13. Quick as a … NO. Thursday, February 19, 2009
    14. 14. jQuery is Champ. Thursday, February 19, 2009
    15. 15. Prototype Has Muscle. • Class Creation • Insertion • DOM Element Creation • Events • Custom Events • Scope Binding • AJAX Thursday, February 19, 2009
    16. 16. The Ninja Database Thursday, February 19, 2009
    17. 17. Thursday, February 19, 2009
    18. 18. Controlling Class Instance via Firebug • Creating a class instance with optional parameters • Inserting custom instances into the DOM • Accessing the public API of a class instance • Class instances maintain state Thursday, February 19, 2009
    19. 19. Thursday, February 19, 2009
    20. 20. Controlling Class Instance via Firebug • Creating a class instance with optional parameters • Inserting custom instances into the DOM • Accessing the public API of a class instance • Class instances maintain state Thursday, February 19, 2009
    21. 21. But what does the DOM look like? Thursday, February 19, 2009
    22. 22. Thursday, February 19, 2009
    23. 23. How is this elegance possible? Thursday, February 19, 2009
    24. 24. Constructors Thursday, February 19, 2009
    25. 25. Overwrite Options During Thursday, February 19, 2009
    26. 26. Insert Anything. Element#insert(anything); Thursday, February 19, 2009
    27. 27. Programmatically Create Elements Thursday, February 19, 2009
    28. 28. Events Use the DOM as a notification system for your class. Thursday, February 19, 2009
    29. 29. Standard DOM Events Thursday, February 19, 2009
    30. 30. Standard DOM Events Thursday, February 19, 2009
    31. 31. Standard DOM Events Function#bind(this) Your best friend when using classes. Allows referencing instance variables in an event listener. Thursday, February 19, 2009
    32. 32. Custom Events Too Thursday, February 19, 2009
    33. 33. Custom Events Too Thursday, February 19, 2009
    34. 34. Custom Events Too Thursday, February 19, 2009
    35. 35. Custom Events Too Thursday, February 19, 2009
    36. 36. Custom Events Too Thursday, February 19, 2009
    37. 37. AJAX Everybody’s doing it. Thursday, February 19, 2009
    38. 38. Thursday, February 19, 2009
    39. 39. Evaluate JSON Thursday, February 19, 2009
    40. 40. Questions? • http://github.com/camwest/ refresh-prototype-talk • http://bigbangtechnology.com/blog Thursday, February 19, 2009

    ×