Wheel.js
- 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
- 7. jQuery + Plugins + a little app code
- 8. Then js grew up • Rendering • Logic
- 9. :(
- 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!
- 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
- 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??