SLIDE 1
SERVER-SIDE RENDERING ISN'T ENOUGH SERVER-SIDE RENDERING ISN'T - - PowerPoint PPT Presentation
SERVER-SIDE RENDERING ISN'T ENOUGH SERVER-SIDE RENDERING ISN'T - - PowerPoint PPT Presentation
SERVER-SIDE RENDERING ISN'T ENOUGH SERVER-SIDE RENDERING ISN'T ENOUGH MATTHEW PHILLIPS MATTHEW PHILLIPS GITHUB.COM/CANJS/CAN-SSR GITHUB.COM/CANJS/CAN-SSR TERMS TERMS Shared codebase Isomorphic Universal WHY BOTHER WHY BOTHER This sucks
SLIDE 2
SLIDE 3
TERMS TERMS
Shared codebase Isomorphic Universal
SLIDE 4
WHY BOTHER WHY BOTHER
Perceived performance: no
- ne likes staring at a spinner.
This sucks SEO: if you care about that sort of thing, it helps. Not every bot is Googlebot. BLING BLING: Amazon reports that conversion increased by 1% for every 100ms improvement.
SLIDE 5
THE STATE OF SERVER RENDERING THE STATE OF SERVER RENDERING
SLIDE 6
EVERYTHING SHOULD BE SERVER RENDERED EVERYTHING SHOULD BE SERVER RENDERED
SLIDE 7
REQUIREMENTS REQUIREMENTS
Rendering speed Only includes the assets needed (CSS and JavaScript) Prevents unnecessary requests in the client
PERFORMANCE PERFORMANCE
Shared router Asynchronous rendering Fast development experience with hot module swapping
MAINTAINABILITY MAINTAINABILITY
SLIDE 8
RENDERING PERFORMANCE RENDERING PERFORMANCE
SLIDE 9
HEADLESS BROWSER HEADLESS BROWSER
PhantomJS Consumed a lot of memory Needed pooling Very fast
SLIDE 10
VIRTUAL DOMS VIRTUAL DOMS
Run the same code on the client and server Run within a single Node context Rendering is usually synchronous
SLIDE 11
CAN-SSR'S VDOM CAN-SSR'S VDOM
Looks like a real DOM, only the basics
SLIDE 12
DEMO COMPATIBILITY DEMO COMPATIBILITY
SLIDE 13
MINIMIZING REQUEST SIZE MINIMIZING REQUEST SIZE
SLIDE 14
/cart
Title
TRADITIONAL METHOD TRADITIONAL METHOD
- 1. Initially unstyled
- 2. Main, site-wide style is loaded
- 3. Page specific style is loaded
progressively.
CSS LOADED IN JAVASCRIPT CSS LOADED IN JAVASCRIPT
SLIDE 15
/cart
Title
WITH SERVER TEMPLATE WITH SERVER TEMPLATE
- 1. Initially partially styled; main CSS is
included, most of the page-specific CSS.
- 2. Rest of page-specific styles are
added.
ADDING CSS MANUALLY ADDING CSS MANUALLY
SLIDE 16
/cart
Title
WITH DONEJS WITH DONEJS
- 1. All styles needed for the page are
included directly in the head. And only the styles needed for the page.
CAN-SSR DOES IT FOR YOU CAN-SSR DOES IT FOR YOU
SLIDE 17
import Framework from 'fancy-framework'; import './styles.scss'; ...
COMPONENT-BASED ARCHITECTURE COMPONENT-BASED ARCHITECTURE
SLIDE 18
MINIMIZING THE NUMBER OF REQUESTS MINIMIZING THE NUMBER OF REQUESTS
SLIDE 19
PREVENT REDUNDANT REQUESTS PREVENT REDUNDANT REQUESTS
<script> INLINE_CACHE = {"users": [{ ... } ] }; </script>
Embed responses into the rendered page. Can be reused on the client to do initial rendering.
SLIDE 20
SHARED CODE-BASE SHARED CODE-BASE
SLIDE 21
HOW MUCH CODE IS SHARED? HOW MUCH CODE IS SHARED?
MINIMIZING DIFFERENCES FOR EASIER MAINTAINENCE MINIMIZING DIFFERENCES FOR EASIER MAINTAINENCE
The "main" can run on both client and in Node. A shared router, not adding new routes in separate places
SLIDE 22
EXAMPLE EXAMPLE
var ssr = require("can-ssr/middleware"); var app = require("express")(); app.use(ssr());
Middleware
var ssr = require("can-ssr"); var render = ssr(); render("/cart").then(function(result){ console.log(result.html); });
Core API
SLIDE 23
ASYNCHRONOUS RENDERING ASYNCHRONOUS RENDERING
SLIDE 24
SYNCHRONOUS RENDERING SYNCHRONOUS RENDERING
Forces all data to be present before rendering. Cannot use component- based architecture. Pushes application logic into another layer. Makes writing reusable components harder.
// server.js import render from "framework-dom"; app.get("/cart", function(req, res){ fetchCart().then(function(data){ res.send( render(data) ); }); }); // cart.js import Component from "fancy-framework"; class Cart extends Component { render() { let data = this.props.data; return <div> ... </div> } }
SLIDE 25
DEMO ASYNCHRONOUS REACT DEMO ASYNCHRONOUS REACT
SLIDE 26
HTTPS://GITHUB.COM/CANJS/CAN-WAIT HTTPS://GITHUB.COM/CANJS/CAN-WAIT
SLIDE 27
INSTANT DEV WORKFLOW INSTANT DEV WORKFLOW
HOT MODULE REPLACEMENT HOT MODULE REPLACEMENT
SLIDE 28
DEMO DONEJS LIVE-RELOAD DEMO DONEJS LIVE-RELOAD
SLIDE 29