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 %}

&copy; 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