Difficulties of VersionPress and how we solve them.

1. VersionPress
The dark side

2. Why is WordPress
hard?
VersionPress is not an exception – quite the opposite

3. Biggest Challenges
• GUIDs
• Lack of foreign keys
• Poor database design
• Tracking all changes
• Format for storing data in Git

4. GUIDs

5. GUIDs

6. Foreign keys

7. Foreign keys

8. Foreign keys
post:
table: posts
id: ID
references:
post_author: user
post_parent: post
mn-references:
term_relationships.term_taxonomy_id: term_taxonomy
user:
table: users
id: ID

9. Foreign keys
post:
table: posts
id: ID
references:
post_author: user
post_parent: post
mn-references:
term_relationships.term_taxonomy_id: term_taxonomy
user:
table: users
id: ID

10. Foreign keys

11. Foreign keys

12. Foreign keys
postmeta:
id: meta_id
parent-reference: post_id
references:
post_id: post
value-references:
meta_key@meta_value:
_thumbnail_id: post

13. Foreign keys

14. Foreign keys

15. Poor DB design
“12 tables ought to be enough for anybody”

16. Tracking all changes

17. Format
[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"

18. GUI
• React + WP-API
• Independent app consuming REST API

19. GUI – WP-API
register_rest_route($namespace, '/commits', array(
'methods' => WP_REST_Server::READABLE,
'callback' => array($this, 'getCommits'),
'args' => array(
'page' => array(
'default' => '0'
)
),
'permission_callback' => array($this, 'checkPermissions')
));
register_rest_route($namespace, '/undo', array(
'methods' => WP_REST_Server::CREATABLE,
'callback' => array($this, 'undoCommit'),
'args' => array(
'commit' => array(
'required' => true
)
),
'permission_callback' => array($this, 'checkPermissions')
));

20. GUI – data fetch
WpApi
.get('commits')
.query({page: page})
.on('progress', (e) => progressBar.progress(e.percent))
.end((err: any, res: request.Response) => {
if (err) {
this.setState({
commits: [],
message: HomePage.getErrorMessage(res),
loading: false,
displayUpdateNotice: false
});
} else {
this.setState({
pages: res.body.pages.map(c => c + 1),
commits: res.body.commits as Commit[],
message: null,
loading: false,
displayUpdateNotice: false
});
this.checkUpdate();
}
});

21. WordPress + Clean Code
Oxymoron?

22. WordPress + Clean Code
Separate your code
from WordPress

23. WordPress + Clean Code
Thin layer
between WP and your code
• hooks,
• global variables,
• WP functions

24. “All great changes are preceded by chaos.”
— Deepak Chopra