Date post: | 11-Feb-2017 |
Category: |
Technology |
Upload: | luc-bezier |
View: | 1,739 times |
Download: | 0 times |
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
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 3
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.
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 4
THE PROJECT
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 5
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 6
WHY START WITH DRUPAL 8 BETA?
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 7
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 9
OUR BETA TO RC JOURNEY
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 10
BETA-14THEMING
BETA-12 & 13SETUP
Configuration management.
OUR BETA TO RC JOURNEY
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 11
BETA-14THEMING
BETA-15 & 16TROUBLES
No beta to beta updates from Beta-
14.
BETA-12 & 13SETUP
Configuration management.
OUR BETA TO RC JOURNEY
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 12
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
Configuration management.
SITE BUILDING
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 13
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.
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 15
Adding the image button
Automatically adds the plugin
settings
D7 CORE TO CONTRIB
BlogDashboardPHP FilterPollXML-RPC
RIP : Overlay
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 16
D7 CORE TO CONTRIB
Overlay in Drupal 7 - Removed in Drupal 8
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 17
NEW FIELDS TYPE IN CORE
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 18
Telephone
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 19
Uses HTML5 input form field for telephone field.
Mobile-friendly
SAVING PAGES IN D8
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 20
PLACING BLOCKS
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 21
Assign blocks to a region using “place block”.
Nothing in disabled blocks by default.
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 22
PLACING BLOCKS
Finally, out of the box you can place the same block on two regions !
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 23
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 24
Adding fields directly on the custom block, like a content type.
CUSTOM BLOCK LIBRARY
THEMING
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 25
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
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 27
OUR THEME SOLUTION
Classy +
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 28
LIBRARIES.YML EXAMPLE
cuddly-slider:version: 1.x
css:theme:
css/cuddly-slider.css: {}js:
js/cuddly-slider.js: {}
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 29
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 30
LIBRARIES.YML - JS
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 31
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 32
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 33
LIBRARIES.YML
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 34
LIBRARIES.YML
Note the dependencies with Drupal core javascript.
- core/DrupalSettings
It lets us use the settings variables in Drupal behaviors.
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 35
JAVASCRIPT IN DRUPAL 8
The “ok it works” method
$(document).ready(function () {// Do some fancy stuff.
});
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 36
JAVASCRIPT IN DRUPAL 8
The right way.
Drupal.behaviors(drupalSettings)
.once()
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 37
JAVASCRIPT IN DRUPAL 8
Drupal.behaviors.myBehavior = {attach: function (context, settings) {
$('input.myCustomBehavior',context).once('myCustomBehavior').addClass('processed');
}};
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 38
TWIG DEBUGGING, ACTIVATE
sites/default/services.yml
parameters:twig.config:
debug: true
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 39
TWIG DEBUGGING, RESULT IN HTML<!-- THEME DEBUG --><!-- THEME HOOK: 'node' --><!-- FILE NAME SUGGESTIONS: * node--view--frontpage--page-1.html.twig * node--view--frontpage.html.twig * node--1--teaser.html.twig * node--1.html.twig * node--article--teaser.html.twig * node--article.html.twig * node--teaser.html.twig x node.html.twig--><!-- BEGIN OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->
<article>....</article>
<!-- END OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 40
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 41
TWIG DEBUGGING
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 42
CONFIGURATION MANAGER
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 43
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 44
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 45
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 46
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 47
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 48
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 49
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 50
Dependency. Deleting a field, used in a view, would delete that view.
CUSTOM MODULE
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 51
MODULES ARCHITECTURE
Description of your module is now a yaml file.
We still used a “.module” file.
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 52
CUSTOM MODULE WITH FORM API
Form API is pretty similar as in Drupal 7.
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 53
WHAT HAPPENED TO $USER?
Drupal 7:GLOBAL $user;
Drupal 8:$user = \Drupal::currentUser();
Access the roles like:$user->getRoles()
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 54
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 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 55
MORE ABOUT D8 CORE AT DRUPALCAMP CEBU
2:45 PM
5 PM
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 56
All sessions of Drupalcamp Cebu 2015 on 2015.drupalcebu.org/sessions
QUESTIONS ?
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 57
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
MADE WITH DRUPAL 8Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 58