There and Back Again: A Developer's Tale

C9a5478931da1bbdcc0be2800daa2915?s=47 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

C9a5478931da1bbdcc0be2800daa2915?s=128

Jack Lenox

January 28, 2016
Tweet

Transcript

  1. THERE AND BACK AGAIN, A DEVELOPER'S TALE BY JACK LENOX

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

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

    UCLA School of the Arts & Architecture
  4. JAVASCRIPT & WORDPRESS (PLUS REST API) > Quartz > ustwo

    > Calypso
  5. SINGLE-PAGE APPLICATIONS

  6. 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.
  7. WELL-DOCUMENTED DOWNSIDES > Search Engine Optimisation > Client/server code partitioning

    > Browser history > Analytics > Speed of initial load
  8. BUT HANG ON? > HTML5 > HTTP/2 > Node.js

  9. None
  10. WITHOUT JAVASCRIPT, THINGS ARE GETTING HARDER > Service Worker. >

    Push notifications. > User expectations.
  11. None
  12. NICE, BUT IS IT RESPONSIVE?

  13. MARRYING WORDPRESS AND SINGLE-PAGE APPLICATIONS?

  14. SINGLE-PAGE THEMES?

  15. LET'S RECAP The problems with single-page applications: > Search Engine

    Optimisation > Client/server code partitioning > Browser history > Analytics > Speed of initial load
  16. THE PATH TO ENLIGHTENMENT Search Engine Optimisation Client/server code partitioning

    Browser history Analytics Speed of initial load
  17. THE PATH TO ENLIGHTENMENT Search Engine Optimisation Client/server code partitioning

    Browser history Analytics Speed of initial load
  18. 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.
  19. THE PATH TO ENLIGHTENMENT Search Engine Optimisation Client/server code partitioning

    Speed of initial load
  20. THE PATH TO ENLIGHTENMENT Search Engine Optimisation Client/server code partitioning

    Speed of initial load
  21. 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>
  22. 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>
  23. THE PATH TO ENLIGHTENMENT Search Engine Optimisation Speed of initial

    load
  24. THE PATH TO ENLIGHTENMENT Search Engine Optimisation Speed of initial

    load
  25. SEARCH ENGINE OPTIMISATION Google, Bing and DuckDuckGo can already crawl

    JS rendered sites.
  26. None
  27. None
  28. None
  29. None
  30. THE PATH TO ENLIGHTENMENT Speed of initial load

  31. THE PATH TO ENLIGHTENMENT Speed of initial load

  32. 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 );
  33. SO HOW TO PROCEED? No more excuses. Just do it!

  34. ಠ_ಠ

  35. BUT WAIT, THERE'S MORE!

  36. DON'T RUN AJAX ON EVERY PAGE

  37. 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' );
  38. WHAT ABOUT ALL THE OTHER OPTIONS?

  39. 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' );
  40. FURTHER READING > github.com/humanmade/feelingrestfultheme > egghead.io/instructors/dan-abramov > github.com/ryelle/Anadama-React > github.com/Automattic/wp-calypso

    > (github.com/jacklenox) > themeshaper.com/2015/11/23/javascript-theme-tutorial/
  41. THE END @jacklenox > automattic.com/work-with-us/