Date post: | 27-Jan-2015 |
Category: |
Technology |
Upload: | triquanta |
View: | 109 times |
Download: | 1 times |
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;}
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?