Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome 2017
0 likes332 views
This document outlines a presentation about building universal JavaScript web applications with React. It discusses: 1. The term "universal" in relation to JavaScript and some advantages it provides like maintainability and faster load times. 2. Building a frontend single page application with React and then making it universal by rendering on the server as well with React and Express. 3. Key aspects of universal apps like module sharing, routing, data retrieval and state management that work across client and server. 4. An example of building a universal JavaScript app with React called "Judo Heroes" that shows athlete data and profiles, using components, routing, data and building tools like Babel and Webpack.
![The data set
// src/data/athletes.js
const athletes = [
{
id: 'driulis-gonzalez',
name: 'Driulis González',
country: {
id: 'cu',
name: 'Cuba',
icon: 'flag-cu.png',
},
birth: '1973',
image: 'driulis-gonzalez.jpg',
cover: 'driulis-gonzalez-cover.jpg',
link: 'https://en.wikipedia.org/wiki/Driulis_González',
medals: [
{ id: 1, year: '1992', type: 'B', city: 'Barcelona', event: 'Olympic Games', category
{ id: 2, year: '1993', type: 'B', city: 'Hamilton', event: 'World Championships', cat
{ id: 3, year: '1995', type: 'G', city: 'Chiba', event: 'World Championships', catego
{ id: 4, year: '1995', type: 'G', city: 'Mar del Plata', event: 'Pan American Games',
{ id: 5, year: '1996', type: 'G', city: 'Atlanta', event: 'Olympic Games', category:
// ...
],
},
// ...
];
export default athletes;
28](https://image.slidesharecdn.com/universal-js-web-applications-with-react-codemotion-rome-2017-170326084655/85/Universal-JS-Web-Applications-with-React-Luciano-Mammino-Codemotion-Rome-2017-28-320.jpg)
![.babelrc
import path from 'path';
const config = {
entry: {
js: './src/app-client.js',
},
output: {
path: path.join(__dirname, 'src', 'static', 'js'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: path.join(__dirname, 'src'),
use: { loader: 'babel-loader' },
},
],
},
};
.webpack.config.babel.js
{
"presets": ["react", "es2015"]
}
50](https://image.slidesharecdn.com/universal-js-web-applications-with-react-codemotion-rome-2017-170326084655/85/Universal-JS-Web-Applications-with-React-Luciano-Mammino-Codemotion-Rome-2017-50-320.jpg)
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome 2017
- 1. Rome 24-25 MARCH 2017 { Universal JS Web Applications with React Luciano Mammino loige.link/codemotion-rome-2017 1
- 5. AGENDA 1. The term "Universal" JS 2. Who & Why 3. Common problems and technologies 4. Building a frontend only Single Page App 5. Making it universal 5
- 7. NOT ONLY FOR THE WEB... Desktop applications Mobile applications Hardware! 7
- 8. ADVANTAGES OF UNIVERSAL JAVASCRIPT "JavaScript-only" development Maintainability Better SEO Faster "perceived" load time 8
- 9. ADVANTAGES... MORE Keep using React/JS paradigms also to generate "static" websites Speed up content loading with linkprefetch loige.link/universal-react-made-easy-talk 9
- 10. IN THE WILD 10
- 11. IT LOOKS GREAT BUT... 11
- 12. MODULE SHARING Use Node.js modules in the browser UMD 12
- 13. UNIVERSAL RENDERING Render the views of the application from the server (first request) and then in the browser (next requests) 13
- 14. UNIVERSAL ROUTING Recognise the view associated to the current route from both the server and the browser. 14
- 15. UNIVERSAL DATA RETRIEVAL Access data (and APIs) from both the server and the browser. AXIOS UNIVERSAL FETCH 15
- 16. UNIVERSAL STATE MANAGEMENT Manage changes on the state tree both on the server and the client... 16
- 18. 18
- 19. OK... LET'S STOP COMPLAINING AND BUILD SOMETHING! 19
- 20. WHAT ARE WE GOING TO BUILD? loige.link/judo-heroes-app loige.link/judo-heroes-tutorial v 2.0 20
- 21. 21
- 22. 22
- 23. 23
- 25. WHAT TOOLS ARE WE GOING TO USE? v2 v15.4 v4 v5-alpha 25
- 26. Dependencies 😺😺 yarn add [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] 26
- 27. 27
- 28. The data set // src/data/athletes.js const athletes = [ { id: 'driulis-gonzalez', name: 'Driulis González', country: { id: 'cu', name: 'Cuba', icon: 'flag-cu.png', }, birth: '1973', image: 'driulis-gonzalez.jpg', cover: 'driulis-gonzalez-cover.jpg', link: 'https://en.wikipedia.org/wiki/Driulis_González', medals: [ { id: 1, year: '1992', type: 'B', city: 'Barcelona', event: 'Olympic Games', category { id: 2, year: '1993', type: 'B', city: 'Hamilton', event: 'World Championships', cat { id: 3, year: '1995', type: 'G', city: 'Chiba', event: 'World Championships', catego { id: 4, year: '1995', type: 'G', city: 'Mar del Plata', event: 'Pan American Games', { id: 5, year: '1996', type: 'G', city: 'Atlanta', event: 'Olympic Games', category: // ... ], }, // ... ]; export default athletes; 28
- 38. // src/components/Layout.js import React from 'react'; import { Link } from 'react-router-dom'; export const Layout = props => ( <div className="app-container"> <header> <Link to="/"> <img className="logo" src="/img/logo-judo-heroes.png" /> </Link> </header> <div className="app-content">{props.children}</div> <footer> <p> This is a demo app to showcase <strong>universal Javascript</strong> with <strong>React</strong> and <strong>Express</strong>. </p> </footer> </div> ); export default Layout; 38
- 39. // src/components/IndexPage.js import React from 'react'; import { AthletePreview } from './AthletePreview'; export const IndexPage = ({ athletes }) => ( <div className="home"> <div className="athletes-selector"> { athletes.map( athleteData => <AthletePreview key={athleteData.id} {...athleteData} /> ) } </div> </div> ); export default IndexPage; 39
- 40. // src/components/AthletePreview.js import React from 'react'; import { Link } from 'react-router'; export const AthletePreview = (props) => ( <Link to={`/athlete/${props.id}`}> <div className="athlete-preview"> <img src={`img/${props.image}`}/> <h2 className="name">{props.name}</h2> <span className="medals-count"> <img src="/img/medal.png"/> {props.medals.length} </span> </div> </Link> ); export default AthletePreview; 40
- 41. ROUTING 41
- 42. 2 ROUTES Index Page: / Athlete Page: /athlete/:id 42
- 43. // src/components/App.js import React from 'react'; import { Route, Switch } from 'react-router-dom'; import { Layout } from './Layout'; import { IndexPage } from './IndexPage'; import { AthletePage } from './AthletePage'; import { NotFoundPage } from './NotFoundPage'; import athletes from '../data/athletes'; // ... export const App = () => ( <Layout> <Switch> <Route exact path="/" render={renderIndex} /> <Route exact path="/athlete/:id" render={renderAthlete} /> <Route component={NotFoundPage} /> </Switch> </Layout> ); export default App; 43
- 44. // src/components/App.js // ... const renderIndex = () => <IndexPage athletes={athletes} />; const renderAthlete = ({ match, staticContext }) => { const id = match.params.id; const athlete = athletes.find(current => current.id === id); if (!athlete) { return <NotFoundPage staticContext={staticContext} />; } return <AthletePage athlete={athlete} athletes={athletes} />; }; 44
- 45. CLIENT APP 45
- 46. // src/app-client.js import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom' import { App } from './components/App'; const AppClient = () => ( <Router> <App /> </Router> ); window.onload = () => { render( <AppClient />, document.getElementById('main') ); }; 46
- 47. HTML TEMPLATE 47
- 48. // src/views/index.ejs <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Judo Heroes - A Universal JavaScript demo application with React </title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div id="main"><%- markup -%></div> <script src="/js/bundle.js"></script> </body> </html> 48
- 49. BUILD CONFIG (BABEL + WEBPACK) 49
- 50. .babelrc import path from 'path'; const config = { entry: { js: './src/app-client.js', }, output: { path: path.join(__dirname, 'src', 'static', 'js'), filename: 'bundle.js', }, module: { rules: [ { test: path.join(__dirname, 'src'), use: { loader: 'babel-loader' }, }, ], }, }; .webpack.config.babel.js { "presets": ["react", "es2015"] } 50
- 52. // src/server.js import path from 'path'; import { Server } from 'http'; import Express from 'express'; const app = new Express(); const server = new Server(app); // use ejs templates app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views')); // define the folder that will be used for static assets app.use(Express.static(path.join(__dirname, 'static'))); // render the index for every non-matched route app.get('*', (req, res) => { let markup = ''; let status = 200; return res.status(status).render('index', { markup }); }); // start the server const port = process.env.PORT || 3000; const env = process.env.NODE_ENV || 'production'; server.listen(port); "Static" Express server 52
- 53. READY... LET'S TEST IT 53
- 54. RECAP What we learned so far 1. Define views combining React components 2. Add routing using React Router 3. Compile the client bundle with Babel and Webpack 4. Run the app with a static Express server 54
- 56. Updating the server app // ... import { renderToString } from 'react-dom/server'; import { StaticRouter as Router } from 'react-router-dom'; import { App } from './components/App'; // ... app.get('*', (req, res) => { let markup = ''; let status = 200; const context = {}; markup = renderToString( <Router location={req.url} context={context}> <App /> </Router>, ); // context.url will contain the URL to // redirect to if a <Redirect> was used if (context.url) { return res.redirect(302, context.url); } if (context.is404) { status = 404; } return res.status(status).render('index', { markup }); }); 56
- 57. THAT'S IT! LET'S TEST AGAIN 57
- 58. RECAP What we learned so far 1. Create a Single Page Application with React and React Router 2. Add server side routing and rendering using React and React Router libraries in the Express app 58
- 59. UNIVERSAL DATA RETRIEVAL api-proxy & async-props (COMPLETE CHAPTER in ) UNIVERSAL STATE MANAGEMENT Redux Node.js Design Patterns WHERE DO WE GO from here... Code: loige.link/judo-heroes-2 59
- 60. THANKS! loige loige.colmammino (Special thanks to , , Aleksandar Čambas & )@cirpo @andreaman87 @quasi_modal loige.link/codemotion-rome-2017 60