Upgrade to Pro — share decks privately, control downloads, hide ads and more …

There and Back Again: A Developer's Tale

Jack Lenox
January 28, 2016

There and Back Again: A Developer's Tale

This is a talk that I gave at A Day of REST.

More info at: github.com/jacklenox/there-and-back-again

Jack Lenox

January 28, 2016
Tweet

More Decks by Jack Lenox

Other Decks in Technology

Transcript

  1. THE FACTS > Using websites often sucks. > Connections can

    be crappy. > Page load times can be slow. > Not always a continuous user experience.
  2. THE STATE OF JAVASCRIPT > Google Play/Docs > Instagram >

    UCLA School of the Arts & Architecture
  3. SINGLE-PAGE APPLICATIONS > Historically, well criticised. > Have been maturing

    over a long period of time now. > Not necessarily suited to every case, but more maligned than they deserve.
  4. LET'S RECAP The problems with single-page applications: > Search Engine

    Optimisation > Client/server code partitioning > Browser history > Analytics > Speed of initial load
  5. BROWSER HISTORY AND ANALYTICS History API1: var state = {

    'post_id': 1234 }; var title = 'A Day of Rest'; var url = 'a-day-of-rest'; history.pushState( state, title, url ); 1 For more information on this, check out the MDN History API docs.
  6. CLIENT/SERVER CODE PARTITIONING Handlebars or Mustache: <article id="post-{{id}}" {{post_class}}> <header

    class="entry-header"> <h1 class="entry-title">{{the_title}}</h1> </header> <div class="entry-content"> {{the_content}} </div> </article>
  7. CLIENT/SERVER CODE PARTITIONING React: <article id="post-{ this.props.ID }" { this.props.postClass

    }> <header class="entry-header"> <h1 class="entry-title">{ this.props.title }</h1> </header> <div class="entry-content"> { this.props.content } </div> </article>
  8. SPEED OF INITIAL LOAD Automatically generate PHP from your JS:

    var markup = "<?php get_header();" + React.renderToString( post({ title: 'the_title', content: 'the_content' }) ) + "<?php get_footer(); ?>"; markup = markup.replace( /the_title/gi, '<?php the_title(); ?>' ); markup = markup.replace( /the_content/gi, '<?php the_content(); ?>' ); fs.writeFileSync( 'single.php', markup );
  9. BOOTSTRAP // functions.php $bootstrap = array(); global $wp_query; while (

    $wp_query->have_posts() ) { $wp_query->the_post(); $bootstrap[] = array( "id" => get_the_ID(), "title" => array( "rendered" => get_the_title() ) ); } $bootstrap_json = json_encode( $bootstrap ); wp_register_script( 'bs-script', ... ); wp_localize_script( 'bs-script', 'bootstrap_json', $bootstrap_json ); wp_enqueue_script( 'bs-script' );
  10. LOCALISE ALL THE THINGS $permalink_structure = get_option( 'permalink_structure' ); $show_on_front

    = get_option( 'show_on_front' ); $page_on_front = get_option( 'page_on_front' );