Drupal: Presente y Futuro Una introducción a Drupal 8
Alfonso Heredia @hmalfonso
Drupal: Presente y Futuro.
Planning:
1. ¿ Qué es Drupal?
2. Arquitectura. Framework.
3. Iniciativas de desarrollo de Drupal 8.
4. Instalación de Drupal 8. (Demo)
5. Preguntas.
Alfonso Heredia
¿ Qué es Drupal?
http://www.youtube.com/watch?v=26_OZeBmpXs
Video realizado por Thinküber
Alfonso Heredia
¿ Qué es Drupal?
CMS
Crear
Organizar
Manipular
Información
CMF
Tools
API
Plantillas
Servicios
Alfonso Heredia
Arquitectura Drupal
Drupal
PHP
Apache IIS Nginx
OS
MySql
Postgre
MariaDB
Oracle
Sqlserver Varnish
Apache
Solr
Alfonso Heredia
Arquitectura Drupal: Requisitos
Requisitos Drupal 7 Drupal 8
Php 5.2.5 (5.3)
5.3.10
DB MySql 5.0.15 (PDO). Postgre 8.3 (PDO).
WebServer Apache 2.x. Nginx 1.2.x . IIS (5,6,7)
Disk Space (core) 13 MB aprox. 40MB aprox.
Memory 32MB ---
Alfonso Heredia
Arquitectura: En detalle (D7)
Tema
Sistema de plantillas
Form
Api
Menu
Api
Block
Api
Librería de funciones
L10n
Vistas
BD Api
Entity Api
Field Api
N
o
d
o
s
u
s
e
r
s
T
a
x
o
n
C
o
m
e
n
t
Módulos
(Core,Contribuidos, Propios)
Alfonso Heredia
Form
Api
Menu
Api
Block
Api
Librería de funciones BD Api
Entity Api
Field Api
Arquitectura: En detalle (D8)
Tema
Sistema de plantillas
Vistas
N
o
d
o
s
u
s
e
r
s
T
a
x
o
n
C
o
m
e
n
t
Módulos
(Core,Contribuidos, Propios)
Idiomas
Alfonso Heredia
Arquitectura: Un poquito de historia.
Version Core Mejoras
4.5 Page, Story
Código
4.6 Page, Story Código
Flexinode
4.7 Page, Story
CCK (Tipos de
datos, Campos)
5 y 6 Page, Story, Tipos
propios
CCK (Campos)
7 Tipos, campos
propios. Entity
Api
R.I.P. CCK
8 Extensión a
bloques.
++++
Alfonso Heredia
Drupal: Ciclo de vida.
http://buytaert.net/files/state-of-drupal-march-2012.pdf
Alfonso Heredia
Drupal: Ciclo de vida.
http://buytaert.net/files/state-of-drupal-march-2012.pdf
Alfonso Heredia
Drupal: Ciclo de vida
http://buytaert.net/files/state-of-drupal-march-2012.pdf
Alfonso Heredia
Drupal 8: Fases de desarrollo. Alfonso Heredia
Drupal 8: Fases de desarrollo. Alfonso Heredia
Drupal 8: Iniciativas
Mobile
HTML5
Multilingual
Cofiguration
Management
Web Services
Layouts
Views D8
Alfonso Heredia
Drupal 8: Iniciativas (estado) Alfonso Heredia
Drupal 8: Gestión de la configuración
Configuration Management
Director Greg Dunlap
Información http://groups.drupal.org/cmi
IRC #drupal-cmi
Alfonso Heredia
Drupal 8: Gestión de la configuración
Qué problemas intenta resolver ?
Angela Byron slides
• Configuración de Drupal residente en la BD.
• Solapamiento de contenido entre entornos.
Alfonso Heredia
Drupal 8: Gestión de la configuración
Qué problemas intenta resolver ?
Angela Byron slides
Alfonso Heredia
Drupal 8: Gestión de la configuración
Solución:
• Hagamos las Entidades realmente “únicas”. (UUID).
• Configuración almacenada en ficheros.
Bd
Staging
File Store
Active File
Store
Drupal
Dev
Bd
Staging
File Store
Active File
Store
Drupal
Live
Configuración Actual Configuración a importar
Alfonso Heredia
Drupal 8: Gestión de la configuración
Solución:
• Ficheros de configuración en formato YAML. (prefix.example.yml)
• files/config_XXX/active y files/config_XXX/staging.
• Adiós variable_get() y variable_set().
• Cambiar todas las varibles para adaptarse a CMI.
• Entidades, Campos , Contenido, Ficheros…
// Load the site name out of configuration.
$config = config('core.site_information');
$site_name = $config->get('site_name');
// Change the site name to something else.
$config->set('site_name', 'My Awesome Site');
$config->save();
Alfonso Heredia
Drupal 8: Multiidiomas.
Multilingual
Director Gábor Hojsty
Información http://groups.drupal.org/i18n
IRC #drupal-i18n
Alfonso Heredia
Drupal 8: Multiidiomas.
Qué problemas intenta resolver ?
Angela Byron slides
• Muchos modulos (locale, content_translation, i18n, variables,title
• Traduzco contenido, entididades ? Que hago con los menus, taxonomias?
Alfonso Heredia
Drupal 8: Multiidiomas.
Solución:
• Algo similar a i18n pero en core. Traducción de interfaz y contenido.
• No más idiomas especiales (Inglés).
• L10n_update en core.
• Mejoras significativas del interfaz de usuario.
“Multilingual First”
Alfonso Heredia
Drupal 8: VDC.
Views in core
Director Earl Miles
Información
http://drupal.org/community-
initiatives/drupal-core/vdc-
roadmap
IRC #drupal-vdc
Alfonso Heredia
Drupal 8: VDC.
Ventajas:
• Consistencia: Todos los listados… hechos con vistas.
• Estabilidad: Ahora los bugs son tratados como bugs del
Core.
• Potencia: Drupal “out of the box” podrá hacer
infinitud de cosas más que antes.
• Y un largo etc...
Alfonso Heredia
Drupal 8: Web Services.
Web Services
Director Larry Garfield
Información http://groups.drupal.org/wscci
IRC #drupal-wscci
Alfonso Heredia
Drupal 8: Web Services.
Qué problemas intenta resolver ?
Angela Byron slides
• No todas las peticiones se devuelven en Html. Puede ser Json/Xml
• Mejorar la comunicación con otros sistemas , aplicaciones móbiles,
frameworks...
Alfonso Heredia
Drupal 8: Web Services.
Qué problemas intenta resolver ?
Angela Byron slides
Alfonso Heredia
Drupal 8: Web Services.
Solución:
• Convertir a Drupal en un servidor REST de primera clase.
• Incluyendo Services en Core y mejorándolo.
“Sistema de contexto estandarizado, consistente y extendible”
Alfonso Heredia
Drupal 8: Mobile.
Mobile
Director John Albin Wilkins
Información http://drupal.org/node/19414
32
IRC #drupal-mobile
Alfonso Heredia
Drupal 8: Mobile.
Qué problemas intenta resolver ?
Angela Byron slides
• Actualmente existe una pobre experiencia de usuario para móviles.
• Administración “No Mobile”.
Alfonso Heredia
Drupal 8: Mobile.
Qué problemas intenta resolver ?
Angela Byron slides
• Problemas de rendimiento.
Alfonso Heredia
Drupal 8: Mobile.
Solución:
• El Core debe dar proveer de:
• Servicios Web que interactúen con aplicaciones
móviles nativas.
• Elementos HTML 5 necesarios para aplicaciones
web HTML 5.
• Capacidad suficiente para usar los paneles de
administración desde el móvil.
• Los temas del core (y contrib) deben ser
“Responsive”.
• Tiempo de respuesta y peso adecuados.
Alfonso Heredia
Drupal 8: Mobile.
Solución:
• Utilización de breakpoints en temas. (config yml).
• Uso de imágenes responsive.
mobile: '(min-width: 0px)'
narrow: 'all and (min-width: 560px) and (max-width: 850px)'
wide: 'all and (min-width: 851px)'
Angela Byron slides
Alfonso Heredia
Drupal 8: Mobile.
Solución:
• Mejora del CSS:
• Guía de estilo CSS.
• Rearquitectura CSS (reutilizable, escalable,
predecible).
• Reorganización de la estructura de archivos CSS
• Mejoras en el JS:
• jQuery 1.9.
• JSHint. (calidad en codigo JavaScript).
• Modernizr. (capacidades de un navegador relativas
a HTML5 y CSS3).
• Declaración explícita de JS. No más drupal_add_js
Alfonso Heredia
Drupal 8: Layouts.
Layouts
Director Kris Vanderwater
Información http://groups.drupal.org/scotch
IRC #drupal-scotch
Como panels pero mejor
Alfonso Heredia
Drupal 8: Layouts.
Qué problemas intenta resolver ?
Angela Byron slides
• Incosistencia en la presentación de datos. (block regions,content region,
theme variables).
• Bloques no son “multiinstanciables”.
• Un solo layout.
Alfonso Heredia
Drupal 8: Layouts.
Solución:
• Mecanismo estandarizado de salida. Todo es tratado
como bloques, layouts o layouts anidados.
Ctools+PageManager+Panels
Angela Byron slides
Fuerte
dependencia con
WSCCI y CMI
Alfonso Heredia
Drupal 8: Layouts.
Solución:
title: Two column
category: Columns: 2
template: two-col
stylesheets:
- two-col.css
regions:
first:
label: Left side
type: content
second:
label: Right side
type: aside
<div class="layout-display layout-two-col clearfix <?php print
$attributes['class']; ?>"<?php print $attributes; ?>>
<div class="layout-region layout-col-first">
<?php print $content['first']; ?>
</div>
<div class="layout-region layout-col-second">
<?php print $content['second']; ?>
</div>
</div>
• Declaración de layouts.
two-col.yml
two-col.tpl.php
Alfonso Heredia
Drupal 8: HTML5.
HTML 5
Director Jacine Luisi (cierto tiempo)
Información http://groups.drupal.org/html5/
drupal-8
IRC #drupal-html5
Alfonso Heredia
Drupal 8: HTML5.
Plan:
• HTML5 out of the box.
• Conversion de las plantillas a HTML5
• Inclusión de elementos HTML5 para los formularios.
• Tel.
• url.
• Number.
• email.
• Mejora del “Markup”.
• Estandarización de código.
Alfonso Heredia
Drupal 8: UX.
Mejora de la experiencia de usuario
Angela Byron slides
Alfonso Heredia
Drupal 8: Symfony.
Qúe es?
• Framework PHP.
• Flexible.
• Extensible
• Componentes desacoplados.
Alfonso Heredia
Drupal 8: Symfony. (componentes)
ClassLoader:
• Autocargado de clases.
• Estandar PSR-0.
Namespace Directorio
Drupal\Core core/lib/Drupal/Core/
Drupal\Component core/lib/Drupal/Component/
Drupal\comment modules/comment/lib/Drupal/comment/
Drupal\entity modules/entity/lib/Drupal/entity/
Drupal\node modules/node/lib/Drupal/node/
Drupal\taxonomy modules/taxonomy/lib/Drupal/taxonomy/
Alfonso Heredia
Drupal 8: Symfony. (componentes)
ClassLoader:
Alfonso Heredia
Drupal 8: Symfony. (componentes)
HttpFoundation:
• Capa orientada a objetos para la especificación Http.
• Objetos Request y Response.
• Variables globales “mapeadas” a Request.
Request
query ($_GET)
request ($_POST)
cookies ($_COOKIE )
attributes
Files ($_FILES)
server ($_SERVER )
headers
Response
header
status
Content
Browser Server
Alfonso Heredia
Drupal 8: Symfony. (componentes)
Routing:
• Mapea peticiones a “controladores”.
• Rutas estáticas.
• Rutas dinámicas se usa routing del Framework
(ChainRouter)
user_register:
pattern: '/user/register'
defaults:
_content: '\Drupal\user\UserRouteController::register'
requirements:
_access_user_register: 'TRUE'
user.routing.yml
Alfonso Heredia
Drupal 8: Symfony. (componentes)
Inyección de dependencias:
• Estandariza y centraliza la manera en la que se
construyen los objetos de la aplicación.
• La clase no crea los objetos que necesita. Se le
suministran.
• Facilita el testeo. (desacoplamiento)
class A {
public function GetB()
{
return new B();
}
}
class A {
private $b;
public function __construct(B $b){
$this->b = $b;
}
public function GetB() {
return $this->b;
}
}
Alfonso Heredia
Drupal 8: Symfony. (componentes)
Y más:
Alfonso Heredia
Drupal 8: Twig
Qué es?:
• Motor de plantillas para PHP, rápido, seguro y
flexible.
• Nomenclatura clara, concisa y fácil de entender.
Por qué?:
• Difícil de aprender. ( print o print render()).
• Infinidad de plantillas.
• Theming Functions ?
Alfonso Heredia
Drupal 8: Twig
Por qué?:
Jen Lampton
Alfonso Heredia
Drupal 8: Twig
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
</body>
</html>
Alfonso Heredia
Drupal 8: Twig
Ventajas:
• Menos código que con las funciones.
Jen Lampton
Alfonso Heredia
Drupal 8: Twig
Ventajas:
• Inspección de variables. {{ dump(user)}}.
• Herencia de plantillas.
Jen Lampton
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2011 by <a
href="http://domain.invalid/">you</a>.
{% endblock %}
</div>
</body>
</html>
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ parent() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome to my awesome homepage.
</p>
{% endblock %}
Alfonso Heredia
Preguntas Alfonso Heredia
Gracias/Créditos.
• Angela Byron.
• Dries Buytaert.
• Jen Lampton.
• Jose Reyero.
• Pedro Lozano.
• Larry Gardfield.
Alfonso Heredia
“ Muchas gracias a todos por permitirme pasar este
ratito hablando de Drupal”
Alfonso Heredia
Ingeniero informático por la Universidad de Málaga
@hmalfonso
Alfonso Heredia