introduction to drupal 8 development - home |...
TRANSCRIPT
![Page 2: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/2.jpg)
Who am I
● Drupal developer in Gov● DrupalACT organizer● Presenter in different Drupal/PHP conferences● Drupal id: rli● https://lirujia.com
![Page 3: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/3.jpg)
The changes in Drupal 8 we know
● Symfony (OOP)● CMI (workflow)● Twig (Theme)● Backbone.js (Inline editor)● REST (Third party integration)● ...
![Page 4: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/4.jpg)
For frontend developers
● Preprocess functions● Twig● Libraries.yml● backbone.js
![Page 5: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/5.jpg)
Preprocess functions
Good news:
The preprocess functions from Drupal 7 remain in Drupal 8.
So we can use THEME_preprocess_page, etc.
Use template_preprocess_hook in your module.
![Page 6: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/6.jpg)
Twig
Variables from hook_theme are available in .twig files like the old tpl.php files.
Filters are available in twig files -- logic in twig.
Learn twig: http://twig.sensiolabs.org/documentation
![Page 7: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/7.jpg)
Add css and JS
No more drupal_add_css and drupal_add_js. Always use render array. (You should have been using it in Drupal 7 anyway)
Register css and js in libraries.yml and attach the library in your render array.
Always think about cache when you render something
![Page 8: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/8.jpg)
Add css and JS
Reference: https://www.drupal.org/developing/api/8/assets
![Page 9: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/9.jpg)
Caching tags
Reference: https://www.drupal.org/developing/api/8/render/arrays/cacheability
![Page 10: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/10.jpg)
Backbone.js
Inline editor
Model - View pattern
Reference: http://backbonejs.org/
![Page 11: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/11.jpg)
The challenge for a Drupal 7
developer
From process oriented programming to object oriented programming
![Page 12: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/12.jpg)
The basic of symfony From routing to controller
![Page 13: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/13.jpg)
No more hook_menu
Put the routing info in your module.routing.yml
![Page 14: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/14.jpg)
No more hook_menu
Put your menu callback in your controller
Reference: https://www.drupal.org/node/2116767
![Page 15: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/15.jpg)
No more hook_menu (for form callback)
Put the routing info in your module.routing.yml
![Page 16: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/16.jpg)
No more hook_menu
(form callback)Put your menu callback in your
controller
Reference: https://www.drupal.org/node/2117411
![Page 17: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/17.jpg)
No more hook_menu (for form callback)
![Page 18: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/18.jpg)
Services To replace the Drupal module APIs
![Page 19: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/19.jpg)
Drupal services
Drupal 8 token example
Drupal 7 token example
![Page 20: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/20.jpg)
Drupal APILiving in the classes now !
![Page 21: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/21.jpg)
Drupal API l() and url() are removed in favor of a routing based URL generation API
Reference: https://www.drupal.org/node/2346779
![Page 22: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/22.jpg)
The workflow to port your module to D81. Find your API in D72. Use the Drupal change
record to find the change3. Use the suggested example
to rewrite
Reference: https://www.drupal.org/list-changes/drupal
![Page 23: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/23.jpg)
PluginsAn interface that you can implement
![Page 24: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/24.jpg)
Block
Annotation
15
25
35
22
Reference: https://www.drupal.org/developing/api/8/block_api
![Page 25: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/25.jpg)
Block
Build function from blockbase interface
Reference: https://www.drupal.org/developing/api/8/block_api
15
25
35
22
![Page 26: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/26.jpg)
Workflow changesNo more features
![Page 27: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/27.jpg)
Drupal CMI Before:
1. Make your config change locally
2. Generate features module3. Commit your code4. Enable your features
module
15
25
35
22
After:
1. Make your config change locally
2. Drush cex3. Commit your code4. Drush cim
![Page 28: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/28.jpg)
Case study
Define a content filter to convert text into links to a taxonomy term page.
For example, we want to turn all ‘Drupal’ words in node body into links to the ‘Drupal’ tag page.
![Page 29: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/29.jpg)
Solution in Drupal 7
Hook_filter_info to define a new filter● Settings callback – settings form
if there is any settings I put a link to our config page here
● Tips callback – tips text● Process callback – the function
that replace the text● A configuration page to allow
user to choose which vocabulary we need to replace with. (hook_menu and callback)
15
25
35
22
Reference: https://api.drupal.org/api/drupal/modules%21filter%21filter.api.php/function/hook_filter_info/7.x
![Page 30: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/30.jpg)
Our D7 code
![Page 31: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/31.jpg)
Our D7 code
![Page 32: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/32.jpg)
Our D7 code
![Page 33: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/33.jpg)
Our D8 code
● Check the Drupal change record for hook_filter_info● Result page https://www.drupal.org/node/2015901● Create your filter plugin class and copy the code in● Check the Drupal change record for hook_menu● Jump to IDE …● Jump to D8 site ...
![Page 34: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/34.jpg)
Conclusion
● Drupal 8 is a complete rewrite. For developer with no knowledge of Object Oriented Programming (OOP), it is even harder to understand how it works
● For a D7 develop to onboard quickly, Drupal change record is a bypass that we can use the examples directly
● For JAVA, C++, developers, welcome to Drupal community!
![Page 35: Introduction to Drupal 8 Development - Home | LIRUJIAlirujia.com/sites/default/files/2016-09/Introduction to...Add css and JS No more drupal_add_css and drupal_add_js. Always use render](https://reader034.vdocuments.site/reader034/viewer/2022051321/5b07d25b7f8b9a992a8b6f33/html5/thumbnails/35.jpg)
What will I do next?Go start to port a module.
Let me know if I can help.
The complete module code in this presentation: https://github.com/rujiali/Drupal_term_filter