WET 4.0 Plugin Migration

Vapour Plugin Design

By Pierre Dubois / @duboi5p

Vapour Objective

  • Responsive Design
  • Performance
  • Use Native Technology
  • Plugin Offload
  • WCAG 2.0 Level AA

Responsive Design

  • Mobile First Design
  • Adaptable
  • Small, Medium and Large design

Performance

  • Limited Bandwidth Device
  • Limited Network Speed
  • Plugin Optimization

Use Native Technology

  • HTML 5 - Polyfill
  • CSS 3 - Animation
  • ECMA Script - Shims

Plugin Offload

  • JEP - Javascript Event Programing
  • HTML - User Interaction - Custom
  • Test Performance by re-writting existing code

WCAG 2.0 Level AA

  • WET Foundation
  • Progressive Enhancement
  • Perform Assessment and Partial Evaluation

JEP Overview


jQuery(function($) {
  $.ajaxSettings.cache = false;
  $(document).on("wb.timerpoke", "[data-ajax-replace]", function(event) {
    var _elm, _url;
    _elm = $(this);
    _url = _elm.data("ajax-replace");
    _elm.load(_url, function() {
      return $(this).trigger("wb.ajax-replace-loaded");
    });
    window._timer.remove("[data-ajax-replace]");
    return void 0;
  });
  return window._timer.add("[data-ajax-replace]");
});

jQuery(function($) {
  $(document).on("wb.ajax-replace-loaded", ".wb-menu", function(event) {
    var _elm, _wlist;
    _elm = $(this);
    _wlist = _elm.find("li:has(.drp-dwn)");
    _wlist.find("> :header").addClass("wb-tle-lnk").append("<span class=\"expandicon\"></span>");
    return _wlist.attr("aria-haspopup", "false").attr("role", "presentation");
  });
  $(document).on("mouseenter focusin", ".wb-menu li:has(.drp-dwn)", function(event) {
    var _elm;
    _elm = $(this);
    _elm.parents(".wb-menu").first().find("[aria-haspopup]").attr("aria-haspopup", "false");
    return _elm.attr("aria-haspopup", "true");
  });
  return $(document).on("mouseleave focusout", ".wb-menu", function(event) {
    var _elm;
    _elm = $(this);
    return _elm.find("[aria-haspopup]").attr("aria-haspopup", "false");
  });
});

Think Performance


// Faster: single event handler for both events
$('#elem').on('mouseover mouseout', function(event) {
  if (event.type === 'mouseover') {
    // mouseover
  } else {
    // mouseout
  }
});

// Slower: separate event handler for each events
$('#elem').on('mouseover', function() {
  // mouseover
});
$('#elem').on('mouseout', function() {
  // mouseout
});

Presentation

Avoid to use JS for styling

  • Use CSS for layout
  • Use CSS for animation
  • Use CSS for decoration

Be Native

  • HTML 5 Semantics
  • ECMA-262 Edition 5.1
  • W3C Specification

HTML

ECMA-262

Javascript

W3C Specification

All Standards and Drafts

Events

  • DOM Events
  • HTML Events
  • CSS Events
  • Others Standardized Events
  • Custom Events

DOM Events

DOM Level 3 Events Specification

  • User Interface
  • Focus
  • Mouse
  • Wheel
  • Keyboard
  • Composition
  • Mutation
  • Extending Events

User Interface

  • DOMActivate event
  • load event
  • unload event
  • abort event
  • error event
  • select event
  • resize event
  • scroll event

Focus

  • blur event
  • DOMFocusIn event
  • DOMFocusOut event
  • focus event
  • focusin event
  • focusout event

Mouse

  • click event
  • dblclick event
  • mousedown event
  • mouseenter event
  • mouseleave event
  • mousemove event
  • mouseover event
  • mouseout event
  • mouseup event

Others

Wheel, Keyboard, Composition, Mutation

  • wheel event
  • keydown event
  • keypress event
  • keyup event
  • compositionstart event
  • compositionupdate event
  • compositionend event
  • DOMAttrModified event
  • DOMCharacterDataModified event
  • DOMNodeInserted event
  • DOMNodeInsertedIntoDocument event
  • DOMNodeRemoved event
  • DOMNodeRemovedFromDocument event
  • DOMSubtreeModified event

HTML Events

Index Events

CSS Events

pseudo-classes

  • :hover
  • :focus
  • :touch-action
  • :enabled
  • :disabled
  • :checked
  • :indeterminate

Others Standardized Events

Custom Events

wb.timerpoke

$(document).on("wb.timerpoke", "[data-ajax-replace]", function(event) {
$(document).on("wb.timerpoke", ".wb-carousel", function(event) {
[...]
	_sldr.trigger("carousel.init.wb");
[...]
$(document).on("carousel.init.wb", ".wb-carousel", function(event) {

Plugin Example

Plugin Optimization

  • Minimize the use of jQuery
  • Optimize your loops
  • if/else vs. switch statement
  • Use Object Caching
  • Minimize reflow

Optimization on wet-boew wiki

Vapour Plugin Design

WET + Heat = Vapour

  • Optimize
  • Offload
  • Responsive Design

WET 4.0 Performance Requirement

WET 4.0 planning issue

  • Page load 2-5 seconds
  • Page weight 200-500 kB

Example

Take a look Migration TODO List

Archive online Plugin

Question?

Presentation made by Pierre Dubois (@duboi5p)