The backend-of-frontend Drupaljam 2014
•
0 recomendaciones•1,614 vistas
Presentatie van Marc van Gend over de tools die gebruikt kunnen worden bij frontend ontwikkeling. Denk hierbij aan Sass, Compass, Grunt, Less, JSlint etc. Deze presentatie is gegeven op DRupaljam 2014 en Drupal Dev Days 2014.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (18)
Similar a The backend-of-frontend Drupaljam 2014
Similar a The backend-of-frontend Drupaljam 2014 (20)
Más de Triquanta
Último
Último (20)
The backend-of-frontend Drupaljam 2014
- 1. THE BACKEND OF FRONTEND Marc van Gend DrupalJam 2014
- 2. today, we're going to talkabout COOKING OK. Notreally.
- 3. first, let's talkabout YOU & ME Show 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 atTriquanta, Amsterdam, NL
- 4. today, we're going to talkabout FRONT END DEVELOPMENT Notepad Frontend developmentis changing rapidly. dependencies (libraries) naming things inconsistencies (IE, anyone?) maintainability
- 5. SOLUTION? InstallRuby InstallGems InstallNodeJS InstallPackages Run it If itbreaks... Installmore.
- 6. SCARY STUFF Let's juststick with notepad? Choose whatworks for you.
- 7. butseriously: FRONTEND = COOKING Processing and combining ingredients in the rightorder.
- 9. BEING A FRONT END CHEF Recipes … Libraries Utensils … Tools Cuisine … Methodology
- 10. TODAY'S MENU Methodology, Tools &Libraries: Stuff thatworks for me Some practicalexamples Alternatives thatwork for others Apeek into the future How it's used in Drupal
- 11. METHODOLOGY (CUISINE) HAVING A STRATEGY FOR QUALITY
- 13. HTML: SEMANTIC MARKUP Nothing new, butwe're getting closer HTML5 adoption is increasing
- 14. CSS: GET ORGANIZED OOCSS:ObjectOriented CSS Smacss:Scalable and Modular Architecture for CSS BEM:Block, Element, Modifier
- 15. CSS: OOCSS Abstracting css into classes .button{ background:red; padding:10px; } <inputtype="submit"class="button">Submit</input> <aclass="button">Subscribenow</a> Notverysemantic, notDrupalfriendly Nicole Sullivan, http://www.stubbornella.org
- 16. CSS: BEM Block Element( __) Modifier ( --) .menu{} .menu__item{} .menu__item--active{} .block--collapsed__title{} StillnotDrupalfriendly. Yandex, http://bem.info
- 17. CSS: SMACSS Base Layout Module State Theme Expectto see them in D8!(*.libraries.yml) Jonathan Snook, http://www.smacss.com
- 18. JS: IT DEPENDS Declaring asynchronouslyloading dependencies in your JS code CommonJS AMD (Asynchronous Module Definition) define(["jquery","drupal"],function($,Drupal){ Drupal.behaviors.myCustomBehavior={ attach:function(context,settings){ $('#my-element',context).doFunkyStuff(); }, }; });
- 19. JS: FUTURE Drupal8: *.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
- 20. TOOLS (UTENSILS) UTENSILS DON'T END UP IN YOUR FOOD
- 22. SASS: FUTURE 3.3 maps ("associative arrays") a more flexible parentselector ( &) the @at-rootdirective Expectupdated libraries!
- 25. JSHINT Detectproblems in JS code: errors potentialerrors coding standards violations optimizations
- 26. GRUNT NodeJS based task runner: sass /scss changed → compile CSS → trigger LiveReload readyfor release → re-compile CSS → JSHint→ minifyJS templates:{ files:[ 'template.php', 'templates/**' ] }
- 27. GRUNT: ALTERNATIVES Guard, Like GruntbutRuby Gulp, faster than Grunt easier syntax http://guardgem.org http://gulpjs.com
- 29. LIVERELOAD Automaticallyupdate your browser No browser plugins when used with Grunt Even works with IE9 in a VM! functionMYTHEME_css_alter(&$css){ //ForceCSStobeaddedwithlinktags,ratherthan@import. //Otherwise,Chrome+inspector+livereload=crash. foreach($cssas$key=>$value){ $css[$key]['preprocess']=FALSE; } }
- 30. BUT WAIT, THERE'S MORE! BOWER Frontend package manager, http://bower.io YEOMAN Scaffolding toolfor webapps, http://yeoman.io ASSETIC Symfony's assetmanager,
- 31. LIBRARIES (RECIPES) TRIED AND TESTED COMBINATIONS OF INGREDIENTS
- 33. COMPASS Libraryof Sass mixins and extensions, .http://compass-style.org create image sprites cross-browser CSS Ever wondered where Sass ends and Compass begins?
- 35. COMPASS: ALTERNATIVE Bourbon, http://bourbon.io COMPASS: FUTURE Compass 1.0
- 36. SUSY ASass-based semantic grid system, http://susy.oddbird.net No more: <divid="main"class="grid_6prefix_2suffix_4"> Whatifyouhaveonly4columnsonmobile? </div>
- 38. SUSY: FUTURE Susy2 is here! SUSY: ALTERNATIVES SingularityGS, Zen Grids, ... http://singularity.gs http://zengrids.com
- 39. BREAKPOINT Easymedia queries with Sass, http://breakpoint-sass.com/ Used bygrid systems like Susyand Singularity.
- 41. MODERNIZR HTML5 and CSS3 feature detection, http://modernizr.com Drupal8:in core.
- 43. BUT WAIT, THERE'S MORE! POLYFILLS HTML5 shiv, - D8 core Respond JS, https://code.google.com/p/html5shiv https://github.com/scottjehl/Respond DATA VISUALIZATION RaphaëlJS, Processing JS, http://raphaeljs.com http://processingjs.org
- 44. WAIT, THERE'S STILL MORE! JS-BASED MVC FRAMEWORKS Backbone JS (&Underscore), - D8 core Angular JS, http://backbonejs.org http://angularjs.org JS SCRIPT LOADERS Require.js, Browserify, JS scriptloaders in D9:drupal.org/node/1033392 http://requirejs.org http://browserify.org
- 45. DRUPAL Can I startusing this tomorrow?
- 46. CLEAN(ER) MARKUP Do yourself a favor! Fences, DisplaySuite, Certain base themes Views configuration https://drupal.org/project/fences https://drupal.org/project/ds
- 47. CLEAN(ER) MARKUP: FUTURE Drupal8 says (drupal.org/node/1833912): Use classes for css <divclass="highlight">Iwillbestyled</div> Use data attributes for JS. <divdata-animation="fade-in">Iwillbeanimated</div>
- 48. JQUERY UPDATE Tip:use 7.x-2.x-dev includes 1.9 and 1.10 differentjQueryversion for admin pages
- 49. BASE THEMES Pre-configured best-practice powerhouses.
- 50. BASE THEMES: AURORA Grunt(opt-in) Bower (opt-in) Bundler LiveReload Singularity sub theme scaffolding:Aurora Gem maintained bySam Richards (snugug, Singularity) and Ian Carrico (ChinggizKhan)
- 51. BASE THEMES: OMEGA Gruntand Guard Bower Bundler and RVM LiveReload Susy sub theme scaffolding:Drush maintained bySebastian Siemssen (fubhy) and MattSmith (splatio)
- 52. MAGIC Collaboration oof Aurora and Omega maintainers Excluding core CSS/JS files Backportof Drupal8 JavaScripthandling Modernizr indicator Move Javascriptto the footer
- 53. BREAKPOINTS & PICTURE Responsive images using the <picture>element(W3C draft) TellDrupalaboutyour breakpoints Map breakpoints to image styles Use in a field formatter Backported from Drupal8 (responsive_image)
- 55. WRAPPING UP The juryis stillout. You can join the jury. Justdon'tbe scared.
- 56. THANK YOU for being awesome QUESTIONS?