Pushing the WebForward

Agenda

• jQuery Foundation
• Pointer Events
• Push API and SimplePush
• Questions

Member-supported non-profit

Started to support jQuery and its community

Continues to evolve

Humble Beginnings

John Resig’s PayPal account

Jan ’06 - Sep ’09

Software Freedom Conservancy

Sep ’09 - Feb ’12

The jQuery Foundation

Feb ’12 - Future

Our Vision

A world in which all web content is built on open standards and is accessible to all users.

Our Mission

To improve the open web, making it accessible for everyone, by collaborating with and providing tools for the development community.

To improve the open web, making it accessible for everyone, by collaborating with and providing tools for the development community.

An Open Web

Open web built on open standards

An Open Web

No royalties

An Open Web

Today or in the future

To improve the open web, making it accessible for everyone, by collaborating with and providing tools for the development community.

An Accessible Web

Web content should be available to everyone

An Accessible Web

Despite physical, mental, cognitive or technological disabilities

An Accessible Web

Assistive technologies, poor network connections, slow or old devices

To improve the open web, making it accessible for everyone, by collaborating with and providing tools for the development community.

Collaboration

Polymer: Pointer Events polyfill

Collaboration

Grunt: Contributing and maintaining plugins

Collaboration

Many others

To improve the open web, making it accessible for everyone, by collaborating with and providing tools for the development community.

The Tools

http://github.com/jquery

The Tools

The Tools

The Tools

The Tools

jQuery Migrate Plugin

The Tools

TestSwarm

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

The Tools

Sites

To improve the open web, making it accessible for everyone, by collaborating with and providing tools for the development community.

Community

Forums

Community

GitHub

Community

IRC

Community

Conferences all over the World

Community

Worldwide Team

Community

Brazil!

Pointer Events

What are they?

Abstract event system to work with any "pointer" on the screen

Pointer

Mouse

Finger

Stylus

Pen

History

July 2008: iPhone OS 2

Touch Events

History

February 2009: jQuery UI discusses support of touch events

History

December 2009: Touch events land in WebKit

History

July 2010: Firefox 4 Beta

Proprietary Touch Events

History

August 2010: jQuery Mobile Announced

Virtual Mouse Abstraction

History

October 2010: David Furfero releases Touch Punch

No configuration, adds touch support to jQuery UI

History

January 2011: Initial work on W3C Touch Events specification

History

March 2011: Firefox 4 released

Proprietary Touch Events

History

May 2011: Working Draft of W3C Touch Events specification

History

September 2011: IE10 Developer Preview

Proprietary Pointer Event System

History

November 2011: jQuery Mobile 1.0 Released

Supporting Mouse and WebKit Touch Events

History

November 2011: Apple discloses Touch Event patents

W3C working group delayed and Patent Advisory Group formed

History

November 2011: jQuery UI Interactions Abstraction

History

April 2012: Scott González blog post

Urging Microsoft to submit a Pointer Events proposal

History

September 2012: Microsoft submits Pointer Events proposal

Pointer Events working group formed

All browsers indicated support for this proposal ... except Apple and they still don't support it.

History

January 2013: Firefox 18 released

Finally removed proprietary touch event system

History

February 2013: Microsoft announces hand.js

History

March 2013: jQuery polyfill prototype

Special Event System / jQuery Specific

History

March 2013: jQuery and MS Open Tech

Discussing use of hand.js in jQuery

History

May 2013: Touch Events become W3C Proposed Recommendation

5 years after release in iPhone OS 2

History

May 2013: jquery-pointer-events repo created

Decided with MS Open Tech that jQuery specific implementation was better

History

June 2013: Too many polyfills being created

jQuery team, Polymer team and MS Open Tech decided the best route would be for the jQuery team to implement old IE support in Polymer's polyfill.

Click / Touch / MSPointer Support

The Old Way

                        
element.addEventListener( 'mousedown', onMouseDown, false );
element.addEventListener( 'mousemove', onMouseMove, false );
element.addEventListener( 'mouseup', onMouseUp, false );
element.addEventListener( 'touchstart', onTouchStart, false );
element.addEventListener( 'touchmove', onTouchMove, false );
element.addEventListener( 'touchend', onTouchEnd, false );
element.addEventListener( 'MSPointerDown', onPointerDown, false );
element.addEventListener( 'MSPointerMove', onPointerMove, false );
element.addEventListener( 'MSPointerUp', onPointerUp, false );
                        
                    

Click / Touch / MSPointer Support

The Pointer Event Way

                        
element.addEventListener( 'pointerdown', onPointerDown, false );
element.addEventListener( 'pointermove', onPointerMove, false );
element.addEventListener( 'pointerup', onPointerUp, false );
                        
                    

Less Code is Good!

Less things that can break

Less tests needed for coverage

It's Just Prettier

Use Pointer Events Now!

https://github.com/Polymer/PointerEvents

https://github.com/jquery/jquery-pointer-events

Push API

pushtalk.krisborchers.com

Messaging

Push vs Web Notifications

APNs (iOS, Safari*)

GCM (Android)

MPNS (Windows Phone)

Blackberry Push Service

SimplePush(Firefox OS / Android / Desktop)and more

Push API and SimplePush

Push API was Complicated

Enter Mozilla

Push API is "Simple"

SimplePush Client

SimplePush Server

Code

Registrations

                        
var regs = navigator.push.registrations();
                        
                    

Register

                        
var endpoint = navigator.push.register();
                        
                    

Unregister

                        
navigator.push.unregister( endpoint );
                        
                    

Receive Notification

                        
// Prefixed
navigator.mozSetMessageHandler("push", function( message ) { ... });

// AeroGear
navigator.setMessageHandler("push", function( message ) { ... });
                        
                    

SimplePush Client

                        
var SPC = AeroGear.SimplePushClient({
    simplePushServerURL: "URLToSimplePushServer",
    useNative: true,
    onConnect: function() {
        ...
    }
});
                        
                    

onConnect => Register

                        
onConnect: function() {
    var slideChangeRequest;

    slideChangeRequest = navigator.push.register();
    slideChangeRequest.onsuccess = function( event ) {
        UPC.registerWithPushServer({
            ...
            simplePushEndpoint: event.target.result
        });
    }
    ...
}
                        
                    

onConnect => Receive

                        
onConnect: function() {
    ...
    navigator.setMessageHandler( "push", function( message ) {
        var notification,
            auto = $("#autoSync").prop("checked");

        if ( navigator.mozNotification && document.hidden ) {
            notification = navigator.mozNotification.createNotification("Push Talk", "Speaker has advanced slide");
            ...
            notification.show();
        }

        if ( auto ) {
            syncSlide();
        }
    });

}
                        
                    

Thank you!

Kris Borchers @kborchers - Twitter kborchers - GitHub kris@jquery.com http://jquery.org