Drupal 8
What’s cooking?
Claudiu Cristea
@claudiu_cristea
Webikon.com
Drupal Romania Association
www.facebook.com/claudiu.cristea
www www.claudiucristea.ro
Member of Drupal Association
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
Drupal 7.0
Jan 5, 2011
Development begins
Mar 10, 2011
Feature freeze
Dec 1, 2012
Drupal 8.0
Sep, 2013
Code freeze
April 1, 2013
Why learn about Drupal 8 now?
DisclaimerDrupal 8 is actively undergoing development. Things
presented here may change in days or hours.Or were already changed :)
Drupal 8 Initiativeshttp://groups.drupal.org/drupal-initiatives
Drupal 8 Initiatives1. Configuration Management2. Web Services3. Design4. Multilingual5. HTML 56. Mobile
End-users, clientsAKA “Drupal victims” :)
Authoring experience improvements
What problems are we trying to solve?
What problems are we trying to solve?
What problems are we trying to solve?
Spark
http://drupal.org/project/spark
0
1
2
3
4
5
6
7
8 Sitecore
CQ5
Plone
Squiz
Wordpress
Joomla
Drupal
Open Text
Technical strengthAuthoring experience
WYSIWYG in Core!
In-Place Editing
http://buytaert.net/spark-update-in-line-editing-in-drupal
Content creation page++http://drupal.org/node/1510532
Mobile
Mobile25X growth
over next 5 years!
All Drupal sitesAll CMS sites
All sites
What problems are we trying to solve?
:(
Responsive themes, images, and breakpoints
Mobile friendly admin
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
Site builders
New directory structure
modules
themes
sites all
modules
themes
node
contrib_module
custom_theme
bartik
Drupal 7
New directory structure
modules
themes
core modules
contrib_module
custom_theme
Drupal 8
themes
node
bartik
So... the exact opposite of what you’re used to. ;)
The drop is always moving!
It’s like i18n in core, but better
Multilingual
What’s the plan for Drupal 8?
What’s the plan for Drupal 8?
Multilingual first
Download translation updates through UI(?)
Usability improvements
Translatable entities!
Translatable entities!
Blocks and Layouts
It’s like Panels in core, but better
What problems are we trying to solve?
Content Area
Block region
Block region
Block region
Block
Block
Block
Block
Block
Site Title Primary Links
Secondary LinksLogo
Block region
PageTitle• Inconsistency; some stuff on page is blocks, others special theme variables, and then “content” area.
• Only one layout.
• Layout built “inside out”; blocks lack context of overall page
• Blocks can’t be re-used in multiple instances
What’s the plan for Drupal 8?
• Layout built “outside in”; necessary context provided to blocks
• Everything on page is a block (or a layout, or a nested layout)
• Blocks rendered independently, supporting ESI caching
Who's online block
Custom block
Advert block
Menu block
View block
Content block
Custom block
Custom text block
View block
Field block
Custom block
Field block
Field block
Advert block
Arguments
HTTP Req. Request SelectPass to Kernel Display
controller
Layoutstitle: Two columncategory: Columns: 2template: two-colstylesheets: - two-col.cssregions: first: label: Left side type: content second: label: Right side type: aside
two-col.yml<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>
two-col.tpl.php
@media only screen and (min-width: 59em) { .layout-two-col .layout-region { float: left; /* LTR */ width: 50%; }}
two-col.css
UI(?)
Responsive Layout builder(?)
Mother [BEEP]! Views in mother [BEEP] core!
What problems are we trying to solve?
Drupal 7 released
January 2011
People start using it
July 2011
...
Surpasses Drupal 6
February 2012
13 months!
What problems are we trying to solve?
It’s here! :D
...and more!• >= PHP 5.3.5
• Cleaner modules page(?)
• Better Field UI (?)
• New fields: Link, Email, Entity Reference(?), Date(?)
• Profile (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'), );
<!DOCTYPE html><html<?php print $html_attributes; ?>> <head> <?php print $head; ?> <?php if ($default_mobile_metatags): ?> <meta name="MobileOptimized" content="width" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width" /> <meta http-equiv="cleartype" content="on" /> <?php endif; ?> <title><?php print $head_title; ?></title> <?php print $styles; ?> <?php print $scripts; ?> </head> <body class="<?php print $classes; ?>" <?php print $body_attributes;?>> <div id="skip-link"> <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a> </div> <?php print $page_top; ?> <?php print $page; ?> <?php print $page_bottom; ?> </body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>
<head profile="<?php print $grddl_profile; ?>"> <?php print $head; ?> <title><?php print $head_title; ?></title> <?php print $styles; ?> <?php print $scripts; ?></head><body class="<?php print $classes; ?>" <?php print $attributes;?>> <div id="skip-link"> <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a> </div> <?php print $page_top; ?> <?php print $page; ?> <?php print $page_bottom; ?></body></html>
Drupal 7 Drupal 8
Markup cleanup
Standard Components
http://jacine.github.com/drupal/demo/
Twig
http://symfony.com/doc/current/book/templating.html
{{ foo.bar }}(print this)
{% foo(bar) %}(do this logic)
{# foo bar #}(comment this)
<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> </h2> {% endif %} {{ title_suffix }}
{% if display_submitted %} <footer> {{ user_picture }} <p class="submitted">{{ submitted }}</p> </footer> {% endif %}
<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 }} </div>
{{ content.links }} {{ content.comments }}
</article>
node.twig
6 & 7
Developers
Warning: Things are about to
get... geeky.
New Class Autoloader
Drupal 7
modules example example.test
<?php
/** * @file * Tests for example.module. */
/** * Test the example_bar() function. */class ExampleFooTest extends DrupalWebTestCase { public static function getInfo() { ... }}
/** * Test the example_bar() function. */class ExampleBarTest extends DrupalWebTestCase { public static function getInfo() { ... }}...
name = Exampledescription = An example.core = 7.xfiles[] = example.test
modules example example.info
“Drupalism”
New Class Autoloader (PSR-0)
modules example lib Drupal example Tests ExampleFooTest.php
ExampleBarTest.php
<?php
/** * @file * Definition of Drupal\example\Tests\ExampleFooTest. */
namespace Drupal\example\Tests;
use Drupal\Core\Database\Database;
/** * Test the example_foo() function. */class ExampleFooTest extends DrupalWebTestCase { public static function getInfo() { ... }}
Drupal 8
“Proudly found elsewhere”
Web ServicesIt’s like Services module in core, only better.
What problems are we trying to solve?
What problems are we trying to solve?
JSON/XML
What’s the plan for 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++
<?phpfunction book_menu() { $items['book/export/%/%'] = array( 'page callback' => 'book_export', 'page arguments' => array(2, 3), 'access arguments' => array('access printer-friendly version'), 'type' => MENU_CALLBACK, 'file' => 'book.pages.inc', ); $items['node/%node/outline'] = array( 'title' => 'Outline', 'page callback' => 'book_outline', 'page arguments' => array(1), 'access callback' => '_book_outline_access', 'access arguments' => array(1), 'type' => MENU_LOCAL_TASK, 'weight' => 2, 'file' => 'book.pages.inc', );... return $items;}?>
Drupal 7:modules/book/book.module
book__export: pattern: '/book/export/{type}/{nid}' defaults: _controller: '\Drupal\book\BookController::export' requirements: _permission: 'access printer-friendly version'
book__node_outline: pattern: '/node/{node}/outline' defaults: _controller: '\Drupal\book\BookController::outline' requirements: _access: book_outline_access
Drupal 8:modules/book/book.routing.yml
?
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","created":"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 Montr\u00e9al, PQ.","summary":"","format":"filtered_html","safe_value":"<p>Cette est en fran\u00e7ais. J'habite \u00e1 Montr\u00e9al, 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":{"predicates":["dc:modified"],"datatype":"xsd:dateTime","callback":"date_iso8601"},"body":{"predicates":["content:encoded"]},"uid":{"predicates":["sioc:has_creator"],"type":"rel"},"name":{"predicates":["foaf:name"]},"comment_count":{"predicates":["sioc:num_replies"],"datatype":"xsd:integer"},"last_activity":{"predicates":["sioc:last_activity_date"],"datatype":"xsd:dateTime","callback":"date_iso8601"}},"source":{"en":"","fr":"en"},"retranslate":{"en":false,"fr":false},"cid":"0","last_comment_timestamp":"1353018305","last_comment_name":null,"last_comment_uid":"1","comment_count":"0","name":"root","picture":"0","data":"b:0;"}
The REST module provides a framework for exposing Drupal's data structures as RESTful web services.
Configuration Management
It’s like Features module in core, only better.
node ID 4
node ID 4
What problems are we trying to solve?
Live
Save
textSetting 1Setting 2 label
Database Database
Dev
TESTtest test test test test test test test test test test test test test
node/4admin/config/foo
WelcomeThis is real content on the live site that end users are viewing
node/4
Save
old textSetting 1Setting 2 label
admin/config/foo
What problems are we trying to solve?
Live
Save
textSetting 1Setting 2 label
Database Database
Dev
TESTtest test test test test test test test test test test test test test
node/4admin/config/foo
WelcomeThis is real content on the live site that end users are viewing
node/4
Save
old textSetting 1Setting 2 label
admin/config/foo
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()
ctools_export_object()/ctools_export_load_object()
db_select()/db_update()/db_delete()
$conf[...];hook_update_N()
drush fu
What’s the plan forDrupal 8?
http://heyrocker.com/how-use-drupal-8-configuration-system
Live
Save
textSetting 1Setting 2 label
Active store(e.g.
Database)
Active store(e.g.
Database)
Dev
TESTtest test test test test test test test test test test test test test
node/4admin/config/foo
WelcomeThis is real content on the live site that end users are viewing
node/4
Save
old textSetting 1Setting 2 label
admin/config/foo
File storage
File storage
ALERT!Important announcement about something.
ALERT!Important announcement about something.
node/4 node/4
Cache Cache
Active File Store
Staging File Store
Active File Store
Staging File Store
http://heyrocker.com/how-use-drupal-8-configuration-system
Live
Save
textSetting 1Setting 2 label
Active store(e.g.
Database)
Active store(e.g.
Database)
Dev
TESTtest test test test test test test test test test test test test test
node/4admin/config/foo
WelcomeThis is real content on the live site that end users are viewing
node/4
Save
old textSetting 1Setting 2 label
admin/config/foo
File storage
File storage
$node->uuid = '0a8f293...'; $node->uuid = '98a7bd...';
ALERT!Important announcement about something.
ALERT!Important announcement about something.
Cache Cache
node/4 node/4
Active File Store
Active File Store
Staging File Store
Active File Store
Staging File Store
1
23
4
5
What’s the plan forDrupal 8?
Screensht of UI with Diff
Configuration API
$config = config(‘contact.settings’);$config->set(‘user_default_enabled’, 1);$config->save();
default_category: feedbackflood: limit: '5' interval: '3600'user_default_enabled: '1'
files/config_XXX/active/contact.settings.yml
Want to deploy it? Use config().
State API
state()->set('update.last_check', $now);...$last_check = state()->get('update.last_check') ?: 0;
Only useful for this environment? Use state().
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 stuff
• Getting OOPy with it!
• Entity API++
• More fasterer testbot!
• File/Media API improvements
• ...and more!
Gotta catch ‘em all!
http://drupal.org/list-changes
Thank you!Questions?