This is a retrospective of our challenging experience building a project based on Drupal 8 beta, then RC versions. This presentation will group Site Building, Front and Back end topics for Drupal 8. The whole project is Open Source and available on github. Team effort: - Leolando Tan for Front end. - Mary Chris Casis for Front end and Site building. - Luc Bezier for Back end and Configuration Manager. Presentation for Drupalcamp Cebu, 7 November 2015.

2. 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

3. SUMMARY
● Project overview
● Why start with Drupal 8 Beta?
● Site building
● Theming
● Configuration Manager
● Custom Module
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 3

4. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 4

5. THE PROJECT
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 5
https://github.com/promet/drupalcampcebu2015/

6. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 6

7. WHY START WITH DRUPAL 8 BETA?
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 7

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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 8

9. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 9

10. OUR BETA TO RC JOURNEY
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 10
BETA-14
THEMING
BETA-12 & 13
SETUP
Configuration
management.

11. OUR BETA TO RC JOURNEY
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 11
BETA-14
THEMING
BETA-15 & 16
TROUBLES
No beta to beta
updates from Beta-
14.
BETA-12 & 13
SETUP
Configuration
management.

12. OUR BETA TO RC JOURNEY
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 12
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.

13. SITE BUILDING
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 13

14. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 14

15. CONTRIB TO D8 CORE
CKEditor
Finally a great wysiwyg
integration out of
the box.
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 15
Adding the image
button
Automatically
adds the plugin
settings

16. D7 CORE TO CONTRIB
Blog
Dashboard
PHP Filter
Poll
XML-RPC
RIP : Overlay
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 16

17. D7 CORE TO CONTRIB
Overlay in Drupal 7 - Removed in Drupal 8
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 17

18. NEW FIELDS TYPE IN CORE
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 18

19. Telephone
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 19
Uses HTML5 input form field for
telephone field.
Mobile-friendly

20. SAVING PAGES IN D8
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 20

21. PLACING BLOCKS
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 21
Assign blocks to a
region using
“place block”.
Nothing in
disabled blocks by
default.

22. MADE WITH DRUPAL 8
Leolando 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 !

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

24. MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 24
Adding fields directly on the custom block, like a content type.
CUSTOM BLOCK LIBRARY

25. THEMING
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 25

26. 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.

27. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 27

28. OUR THEME SOLUTION
Classy +
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 28

29. LIBRARIES.YML EXAMPLE
cuddly-slider:
version: 1.x
css:
theme:
css/cuddly-slider.css: {}
js:
js/cuddly-slider.js: {}
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 29

30. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 30

31. LIBRARIES.YML - JS
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 31

32. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 32

33. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 33

34. LIBRARIES.YML
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 34

35. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 35

36. JAVASCRIPT IN DRUPAL 8
The “ok it works” method
$(document).ready(function () {
// Do some fancy stuff.
});
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 36

37. JAVASCRIPT IN DRUPAL 8
The right way.
Drupal.behaviors(drupalSettings)
.once()
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 37

38. JAVASCRIPT IN DRUPAL 8
Drupal.behaviors.myBehavior = {
attach: function (context, settings) {
$('input.myCustomBehavior',context)
.once('myCustomBehavior').addClass('processed');
}
};
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 38

39. TWIG DEBUGGING, ACTIVATE
sites/default/services.yml
parameters:
twig.config:
debug: true
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 39

40. 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 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 40

41. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 41

42. TWIG DEBUGGING
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 42

43. CONFIGURATION
MANAGER
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 43

44. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 44

45. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 45

46. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 46

47. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 47

48. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 48

49. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 49

50. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 50
Dependency. Deleting a field, used in a view, would delete that view.

51. CUSTOM MODULE
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 51

52. MODULES ARCHITECTURE
Description of your module is now a yaml file.
We still used a “.module” file.
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 52

53. CUSTOM MODULE WITH FORM API
Form API is pretty similar as in Drupal 7.
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 53

54. WHAT HAPPENED TO $USER?
Drupal 7:
GLOBAL $user;
Drupal 8:
$user = Drupal::currentUser();
Access the roles like:
$user->getRoles()
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 54

55. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 55

56. MORE ABOUT D8 CORE AT DRUPALCAMP CEBU
2:45 PM
5 PM
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 56
All sessions of Drupalcamp Cebu 2015 on 2015.drupalcebu.org/sessions

57. QUESTIONS ?
MADE WITH DRUPAL 8
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 57

58. 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
Leolando Tan, Luc Bezier, Mary Chris Casis. Drupalcamp Cebu 2015 58