Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
There and Back Again: A Developer's Tale
Search
Jack Lenox
January 28, 2016
Technology
3
1.6k
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
How better performing websites can help save the planet
jacklenox
3
660
How better performing websites can help save the planet
jacklenox
0
1.4k
What WordPress developers can do about climate change
jacklenox
0
110
An introduction to the WordPress REST API
jacklenox
1
190
An Introduction to Object-Oriented Programming, Design Patterns, and Test-Driven Development
jacklenox
3
440
Building Websites with the REST API
jacklenox
0
250
Writing PHP with React
jacklenox
0
370
Theming, React and the REST API
jacklenox
0
480
Building themes with the WP REST API
jacklenox
1
650
Other Decks in Technology
See All in Technology
KTC_DBRE.pdf
_awache
1
290
バッチ処理のSLOをどう設計するか
rynsuke
7
590
生成AIサービスPanorama AIご説明資料
sdt
0
300
Why do you get AWS certificates
hirosys
0
120
現実世界の事象から学ぶSOLID原則
h0r15h0
25
10k
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
200
10分でわかるfreeeのQA
freee
0
260
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
260
Terraform v1.7のTest mocking機能の紹介 / Introducing the Test mocking feature of Terraform v1.7
yayoi_dd
1
100
どう買う?Azure
kuniteru
1
190
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
280
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
140
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Web Components: a chance to create the future
zenorocha
304
41k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
Designing Experiences People Love
moore
135
23k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
What's in a price? How to price your products and services
michaelherold
236
11k
Making Projects Easy
brettharned
106
5.4k
Faster Mobile Websites
deanohume
296
30k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
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/