Refactoring the Disaster No One Is Talking About - - PowerPoint PPT Presentation

▶
refactoring the disaster no one is talking about
SMART_READER_LITE
LIVE PREVIEW

Refactoring the Disaster No One Is Talking About - - PowerPoint PPT Presentation

Nov 11, 2023 277 likes •724 views

@ petetasker @ptasker Refactoring the Disaster No One Is Talking About deliciousbrains.com/loopconf How We're Handling JavaScript Tech Debt in WP Migrate DB Pro @ petetasker @ptasker ABOUT ME WP Migrate DB Pro developer Canadian, Eh!

slide-1
SLIDE 1

Refactoring the Disaster No One Is Talking About

@petetasker

@ptasker

deliciousbrains.com/loopconf

slide-2
SLIDE 2

How We're Handling JavaScript Tech Debt in WP Migrate DB Pro

slide-3
SLIDE 3
  • WP Migrate DB Pro developer
  • Canadian, Eh! 🍂
  • First conference talk 😲

@petetasker

@ptasker

ABOUT ME

slide-4
SLIDE 4

WP Migrate DB Pro

slide-5
SLIDE 5

Outline:

  • What is technical debt?
  • Symptoms
  • Understand the code
  • Get your test on!
  • Refactor
slide-6
SLIDE 6

What disaster 🔦?

slide-7
SLIDE 7

What is tech debt?

Easy > Better™

slide-8
SLIDE 8

$('.migrate-db-button').click(function (event) { doing_ajax = true; $.ajax({ success: function (data) { doing_ajax = false; wpmdb.functions.long_func = function () { doing_ajax = true; $.ajax({ // ... }); }; } }); // end ajax });

slide-9
SLIDE 9

$('.migrate-db-button').click(function (event) { doing_ajax = true; $.ajax({ success: function (data) { doing_ajax = false; wpmdb.functions.long_func = function () { doing_ajax = true; $.ajax({ // ... }); }; } }); // end ajax });

slide-10
SLIDE 10

$('.migrate-db-button').click(function (event) { doing_ajax = true; $.ajax({ success: function (data) { doing_ajax = false; wpmdb.functions.long_func = function () { doing_ajax = true; $.ajax({ // ... }); }; } }); // end ajax });

slide-11
SLIDE 11

How does this happen?

slide-12
SLIDE 12
slide-13
SLIDE 13

Symptoms

  • Long functions, deeply nested code
  • The “the only one who can ever

change this code is Pete 😭” efgect

  • Global variables and functions

slide-14
SLIDE 14

💩

slide-15
SLIDE 15

Understanding the code 🤕

slide-16
SLIDE 16
slide-17
SLIDE 17

Get your test on 💼

slide-18
SLIDE 18

To get this…

slide-19
SLIDE 19

Requires this… You need this…

slide-20
SLIDE 20
slide-21
SLIDE 21

const findText = await page.evaluate( ( sel ) => { return document.querySelector( sel ).value; }, '#old-url' ); expect( findText ).to.be.equal( `//${process.env.REMOTE_SITE}` ); await page.waitFor( '[value=Pull]' ); await page.click( '[value=Pull]' ); const successText = await page.evaluate( ( sel ) => { return document.querySelector( sel ).innerHTML; }, '.progress-title' ); //Check header for string expect( successText ).to.include( process.env.REMOTE_SITE );

slide-22
SLIDE 22

const findText = await page.evaluate( ( sel ) => { return document.querySelector( sel ).value; }, '#old-url' ); expect( findText ).to.be.equal( `//${process.env.REMOTE_SITE}` ); await page.waitFor( '[value=Pull]' ); await page.click( '[value=Pull]' ); const successText = await page.evaluate( ( sel ) => { return document.querySelector( sel ).innerHTML; }, '.progress-title' ); //Check header for string expect( successText ).to.include( process.env.REMOTE_SITE );

slide-23
SLIDE 23

const findText = await page.evaluate( ( sel ) => { return document.querySelector( sel ).value; }, '#old-url' ); expect( findText ).to.be.equal( `//${process.env.REMOTE_SITE}` ); await page.waitFor( '[value=Pull]' ); await page.click( '[value=Pull]' ); const successText = await page.evaluate( ( sel ) => { return document.querySelector( sel ).innerHTML; }, '.progress-title' ); //Check header for string expect( successText ).to.include( process.env.REMOTE_SITE );

slide-24
SLIDE 24

Refactor

  • Globals and ‘this’
  • Code splitting
  • ‘New JS™’
slide-25
SLIDE 25

dev.to

slide-26
SLIDE 26

function wpmdb_call_next_hook( ) { const wpmdb = window.wpmdb; if ( !wpmdb.common.call_stack.length ) { wpmdb.common.call_stack = wpmdb.common.hooks; } var func = wpmdb.common.call_stack[ 0 ]; wpmdb.common.call_stack.shift(); func.call( this ); }

Window {}

slide-27
SLIDE 27

// ‘use strict’ function wpmdb_call_next_hook( ) { const wpmdb = window.wpmdb; if ( !wpmdb.common.call_stack.length ) { wpmdb.common.call_stack = wpmdb.common.hooks; } var func = wpmdb.common.call_stack[ 0 ]; wpmdb.common.call_stack.shift(); func.call( this ); }

undefined

slide-28
SLIDE 28

// ‘use strict’ function wpmdb_call_next_hook( ) { const wpmdb = window.wpmdb; if ( !wpmdb.common.call_stack.length ) { wpmdb.common.call_stack = wpmdb.common.hooks; } var func = wpmdb.common.call_stack[ 0 ]; wpmdb.common.call_stack.shift(); func.call( this ); }

window.wpmdb_call_next_hook();

Window {}

slide-29
SLIDE 29

Code Splitting

(or why I ❤ Webpack)

slide-30
SLIDE 30

/** * Wrapper for wpmdb.functions, assigned in Webpack entry file */ export default class WPMDBCommon { constructor() {} // Previously wpmdb.functions.wpmdb_migration_type() wpmdb_toggle_migration_action_text() { // ... } // ... }

slide-31
SLIDE 31

import WPMDBCommon from './src/js/helpers/wpmdbCommon'; // window.wpmdb.functions = {…} wpmdb.functions = new WPMDBCommon(); function importAll( r ) { r.keys().forEach( function( file ) { if ( !file.includes( 'wpmdbCommon.js' ) ) { r( file ); } } ); } importAll( require.context( 'imports-loader?$=>window.jQuery!./src', true, /^(.*\.(js|sass|scss$))/im ) );

slide-32
SLIDE 32

import WPMDBCommon from './src/js/helpers/wpmdbCommon'; // window.wpmdb.functions = {…} wpmdb.functions = new WPMDBCommon(); function importAll( r ) { r.keys().forEach( function( file ) { if ( !file.includes( 'wpmdbCommon.js' ) ) { r( file ); } } ); } importAll( require.context( 'imports-loader?$=>window.jQuery!./src', true, /^(.*\.(js|sass|scss$))/im ) );

slide-33
SLIDE 33

import WPMDBCommon from './src/js/helpers/wpmdbCommon'; // window.wpmdb.functions = {…} wpmdb.functions = new WPMDBCommon(); function importAll( r ) { r.keys().forEach( function( file ) { if ( !file.includes( 'wpmdbCommon.js' ) ) { r( file ); } } ); } importAll( require.context( 'imports-loader?$=>window.jQuery!./src', true, /^(.*\.(js|sass|scss$))/im ) );

slide-34
SLIDE 34

import WPMDBCommon from './src/js/helpers/wpmdbCommon'; // window.wpmdb.functions = {…} wpmdb.functions = new WPMDBCommon(); function importAll( r ) { r.keys().forEach( function( file ) { if ( !file.includes( 'wpmdbCommon.js' ) ) { r( file ); } } ); } importAll( require.context( 'imports-loader?$=>window.jQuery!./src', true, /^(.*\.(js|sass|scss$))/im ) );

slide-35
SLIDE 35

‘New JS™’ 😄

slide-36
SLIDE 36

// Before $( $table_select ).append( '<option' + selected + 'value="' + table + '">' + table + size + '</option>' ); // After $( $table_select ).append( `<option ${selected} value="${table}"> ${table + size} </option>` );

slide-37
SLIDE 37

async recursiveTransferFiles( stage, status = null, batch_count = 10 ) { let response; try { response = await $.ajax( { // ... } ); const parsed_response = JSON.parse( response ); // Do stuff with response } catch ( error ) { // … } }

slide-38
SLIDE 38

async recursiveTransferFiles( stage, status = null, batch_count = 10 ) { let response; try { response = await $.ajax( { // ... } ); const parsed_response = JSON.parse( response ); // Do stuff with response } catch ( error ) { // … } }

slide-39
SLIDE 39

async recursiveTransferFiles( stage, status = null, batch_count = 10 ) { let response; try { response = await $.ajax( { // ... } ); const parsed_response = JSON.parse( response ); // Do stuff with response } catch ( error ) { // … } }

slide-40
SLIDE 40

async recursiveTransferFiles( stage, status = null, batch_count = 10 ) { let response; try { response = await $.ajax( { // ... } ); const parsed_response = JSON.parse( response ); // Do stuff with response } catch ( error ) { // … } }

slide-41
SLIDE 41

async recursiveTransferFiles( stage, status = null, batch_count = 10 ) { let response; try { response = await $.ajax( { // ... } ); const parsed_response = JSON.parse( response ); // Do stuff with response } catch ( error ) { // … } }

slide-42
SLIDE 42

Remember:

  • Understand the code
  • Get your test on!
  • Refactor
  • Globals
  • Code splitting
  • ‘New JS™’
slide-43
SLIDE 43

That’s all folks

@petetasker

@ptasker

deliciousbrains.com/loopconf