The backend-of-frontend Drupaljam 2014

THE BACKENDOF FRONTEND

Marc van Gend

DrupalJam 2014

today, we're going to talk about

COOKINGOK. Not really.

first, let's talk about

YOU & MEShow of hands...

Who likes to cook?

Do you consider yourself a front-ender or themer?

Do you ever wonder which tools and libraries to use?

Marc van Gend (@marcvangend)Web developer at Triquanta, Amsterdam, NL

today, we're going to talk about

FRONT ENDDEVELOPMENT

Notepad

Front end development is changing rapidly.

dependencies (libraries)naming thingsinconsistencies (IE, anyone?)maintainability

SOLUTION?Install RubyInstall GemsInstall NodeJSInstall PackagesRun it

If it breaks... Install more.

SCARY STUFFLet's just stick with notepad?

Choose what works for you.

but seriously:

FRONTEND = COOKINGProcessing and combining ingredients in the right order.

INGREDIENTSHTMLCSSJavascript

FontsSVGFlash

BEING A FRONT ENDCHEF

Recipes … LibrariesUtensils … ToolsCuisine … Methodology

TODAY'S MENUMethodology, Tools & Libraries:

Stuff that works for meSome practical examplesAlternatives that work for othersA peek into the futureHow it's used in Drupal

METHODOLOGY (CUISINE)

HAVING A STRATEGY FOR QUALITY

QUALITYModularReusableUnderstandablePerformantCross-browser / Cross-device

HTML: SEMANTICMARKUP

Nothing new, but we're getting closer

HTML 5 adoption is increasing

CSS: GET ORGANIZEDOOCSS: Object Oriented CSSSmacss: Scalable and Modular Architecture for CSSBEM: Block, Element, Modifier

CSS: OOCSSAbstracting css into classes

.button { background: red; padding: 10px;}

<input type="submit" class="button">Submit</input><a class="button">Subscribe now</a>

Not very semantic, not Drupal friendly

Nicole Sullivan, http://www.stubbornella.org

CSS: BEMBlockElement ( __ )Modifier ( -- )

.menu {}

.menu__item {}

.menu__item--active {}

.block--collapsed__title {}

Still not Drupal friendly.

Yandex, http://bem.info

CSS: SMACSSBaseLayoutModuleStateTheme

Expect to see them in D8! (*.libraries.yml)

Jonathan Snook, http://www.smacss.com

JS: IT DEPENDSDeclaring asynchronously loading dependencies in your JS code

CommonJSAMD (Asynchronous Module Definition)

define(["jquery", "drupal"], function ($, Drupal) { Drupal.behaviors.myCustomBehavior = { attach: function (context, settings) { $('#my-element', context).doFunkyStuff(); }, };});

JS: FUTUREDrupal 8: *.libraries.yml

jquery.form: remote: https://github.com/malsup/form version: 3.39 js: assets/vendor/jquery-form/jquery.form.js: {} dependencies: - core/jquery - core/jquery.cookie

thanks _nod!

AMD in D9: drupal.org/node/1542344

TOOLS (UTENSILS)

UTENSILS DON'T END UP IN YOUR FOOD

SASS$drupal-blue: #0073ba;.drupal { color: $drupal-blue; a { color: darken($drupal-blue, 20%); }}

↧.drupal { color: #0073ba;}.drupal a { color: #003454;}

Reusable, maintainable, organized CSS.

SASS: FUTURE 3.3maps ("associative arrays")a more flexible parent selector ( & )the @at-root directive

Expect updated libraries!

SASS: ALTERNATIVESLessStylus

COFFEESCRIPT"Sass for JavaScript"

for i in [0..5] console.log "Hello #{i}"

↧(function() { var i; for (i = 0; i <= 5; i++) { console.log("Hello " + i); }}).call(this);

JSHINTDetect problems in JS code:

errorspotential errorscoding standards violationsoptimizations

GRUNTNodeJS based task runner:

sass / scss changed → compile CSS → trigger LiveReloadready for release → re-compile CSS → JSHint → minify JS

templates: { files: [ 'template.php', 'templates/**' ] }

GRUNT: ALTERNATIVESGuard, Like Grunt but Ruby

Gulp, faster than Grunteasier syntax

http://guardgem.org

http://gulpjs.com

BUNDLERDependency management for ruby gems.

gem 'bundler', '~>1.5.2'gem 'compass', '~>0.12.2'gem 'singularitygs', '~>1.1'gem 'breakpoint', '~>2.0'

Usage:

$ bundle exec compass watch

LIVERELOADAutomatically update your browserNo browser plugins when used with GruntEven works with IE9 in a VM!

function MYTHEME_css_alter(&$css) { // Force CSS to be added with link tags, rather than @import. // Otherwise, Chrome + inspector + livereload = crash. foreach ($css as $key => $value) { $css[$key]['preprocess'] = FALSE; }}

BUT WAIT, THERE'SMORE!

BOWERFront end package manager, http://bower.io

YEOMANScaffolding tool for webapps, http://yeoman.io

ASSETICSymfony's asset manager,

LIBRARIES (RECIPES)

TRIED AND TESTEDCOMBINATIONS OF INGREDIENTS

JQUERY...and plugins

...and jQueryUI

COMPASSLibrary of Sass mixins and extensions, .http://compass-style.org

create image spritescross-browser CSS

Ever wondered where Sass ends and Compass begins?

COMPASS: EXAMPLE.box-shadow { @include box-shadow(red 2px 2px 10px);}

↧.box-shadow { -webkit-box-shadow: red 2px 2px 10px; -moz-box-shadow: red 2px 2px 10px; box-shadow: red 2px 2px 10px;}

COMPASS: ALTERNATIVEBourbon, http://bourbon.io

COMPASS: FUTURECompass 1.0

SUSYA Sass-based semantic grid system, http://susy.oddbird.net

No more:

<div id="main" class="grid_6 prefix_2 suffix_4"> What if you have only 4 columns on mobile?</div>

SUSY: EXAMPLE$susy: ( columns: 7, gutters: 1/5,);#page { @include container(80em); }#main { @include span(last 5); }

SUSY: FUTURESusy 2 is here!

SUSY: ALTERNATIVESSingularity GS, Zen Grids, ...

http://singularity.gshttp://zengrids.com

BREAKPOINTEasy media queries with Sass, http://breakpoint-sass.com/

Used by grid systems like Susy and Singularity.

BREAKPOINT: EXAMPLE$breakpoint-medium: 500px;.foo { padding: 10px; @include breakpoint($breakpoint-medium) { padding: 20px; }}

↧.foo { padding: 10px; }@media (min-width: 500px) { .foo { padding: 20px; }}

MODERNIZRHTML5 and CSS3 feature detection, http://modernizr.com

Drupal 8: in core.

MODERNIZR: EXAMPLECSS:

.multiplebgs body { background: url(background-1.png) top left repeat-x, url(background-2.png) bottom left repeat-x;}

JS:

if (Modernizr.geolocation) { // Do geolocation stuff...}

BUT WAIT, THERE'SMORE!POLYFILLS

HTML5 shiv, - D8 coreRespond JS,

https://code.google.com/p/html5shivhttps://github.com/scottjehl/Respond

DATA VISUALIZATIONRaphaël JS, Processing JS,

http://raphaeljs.comhttp://processingjs.org

WAIT, THERE'S STILLMORE!

JS-BASED MVC FRAMEWORKSBackbone JS (& Underscore), - D8 coreAngular JS,

http://backbonejs.orghttp://angularjs.org

JS SCRIPT LOADERSRequire.js, Browserify, JS script loaders in D9: drupal.org/node/1033392

http://requirejs.orghttp://browserify.org

DRUPALCan I start using this tomorrow?

CLEAN(ER) MARKUPDo yourself a favor!

Fences, Display Suite, Certain base themesViews configuration

https://drupal.org/project/fenceshttps://drupal.org/project/ds

CLEAN(ER) MARKUP: FUTUREDrupal 8 says (drupal.org/node/1833912):

Use classes for css

<div class="highlight">I will be styled</div>

Use data attributes for JS.

<div data-animation="fade-in">I will be animated</div>

JQUERY UPDATETip: use 7.x-2.x-dev

includes 1.9 and 1.10different jQuery version for admin pages

BASE THEMESPre-configured best-practice powerhouses.

BASE THEMES: AURORAGrunt (opt-in)Bower (opt-in)BundlerLiveReloadSingularitysub theme scaffolding: Aurora Gemmaintained by Sam Richards (snugug, Singularity) and IanCarrico (ChinggizKhan)

BASE THEMES: OMEGAGrunt and GuardBowerBundler and RVMLiveReloadSusysub theme scaffolding: Drushmaintained by Sebastian Siemssen (fubhy) and Matt Smith(splatio)

MAGICCollaboration oof Aurora and Omega maintainers

Excluding core CSS/JS filesBackport of Drupal 8 JavaScript handlingModernizr indicatorMove Javascript to the footer

BREAKPOINTS & PICTUREResponsive images using the <picture> element (W3C

draft)

Tell Drupal about your breakpointsMap breakpoints to image stylesUse in a field formatterBackported from Drupal 8 (responsive_image)

PICTURE: EXAMPLE<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 18em)" srcset="medium.jpg"> <img src="small.jpg" alt="The picture element is fun."></picture>

WRAPPING UPThe jury is still out.

You can join the jury.

Just don't be scared.

THANK YOUfor being awesome

QUESTIONS?