The document discusses the development of personalized JavaScript frameworks, particularly emphasizing 'wheel.js' as a comprehensive tool for building customizable, object-oriented applications. It outlines the importance of features like cross-device compatibility, AJAX integration, and modular design for modern web development. The author encourages developers to create their own frameworks to meet specific needs, underscoring the flexibility and adaptability of JavaScript.

1. Wheel.js
Why everyone should make their
own JavaScript framework, now

2. “I tend to liken
JavaScript to water”

3. “… alone it's painfully
simple but it can take
the form of its
container”

4. - John Resig
author of jQuery

5. jQuery

6. jQuery + Plugins

7. jQuery + Plugins + a little app code

8. Then js grew up
• Rendering
• Logic

9. :(

10. Tools Proliferate

11. Tools Proliferate
• jQuery UI • JavaScriptMVC
• Backbone • AngularJS
• Sammy.js • Ext.js
• Ember.js • Agility.js
• Spine.js • KnockoutJS
• Underscore • Knockback.js
• Can.js • …

12. What’s the clear path?

13. But wait … there is more
< 2007 :)

14. > 2007 :(

15. And I want things
Form widgets
Dialogs
Menus
etc …

16. Wish List
• Platform for big or small js
• Cross-device & Cross-browser compatibility
• Install and code, sensible default app
• Ability to customize what I don’t like
• Library add-ons

17. Wheel.js
I am trying to build my wishlist.
You should too!

18. Wheel = Object-Oriented

19. Instance Methods/Variables

20. Class Methods/Variables

21. Subclassing

22. Got _super?

23. Keep it dry with modules

24. Why is OO important?

25. Why is OO important?
Because customizing this
means copy/paste

26. Wheel is View-centric!
(and flexible)
Views can …
• be attached to existing browser DOM
• be built with a string
• received via ajax
• hand-built
• generate own DOM from a template

27. Gathering Views from DOM
Given HTML in the browser

28. Gathering Views from DOM
A simple view class for todo tasks

29. View Anatomy

30. Switching to DOM Generation

31. View Niceties
Superclass initialization automatically
– Finds/generates DOM
– Provides a handy this.$ for DOM manipulation
– Calls ‘listen’ after subclass ‘init’ block is called
– Sets options passed in as instance variables
– Automatically appends to parent, when parent
option provided

32. Adding Persistence

33. Ajax Mixin
• ‘data’ method to specify what will be sent to
the server
• ‘onComplete’, ‘onSuccess’, ‘onError’ methods
• prototype/instance can set the http method
• Module converts ‘put’ and ‘delete’ to ‘post’
with _method attribute
• Needs a ‘url’ attribute

34. Ajaxing For the Mobile Era
• Request queue instead of direct requests
• Queue stored in LocalStorage or polyfill
• Application tracks connectivity
• Sends requests and executes callbacks as
possible

35. More Mobile
• Touch/Gesture events
• Event Unification
• Drag/Drop Conventions
• Dynamic application loader (bandwidth)
• ??

36. ++
Helpers Widgets
• Poller • Tabs
• Cookie Manager • Dialog
• Models • Searcher
• Router/History • Autocomplete
Rails • Form Stuff
• Generators • Tooltips
• Better deps • Time ago helper
manager??

37. Github:
https://github.com/baccigalupi/wheel.js