Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
There and Back Again: A Developer's Tale
Jack Lenox
January 28, 2016
Technology
3
1.3k
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
Share
More Decks by Jack Lenox
See All by Jack Lenox
jacklenox
3
390
jacklenox
0
770
jacklenox
0
77
jacklenox
1
140
jacklenox
3
400
jacklenox
0
220
jacklenox
0
340
jacklenox
0
420
jacklenox
1
420
Other Decks in Technology
See All in Technology
sat
40
29k
gobeyond20xx
0
350
piazza
0
130
akitok_
2
790
uzabasetech
2
760
sansandsoc
0
410
1027kg
0
210
nitya
0
320
watanabeyu
0
140
hayatan
0
200
udzura
2
260
ayanadesu
0
420
Featured
See All Featured
chriscoyier
683
180k
addyosmani
311
21k
maggiecrowley
10
510
smashingmag
283
47k
pedronauck
652
110k
shpigford
369
42k
edds
56
9.4k
geoffreycrofte
21
930
stephaniewalter
260
11k
revolveconf
200
9.7k
lynnandtonic
272
16k
erikaheidi
14
4.3k
Transcript
THERE AND BACK AGAIN, A DEVELOPER'S TALE BY JACK LENOX
THE FACTS > Using websites often sucks. > Connections can
be crappy. > Page load times can be slow. > Not always a continuous user experience.
THE STATE OF JAVASCRIPT > Google Play/Docs > Instagram >
UCLA School of the Arts & Architecture
JAVASCRIPT & WORDPRESS (PLUS REST API) > Quartz > ustwo
> Calypso
SINGLE-PAGE APPLICATIONS
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.
WELL-DOCUMENTED DOWNSIDES > Search Engine Optimisation > Client/server code partitioning
> Browser history > Analytics > Speed of initial load
BUT HANG ON? > HTML5 > HTTP/2 > Node.js
None
WITHOUT JAVASCRIPT, THINGS ARE GETTING HARDER > Service Worker. >
Push notifications. > User expectations.
None
NICE, BUT IS IT RESPONSIVE?
MARRYING WORDPRESS AND SINGLE-PAGE APPLICATIONS?
SINGLE-PAGE THEMES?
LET'S RECAP The problems with single-page applications: > Search Engine
Optimisation > Client/server code partitioning > Browser history > Analytics > Speed of initial load
THE PATH TO ENLIGHTENMENT Search Engine Optimisation Client/server code partitioning
Browser history Analytics Speed of initial load
THE PATH TO ENLIGHTENMENT Search Engine Optimisation Client/server code partitioning
Browser history Analytics Speed of initial load
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.
THE PATH TO ENLIGHTENMENT Search Engine Optimisation Client/server code partitioning
Speed of initial load
THE PATH TO ENLIGHTENMENT Search Engine Optimisation Client/server code partitioning
Speed of initial load
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>
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>
THE PATH TO ENLIGHTENMENT Search Engine Optimisation Speed of initial
load
THE PATH TO ENLIGHTENMENT Search Engine Optimisation Speed of initial
load
SEARCH ENGINE OPTIMISATION Google, Bing and DuckDuckGo can already crawl
JS rendered sites.
None
None
None
None
THE PATH TO ENLIGHTENMENT Speed of initial load
THE PATH TO ENLIGHTENMENT Speed of initial load
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 );
SO HOW TO PROCEED? No more excuses. Just do it!
ಠ_ಠ
BUT WAIT, THERE'S MORE!
DON'T RUN AJAX ON EVERY PAGE
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' );
WHAT ABOUT ALL THE OTHER OPTIONS?
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' );
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/
THE END @jacklenox > automattic.com/work-with-us/