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 8Leolando 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


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.orgDevelopment partially sponsored by Promet Source and Webizat.


https://github.com/promet/drupalcampcebu2015/

https://2015.drupalcebu.org

THE PROJECT





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.


WHY START WITH DRUPAL 8 BETA?


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.


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” …


OUR BETA TO RC JOURNEY


BETA-14THEMING

BETA-12 & 13SETUP

Configuration management.



BETA-14THEMING

BETA-15 & 16TROUBLES

No beta to beta updates from Beta-

14.

BETA-12 & 13SETUP




BETA-14THEMING

BETA-15 & 16TROUBLES

No beta to beta updates from Beta-

14.

RC1LIVE

We go Live andOpen Source

RC2 & RC3PROJECT

IMPROVEMENTSLife is good !

BETA-12 & 13SETUP


SITE BUILDING


CONTRIB TO D8 CORE

Breakpoint CacheTagsContent Translation EmailEntity File EntityLink PhonePicture Quick EditTransliteration UUIDViews / CTools RESTWS (REST)

CKEditor DateDisplay Suite (view modes) InternationalizationMigrateMADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 14

CONTRIB TO D8 CORE

CKEditor

Finally a great wysiwygintegration out of the box.


Adding the image button

Automatically adds the plugin

settings

D7 CORE TO CONTRIB

BlogDashboardPHP FilterPollXML-RPC

RIP : Overlay


D7 CORE TO CONTRIB

Overlay in Drupal 7 - Removed in Drupal 8


NEW FIELDS TYPE IN CORE


Telephone


Uses HTML5 input form field for telephone field.

Mobile-friendly

SAVING PAGES IN D8


PLACING BLOCKS


Assign blocks to a region using “place block”.

Nothing in disabled blocks by default.


PLACING BLOCKS

Finally, out of the box you can place the same block on two regions !


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.


Adding fields directly on the custom block, like a content type.

CUSTOM BLOCK LIBRARY

THEMING


26MADE WITH DRUPAL 8Leolando 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


https://www.drupal.org/project/bootstrap

https://www.drupal.org/project/bootstrap

OUR THEME SOLUTION

Classy +


LIBRARIES.YML EXAMPLE

cuddly-slider:version: 1.x

css:theme:

css/cuddly-slider.css: {}js:

js/cuddly-slider.js: {}


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


LIBRARIES.YML - JS


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 ?


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.


LIBRARIES.YML


LIBRARIES.YML

Note the dependencies with Drupal core javascript.

- core/DrupalSettings

It lets us use the settings variables in Drupal behaviors.


JAVASCRIPT IN DRUPAL 8

The “ok it works” method

$(document).ready(function () {// Do some fancy stuff.

});



The right way.

Drupal.behaviors(drupalSettings)

.once()



Drupal.behaviors.myBehavior = {attach: function (context, settings) {

$('input.myCustomBehavior',context).once('myCustomBehavior').addClass('processed');

}};


TWIG DEBUGGING, ACTIVATE

sites/default/services.yml

parameters:twig.config:

debug: true


TWIG DEBUGGING, RESULT IN HTML

<article>....</article>

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”]) }}


TWIG DEBUGGING


CONFIGURATION MANAGER


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.


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.


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.


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


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';


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 ?


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.


Dependency. Deleting a field, used in a view, would delete that view.

CUSTOM MODULE


MODULES ARCHITECTURE

Description of your module is now a yaml file.

We still used a “.module” file.


CUSTOM MODULE WITH FORM API

Form API is pretty similar as in Drupal 7.


WHAT HAPPENED TO $USER?

Drupal 7:GLOBAL $user;

Drupal 8:$user = \Drupal::currentUser();

Access the roles like:$user->getRoles()


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.


https://2015.drupalcebu.org

MORE ABOUT D8 CORE AT DRUPALCAMP CEBU

2:45 PM

5 PM


All sessions of Drupalcamp Cebu 2015 on 2015.drupalcebu.org/sessions

https://2015.drupalcebu.org/sessions

QUESTIONS ?


THANK YOU !

Leolando Tan, @leolandotanhttps://www.drupal.org/u/leolando.tan

Mary Chris Casis, @casismaryhttps://www.drupal.org/u/casism

Luc Bezier, @Luukybhttps://www.drupal.org/u/luukyb


https://www.drupal.org/u/leolando.tan

https://www.drupal.org/u/leolando.tan

https://www.drupal.org/u/casism

https://www.drupal.org/u/casism

https://www.drupal.org/u/luukyb

https://www.drupal.org/u/luukyb

made with drupal 8

Technology