jQuery Trends and Best Practices: Keynotes and Workshops
Table of Contents
- About
- Day 1
- Day 2
- Foundation Members: Breakfast Reception
- jQuery UI and jQuery Mobile Keynote
- Beyond DOM Manipulation: Building Stateful Modules with Promises and Events
- Making Modular jQuery Plugins with the jQuery UI Widget Factory, Grunt, and DownloadBuilder.js
- BUGWILD, or, RESOLVED INCOMPLETE WORKSFORME WONTFIX
- Building Modular Web Applications: How To Build a Good Component
- If You Love It So Much, Why Don't You Write a Wrapper Around It?
- Home-growing Top-Notch Developers
- Tasks
About
Day 1
jQuery Keynote, Dave Methvin
- Upgrade issues with 1.9 and 2.0: live(), browser
- browser sniffing and root cause
- MSIE 11 won't even have MSIE in the query string
- "IE like Gecko"
- New releases provided in January and April (http://blog.jquery.com/2013/04/18/jquery-2-0-released/)
- Some build subsets include AMD wrappers
- IE10 now follows the Chrome update model; should pull down the number of IE9 users in 6m
- XP deprecated by April 2013
- Old Android browsers remain an issue (i.e., Gingerbread, Froya, Eclair): Icecream Sandwich needs to become the default
http://trends.builtwith.com/javascript/jQuery
- Splunk
- Appnexus
jQuery UI Widgets vs. HTML5
- Look at overlapping functionality
- Form control stagnation led to jQuery UI, Dojo, Mootools
- Date picker is the most popular of all widgets
- Date picker => type=date
- Form validation against dates (e.g., leap year) native in browser is a significant cost reduction (e.g., developer time, updates, testing)
- Autosuggest vs. datalist
- Selector UI modifications non-trivial even with new native
- jQuery UI still has the UI/CSS bleed issue designed to be addressed with Web Components
- Use the Show Shadow DOM option in Chrome to find the selector names for the id of the form control (e.g., webkit-datetime-edit
- Number picker native has partial support for min max
- Recommendation: use Modernizr then polyfill with jQuery UI component
- Long-term this looks like there would be a shadow DOM attached to the input element (aka, new "shadow root")
Widening your JavaScript Application: Organizational Tips from the (Front End) Front Line
- Breakdown of site types and "leveling up" on the type of organizational styles
Hackathon
- CI
- Saucelabs
- AMD
- ADD (automating CI integration)
Depending on jQuery
Covers some of the patterns for how projects grow in size: start with jQuery then move to plugins then additional page or site dependencies.
- Inline <script> calls with dependency
- AMD modules
define('child', ['mom', 'dad'], function(mom, dad) { return mom + dad; });
- jQuery define.amd is supported
- define, require, require.config + shime of export and deps
- Covers some of the core cases covered by Grunt or `cat; ugligy`
- Plugin work could actually require the shim with the dependency note with a depency on jQuery
require([jquery', '$fn!jwalsy/plugin'], function() {});
- What is a plugin? text!, template!
require(['text!diary.txt'], function(diary) { alert(diary); });
- tl;dr: when starting an app get requre.js first
Look again at
Building ADD
- Reduce CI time to first build
- http://about.travis-ci.org/docs/user/languages/javascript-with-nodejs/
Single-page
- SEO-dependant + low interactivity => noop
- Recommended Brunch or Yeoman
- Brunch does AMD wrapping by default
- Structured use of EventEmitter for communication between events with defined states
The Future of Selectors
http://timmywil.github.io/reveal.js/#/intro
- getElementsBySelector
- prototype
- cssQuery (04/05)
- jSelect
- jQuery -> Moototo
- querySelectorAll doesn't do what any library author would expect after proving a baseline selection
- :matches()
- Reference combinators (labels + inputs):
label:matches(:hover) /for/ input
- case-insensitive attributes
- subject select using "!" in the path to the nexted selector
- :scope performs what would be considered the default behavior
- find and findAll will behave in a manner similar
Writing High-Integrity JavaScript
- Examples of the dager of the malleability of JavaScript with Date.parse with isNaN; contrast DateJS
- Libraries should not lock down the environment that applications own; https://npmjs.org/package/ses
- High integrity: using or writing third party, or regulation driven environment
- "Leave the environmetn in a state that functions observably identially to the way it did when we got access to it."
Object.creaet(null); Ojbect.defineProperty( A, 'foo', { get: function() { return 'foo'; }, set: function() { } }); // Consider the following for storing built-ins function eachKey(o, cb) { for (var k in o) { cb(k, o[k], o.hasOwnProperty(k)) } } // Function.prototype.bind.bind()
- Some generic ES5 bind() and object support
- Storing built-ins (likely not necessary for the BK implementation)
- What is the risk associated with the possiblity of changes in things like Array, Object, Date
- pluck() example with Array-like object such as NodeList requires store a built-in, convert to stored function, then apply with call: uncurrying or converting methods to functions; currying with bind() swaps the call ordering of the function (when applied with call()).
- kill prootype by create(null)
- Privacy: ES6 this@name is assumed to be private
- No class private variables: BankAccount exists for Jane (200) and Tim (800) and Tim.deposit(Jane, 200) -> https://github.com/Nathan-Wall/Secrets
- Compatible with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap
- Attacker receives a list that then changes the set in Array via pop() to be a new function; or define a 0 property on the
After-party
Day 2
Foundation Members: Breakfast Reception
- Karl and
jQuery UI and jQuery Mobile Keynote
Beyond DOM Manipulation: Building Stateful Modules with Promises and Events
Making Modular jQuery Plugins with the jQuery UI Widget Factory, Grunt, and DownloadBuilder.js
Decompose Widget build
This is the base setup for the grunt.js that will use requirejs for the build with the widget factory.
- create options.js
- create _create.js
BUGWILD, or, RESOLVED INCOMPLETE WORKSFORME WONTFIX
Building Modular Web Applications: How To Build a Good Component
If You Love It So Much, Why Don't You Write a Wrapper Around It?
Home-growing Top-Notch Developers
Tasks
- Need to push to get the CI and Saucelabs integration working as a higher priority
- Need to extend the core functionality provided by AMD / RequireJS to further simplify core.js
- Look at the use case for wrapping AMD loaders for sites that support it, allow base-main for the RequireJS loader
if (typeof define === 'function') { define('BKTAG', [], function() {} ); }
- Big push for modules
- Provide training on the Grunt and RequireJS setup internally
- Change the narrative during tech events to focus on Third-party JavaScript -> Tag Management (isolation and centralization of widgets, improved separation of concerns between marketing and web teams) -> DMP (UI components for audience targeting)