SlideShare a Scribd company logo
1 of 37
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 Resig
author 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     •   Agility.js
•   Spine.js     •   KnockoutJS
•   Underscore   •   Knockback.js
•   Can.js       •   …
What’s the clear path?
But wait … there is more




      < 2007 :)
> 2007 :(
And I want things
                          Form widgets
Dialogs




               Menus




                                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 this
              means copy/paste
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
Gathering Views from DOM
Given 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                 Widgets
• Poller                • Tabs
• Cookie Manager        • Dialog
• Models                • Searcher
• Router/History        • Autocomplete
Rails                   • Form Stuff
• Generators            • Tooltips
• Better deps           • Time ago helper
  manager??
Github:
https://github.com/baccigalupi/wheel.js

More Related Content

What's hot

jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
Backbone.js slides
Backbone.js slidesBackbone.js slides
Backbone.js slides
Ambert Ho
 
Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)
Benjamin Howarth
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
Thomas Carney
 

What's hot (20)

Smooth Animations for Web & Hybrid
Smooth Animations for Web & HybridSmooth Animations for Web & Hybrid
Smooth Animations for Web & Hybrid
 
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery Templates
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)
 
Webpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need itWebpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need it
 
Backbone.js slides
Backbone.js slidesBackbone.js slides
Backbone.js slides
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
Dangerous CSS
Dangerous CSSDangerous CSS
Dangerous CSS
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 
Thinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS LayoutsThinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS Layouts
 
Buzzr: A "Cloud" Platform for Creating and Maintaining Websites
Buzzr: A "Cloud" Platform for Creating and Maintaining WebsitesBuzzr: A "Cloud" Platform for Creating and Maintaining Websites
Buzzr: A "Cloud" Platform for Creating and Maintaining Websites
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 
Website Review with Screen Reader vs. SiteImprove
Website Review with Screen Reader vs. SiteImproveWebsite Review with Screen Reader vs. SiteImprove
Website Review with Screen Reader vs. SiteImprove
 
2011 - SharePoint + jQuery
2011 - SharePoint + jQuery2011 - SharePoint + jQuery
2011 - SharePoint + jQuery
 
Javascript & Jquery
Javascript & JqueryJavascript & Jquery
Javascript & Jquery
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
Maven
Maven Maven
Maven
 
Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)
 
jQuery Mobile Introduction
jQuery Mobile IntroductionjQuery Mobile Introduction
jQuery Mobile Introduction
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
 

Similar to Wheel.js

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Jeremy Likness
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
Ganesh Kondal
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
Chris Canal
 
The things we found in your website
The things we found in your websiteThe things we found in your website
The things we found in your website
hernanibf
 
Going Mobile with HTML5
Going Mobile with HTML5Going Mobile with HTML5
Going Mobile with HTML5
John Reiser
 
5 Common Mistakes You are Making on your Website
 5 Common Mistakes You are Making on your Website 5 Common Mistakes You are Making on your Website
5 Common Mistakes You are Making on your Website
Acquia
 

Similar to Wheel.js (20)

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
 
Edy Dawson Notes on SF HTML5 Dev Conf
Edy Dawson Notes on SF HTML5 Dev ConfEdy Dawson Notes on SF HTML5 Dev Conf
Edy Dawson Notes on SF HTML5 Dev Conf
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
The Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devicesThe Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devices
 
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...
 
Javascript for Wep Apps
Javascript for Wep AppsJavascript for Wep Apps
Javascript for Wep Apps
 
Building Mobile Web Apps with jQM and Cordova on Azure
Building Mobile Web Apps with jQM and Cordova on AzureBuilding Mobile Web Apps with jQM and Cordova on Azure
Building Mobile Web Apps with jQM and Cordova on Azure
 
Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)
 
Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a timeSugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_u
 
Drupal 7 - The Top 40 Core Modules and What They Mean for You
Drupal 7 - The Top 40 Core Modules and What They Mean for YouDrupal 7 - The Top 40 Core Modules and What They Mean for You
Drupal 7 - The Top 40 Core Modules and What They Mean for You
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
 
The things we found in your website
The things we found in your websiteThe things we found in your website
The things we found in your website
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
 
Going Mobile with HTML5
Going Mobile with HTML5Going Mobile with HTML5
Going Mobile with HTML5
 
5 Common Mistakes You are Making on your Website
 5 Common Mistakes You are Making on your Website 5 Common Mistakes You are Making on your Website
5 Common Mistakes You are Making on your Website
 

More from baccigalupi (6)

What the C?
What the C?What the C?
What the C?
 
Long Live the Rubyist
Long Live the RubyistLong Live the Rubyist
Long Live the Rubyist
 
Going Evergreen, RubyConf 2014
Going Evergreen, RubyConf 2014Going Evergreen, RubyConf 2014
Going Evergreen, RubyConf 2014
 
Diversity? Why? What? How?
Diversity? Why? What? How?Diversity? Why? What? How?
Diversity? Why? What? How?
 
Why you should build your own JS Frontend Framework
Why you should build your own JS Frontend FrameworkWhy you should build your own JS Frontend Framework
Why you should build your own JS Frontend Framework
 
A cool, clear drink of Ruby object persistence
A cool, clear drink of  Ruby object persistenceA cool, clear drink of  Ruby object persistence
A cool, clear drink of Ruby object persistence
 

Recently uploaded

Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial IntelligenceRevolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Precisely
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Recently uploaded (20)

AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial IntelligenceRevolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 

Wheel.js