WarsawJS Slides: Template

Topics:

1. Isomorphic or Universal JS - what does it mean?
2. Classic JS client side app
3. Universal JS app
4. Server side React rendering
5. React single page app - server side routing

Isomorphic or Universal - what does it mean?

Isomorphic JS

Process or output is the same, but different implementation - e.g. Underscore and Lodash

Universal JS

The same code run both client and server side.

Classic JS client side app

Advanteges

• Whole app lives in the client
• Independed from server side

Disadavnteges

• Cannot serve HTML to crawlers
• Low performance of initial HTML rendering

Universal JS app

Here comes React

                ...
                import ReactDOM from 'react-dom/server'
                import HTML from 'components/HTML'
                   
                const app = new Express()
                const server = new http.Server(app)
                    
                app.get('*', (request, response) => {
                  response.send('<!doctype html>\n' + ReactDOM.renderToString(<HTML />))
                })
                ...
            

What about Single Page Application?

React single page app - server side routing

                ...
                import ReactDOM from 'react-dom/server'
                import {match, RouterContext} from 'react-router'
                import routes from './routes'
                ...
                app.get('*', (request, response) => {
                  match({routes, location: request.url}, (error, redirectLocation, renderProps) => {
                    if (error) {
                      response.status(500).send(error.message)
                    } else if (renderProps) {
                      response.send(ReactDOM.renderToString(<RouterContext {...renderProps} />))
            

React single page app - server side data fetching

It's time for example!