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

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
10. WITHOUT JAVASCRIPT, THINGS ARE GETTING HARDER > Service Worker. > Push notifications. > User expectations.
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.
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/