Wheel.js

Why everyone should make their own JavaScript framework, now

“I tend to liken JavaScript to water”

“… alone it's painfully simple 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• Backbone• Sammy.js• Ember.js• Spine.js• Underscore• Can.js

• JavaScriptMVC• AngularJS• Ext.js• Agility.js• KnockoutJS• Knockback.js• …

What’s the clear path?

But wait … there is more

< 2007 :)

> 2007 :(

And I want things

Dialogs

Menus

Form widgets

etc …

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

Wheel.js

I 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 thismeans copy/paste

Wheel is View-centric!(and flexible)

• be attached to existing browser DOM• be built with a string• received via ajax• hand-built• generate own DOM from a template

Views can …

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 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

Adding Persistence

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

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

More Mobile

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

++

Helpers• Poller• Cookie Manager• Models• Router/HistoryRails• Generators• Better deps manager??

Widgets• Tabs• Dialog• Searcher• Autocomplete• Form Stuff• Tooltips• Time ago helper

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