The backend-of-frontend Drupaljam 2014
-
Upload
triquanta -
Category
Technology
-
view
112 -
download
1
description
Transcript of The backend-of-frontend Drupaljam 2014
![Page 1: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/1.jpg)
THE BACKENDOF FRONTEND
Marc van Gend
DrupalJam 2014
![Page 2: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/2.jpg)
today, we're going to talk about
COOKINGOK. Not really.
![Page 3: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/3.jpg)
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
![Page 4: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/4.jpg)
today, we're going to talk about
FRONT ENDDEVELOPMENT
Notepad
Front end development is changing rapidly.
dependencies (libraries)naming thingsinconsistencies (IE, anyone?)maintainability
![Page 5: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/5.jpg)
SOLUTION?Install RubyInstall GemsInstall NodeJSInstall PackagesRun it
If it breaks... Install more.
![Page 6: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/6.jpg)
SCARY STUFFLet's just stick with notepad?
Choose what works for you.
![Page 7: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/7.jpg)
but seriously:
FRONTEND = COOKINGProcessing and combining ingredients in the right order.
![Page 8: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/8.jpg)
INGREDIENTSHTMLCSSJavascript
FontsSVGFlash
![Page 9: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/9.jpg)
BEING A FRONT ENDCHEF
Recipes … LibrariesUtensils … ToolsCuisine … Methodology
![Page 10: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/10.jpg)
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
![Page 11: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/11.jpg)
METHODOLOGY (CUISINE)
HAVING A STRATEGY FOR QUALITY
![Page 12: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/12.jpg)
QUALITYModularReusableUnderstandablePerformantCross-browser / Cross-device
![Page 13: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/13.jpg)
HTML: SEMANTICMARKUP
Nothing new, but we're getting closer
HTML 5 adoption is increasing
![Page 14: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/14.jpg)
CSS: GET ORGANIZEDOOCSS: Object Oriented CSSSmacss: Scalable and Modular Architecture for CSSBEM: Block, Element, Modifier
![Page 15: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/15.jpg)
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
![Page 16: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/16.jpg)
CSS: BEMBlockElement ( __ )Modifier ( -- )
.menu {}
.menu__item {}
.menu__item--active {}
.block--collapsed__title {}
Still not Drupal friendly.
Yandex, http://bem.info
![Page 17: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/17.jpg)
CSS: SMACSSBaseLayoutModuleStateTheme
Expect to see them in D8! (*.libraries.yml)
Jonathan Snook, http://www.smacss.com
![Page 18: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/18.jpg)
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(); }, };});
![Page 19: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/19.jpg)
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
![Page 20: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/20.jpg)
TOOLS (UTENSILS)
UTENSILS DON'T END UP IN YOUR FOOD
![Page 21: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/21.jpg)
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.
![Page 22: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/22.jpg)
SASS: FUTURE 3.3maps ("associative arrays")a more flexible parent selector ( & )the @at-root directive
Expect updated libraries!
![Page 23: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/23.jpg)
SASS: ALTERNATIVESLessStylus
![Page 24: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/24.jpg)
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);
![Page 25: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/25.jpg)
JSHINTDetect problems in JS code:
errorspotential errorscoding standards violationsoptimizations
![Page 26: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/26.jpg)
GRUNTNodeJS based task runner:
sass / scss changed → compile CSS → trigger LiveReloadready for release → re-compile CSS → JSHint → minify JS
templates: { files: [ 'template.php', 'templates/**' ] }
![Page 27: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/27.jpg)
GRUNT: ALTERNATIVESGuard, Like Grunt but Ruby
Gulp, faster than Grunteasier syntax
http://guardgem.org
http://gulpjs.com
![Page 28: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/28.jpg)
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
![Page 29: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/29.jpg)
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; }}
![Page 30: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/30.jpg)
BUT WAIT, THERE'SMORE!
BOWERFront end package manager, http://bower.io
YEOMANScaffolding tool for webapps, http://yeoman.io
ASSETICSymfony's asset manager,
![Page 31: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/31.jpg)
LIBRARIES (RECIPES)
TRIED AND TESTEDCOMBINATIONS OF INGREDIENTS
![Page 32: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/32.jpg)
JQUERY...and plugins
...and jQueryUI
![Page 33: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/33.jpg)
COMPASSLibrary of Sass mixins and extensions, .http://compass-style.org
create image spritescross-browser CSS
Ever wondered where Sass ends and Compass begins?
![Page 34: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/34.jpg)
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;}
![Page 36: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/36.jpg)
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>
![Page 37: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/37.jpg)
SUSY: EXAMPLE$susy: ( columns: 7, gutters: 1/5,);#page { @include container(80em); }#main { @include span(last 5); }
![Page 38: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/38.jpg)
SUSY: FUTURESusy 2 is here!
SUSY: ALTERNATIVESSingularity GS, Zen Grids, ...
http://singularity.gshttp://zengrids.com
![Page 39: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/39.jpg)
BREAKPOINTEasy media queries with Sass, http://breakpoint-sass.com/
Used by grid systems like Susy and Singularity.
![Page 40: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/40.jpg)
BREAKPOINT: EXAMPLE$breakpoint-medium: 500px;.foo { padding: 10px; @include breakpoint($breakpoint-medium) { padding: 20px; }}
↧.foo { padding: 10px; }@media (min-width: 500px) { .foo { padding: 20px; }}
![Page 41: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/41.jpg)
MODERNIZRHTML5 and CSS3 feature detection, http://modernizr.com
Drupal 8: in core.
![Page 42: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/42.jpg)
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...}
![Page 43: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/43.jpg)
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
![Page 44: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/44.jpg)
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
![Page 45: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/45.jpg)
DRUPALCan I start using this tomorrow?
![Page 46: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/46.jpg)
CLEAN(ER) MARKUPDo yourself a favor!
Fences, Display Suite, Certain base themesViews configuration
https://drupal.org/project/fenceshttps://drupal.org/project/ds
![Page 47: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/47.jpg)
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>
![Page 48: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/48.jpg)
JQUERY UPDATETip: use 7.x-2.x-dev
includes 1.9 and 1.10different jQuery version for admin pages
![Page 49: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/49.jpg)
BASE THEMESPre-configured best-practice powerhouses.
![Page 50: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/50.jpg)
BASE THEMES: AURORAGrunt (opt-in)Bower (opt-in)BundlerLiveReloadSingularitysub theme scaffolding: Aurora Gemmaintained by Sam Richards (snugug, Singularity) and IanCarrico (ChinggizKhan)
![Page 51: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/51.jpg)
BASE THEMES: OMEGAGrunt and GuardBowerBundler and RVMLiveReloadSusysub theme scaffolding: Drushmaintained by Sebastian Siemssen (fubhy) and Matt Smith(splatio)
![Page 52: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/52.jpg)
MAGICCollaboration oof Aurora and Omega maintainers
Excluding core CSS/JS filesBackport of Drupal 8 JavaScript handlingModernizr indicatorMove Javascript to the footer
![Page 53: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/53.jpg)
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)
![Page 54: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/54.jpg)
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>
![Page 55: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/55.jpg)
WRAPPING UPThe jury is still out.
You can join the jury.
Just don't be scared.
![Page 56: The backend-of-frontend Drupaljam 2014](https://reader034.fdocuments.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/56.jpg)
THANK YOUfor being awesome
QUESTIONS?