There and Back Again: A Developer's Tale

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/