[Srijan Wednesday Webinars] Drupal 8: Frontend for Backenders

  • View
    377

  • Download
    1

Embed Size (px)

Transcript

  • Drupal 8Frontend (forbackenders)

    01.04.2015 Lauri Eskola / @laurii1

    @srijan #SrijanWW

  • Lauri EskolaI live in FinlandFront and Back End DeveloperMostly working on Core issuesrelated to Theme system on theBack End sideWorking for DruidI do actually like cold (andsauna)

    @srijan #SrijanWW

  • @lauriii@srijan #SrijanWW

  • @laurii1@srijan #SrijanWW

  • Topics1. Theme system2. Twig3. Autoescape4. Demo

    @srijan #SrijanWW

  • Changes related to themelayer

    @srijan #SrijanWW

  • Drupal 7 theme layer - WTF?@srijan #SrijanWW

  • Template process layer ...is gone!

    hook_page_alter ...is gone!

    @srijan #SrijanWW

  • @srijan #SrijanWW

  • Theme functions...are being converted to Twig templates..

    @srijan #SrijanWW

  • Goodbye theme(), hello render arraysDrupal 7

  • @srijan #SrijanWW

  • Drupal 8 theme layer - FTW!@srijan #SrijanWW

  • Theme suggestion hooks@srijan #SrijanWW

  • Theme suggestion hooksDrupal 7

  • Preprocess hooks & missing processfunctions

    @srijan #SrijanWW

  • Attributes

  • AttributesTwig

    Not like this:

    @srijan #SrijanWW

  • Attributes

    {% set classes [ 'a-lot-of', 'classes-needed', 'for-this-element' ] %}

  • TwigCrash course for backenders

    @srijan #SrijanWW

  • Twig magic{{ sandwich.cheese }}

    Same in PHP

    // Array key. $sandwich['cheese']; // Object property. $sandwich->cheese; // Also works for magic get (provided you implement magic isset). $sandwich->__isset('cheese'); && $sandwich->__get('cheese'); // Object method. $sandwich->cheese(); // Object get method convention. $sandwich->getCheese(); // Object is method convention. $sandwich->isCheese(); // Method doesn't exist/dynamic method. $sandwich->__call('cheese');

    @srijan #SrijanWW

  • Print what you want, when you wantDrupal 7

  • Twig filtersMeant to manipulate content. Simply takes the first parameter from a

    variable or inline string and returns it in different format.

    Example

    {% set name = 'Lauri' %} {# Print varibale using lenght filter. #} {{ name|length }}

    Returns

    5

    @srijan #SrijanWW

  • Twig functionsMore viable functions with multiple parameters meant to create simple

    front-end logic

    {{ dump() }}

    @srijan #SrijanWW

  • This magic is built in TwigHow ever I'm going to show you how to add these by your self!

    @srijan #SrijanWW

  • Adding Twig filters

  • Adding Twig filters

    {% set variable = 'my text' %} {{ variable|trim_string(2) }}

    my

    @srijan #SrijanWW

  • Adding Twig functions

  • Example:https://github.com/lauriii/trim-string

    @srijan #SrijanWW

  • "I don't want to learn anythingnew!"

    "I don't like Twig!"

    @srijan #SrijanWW

  • Solution!

    # engine: phptemplate

    themename.info.yml

    @srijan #SrijanWW

  • Autoescape@srijan #SrijanWW

  • @srijan #SrijanWW

  • Context-Aware Auto-EscapingBasic idea: everytime variable goes to template run appropriate escaping

    function!

    @srijan #SrijanWW

  • Different Escape functions

  • How it works?
  • Sandwiches demo!https://github.com/DrupalTwig/sandwich

    @srijan #SrijanWW

  • Want to help?Isn't this stuff awesome?

    We can still make it better! Join your localsprints!

    @srijan #SrijanWW

  • Take this conversation online by tweeting using the hashtag #SrijanWW

    Thank you!

    Lauri Eskola / @laurii1

    @srijan #SrijanWW