Building Isomorphic Web Apps with React

Slide 1

Slide 1 text

Building Isomorphic Web Apps with React @sfdrummerjs drummerjs.com github.com/elyseko/iso-react-demo

Slide 2

Slide 2 text

Of equal forms

Slide 3

Slide 3 text

Practical Isomorphic

Slide 4

Slide 4 text

Why Isomorphic? ● SEO Crawlers ● Performance ● Dev Benefits

Slide 5

Slide 5 text

Syntax Overview of Isomorphic Concepts Code walkthrough Pros/Cons of Isomorphic Apps

Slide 6

Slide 6 text

Syntax

Slide 7

Slide 7 text

Apps and Libraries With React Non React

Slide 8

Slide 8 text

● Pellet (Vevo) ● React Nexus ● Relay (Facebook) React Isomorphic frameworks

Slide 9

Slide 9 text

● Virtual DOM ● Functional View ● renderToString React makes isomorphic possible

Slide 10

Slide 10 text

● Single Page Application (SPA) ● React (vs .14) ● React Router (vs 1.0) ● Browser Sync to serve/update the file In the Browser

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Folder structure - server - app.js (server entry) - routes.js - client - main.js (client entry) - routes.js - shared - routes.js - components - app.jsx - home.jsx

Slide 13

Slide 13 text

Build tools

Slide 14

Slide 14 text

Webpack lets you: ● Build for each environment ● Include environment specific code ● Chunk code into smaller downloadable files

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Abstract server/browser differences

Slide 17

Slide 17 text

Defining environments

Slide 18

Slide 18 text

Gulp + Browser Sync ● Replaced webpack dev server ● Gulp makes it easy to run browser sync

Slide 19

Slide 19 text

Shared routes

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Client Router

Slide 22

Slide 22 text

Server Router

Slide 23

Slide 23 text

Render the view

Slide 24

Slide 24 text

Building the view

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Child Views

Slide 27

Slide 27 text

Render the cards

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Detail page code

Slide 30

Slide 30 text

Declaring our data needs

Slide 31

Slide 31 text

Getting the data

Slide 32

Slide 32 text

Higher Order Component

Slide 33

Slide 33 text

Server render is for bots and crawlers On the Server

Slide 34

Slide 34 text

Serving the page

Slide 35

Slide 35 text

Render on the server

Slide 36

Slide 36 text

Getting the data

Slide 37

Slide 37 text

Server Initial Browser Load SPA

Slide 38

Slide 38 text

Getting the data to the client

Slide 39

Slide 39 text

Reading the data on the client

Slide 40

Slide 40 text

Handling node vs browser

Slide 41

Slide 41 text

Pros of building an isomorphic App ● Serve crawlers and bots ● Initial load times are very fast ● Code reuse between server and client

Slide 42

Slide 42 text

Cons of building an isomorphic app ● Server render performance ● Multiple environments = complications

Slide 43

Slide 43 text

The future of isomorphic ● Relay ● Virtual dom starting to appear more places - Ember ● Virtual DOM optimizations ● Meteor works with react

Slide 44

Slide 44 text

Recommendations ● React ● React Router ● Webpack ● Gulp & Browser Sync ● Entry points not abstraction ● Relay

Slide 45

Slide 45 text

Questions? github.com/elyseko/iso-react-demo [email protected] @sfdrummerjs drummerjs.com

Slide 46

Slide 46 text

References ● [React](https://facebook.github.io/react/) ● [React Router](https://github.com/rackt/react-router) ● [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) ● [Webpack](https://webpack.github.io/) ● [Browser Sync](http://www.browsersync.io/) ● [List of Isomorphic Apps](http://isomorphic.net/)