Tweet
Tweet

Slide 1

Slide 1 text

Server-Side Rendering with Vue.js Martina Kraus 29.03.2017 @wing121 github.com/codekittey

Slide 2

Slide 2 text

Who am I? { “name”: “Martina Kraus”, “working”: [“Software-Developer at Onwerk GmbH”, “lecturer at HS Mannheim (Web-technologies)”], “technologies”: [“javascript/ ecmascript6/ 7”,”node”, “docker”, “nosql-databases” ], “Others”: [“founder of RheinNeckarJS and Docker Mannheim Meetup”, “Member of Hackerstolz e.V”] } 2

Slide 3

Slide 3 text

Agenda ● Server-Side Rendering ○ Problems with Client-Side Rendering ● Vue.js ● Simple SSR with Express Web Server ● Do we need SSR? ● (Nuxt.js) 3

Slide 4

Slide 4 text

4 \n"; echo "" . $my_array[0] . "" . $my_array[1] . "\n"; $z = 2; for ($i=0; $i < 2; $i++) { echo "" . $my_array[$z] . ""; echo "" . $my_array[$z + 2] . "\n"; $z++; } echo "\n"; ?>

Slide 5

Slide 5 text

Better: Client-Side Rendering ● Single Page Applications! ● Slick transitions! ● No page refresh! ● JSON everywhere! 5

Slide 6

Slide 6 text

“That’s fine, everyone has JavaScript enabled nowadays” BUT 6

Slide 7

Slide 7 text

Problems with Client-Side Rendering ● SEO ○ Complex solutions ● Bad internet connection (number and size of requests) ○ Webpack’s code splitting ● Delay between rendering initial HTML File an App (ng2 / react / vue) App re-rendering (Initial Load) 7

Slide 8

Slide 8 text

Server-Side rendering ● Server renders html-source code ○ Browser download a page with HTML content already in place ● Browser still does graphical rendering 8

Slide 9

Slide 9 text

Vue.js ● Started 2013 by Evan You ● Current Version: 2.1.10 -- MIT-license ● Framework for building SPA (MVVM) ● Avoided problems of other frameworks (like Angular and React) ● Similar to React: ○ Provide reactive and composable view components ○ Utilize a virtual DOM 9

Slide 10

Slide 10 text

Vue.js - Declarative Rendering ● Every App has at least one main Instance 10 var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
{{ message }}

Slide 11

Slide 11 text

Vue.js - Components ● Similar to webcomponents in Angular (.vue-Files) 11 Vue.component('todo-item', { props: ['todo'], template: '
  • {{ todo.text }}
    • ' })

    Slide 12

    Slide 12 text

    Vue.js - Syntax ● Similar to AngularJS/ Angular ○ ○

    Now you see me

    ○ Filters: {{ message | filterA | filterB }} ○
    ○
  • {{ item.message }}
    • 12

    Slide 13

    Slide 13 text

    Vue.js - Syntax ● Similar to AngularJS/ Angular

    Message is: {{ message }}

    13

    Slide 14

    Slide 14 text

    Vue.js - Requests ● Vue-resources // in a Vue instance this.$http.get('/cats, [options]).then(successCallback, errorCallback); this.$http.post('/moreCats', [body], [options]).then(successCallback, errorCallback); 14

    Slide 15

    Slide 15 text

    So far so good for client-rendering 15

    Slide 16

    Slide 16 text

    Simple SSR in Vue 16 // Step 1: Create a Vue instance const Vue = require('vue'); const app = new Vue({ render: function (h) { return h('p', 'hello world'); }});

    Slide 17

    Slide 17 text

    Simple SSR in Vue 17 // Step 2: Create a renderer const renderer = require('vue-server-renderer').createRenderer(); // Step 3: Render the Vue instance to HTML renderer.renderToString(app, function (error, html) { if (error) throw error; console.log(html); // =>

    hello world

    })

    Slide 18

    Slide 18 text

    Simple SSR with the Express Web Server 18 new Vue({ template: '
    You have been here for {{ counter }} seconds.
    ', data: { counter: 0 }, created: function () { var vm = this setInterval(function () { vm.counter += 1 }, 1000) } })

    Slide 19

    Slide 19 text

    Simple SSR with the Express Web Server ● Create Server-Side rendering: ○ Add instance of our app to global context to mount it ○ In node export a factory function to create a instance of the app 19

    Slide 20

    Slide 20 text

    Do we need SSR? ● SEO ○ With SPA your site won’t show up in search engines ○ Google renders JavaScript but others don’t ● Performance ○ SSR improve performance ○ SSR degrades performance ○ http://andrewhfarmer.com/server-side-render/ 20

    Slide 21

    Slide 21 text

    Do we need SSR? ● Complexity ○ Increase the complexity of an app 21

    Slide 22

    Slide 22 text

    Use SSR if…. ● SEO on Bing, Yahoo etc… ● Performance reasons 22

    Slide 23

    Slide 23 text

    Don’t use SSR if…. ● If Google is enough, it’s enough ● If your vue/ react or ng2 app isn’t working right now: make it work first 23

    Slide 24

    Slide 24 text

    Alternatives to SSR ● Client-side as usual ● Prerendering ○ Feature in Chrome (since 2011) ○ Hidden Page is created ○ Now: Prerender SPA Plugins (for Webpack) 24

    Slide 25

    Slide 25 text

    Discussion “Don't use SSR just because it's sexy right now - it comes with a cost.” - http://andrewhfarmer.com/server-side-render 25

    Slide 26

    Slide 26 text

    26

    Slide 27

    Slide 27 text

    27 Martina Kraus @wing121

    Slide 28

    Slide 28 text

    Further Readings ● https://github.com/chrisvfritz/prerender-spa-plugin ● https://prerender.io/ ● https://webpack.js.org/guides/code-splitting-require/ ● http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/ ● https://www.npmjs.com/package/vue-server-renderer ● https://vuejs.org/ ● https://github.com/acoshift/vuejs-ssr-example ● https://www.npmjs.com/package/axios ● https://github.com/pagekit/vue-resource/ 28