Javascript Pulp Fiction

PULPPULPFICTIONFICTION

Théodore 'nod_' BIADALA

Core JS maintainerTechnical consultant at Acquia

PULPPULPFICTIONFICTION

Théodore 'nod_' BIADALA

Core JS maintainerTechnical consultant at Acquia

Drupal Dev Days SZEGED 2014

PULPPULPFICTIONFICTION

Frontend developers&

Drupal's theme layer

HTML/CSS dev

JS dev

Don't you remove 'views-group-title' class

Custom HTML?

Divitis

Classitis

It's not that bad for the JS developer

Use data- attributes for everything JS$('[data-drupal-progress]').once('butch');

// JS

var $el = $(context).find('#mydiv');

var $el = context.querySelector('[data-mydiv]');

// PHP

$element['#attributes']['data-mydiv'] = TRUE;

// HTML

<div data-mydiv class='whatever themers want'>

TWIG

Drupal 8 frontend

The gold feature

Frontend testing,it's been well hidden

JS Patching

Core team is scared of frontend getting broken all the time.

Help.

The overlay situation

Overlay module

Look!I wrote 10 lines of JS!

Oups.

Bojhan'sUX napkin

Angry user

meh. Good coffee though

Follow UX core gateand I'll commit your patch

UX Team

They solve problems

Cue months of UX testing

And some clean-up

Tests went well, all wrapped up for commit

Overlay, 'Like it never happened'

Coffee issessionStorage

// escapeAdmin.js

var winLoc = window.location;var store = sessionStorage;var pathInfo = drupalSettings.path;var isAdminPath = pathInfo.currentPathIsAdmin;var dest = /destination=/.test(winLoc.search);

var adminPath = store.getItem('escapeAdminPath');

if (!isAdminPath && !destination) { store.setItem('escapeAdminPath', winLoc);}

Drupal.behavior = { attach: function () { $('[data-toolbar-escape-admin]') .once('escapeAdmin') .attr('href', adminPath); }};

Extras

Jules on IE8 support

Butch on variables taking a leak in his global scope

Butch on people not using JSHint

Butch on people not using*.libraries.yml to declare dependencies

// mymodule.libraries.yml

tip: js: js/tooltip.js: {} js/tooltip.effects.js: { scope: 'footer' } css: # Use SMACSS categories component: css/tooltip.css: {} dependencies: - core/drupal - core/jquery - core/drupalSettings

// Somewhere in the PHP

$el['#attached']['libraries'][] = 'mymodule/tip';

Vincent & Jules on drupal_add_js() & drupal_add_css()

Marcellus on outdated JS libraries

Jimmie & The Wolf on using jQuery

Drupal 8 FTW!

Questions?

nod_theodore.biadala at acquia.com