Made with drupal 8

WHO WE ARE
Leolando Tan,
Front end developer, Promet Source
Mary Chris Casis,
Junior Front end developer, Webizat
Luc Bezier,
Freelance & Consultant Drupal,
Promet Source / Webizat
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 2

SUMMARY
● Project overview
● Why start with Drupal 8 Beta?
● Site building
● Theming
● Configuration Manager
● Custom Module
MADE WITH DRUPAL 8

THE PROJECT
Drupalcamp Cebu 2015 website.
Sessions, Speakers, Venue info, Event info, Sponsors ...
Open Source: https://github.com/promet/drupalcampcebu2015/
Live at https://2015.drupalcebu.org
Development partially sponsored by Promet Source and Webizat.
MADE WITH DRUPAL 8

THE PROJECT
MADE WITH DRUPAL 8
https://github.com/promet/drupalcampcebu2015/

DRUPAL-8-BETA-12
Project started with Beta-12. Beta-12 was:
- An Early version.
- Unstable. A version for development, not production.
- Over 20 known critical issues with this beta release.
MADE WITH DRUPAL 8

WHY START WITH DRUPAL 8 BETA?
MADE WITH DRUPAL 8

WHY WE USED DRUPAL 8 BETA
New features and improvements (more than 200 in total).
Project is not critical.
Project can be done using core alone (no contributed modules).
No data to migrate.
We would go live on RC1, not beta.
Great opportunity to learn and share.
MADE WITH DRUPAL 8

DRUPAL-8-BETA-12
Project started in July, using Drupal 8 beta 12.
Beta 12 & 13, our goal :
Create configuration and share it with other developers.
Thanks “vagrant” …
MADE WITH DRUPAL 8

OUR BETA TO RC JOURNEY
MADE WITH DRUPAL 8
BETA-14
THEMING
BETA-12 & 13
SETUP
Configuration
management.

MADE WITH DRUPAL 8
BETA-14
THEMING
BETA-15 & 16
TROUBLES
No beta to beta
updates from Beta-
14.
BETA-12 & 13
SETUP
Configuration
management.

MADE WITH DRUPAL 8
BETA-14
THEMING
BETA-15 & 16
TROUBLES
No beta to beta
updates from Beta-
14.
RC1
LIVE
We go Live and
Open Source
RC2 & RC3
PROJECT
IMPROVEMENTS
Life is good !
BETA-12 & 13
SETUP
Configuration
management.

SITE BUILDING
MADE WITH DRUPAL 8

CONTRIB TO D8 CORE
Breakpoint CacheTags
Content Translation Email
Entity File Entity
Link Phone
Picture Quick Edit
Transliteration UUID
Views / CTools RESTWS (REST)
CKEditor Date
Display Suite (view modes) Internationalization
Migrate
MADE WITH DRUPAL 8

CONTRIB TO D8 CORE
CKEditor
Finally a great wysiwyg
integration out of
the box.
MADE WITH DRUPAL 8
Adding the image
button
Automatically
adds the plugin
settings

D7 CORE TO CONTRIB
Blog
Dashboard
PHP Filter
Poll
XML-RPC
RIP : Overlay
MADE WITH DRUPAL 8

D7 CORE TO CONTRIB
Overlay in Drupal 7 - Removed in Drupal 8
MADE WITH DRUPAL 8

NEW FIELDS TYPE IN CORE
MADE WITH DRUPAL 8

Telephone
MADE WITH DRUPAL 8
Uses HTML5 input form field for
telephone field.
Mobile-friendly

SAVING PAGES IN D8
MADE WITH DRUPAL 8

PLACING BLOCKS
MADE WITH DRUPAL 8
Assign blocks to a
region using
“place block”.
Nothing in
disabled blocks by
default.

MADE WITH DRUPAL 8
PLACING BLOCKS
Finally, out of the box you can place
the same block on two regions !

MADE WITH DRUPAL 8
PLACING BLOCKS
Visibility settings when a
block is being placed on a
region.
With drupal 7 core you
would set that setting
once, directly on the block.

MADE WITH DRUPAL 8
Adding fields directly on the custom block, like a content type.
CUSTOM BLOCK LIBRARY

THEMING
MADE WITH DRUPAL 8

26
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015
CREATING A SUB-THEME
Place themes in the ‘themes/custom’ folder.

BOOSTRAP THEME IN DRUPAL 8
Started our theme on D8 beta versions,
no boostrap theme for D8 yet.
The community pledged to release Bootstrap
theme for Drupal-8.0.0
drupal.org/project/bootstrap
MADE WITH DRUPAL 8

OUR THEME SOLUTION
Classy +
MADE WITH DRUPAL 8

LIBRARIES.YML EXAMPLE
cuddly-slider:
version: 1.x
css:
theme:
css/cuddly-slider.css: {}
js:
js/cuddly-slider.js: {}
MADE WITH DRUPAL 8

LIBRARIES.YML - CSS EXAMPLE
+ css
+ base
- normalize.css
+ layout
- layout.css
- layout--medium.css
- layout--wide.css
+ components
- button.css
+ theme
- theme--light.css
- theme--dark.css
MADE WITH DRUPAL 8

LIBRARIES.YML - JS
MADE WITH DRUPAL 8

QUESTION, BUG OR NOT?
Started theming from Beta 14.
Our theme is a sub theme of Classy.
In beta 16, we implemented the libraries, but not javascript is coming
up. We checked several times, but it doesn’t work.
What is going on ? Bug or not ?
MADE WITH DRUPAL 8

INJECT YOUR CSS AND JAVASCRIPT
Not a bug.
Learn the hard way, if you want JS, in <head> inside html.html.twig
you will need :
<js-placeholder token="{{ placeholder_token|raw }}">
Classy theme does not use javascript,
no JS injection in the template in beta-14. It came later on in classy.
We found that line when Classy got updated, on beta-16.
MADE WITH DRUPAL 8

LIBRARIES.YML
MADE WITH DRUPAL 8

LIBRARIES.YML
Note the dependencies with Drupal core javascript.
- core/DrupalSettings
It lets us use the settings variables in Drupal behaviors.
MADE WITH DRUPAL 8

JAVASCRIPT IN DRUPAL 8
The “ok it works” method
$(document).ready(function () {
// Do some fancy stuff.
});
MADE WITH DRUPAL 8

The right way.
Drupal.behaviors(drupalSettings)
.once()
MADE WITH DRUPAL 8

Drupal.behaviors.myBehavior = {
attach: function (context, settings) {
$('input.myCustomBehavior',context)
.once('myCustomBehavior').addClass('processed');
}
};
MADE WITH DRUPAL 8

TWIG DEBUGGING, ACTIVATE
sites/default/services.yml
parameters:
twig.config:
debug: true
MADE WITH DRUPAL 8

TWIG DEBUGGING, RESULT IN HTML




<article>....</article>

MADE WITH DRUPAL 8

TWIG DEBUGGING, DEVEL KINT MODULE
Debug all the variables:
{{ kint() }}
Debug an object or array:
{{ kint(page.content) }}
For special characters (like #), use this:
{{ kint(page[“#content_two”]) }}
MADE WITH DRUPAL 8

TWIG DEBUGGING
MADE WITH DRUPAL 8

CONFIGURATION
MANAGER
MADE WITH DRUPAL 8

FEATURES MODULE IN DRUPAL 7
Features is a contributed module to group components from modules
together in a single feature module.
What we are supposed to do with features:
Group together functionalities to answer a specific use case.
What we really do with the features module in Drupal 7:
We build a complex deployment system to synchronize environments.
MADE WITH DRUPAL 8

DRUPAL 8 CONFIGURATION MANAGER
The configuration manager module stores all the configuration of your
project as yaml files.
Made to synchronize environments and helps to manage complexity.
Those yaml files are :
- Small: Reduces conflicts.
- Organized: They follow a naming standards and structure.
- Separate: Sites own a configuration, not modules.
MADE WITH DRUPAL 8

DRUSH COMMANDS FOR CONFIGURATION
Export your configuration:
$ drush cex
Import your configuration:
$ drush cim
Those commands import / export all your configuration.
Use GIT to select which yaml configuration you really want to update
and share.
MADE WITH DRUPAL 8

DRUPAL 8 CONFIGURATION MANAGER
The configuration manager is not made to share configuration across
several projects. Your site owns a configuration.
To use the configuration in different environments of the same project,
they will need the same Universally Unique IDentifier (UUID).
Drush command to know your project’s UUID:
$ drush cget system.site
To edit the UUID:
$ drush cedit system.site
MADE WITH DRUPAL 8

BETA ISSUES
During the beta development, the variable name to synchronize the
configuration changed, from “staging” to “sync”, causing us some issues.
You will now set your configuration folder like :
$config_directories['sync'] = './../config/sync';
MADE WITH DRUPAL 8

QUESTION, BUG OR NOT?
We deleted a field.
The system deleted a view at the same time.
We checked the view using the UI, that specific field was not used in
the view.
What happened ? Bug or not ?
MADE WITH DRUPAL 8

NOT A BUG, IT’S DEPENDENCY
The fields were in the
master display of the view,
but not in any current
display.
Overridden by all displays
in the view, we could not
see the field in Views UI.
MADE WITH DRUPAL 8
Dependency. Deleting a field, used in a view, would delete that view.

CUSTOM MODULE
MADE WITH DRUPAL 8

MODULES ARCHITECTURE
Description of your module is now a yaml file.
We still used a “.module” file.
MADE WITH DRUPAL 8

CUSTOM MODULE WITH FORM API
Form API is pretty similar as in Drupal 7.
MADE WITH DRUPAL 8

WHAT HAPPENED TO $USER?
Drupal 7:
GLOBAL $user;
Drupal 8:
$user = Drupal::currentUser();
Access the roles like:
$user->getRoles()
MADE WITH DRUPAL 8

WHY DRUPAL 8 IS FAST?
Out of the box, Drupal 8 is optimized for production.
To develop, you will have some minor changes to do.
Here is the result of our Drupal 8 project, with a basic configuration :
Results from webpagetest.org for 2015.drupalcebu.org few days before the event.
MADE WITH DRUPAL 8

MORE ABOUT D8 CORE AT DRUPALCAMP CEBU
2:45 PM
5 PM
MADE WITH DRUPAL 8
All sessions of Drupalcamp Cebu 2015 on 2015.drupalcebu.org/sessions

QUESTIONS ?
MADE WITH DRUPAL 8

THANK YOU !
Leolando Tan, @leolandotan
https://www.drupal.org/u/leolando.tan
Mary Chris Casis, @casismary
https://www.drupal.org/u/casism
Luc Bezier, @Luukyb
https://www.drupal.org/u/luukyb
MADE WITH DRUPAL 8

Made with drupal 8

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Made with drupal 8 (20)

More from Luc Bézier (8)

Recently uploaded (20)

Made with drupal 8