Does the world need another front-end JavaScript framework. Apparently it does. This is a presentation on the need for a mobile and desktop web framework, and one possible rebuilding of the wheel.

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