Clean Code DevelopmentJakarta WordPress Meetup #11

Ivan Kristianto@ivankr ist ianto

About Me

• My name is Ivan Kristianto

• Professional Web Engineer

• WordPress core contributor

• ElasticPress team member

• Jakarta WordPress Meetup organizer

Our Community Page• Please visit our website:

https://wp-id.org• Please join our Facebook group:

https://www.facebook.com/groups/

WordPressDevID/• Please join our Slack:

https://chat.wp-id.org

Who Love Spaghetti Code?It Works, but….

Problems with Spaghetti Code• Hard to understand

• Patches are everywhere

• Impossible to scale

• Undocumented

• Unpredicted results

• Possible buggy, unsecure and under perform

• Sample click here

Write Clean Code Could• Have less bugs

• Save hundreds of hours of your time or somebody else.

• Easier to scale

• More secure

• Maximize performance

How to write clean code?

Design Patterns1. Use PHP NamespaceUse namespace all PHP code outside of theme templates so its contents don’t conflict with other, similarly-named classes and functions (“namespace collisions”).

Sample:<?php /** * Example of a 'use' declaration */ namespace TenUp\ProjectName\Module; use TenUp\ProjectName\Common\TwitterAPI;

function do_something() { $twitter_api = new TwitterAPI(); }

Design PatternsSample

<?php namespace TenUp\ProjectName\Common; /** * Namespaced class name example. */ class TwitterAPI { public function __construct() { // ... } }

Design Patterns

2. Decouple a big feature to a pluginIt’s recommended to decouple your big feature to a plugin, so it is reusable in another project. And even better You can open source it, so You can help other people that need your solution. And even better, they can contribute to your code and give your richer perspective.

Design Patterns3. Decouple Plugin and Theme using add_theme_supportDisabling the plugin should not results any errors in your Theme code. Use WordPress theme support feature.

Sample

In your themes:<?php add_theme_support( 'my-cool-feature' );

In your plugin:<?php if ( current_theme_supports( 'my-cool-feature' ) ) { // initiate the plugin }

Design Patterns

4. DRY ( Do not Repeat Yourself ) codeRefractor your code as a common class or helper functions, so You will never repeat your code in another place.

Design PatternsOur single.php and category.php:

<?php get_header(); ?>

<div id="primary" class="content-area"> <?php /* Start the Loop */ while ( have_posts() ) : the_post(); ?><main id="main" class="site-main" role="main"> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="entry-content"> <?php the_content(); ?> </div><!-- .entry-content -->

</article><!-- #post-## --> <?php endwhile; // End of the loop. ?> </main><!-- #main --> </div><!-- #primary -->

<?php get_footer();

Design PatternsRefractor to template part. Our post/content.php template part

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<div class="entry-content"> <?php the_content(); ?> </div><!— .entry-content -->

</article><!-- #post-## -->

Design PatternsOur single.php and category.php:

<?php get_header(); ?>

<div id="primary" class="content-area"> <?php /* Start the Loop */ while ( have_posts() ) : the_post(); ?><main id="main" class="site-main" role="main"><?php

get_template_part( 'template-parts/post/content' ); endwhile; // End of the loop. ?> </main><!-- #main --> </div><!-- #primary -->

<?php get_footer();

Design Patterns

5. For Javascript, use closure and don’t pollute window object

Adding methods or properties to the window object or the global namespace should be done carefully. window object pollution can result in collisions with other scripts. We should wrap our scripts in closures and expose methods and properties to window decisively

Design PatternsSample:<script> function my_awesome_function(){ // do your awesome function } </script>

What happen if some other plugin use the same function name? It will cause collision.

Design PatternsSample closures:<script> ( function() { function my_awesome_function(){ // do your awesome function }

})(); </script>

Code Style• Use standard naming conventions.

• Fully documented classes/functions in Doc Block

• Indentation is a must!

• Use WordPress Coding Standards Sniffer: https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards

• Read more: https://10up.github.io/Engineering-Best-Practices/php/

• Read more: https://make.wordpress.org/core/handbook/best-practices/coding-standards/

Understand Your Code

• Always understand each line of your codes, and the solution You provide in the bigger picture.

• Read WordPress codex, see arguments and the return value.

• Never cheat/shortcut/short circuit your code.

• Before commit/submit/push, re-read your code, twice!

Misc. Tips• Use PHP Composer Autoloading.

• Use Git as your source code management.

• Fail early and often patterns.

• Do not have more than 2 level if-else.

• Keep your mind healthy and know when to take a break.

Code is Poetry