Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Drupal 8 - Corso frontend development

Wird geladen in …3

Hier ansehen

1 von 87 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Drupal 8 - Corso frontend development (20)


Weitere von sparkfabrik (20)

Aktuellste (20)


Drupal 8 - Corso frontend development

  1. 1. Drupal 8 frontend development for dummies
  2. 2. Exausted? Almost done…* *only 2 more hours
  3. 3. Andrea Panisson… Who? I work in as frontend developer. I care UI, IA, Drupal Theming and I care about clients.
  4. 4. What’s new in Drupal 8 for themers D7  PHPTemplate  Theme functions + template files  Structured markup in core and ‘hardcoded’ classes  HTML D8  Twig  Template files  Minimal markup and classes in core  HTML5 in core
  5. 5. Twig? Twig is a modern PHP-based compiled templating language.
  6. 6. What's new in Drupal 8 for themers & the Twig template engine.
  7. 7.  PHPtemplate  theme functions  markup in core Farewell to
  8. 8. Welcome to  No more markup in core  All through template files  HTML5  Twig
  9. 9. All through template files
  10. 10. Twig: what & why What?  A template engine for PHP Why?  Twig was created by people behind Synfony2  Synfony2 was integrated in Drupal 8 core
  11. 11. Twig was chosen because it was the best choice after comparing various templating languages. "… We don't have Twig because we have Symfony. It's more that, we have Twig because it's AWESOME" - Scott Reeves, @Cottser “Twig…because it's AWESOME”
  12. 12. But why abandoning PHPtemplate? 1. Syntax 2. Inconsistency 3. Complexity 4. Redundancy 5. Security
  13. 13. “Twig…because it's AWESOME” Mixed data types in template files
  14. 14. #1. D8 syntax: TWIG All variables are printed the same way
  15. 15. #2. Inconsistency D7different ways to do the same thing:  Template files or Theme functions.  Theme functions or render arrays D8  Only template files  Only render arrays
  16. 16. #3. D7: complexity Drupal 7 was funny!
  17. 17. #3. D8: less complexity D8 is boring!
  18. 18. #4. D7: redundancy There's a lot of duplicated code in themes, we often have multiple files with the same lines of code.
  19. 19. #4. D8: less redundancy No need to repeat code between templates, we can extend templates with Twig.
  20. 20. #5. Security D7 In a PHPTemplate file you can print all sort of unsanitized data, even delete a table from your DB. D8 In Twig this is not possible, Twig's autoescape feature is enabled by default.
  21. 21. TWIG: no more conflict backend - frontend They are now separated!
  22. 22. TWIG: easy to learn!
  23. 23. Twig: syntax
  24. 24. Twig: no more var drilling Drupal 7 and PHPtemplate Drupal 8 and Twig
  25. 25. Twig: functions (filters)
  26. 26. Twig: |Functions (filters)
  27. 27. Twig: translate
  28. 28. Twig: controls
  29. 29. Twig: loops
  30. 30. Twig: setting vars
  31. 31. Twig: blocks page.html.twig
  32. 32. Twig: blocks page--front.html.twig
  33. 33. Twig: includes Template files are reusable, thanks to Twig includes http://twig.sensiolabs.org/doc/tags/include.html {% include “footer.html.twig" %} Or using namespaces: {% include “@my_theme/partials/footer.html.twig" %}
  34. 34. Twig coding standard (T.c.s.)  Generic Twig coding standards: http://twig.sensiolabs.org/doc/coding_standards.html  Twig in Drupal coding standards: http://drupal.org/node/1823416
  35. 35. T.c.s. - HTML attributes In Drupal core, we will print only the class attribute specially, all the others will be printed as part of {{ attributes }}. The reason for this is that it needs to be very easy for front end developers to be able to add a class, anywhere
  36. 36. T.c.s. - Whitespaces
  37. 37. T.c.s. - Comments  Singleline:  Multiline
  38. 38. Twig docs twig.sensiolabs.org
  39. 39. And so, Twig advantages:  a clear separation between the logic and the view  no more PHP code inside your template files  it's not only used in Drupal core, so it's not a Drupaly-thing
  40. 40. and Twig disadvantages: thing to learn
  41. 41. YAML Yet Another Markup Language* * YAML Ain't Markup Language "YAML is a human friendly data serialization standard for all programming languages." -yaml.org Pronounced “yamel” (rhymes with camel).
  42. 42. YAML sites/default/services.yml
  43. 43. Why YAML?  YAML is both human editable and machine readable.  .yml files are not Drupal specific like .info files. And why not XML?  XML would require a Drupal specific schema. Or JSON?  JSON doesn't allow comments.  Non-ASCII characters require escaping in JSON.
  44. 44. Theme folder structure The directory structure of Drupal 8 has changed! https://www.drupal.org/node/2349803
  45. 45. Location of themes
  46. 46. /themes For themes that should be available to all sites. /sites/{site}/themes For themes that should be available on a specific site (on a multisite installation). Location of themes
  47. 47. Theme folder structure
  48. 48. Most common theme files *.info.yml *.libraries.yml *.breakpoints.yml *.theme Theme folder structure: https://www.drupal.org/node/2349803
  49. 49. *.info.yml (ex *.info)  A theme must contain an .info.yml file to define the theme.  Among other things the .info.yml files defines meta data, style sheets, and block regions.  This is the only required file in the theme.
  50. 50. *.libraries.yml  The .libraries.yml file is used to define JavaScript and CSS libraries that can be loaded by the theme.  A library as a collection of CSS and JS.
  51. 51. *.libraries.yml Libraries are called in the info file: and defined in the *.libraries.yml file:
  52. 52. *.breakpoints.yml  Breakpoints define where a responsive design needs to change in order to respond to different devices.  Breakpoints are defined in a .breakpoints.yml file
  53. 53. *.theme (ex template.php)  The .theme file is a PHP file that contains all the conditional logic and data (pre)processing of the output.
  54. 54. The theme layer
  55. 55. The new theme layer
  56. 56. Bye bye theming functions! ALL GONE: All of the theme() functions have been converted to Twig templates.
  57. 57. New theme hooks  Theme suggestions hook_theme_suggestions() hook_theme_suggestions_HOOK()  Theme suggestions alter: hook_theme_suggestions_alter(), hook_theme_suggestions_HOOK_alter()  Theme preprocess: THEME_preprocess(&$variables, $hook), THEME_preprocess_HOOK(&$variables) https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/group/themeable/8
  58. 58. Removed process hooks  The process layer (hook_process and hook_process_HOOK) is gone!
  59. 59. The preprocess layer  The preprocess layer still exists, but it's used for a different purpose.  In Drupal 8, the preprocess layer should not be used to add css classes.  This should be done in the template files. https://www.drupal.org/node/2325067
  60. 60. Drupal 8 core themes
  61. 61. Drupal 8 core themes  bartik  seven  stark  classy  stable Backwards compatibility throughout the Drupal 8 cycle Default admin theme Default theme Drupal core markup test theme
  62. 62. Drupal 8 core themes: bartik A flexible, recolorable theme with many regions and a responsive, mobile-first layout. The default theme in Drupal 8.
  63. 63. Drupal 8 core themes: seven The default administration theme for Drupal 8. Now fully responsive.
  64. 64. Drupal 8 core themes: stark An intentionally plain theme with almost no styling to demonstrate default Drupal’s HTML and CSS. Stark only outputs html and css from modules.  Add no CSS  Add no templates
  65. 65. Drupal 8 core themes: stable The Stable theme will function as a backwards compatibility layer for Drupal 8's core markup, CSS and JS. A theme will always use Stable as the base theme unless you set in your theme .info.yml file.
  66. 66. Drupal 8 core themes: classy The classes from core have been moved into the classy base theme. Now all template files in core are “classless”. Is the base theme that Seven and Bartik will extend from.
  67. 67. https://www.lullabot.com/articles/a-tale-of-two-base-themes-in-drupal-8-core @mortendk
  68. 68. Drupal 8 core templates core/modules/system/templates
  69. 69. New CSS architecture SMACSS Scalable and Modular Architecture for CSS • Base • Layout • Component • State • Theme BEM Block Element Modifier naming convention .block__element--modifier
  70. 70. Development tools!
  71. 71. Development tools Before start with theme development (Drupal development) let’s get some tools: Drush: http://www.drush.org Drupal Console: http://drupalconsole.com Devel module (& Kint): http://drupal.org/project/devel
  72. 72. Installing composer… curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer https://getcomposer.org/doc/00-intro.md#globally
  73. 73. Install Drupal console / drush Edit (global) composer.json and then run composer update
  74. 74. Install Drupal console / drush composer global require drush/drush:dev-master composer global require drupal/console:@stable Remember to add the binaries composer directory to your path, i.e. $ echo "PATH=$PATH:~/.composer/vendor/bin" >> ~/.bash_profile
  75. 75. Most useful drush commands:  Clear cache drush cr  Download / enable a module drush en module_name  HELP ME! drush help
  76. 76. Most useful console commands:  Generate a theme: console generate:theme  More to come... * * Please, RTFM!
  77. 77. Enable debugging: the manual way  Locate services.yml file (sites/default/services.yml)  If services.yml does not yet exist copy default.services.yml and rename it to services.yml  Edit the services.yml file and enable one or more of the debugging options  Rebuild cache
  78. 78. Enable debugging: the manual way (continue) parameters: twig.config: # Twig debugging: debug: true # Twig auto-reload: auto_reload: true # Twig cache: cache: true
  79. 79. Enable debugging: Drupal Console https://www.drupal.org/node/1903374 console site:mode dev
  80. 80. Disable render cache Drupal caches any rendering it performs for blocks and entities, to speed up subsequent page loads. This means that changes to Twig templates for these will not take effect immediately.
  81. 81. Disable render cache  add the following lines at the bottom of settings.php if (file_exists(__DIR__ . '/settings.local.php')) { include __DIR__ . '/settings.local.php'; }  copy sites/example.settings.local.php to sites/default/settings.local.php  clear the Drupal caches.
  82. 82. Disable render cache In settings.local.php:  disable the render cache (this includes the page cache). $settings['cache']['bins']['render'] = 'cache.backend.null';  disable Dynamic Page Cache. $settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';
  83. 83. Devel and Kint drush dl devel Kint, the new Krumo http://raveren.github.io/kint/
  84. 84. Twig: compiled in PHP template Twig template engine takes the template file and converts it into a 'compiled' PHP template in sites/default/files/php/twig/* (drush cr clean this folder too)
  85. 85. Resources  Twig official: http://twig.sensiolabs.org/  Theming Drupal 8: https://drupal.org/theme-guide/8  The Drupal 8 Theming guide: http://d8.sqndr.com/ More articles  Drupal 8 Theming Fundamentals, Part 1  Drupal 8 Theming Fundamentals, Part 2  A Tale of Two Base Themes in Drupal 8 core