Drupal 8. What's cooking (based on Angela Byron slides)

Claudiu Cristea
Webikon.com

Drupal Romania Association

Member of Drupal Association

www www.claudiucristea.ro

@claudiu_cristea

www.facebook.com/claudiu.cristea

Credits:
Angela Byron (webchick)
http://webchick.net

Agenda
• Drupal 8 timeline
• D8 Initiatives
• What’s planned for Drupal 8 for...
• End users and clients?
• Site builders?
• Designers and themers?
• Developers?

Drupal 8 Timeline
Code freeze
April 1, 2013
Development begins
Mar 10, 2011

Jan 5, 2011 Dec 1, 2012 Sep, 2013
Drupal 7.0 Feature freeze Drupal 8.0

Disclaimer
Drupal 8 is actively undergoing development. Things
presented here may change in days or hours.
Or were already changed :)

Drupal 8 Initiatives
http://groups.drupal.org/drupal-initiatives

Drupal 8 Initiatives
1. Conﬁguration Management
2. Web Services
3. Design
4. Multilingual
5. HTML 5
6. Mobile

End-users, clients
AKA “Drupal victims” :)

Authoring experience
improvements

What problems are
we trying to solve?

Spark

http://drupal.org/project/spark

Sitecore
Technical strength
8
Authoring experience
7

Open Text 6
CQ5
5

4

3

2

1

Drupal 0 Plone

Joomla Squiz

Wordpress

In-Place Editing

http://buytaert.net/spark-update-in-line-editing-in-drupal

Content creation page++
http://drupal.org/node/1510532

Mobile
25X growth
over next 5 years!

All sites

All CMS sites
All Drupal sites

What problems are
we trying to solve?

:(

Responsive themes,
images, and breakpoints

Front-end Performance++

Source: http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

http://drupal.org/project/issues/search/drupal?issue_tags=frontend+performance

New directory structure
Drupal 7

modules node

themes bartik
modules contrib_module

sites all themes custom_theme

New directory structure
Drupal 8
modules contrib_module
So... the exact
opposite of what
you’re used to. ;)
themes custom_theme
The drop is always
moving!
core modules node

themes bartik

Multilingual
It’s like i18n in core, but better

What’s the plan for
Drupal 8?

Download translation
updates through UI(?)

Blocks and Layouts

It’s like Panels in core, but better

What problems are
we trying to solve?
• Inconsistency; some Logo
Site Title

PageTitle
Primary Links

Secondary Links
stuﬀ on page is blocks,
others special theme Block Block

variables, and then Block Block

“content” area.
Block

•
Content Area

Only one layout. Block
region
Block
region

• Layout built “inside
out”; blocks lack
context of overall page
Block region

• Blocks can’t be re-used Block region

in multiple instances

Drupal 8? HTTP Display
Request Pass to Kernel Select
Req. controller

•
s
me n t
Layout built “outside Argu

in”; necessary context
provided to blocks Menu
block
Content block

• Everything on page is a Field
Advert
block

block (or a layout, or a
block

nested layout) Field
block View Field block
block Who's
online

•
block

Blocks rendered View
block
Custom block Custom

independently,
block

Advert

supporting ESI caching block

Custom Custom text block
block

Layouts
two-col.yml two-col.tpl.php
title: Two column <div class="layout-display layout-two-col clearfix <?php
category: Columns: 2 print $attributes['class']; ?>"<?php print
template: two-col $attributes; ?>>
stylesheets: <div class="layout-region layout-col-first">
- two-col.css <?php print $content['first']; ?>
regions: </div>
first:
label: Left side <div class="layout-region layout-col-second">
type: content <?php print $content['second']; ?>
second: </div>
label: Right side </div>
type: aside

two-col.css
@media only screen and (min-width: 59em) {
.layout-two-col .layout-region {
float: left; /* LTR */
width: 50%;
}
}

Responsive Layout
builder(?)

Mother [BEEP]! Views
in mother [BEEP] core!

What problems are
we trying to solve?
Drupal 7 released Surpasses Drupal 6
January 2011 February 2012

13 months!

...

July 2011
People start using it

...and more!
• >= PHP 5.3.5
• Cleaner modules page(?)
• Better Field UI (?)
• New ﬁelds: Link, Email, Entity
Reference(?), Date(?)

• Proﬁle (back) in core(?)

Project Browser: install
modules direct from UI(?)

http://drupal.org/node/1841788

Designers,
front-end developers

HTML5 Form Elements
$form['telephone'] = array(
'#type' => 'tel',
'#title' => t('Phone'),
);
$form['website'] = array(
'#type' => 'url',
'#title' => t('Website'),
);
$form['email'] = array(
'#type' => 'email',
'#title' => t('Email'),
);
$form['tickets'] = array(
'#type' => 'number',
'#title' => t('Tickets required'),
);

Drupal 7 Drupal 8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0// <!DOCTYPE html>
EN" <html<?php print $html_attributes; ?>>
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <head>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<? <?php print $head; ?>
php print $language->language; ?>" version="XHTML+RDFa <?php if ($default_mobile_metatags): ?>
1.0" dir="<?php print $language->dir; ?>"<?php print <meta name="MobileOptimized" content="width" />
$rdf_namespaces; ?>> <meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width" />
<head proﬁle="<?php print $grddl_proﬁle; ?>"> <meta http-equiv="cleartype" content="on" />
<?php print $head; ?> <?php endif; ?>
<title><?php print $head_title; ?></title> <title><?php print $head_title; ?></title>
<?php print $styles; ?> <?php print $styles; ?>
<?php print $scripts; ?> <?php print $scripts; ?>
</head> </head>
<body class="<?php print $classes; ?>" <?php print <body class="<?php print $classes; ?>" <?php print
$attributes;?>> $body_attributes;?>>
<div id="skip-link"> <div id="skip-link">
<a href="#main-content" class="element-invisible element- <a href="#main-content" class="element-invisible element-
focusable"><?php print t('Skip to main content'); ?></a> focusable"><?php print t('Skip to main content'); ?></a>
</div> </div>
<?php print $page_top; ?> <?php print $page_top; ?>
<?php print $page; ?> <?php print $page; ?>
<?php print $page_bottom; ?> <?php print $page_bottom; ?>
</body> </body>
</html> </html>

Standard Components

http://jacine.github.com/drupal/demo/

node.twig
Twig
<article id="node-{{ node.nid }}" class="{{ attributes.class }} clearfix"{{ attributes }}>

{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes }}>
<a href="{{ node_url }}" rel="bookmark">{{ label }}</a> {{ foo.bar }}
</h2>
{% endif %}
{{ title_suffix }}
(print this)
{% if display_submitted %}
<footer>
{{ user_picture }} {% foo(bar) %}
<p class="submitted">{{ submitted }}</p>
</footer>
{% endif %}
(do this logic)
<div class="content"{{ content_attributes }}>
{# We hide the comments and links now so that we can render them later. #}
{% hide(content.comments) %}
{% hide(content.links) %}
{{ content }} {# foo bar #}
</div>

{{ content.links }}
(comment this)
{{ content.comments }}

http://symfony.com/doc/current/book/templating.html
</article>

Warning:
Things are about to
get... geeky.

New Class Autoloader

modules example example.test modules example example.info
<?php name = Example
description = An example.
/**
* @file core = 7.x
* Tests for example.module. files[] = example.test
*/

/**
* Test the example_bar() function.
*/
class ExampleFooTest extends DrupalWebTestCase {
“Drupalism”
public static function getInfo() {
...
}
}

/**
* Test the example_bar() function.
*/
class ExampleBarTest extends DrupalWebTestCase {

}
...
Drupal 7

New Class Autoloader
(PSR-0)
modules example lib Drupal example Tests ExampleFooTest.php

<?php

/** ExampleBarTest.php
* @file
* Definition of DrupalexampleTestsExampleFooTest.
*/

namespace DrupalexampleTests;

use DrupalCoreDatabaseDatabase;

/** “Proudly found elsewhere”
* Test the example_foo() function.
*/
class ExampleFooTest extends DrupalWebTestCase {
...
}
}

Drupal 8

Web Services
It’s like Services module in core, only better.

What problems are
we trying to solve?

JSON/XML

Drupal 8?

Tutorial: http://fabien.potencier.org/article/50/create-your-own-
framework-on-top-of-the-symfony2-components-part-1

hook_menu()--
Symfony Routes++
Drupal 7: Drupal 8:
modules/book/book.module modules/book/book.routing.yml
<?php book__export:
function book_menu() { pattern: '/book/export/{type}/{nid}'
   $items['book/export/%/%'] = array( defaults:
    'page callback' => 'book_export',     _controller: 'DrupalbookBookController::export'
    'page arguments' => array(2, 3), requirements:
    'access arguments' => array('access printer-friendly version'),     _permission: 'access printer-friendly version'
    'type' => MENU_CALLBACK,
    'file' => 'book.pages.inc', book__node_outline:
); pattern: '/node/{node}/outline'
    $items['node/%node/outline'] = array( defaults:
    'title' => 'Outline',     _controller: 'DrupalbookBookController::outline'
    'page callback' => 'book_outline', requirements:
    'page arguments' => array(1),     _access: book_outline_access
    'access callback' => '_book_outline_access',
    'access arguments' => array(1),
    'type' => MENU_LOCAL_TASK,

?
    'weight' => 2,
    'file' => 'book.pages.inc',
);
...
return $items;
}
?>

REST module
$ curl -i -H "Accept: application/ld+json" --cookie SESSxxx http://example.com/entity/node/1

HTTP/1.0 200 OK
<snip>
Content-Type: application/ld+json

{"nid":"1","vid":"1","isDefaultRevision":"1","uuid":"bc37d058-8c45-484c-8e00-
eae8da8f4d67","type":"article","langcode":"en","title":"Hello","uid":"1","status":"1","crea
ted":"1353018305","changed":"1353018458","comment":"2","promote":"1","sticky":"0","tnid":"0
","translate":"0","revision_timestamp":"1353018305","revision_uid":"1","u0000*
u0000entityType":"node","u0000*u0000enforceIsNew":null,"u0000*
u0000newRevision":false,"log":"","body":{"en":[{"value":"This is in English. I live in
Vancouver, BC.","summary":"","format":"filtered_html","safe_value":"<p>This is in English.
I live in Vancouver, BC.</p>n","safe_summary":""}],"fr":[{"value":"Cette est en fran
u00e7ais. J'habite u00e1 Montru00e9al,
PQ.","summary":"","format":"filtered_html","safe_value":"<p>Cette est en franu00e7ais.
J'habite u00e1 Montru00e9al, PQ.</p>n","safe_summary":""}]},"field_tags":{"en":
[{"tid":"2"},{"tid":"1"}],"fr":[{"tid":"3"},{"tid":"4"}]},"field_image":{"und":
[{"fid":"2","alt":"","title":"","width":"500","height":"400"}]},"rdf_mapping":
{"field_image":{"predicates":["og:image","rdfs:seeAlso"],"type":"rel"},"field_tags":
{"predicates":["dc:subject"],"type":"rel"},"rdftype":["sioc:Item","foaf:Document"],"title":
{"predicates":["dc:title"]},"created":{"predicates":
["dc:date","dc:created"],"datatype":"xsd:dateTime","callback":"date_iso8601"},"changed":
The REST module provides a framework for exposing
{"predicates":["dc:modified"],"datatype":"xsd:dateTime","callback":"date_iso8601"},"body":
Drupal's data structures as RESTful web services.
{"predicates":["content:encoded"]},"uid":{"predicates":

Conﬁguration
Management

node ID 4

node ID 4

It’s like Features module in core, only better.

What problems are
we trying to solve?
Dev Live
admin/conﬁg/foo node/4 admin/conﬁg/foo node/4
TEST Welcome
Setting 1 text test test test test Setting 1 old text This is real
test test test test content on the
Setting 2 label test test test test Setting 2 label live site that end
test test users are viewing
Save Save

Database Database

What problems are
we trying to solve?
Dev Live
admin/config/foo node/4 admin/config/foo node/4
TEST Welcome
Setting 1 text test test test test Setting 1 old text This is real
test test test test content on the
Save Save

Database Database

Danger!
Want to bring over configuration
changes from dev, but not
overwrite live content!

What problems are
we trying to solve?
variable_set()/variable_get()

db_select()/db_update()/
db_delete()
hook_update_N()
$conf[...];
drush fu
ctools_export_object()/
ctools_export_load_object()

Drupal 8?
Dev Live
node/4
node/4 node/4
node/4
admin/config/foo admin/config/foo

TEST
ALERT! Welcome
ALERT!
Setting 1 text test test test test
Important Setting 1 old text This is real
Important
test test test test
announcement content on the
announcement
about something. about something.
Save Save

Cache
Active store Cache
Active store
(e.g. (e.g.
Database) Database)

StagingFile Active File StagingFile Active File
File Store
storage Store File Store
storage Store

http://heyrocker.com/how-use-drupal-8-configuration-system

Drupal 8?
Dev Live
node/4
node/4 node/4
node/4
admin/config/foo $node->uuid = '0a8f293...'; admin/config/foo $node->uuid = '98a7bd...';
TEST
ALERT! Welcome
ALERT!
Setting 1 text test test test test
Important Setting 1 old text This is real
Important
test test test test
announcement content on the
announcement
about something. about something.
Save Save

1 Cache
Active store Cache
Active store
(e.g. (e.g.
Database) Database)

2 5
3
File
Staging File
Active Active File StagingFile Active File
File Store
Store
storage Store File Store
storage Store

4

http://heyrocker.com/how-use-drupal-8-configuration-system

Configuration API
Want to deploy it? Use config().

$config = config(‘contact.settings’);
$config->set(‘user_default_enabled’, 1);
$config->save();

files/config_XXX/active/contact.settings.yml
default_category: feedback
flood:
limit: '5'
interval: '3600'
user_default_enabled: '1'

State API
Only useful for this environment? Use state().
state()->set('update.last_check', $now);
...
$last_check = state()->get('update.last_check') ?: 0;

MySQL [8x]> SELECT * FROM key_value WHERE collection = 'state' AND
name = 'update.last_check';
+------------+-------------------+---------------+
| collection | name | value |
+------------+-------------------+---------------+
| state | update.last_check | i:1353017727; |
+------------+-------------------+---------------+
1 row in set (0.00 sec)

Other stuﬀ

• Getting OOPy with it!
• Entity API++
• More fasterer testbot!
• File/Media API improvements
• ...and more!

Gotta catch ‘em all!

http://drupal.org/list-changes

Drupal 8. What's cooking (based on Angela Byron slides)

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Drupal 8. What's cooking (based on Angela Byron slides)

Similaire à Drupal 8. What's cooking (based on Angela Byron slides) (20)

Dernier

Dernier (20)

Drupal 8. What's cooking (based on Angela Byron slides)