1. VersionPress
NAHLÉDNĚTE ZA OPONU
Jan Voráček

2. Dotazy
https://sli.do/#wcphadev

3. VersionPress
Open-source verzovací plugin
Sebemenší změna na webu = nová verze
Umožňuje týmová workflows
https://sli.do/#wcphadev

4. Největší výzvy
Unikátní identifikace databázových entit
Cizí klíče ve WP
Špatný návrh databáze / zneužívání základních tabulek
Sledování všech změn
Formát vhodný pro ukládání / přenos / mergování
Vlastní tabulky pluginů / témat vzhledů
https://sli.do/#wcphadev

5. Databáze
Smutný příběh jednoho CMS
https://sli.do/#wcphadev

6. Unikátní identifikace entit
Your site
Staging
Production
New post (nav_menu_item)
ID: 13
Your site
New post (page)
ID: 13
?
https://sli.do/#wcphadev

7. Unikátní identifikace entit
https://sli.do/#wcphadev

8. Unikátní identifikace entit
Your site
Staging
Production
New post (nav_menu_item)
ID: 13
Your site
New post (page)
ID: 13
?
https://sli.do/#wcphadev

9. Unikátní identifikace entit
Your site
Staging
Production
New post (nav_menu_item)
ID: 13
VPID: A34B38985CD356
Your site
New post (page)
ID: 13
VPID: 8356A35CD4B389
✓
https://sli.do/#wcphadev

10. Unikátní identifikace entit
New post (nav_menu_item)
ID: 13
VPID: A34B38985CD356
Your site
New post (page)
ID: 13
VPID: 8356A35CD4B389
Post (nav_menu_item)
ID: 14
VPID: A34B38985CD356
Post (page)
ID: 13
VPID: 8356A35CD4B389
https://sli.do/#wcphadev

11. Unikátní identifikace entit
New post (nav_menu_item)
ID: 13
VPID: A34B38985CD356
Your site
New post (page)
ID: 13
VPID: 8356A35CD4B389
Post (nav_menu_item)
ID: 14
VPID: A34B38985CD356
Post (page)
ID: 13
VPID: 8356A35CD4B389
https://sli.do/#wcphadev

12. Cizí klíče
https://sli.do/#wcphadev

13. Cizí klíče
schema.php:
CREATE TABLE $wpdb->postmeta (
meta_id bigint(20) unsigned NOT NULL auto_increment,
post_id bigint(20) unsigned NOT NULL default '0',
meta_key varchar(255) default NULL,
meta_value longtext,
PRIMARY KEY (meta_id),
KEY post_id (post_id),
KEY meta_key (meta_key($max_index_length))
) $charset_collate;
https://sli.do/#wcphadev

14. Cizí klíče
post:
table: posts
id: ID
…
postmeta:
id: meta_id
parent-reference: post_id
references:
post_id: post
value-references:
meta_key@meta_value:
_thumbnail_id: post
_menu_item_object_id: '@vp_get_menu_reference'
https://sli.do/#wcphadev

15. Cizí klíče
post:
table: posts
id: ID
…
postmeta:
id: meta_id
parent-reference: post_id
references:
post_id: post
value-references:
meta_key@meta_value:
_thumbnail_id: post
_menu_item_object_id: '@vp_get_menu_reference'
https://sli.do/#wcphadev

16. Cizí klíče
https://sli.do/#wcphadev

17. Cizí klíče
post:
table: posts
id: ID
…
postmeta:
id: meta_id
parent-reference: post_id
references:
post_id: post
value-references:
meta_key@meta_value:
_thumbnail_id: post
_menu_item_object_id: '@vp_get_menu_reference'
https://sli.do/#wcphadev

18. Cizí klíče
https://sli.do/#wcphadev

19. Cizí klíče
https://sli.do/#wcphadev

20. Cizí klíče
wp_posts
wp_term_taxonomy
wp_posts
https://sli.do/#wcphadev

21. Cizí klíče
post:
table: posts
id: ID
…
postmeta:
id: meta_id
parent-reference: post_id
references:
post_id: post
value-references:
meta_key@meta_value:
_thumbnail_id: post
_menu_item_object_id: '@vp_get_menu_reference'
https://sli.do/#wcphadev

22. Cizí klíče
https://sli.do/#wcphadev

23. Cizí klíče
https://sli.do/#wcphadev

24. Cizí klíče
https://sli.do/#wcphadev

25. Cizí klíče
[
0 => false,
'auto_add' => [
0 => 2
]
]
https://sli.do/#wcphadev

26. Cizí klíče
option:
table: options
vpid: option_name
value-references:
option_name@option_value:
site_icon: post
page_on_front: post
page_for_posts: post
default_category: term
default_email_category: term
widget_nav_menu[/d+/]["nav_menu"]: term
widget_pages[/d+/]["exclude"]: post
nav_menu_options["auto_add"][/d+/]: term
featured-content["tag-id"]: term
theme_mods_*["nav_menu_locations"][/.*/]: term
https://sli.do/#wcphadev

27. DB návrh WP / pluginů
„12 tabulek by mělo stačit každému" – Autor neznámý
https://sli.do/#wcphadev

28. DB návrh WP / pluginů
Post Types:
◦ post
◦ page
◦ attachment
◦ revision
◦ nav_menu_item
◦ custom_css
◦ customize_changeset
https://sli.do/#wcphadev

29. DB návrh WP / pluginů
{
"widget_text[2]": {
"starter_content": true,
"value": {
"encoded_serialized_instance":
"YToyOntzOjU6InRpdGxlIjtzOjc6IkZpbmQgVXMiO3M6NDoidGV4dCI7czoyMDA6IjxwPjxzdHJvbmc+QWRkcmVzczwvc3Ryb25nPjxiciA
vPjEyMyBNYWluIFN0cmVldDxiciAvPk5ldyBZb3JrLCBOWSAxMDAwMTwvcD48cD48c3Ryb25nPkhvdXJzPC9zdHJvbmc+PGJyIC8+TW9
uZGF5Jm1kYXNoO0ZyaWRheTogOTowMEFNJm5kYXNoOzU6MDBQTTxiciAvPlNhdHVyZGF5ICZhbXA7IFN1bmRheTogMTE6MDBBTSZ
uZGFzaDszOjAwUE08L3A+Ijt9",
"title": "Find Us",
"is_widget_customizer_js_value": true,
"instance_hash_key": "d16b28dc2af40b7d8ee54668bd545ed1"
},
"type": "option",
"user_id": 1
},
"widget_search[3]": {
"starter_content": true,
"value": {
"encoded_serialized_instance": "YToxOntzOjU6InRpdGxlIjtzOjY6IlNlYXJjaCI7fQ==“,
customize_changeset in wp_posts
https://sli.do/#wcphadev

30. DB návrh WP / pluginů
{
"widget_text[2]": {
"starter_content": true,
"value": {
"encoded_serialized_instance":
"YToyOntzOjU6InRpdGxlIjtzOjc6IkZpbmQgVXMiO3M6NDoidGV4dCI7czoyMDA6IjxwPjxzdHJvbmc+QWRkcmVzczwvc3Ryb25nPjxiciA
vPjEyMyBNYWluIFN0cmVldDxiciAvPk5ldyBZb3JrLCBOWSAxMDAwMTwvcD48cD48c3Ryb25nPkhvdXJzPC9zdHJvbmc+PGJyIC8+TW9
uZGF5Jm1kYXNoO0ZyaWRheTogOTowMEFNJm5kYXNoOzU6MDBQTTxiciAvPlNhdHVyZGF5ICZhbXA7IFN1bmRheTogMTE6MDBBTSZ
uZGFzaDszOjAwUE08L3A+Ijt9",
"title": "Find Us",
"is_widget_customizer_js_value": true,
"instance_hash_key": "d16b28dc2af40b7d8ee54668bd545ed1"
},
"type": "option",
"user_id": 1
},
"widget_search[3]": {
"starter_content": true,
"value": {
"encoded_serialized_instance": "YToxOntzOjU6InRpdGxlIjtzOjY6IlNlYXJjaCI7fQ==“,
customize_changeset in wp_posts
https://sli.do/#wcphadev

31. DB návrh WP / pluginů
{
"widget_text[2]": {
"starter_content": true,
"value": {
"encoded_serialized_instance":
"YToyOntzOjU6InRpdGxlIjtzOjc6IkZpbmQgVXMiO3M6NDoidGV4dCI7czoyMDA6IjxwPjxzdHJvbmc+QWRkcmVzczwvc3Ryb25nPjxiciA
vPjEyMyBNYWluIFN0cmVldDxiciAvPk5ldyBZb3JrLCBOWSAxMDAwMTwvcD48cD48c3Ryb25nPkhvdXJzPC9zdHJvbmc+PGJyIC8+TW9
uZGF5Jm1kYXNoO0ZyaWRheTogOTowMEFNJm5kYXNoOzU6MDBQTTxiciAvPlNhdHVyZGF5ICZhbXA7IFN1bmRheTogMTE6MDBBTSZ
uZGFzaDszOjAwUE08L3A+Ijt9",
"title": "Find Us",
"is_widget_customizer_js_value": true,
"instance_hash_key": "d16b28dc2af40b7d8ee54668bd545ed1"
},
"type": "option",
"user_id": 1
},
"widget_search[3]": {
"starter_content": true,
"value": {
"encoded_serialized_instance": "YToxOntzOjU6InRpdGxlIjtzOjY6IlNlYXJjaCI7fQ==“,
customize_changeset in wp_posts
https://sli.do/#wcphadev

32. Workflows
WordPress na steroidech
https://sli.do/#wcphadev

33. Úložiště dat
Databáze
◦ Obtížné verzování
◦ Slabší programovací jazyk
◦ Složité diffy
◦ Běžné média soubory >> běžné DB řádky
Filesystém
◦ Verzování => Git
◦ PHP > PL/SQL
◦ Diffy => Git
◦ Počet běžných DB řádek >> počet souborů
https://sli.do/#wcphadev

34. Formát pro ukládání
Soubory se nemění
DB záznamy je potřeba šikovně diffovat
◦ Řádek v DB == soubor
◦ Sloupec v DB == řádek v souboru
◦ DDL? JSON? Serializovaný objekt?
https://sli.do/#wcphadev

35. Formát pro ukládání – INI !!!
[8CFC6D1208DC4D0F877039A3B8300366]
post_date = "2016-02-11 17:29:03”
post_date_gmt = "2016-02-11 17:29:03”
post_content = "live"
post_content_filtered = ""
post_title = "Added on LIVE"
post_excerpt = ""
post_status = "publish"
post_type = "post"
comment_status = "open"
ping_status = "open"
post_password = ""
post_name = "added-on-live"
to_ping = ""
pinged = ""
menu_order = 0
post_mime_type = ""
guid = "http://3D13C49A-BE86-4C8B-B4ED-D83222FFB296"
vp_post_author = "528E14A1AAD04CC08121DD631B2F6591"
vp_post_parent = 0
vp_term_taxonomy[0] = "752CC32F4AF842A79BEF42454E130743"
https://sli.do/#wcphadev

36. Formát pro ukládání
commit ac33c7943bb2d947d0e9769b70dd2f2cfe56b7c5
Author: admin <jan@voracek.net>
Date: Sat Feb 18 01:08:31 2017 +0100
[VP] Unapproved comment for post 'Vítejte!'
VP-Action: comment/unapprove/32EB4B4D4D944039818CF9DF3EB73E62
VP-Comment-Author: A WordPress Commenter
VP-Comment-PostTitle: Vítejte!
X-VP-Version: DEV
X-VP-Environment: default
--- a/wp-content/vpdb/comments/32/32EB4B4D4D944039818CF9DF3EB73E62.ini
+++ b/wp-content/vpdb/comments/32/32EB4B4D4D944039818CF9DF3EB73E62.ini
@@ -9,7 +9,7 @@
comment_content = "Hi, this is a comment..."
comment_karma = "0"
-comment_approved = "1"
+comment_approved = "0"
comment_agent = ""
comment_type = ""
vp_comment_post_ID = "A766C62334614A50B67305B56D1C6EA6"
https://sli.do/#wcphadev

37. Formát pro ukládání
commit ac33c7943bb2d947d0e9769b70dd2f2cfe56b7c5
Author: admin <jan@voracek.net>
Date: Sat Feb 18 01:08:31 2017 +0100
[VP] Unapproved comment for post 'Vítejte!'
VP-Action: comment/unapprove/32EB4B4D4D944039818CF9DF3EB73E62
VP-Comment-Author: A WordPress Commenter
VP-Comment-PostTitle: Vítejte!
X-VP-Version: DEV
X-VP-Environment: default
--- a/wp-content/vpdb/comments/32/32EB4B4D4D944039818CF9DF3EB73E62.ini
+++ b/wp-content/vpdb/comments/32/32EB4B4D4D944039818CF9DF3EB73E62.ini
@@ -9,7 +9,7 @@
comment_content = "Hi, this is a comment..."
comment_karma = "0"
-comment_approved = "1"
+comment_approved = "0"
comment_agent = ""
comment_type = ""
vp_comment_post_ID = "A766C62334614A50B67305B56D1C6EA6"
https://sli.do/#wcphadev

38. Zobrazení změn v GUI
commit ac33c7943bb2d947d0e9769b70dd2f2cfe56b7c5
Author: admin <jan@voracek.net>
Date: Sat Feb 18 01:08:31 2017 +0100
[VP] Unapproved comment for post 'Vítejte!'
VP-Action: comment/unapprove/32EB4B4D4D944039818CF9DF3EB73E62
VP-Comment-Author: A WordPress Commenter
VP-Comment-PostTitle: Vítejte!
X-VP-Version: DEV
X-VP-Environment: default
--- a/wp-content/vpdb/comments/32/32EB4B4D4D944039818CF9DF3EB73E62.ini
+++ b/wp-content/vpdb/comments/32/32EB4B4D4D944039818CF9DF3EB73E62.ini
@@ -9,7 +9,7 @@
comment_content = "Hi, this is a comment..."
comment_karma = "0"
-comment_approved = "1"
+comment_approved = "0"
comment_agent = ""
comment_type = ""
vp_comment_post_ID = "A766C62334614A50B67305B56D1C6EA6"
https://sli.do/#wcphadev

39. https://sli.do/#wcphadev
Zobrazení změn v GUI
commit ac33c7943bb2d947d0e9769b70dd2f2cfe56b7c5
Author: admin <jan@voracek.net>
Date: Sat Feb 18 01:08:31 2017 +0100
[VP] Unapproved comment for post 'Vítejte!'
VP-Action: comment/unapprove/32EB4B4D4D944039818CF9DF3EB73E62
VP-Comment-Author: A WordPress Commenter
VP-Comment-PostTitle: Vítejte!
X-VP-Version: DEV
X-VP-Environment: default
--- a/wp-content/vpdb/comments/32/32EB4B4D4D944039818CF9DF3EB73E62.ini
+++ b/wp-content/vpdb/comments/32/32EB4B4D4D944039818CF9DF3EB73E62.ini
@@ -9,7 +9,7 @@
comment_content = "Hi, this is a comment..."
comment_karma = "0"
-comment_approved = "1"
+comment_approved = "0"
comment_agent = ""
comment_type = ""
vp_comment_post_ID = "A766C62334614A50B67305B56D1C6EA6"

40. Zobrazení změn v GUI
actions.yml:
comment:
tags:
VP-Comment-PostTitle: /
VP-Comment-Author: comment_author
actions:
create: New comment for post '%VP-Comment-PostTitle%'
edit:
message: Edited comment for post '%VP-Comment-PostTitle%'
priority: 12
delete: Deleted comment for post '%VP-Comment-PostTitle%
trash: Comment for post '%VP-Comment-PostTitle%' moved to trash
untrash: Comment for post '%VP-Comment-PostTitle%' moved from trash
approve: Approved comment for post '%VP-Comment-PostTitle%'
unapprove: Unapproved comment for post '%VP-Comment-PostTitle%'
https://sli.do/#wcphadev

41. Zobrazení změn v GUI
actions.yml:
comment:
tags:
VP-Comment-PostTitle: /
VP-Comment-Author: comment_author
actions:
create: New comment for post '%VP-Comment-PostTitle%'
edit:
message: Edited comment for post '%VP-Comment-PostTitle%'
priority: 12
delete: Deleted comment for post '%VP-Comment-PostTitle%
trash: Comment for post '%VP-Comment-PostTitle%' moved to trash
untrash: Comment for post '%VP-Comment-PostTitle%' moved from trash
approve: Approved comment for post '%VP-Comment-PostTitle%'
unapprove: Unapproved comment for post '%VP-Comment-PostTitle%'
https://sli.do/#wcphadev

42. Zobrazení změn v GUI
comment:
tags:
VP-Comment-PostTitle: /
VP-Comment-Author: comment_author
actions:
unapprove: Unapproved comment for post '%VP-Comment-PostTitle%'
https://sli.do/#wcphadev

43. Zobrazení změn v GUI
comment:
tags:
VP-Comment-PostTitle: /
VP-Comment-Author: comment_author
actions:
unapprove: Unapproved comment for post '%VP-Comment-PostTitle%'
Author: admin <jan@voracek.net>
Date: Sat Feb 18 01:08:31 2017 +0100
[VP] Unapproved comment for post 'Vítejte!'
VP-Action: comment/unapprove/32EB4B4D4D944039818CF9DF3EB73E62
VP-Comment-Author: A WordPress Commenter
VP-Comment-PostTitle: Vítejte!
https://sli.do/#wcphadev

44. Zobrazení změn v GUI
comment:
tags:
VP-Comment-PostTitle: /
VP-Comment-Author: comment_author
actions:
unapprove: Unapproved comment for post '%VP-Comment-PostTitle%'
Author: admin <jan@voracek.net>
Date: Sat Feb 18 01:08:31 2017 +0100
[VP] Unapproved comment for post 'Vítejte!'
VP-Action: comment/unapprove/32EB4B4D4D944039818CF9DF3EB73E62
VP-Comment-Author: A WordPress Commenter
VP-Comment-PostTitle: Vítejte!
https://sli.do/#wcphadev

45. Sledování změn
Na úrovni DB
◦ Monkey patching wp-db.php / db.php drop-in
◦ create, edit, delete
Pomocí filtrů
add_filter('vp_entity_action_post', function ($action, $oldEntity, $newEntity) {
if ($action === 'edit') { // determine more specific edit action
$diff = EntityUtils::getDiff($oldEntity, $newEntity);
if (isset($diff['post_status']) && $diff['post_status'] === 'trash') {
return 'trash';
}
if (isset($diff['post_status']) && $oldEntity['post_status'] === 'trash') {
return 'untrash';
}
https://sli.do/#wcphadev

46. Rozšiřitelnost VersionPressu
schema.yml
◦ DB schéma – tabulky, cizí klíče, ignorované entity, atd.
actions.yml
◦ Seznam možných akcí + textová reprezentace
shortcodes.yml
hooks.php
◦ PHP hooky na WP i VP akce
https://sli.do/#wcphadev

47. Tipy pro vývojáře
https://sli.do/#wcphadev

48. Tipy pro vývojáře pluginů
Nezneužívejte základní tabulky WP
Používejte cizí klíče v DB
Vytyčte v kódu si jasnou hranici mezi WP a vlastním pluginem
Testujte svůj kód
Testujte integraci s WP
Přečtěte si Clean Code, The Clean Coder, Test Driven Development by Example, Data Modeling Essentials
https://sli.do/#wcphadev