0
Wheel.jsWhy everyone should make theirown JavaScript framework, now
“I tend to likenJavaScript to water”
“… alone its painfullysimple but it can take   the form of its     container”
- John Resigauthor of jQuery
jQuery
jQuery + Plugins
jQuery + Plugins + a little app code
Then js grew up• Rendering• Logic
:(
Tools Proliferate
Tools Proliferate•   jQuery UI    •   JavaScriptMVC•   Backbone     •   AngularJS•   Sammy.js     •   Ext.js•   Ember.js  ...
What’s the clear path?
But wait … there is more      < 2007 :)
> 2007 :(
And I want things                          Form widgetsDialogs               Menus                                etc …
Wish List•   Platform for big or small js•   Cross-device & Cross-browser compatibility•   Install and code, sensible defa...
Wheel.jsI am trying to build my wishlist.        You should too!
Wheel = Object-Oriented
Instance Methods/Variables
Class Methods/Variables
Subclassing
Got _super?
Keep it dry with modules
Why is OO important?
Why is OO important?              Because customizing this              means copy/paste
Wheel is View-centric!        (and flexible)Views can …• be attached to existing browser DOM• be built with a string    • ...
Gathering Views from DOMGiven HTML in the browser
Gathering Views from DOM               A simple view class for todo tasks
View Anatomy
Switching to DOM Generation
View NicetiesSuperclass initialization automatically  – Finds/generates DOM  – Provides a handy this.$ for DOM manipulatio...
Adding Persistence
Ajax Mixin• ‘data’ method to specify what will be sent to  the server• ‘onComplete’, ‘onSuccess’, ‘onError’ methods• proto...
Ajaxing For the Mobile Era•   Request queue instead of direct requests•   Queue stored in LocalStorage or polyfill•   Appl...
More Mobile•   Touch/Gesture events•   Event Unification•   Drag/Drop Conventions•   Dynamic application loader (bandwidth...
++Helpers                 Widgets• Poller                • Tabs• Cookie Manager        • Dialog• Models                • S...
Github:https://github.com/baccigalupi/wheel.js
Upcoming SlideShare
Loading in...5
×

Wheel.js

2,162

Published on

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.

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

  • Be the first to like this

No Downloads
Views
Total Views
2,162
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Wheel.js"

  1. 1. Wheel.jsWhy everyone should make theirown JavaScript framework, now
  2. 2. “I tend to likenJavaScript to water”
  3. 3. “… alone its painfullysimple but it can take the form of its container”
  4. 4. - John Resigauthor of jQuery
  5. 5. jQuery
  6. 6. jQuery + Plugins
  7. 7. jQuery + Plugins + a little app code
  8. 8. Then js grew up• Rendering• Logic
  9. 9. :(
  10. 10. Tools Proliferate
  11. 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. 12. What’s the clear path?
  13. 13. But wait … there is more < 2007 :)
  14. 14. > 2007 :(
  15. 15. And I want things Form widgetsDialogs Menus etc …
  16. 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. 17. Wheel.jsI am trying to build my wishlist. You should too!
  18. 18. Wheel = Object-Oriented
  19. 19. Instance Methods/Variables
  20. 20. Class Methods/Variables
  21. 21. Subclassing
  22. 22. Got _super?
  23. 23. Keep it dry with modules
  24. 24. Why is OO important?
  25. 25. Why is OO important? Because customizing this means copy/paste
  26. 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. 27. Gathering Views from DOMGiven HTML in the browser
  28. 28. Gathering Views from DOM A simple view class for todo tasks
  29. 29. View Anatomy
  30. 30. Switching to DOM Generation
  31. 31. View NicetiesSuperclass 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. 32. Adding Persistence
  33. 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. 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. 35. More Mobile• Touch/Gesture events• Event Unification• Drag/Drop Conventions• Dynamic application loader (bandwidth)• ??
  36. 36. ++Helpers Widgets• Poller • Tabs• Cookie Manager • Dialog• Models • Searcher• Router/History • AutocompleteRails • Form Stuff• Generators • Tooltips• Better deps • Time ago helper manager??
  37. 37. Github:https://github.com/baccigalupi/wheel.js
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×