The Coding Dead

Code Dead: Aprende a identificarlo

• Sales corriendo cuando lo ves.
• Te come el cerebro cada vez que pasas cerca.
• Te come tu tiempo si te paras en el.
• No se reproduce
• Es difícil de tocar sin que salgas herido o mueras en el intento.

  global $user;

  $account = user_load($user->uid);
  $output  = '<div class="logged-user-info">';
  // User picture:
  $output .= "<a href='/user/$account->uid'>";
  $output .= "<img src='/sites/default/files/pictures/" . $account->picture->filename ."'>";
  $output .= "</a>";
  // User roles:
  $output .= '<ul>';
  foreach($user->roles as $rid => $role) {
    $output .= '<li>'. $role .'</li>';
  }
  $output .= '</ul>';
  // User achievements:
  $output .= '<div class="user-achievements">';
  $output .= '<span class="user-points">' . t('User points: @points', array('@points' => 4)) . '</span>';
  $output .= '<span class="highlighted-achievement">';
  $output .= t('Highest score: @score', array('@score' => 16));
  $output .= '</span>';
  $output .= '</div>';
  $output .= '</div>';

  return $output;
}

Sujeto nº1: Estado inicial

Sujeto nº1 : Características y síntomas

• No reusable.
• Muy propenso a fallos.
• Muy propenso al ctrl+c ctrl+v.
• Reinventa la rueda.
• No usa estructuras ya hechas.
• Los themes no actuarán en tu output.
• No harás amigos entre los themers.

Aplicación del tratamiento : "themes"

  global $user;

  $output  = '<div class="logged-user-info">';
  // User picture:
  $output .= theme('user_picture', array('account' => $user));
  // User roles:
  $output .= theme('item_list', array('items' => $user->roles));
  // User achievements:
  $output .= theme('user_achievements', array('points' => 4,'score' => 16));
  $output .= '</div>';

  // Add custom css & js:
  drupal_add_js(drupal_get_path('module', 'render_examples') . '/js/user_achievements.js');
  drupal_add_css(drupal_get_path('module', 'render_examples') . '/css/user_achievements.css');

  return $output;

Análisis del tratamiento "Themes"

• Más legible.
• Usando estructuras base.
• Más reusable.
• Poco flexible.
• CSS y JS no ligado al theme.
• No podemos alterar.
• Drupal 6 way.

Aplicación del tratamiento : Render arrays

 global $user;

  $render = array(
    'user-picture' => array(
      '#theme' => 'user_picture',
      '#account' => $user,
    ),
    'item-list' => array(
      '#theme' => 'item_list',
      '#items' => $user->roles,
    ),
    'user-achievements' => array(
      '#theme' => 'user_achievements',
      '#points' => 4,
      '#score' => 16,
      '#attached' => array(
        'js' => array(drupal_get_path('module', 'render_examples') . '/js/user_achievements.js'),
        'css' => array(drupal_get_path('module', 'render_examples') . '/css/user_achievements.css'),
      ),
    ),
    '#attributes' => array('class' => array('logged-user-info')),
    '#theme_wrappers' => array('container'),
  );

Análisis del tratamiento: Render Arrays

• Más flexible gracias a 
  • Proccess/preproccess
  • Wrappers
• CSS y JS ligado al theme.
• Cache

Render API & Theming

#theme_wrappers

• Es un array de themes.
• The themed output => $element['#children']
• Nos centramos sólo en el contenido

 '#theme_wrappers' => array('container'),

 '#theme_wrappers' => array('container', 'render_array'),

Render API & Theming

Crear nuestro Theme_wrapper

$themes['render_add_span'] = array(
    'render element' => 'element',
  );

1.- Defino el theme

2.- Implementamos

/**
 * Implements theme_THEME().
 */
function theme_render_add_span(&$variables) {
  $element = $variables['element'];
  $output = '<span class="render-wrapper-span">';
  $output .= $element['#children'];
  $output .= '</span>';
  return $output;
}

3.- Lo añadimos

'#theme_wrappers' => array('container', 'render_add_span'),

Render API & Theming

Crear nuestro Theme_wrapper

4.- Lo comprobamos

Render API : Caching

• Propiedad : #cache
• Subpropiedades
  • Keys => the cache_key
  • bin => 
  • expire
  • granularity
    • DRUPAL_CACHE_PER_PAGE
    • ...
• Podemos cachear a nivel de elementos
• Cache by permission, role, user..

'element_cached' => array(
      '#markup' => '',
      '#pre_render' => array('render_element_cached_pre_render'),
      '#cache' => array(
        'keys' => array('render_examples', 'cache-element'),
        'bin' => 'cache',
        'expire' => time() + 10,
        'granularity' => DRUPAL_CACHE_PER_PAGE | DRUPAL_CACHE_PER_USER,
      ),
    ),

Render API : Caching example

1.- El elemento

2.- El pre_render

/**
 * Custom pre_render callback for caching example.
 * @param $element
 * @return mixed
 */
function render_element_cached_pre_render($element) {
  $element['#markup'] = render_elements_expensive();
  $element['#children'] = $element['#markup'];
  return $element;
}

Resumiendo

• No reinventes la rueda: usala!
• Organiza cómo renderizar tu output.
• Evita usar theme().
• Separa en elementos renderables
• Usa los theme_wrappers para unificar
• Cachea los elementos con mucha carga.

Resources

• Franz Heinzmann's session on the Render API in Drupal 7 at Drupalcon Chicago
• Moshe Weitzman's Drupalcon San Francisco Presentation
• Examples Project

Material de esta charla

Fuentes y otros recursos.

Github : http://github.com/jlbellido/render_examples

Slides : https://slides.com/jlbellido/render-api/

Y si después de todo no puedes con el enemigo?

Únete a el

Drupal community is comming

Global Sprint Weekend

Valencia : http://www.meetup.com/Drupales/events/219173581/

Cáceres : http://www.meetup.com/Drupales/events/219170420/

Madrid : http://www.meetup.com/Drupales/events/219038959/

17 & 18 de Enero 2015

Global Sprint Weekend

17 & 18 de Enero 2015

Sevilla

Drupal Dev Days 2015

Montpellier, 13-19 Abril 2015