Progressive Web Apps with React.js and Firebase

Transcript

1. PWA w/React.js
   &
   Firebase
   

   View Slide

2. +JimmyMoon
   @ragingwind
   

   View Slide

3. - Simple PWA with React.js
   - App Shell Architecture
   - Web Manifest
   - Service Worker
   - Firebase
   - Tuning on PRPL
   - Auditing by Lighthouse
   

   View Slide

4. - create-react-app
   - (react-scripts < 0.9.5)
   - Webpack > 2.4.x
   - PWA features
   - Minimal snippets
   - One of the app for guiding PWA
   

   View Slide

5. View Slide

6. create-react-app
   

   View Slide

7. > yarn init && tree .
   └── package.json
   

   View Slide

8. > touch public/index.html && tree .
   └── public
   └── index.html
   

   View Slide

9. 
   name="viewport"
   content="width=device-width, initial-scale=1"
   />
   
   name="theme-color"
   content="#0A0A0A"
   />
   ./public/index.html
   

   View Slide

10. > mkdir -p src/components/
    > touch ./src/components/App.js \
    ./src/main.js
    

    View Slide

11. > tree .
    └── src
    ├── components
    │ └── App.js
    └── main.js
    

    View Slide

12. > yarn add react react-dom
    

    View Slide

13. import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App.js';
    ReactDOM.render(,
    document.getElementById('app'));
    ./src/main.js
    

    View Slide

14. import React from 'react';
    class App extends React.Component {
    render() {
    return (
    Hello World !!
    );
    }
    }
    ./src/components/App.js
    

    View Slide

15. ...
    
    
    
    
    ...
    ./public/index.htm
    

    View Slide

16. > yarn add --dev webpack \
    webpack-dev-server
    > touch webpack.config.js
    

    View Slide

17. module.exports = {
    entry: {
    main: ['./src/main.js'],
    },
    output: {
    path: path.resolve( __dirname, './build'),
    filename: '[name].js'
    }
    ...
    };
    ./webpack.config.js
    

    View Slide

18. module.exports = {
    ...
    devServer: {
    contentBase: './public',
    inline: true,
    host: 'localhost',
    port: 8080
    }
    };
    ./webpack.config.js
    

    View Slide

19. ...
    
    
    ...
    ./public/index.html
    

    View Slide

20. > yarn add --dev babel-core \
    babel-loader \
    babel-preset-react-app
    > touch .babelrc
    

    View Slide

21. {
    // babel preset for react app
    // made by facebook
    "presets": ["react-app"]
    }
    ./.babelrc
    

    View Slide

22. module.exports = {
    ...
    module: {
    loaders: [{
    test: /\.(js|jsx)$/,
    include: path.resolve( __dirname, './src'),
    loaders: 'babel-loader'
    }]
    }
    };
    ./webpack.config.js
    

    View Slide

23. {
    ...
    // add dev server and build script to package.json
    "scripts": {
    "start": "NODE_ENV=development webpack-dev-server",
    "build": "rm -rf build && NODE_ENV=production webpack -p"
    },
    ...
    }
    ./package.json
    

    View Slide

24. > yarn start
    

    View Slide

25. View Slide

26. App Shell 

    Architecture
    

    View Slide

27. View Slide

28. View Slide

29. > yarn add material-ui \
    react-tap-event-plugin
    > touch ./src/components/AppShell.js
    

    View Slide

30. import reactTabEventPlugin from 'react-tap-event-plugin';
    reactTabEventPlugin();
    ./src/main.js
    

    View Slide

31. class AppShell extends React.Component {
    render() {
    return (
    
    {React.cloneElement(this.props.children)}
    
    );
    }
    };
    ./src/components/AppShell.js
    

    View Slide

32. import {MuiThemeProvider, getMuiTheme} from 'material-ui/styles';
    import {AppBar, Drawer, MenuItem} from 'material-ui';
    ./src/components/AppShell.js
    

    View Slide

33. constructor(props) {
    // drawer open flag
    this.state = {open: false};
    }
    ./src/components/AppShell.js
    

    View Slide

34. render() {
    return (
    
    
    
    
    
    
    ...
    
    
    );
    }
    ./src/components/AppShell.js
    

    View Slide

35. ...
    handleDrawerToggle = () => this.setState({open: !this.state.open})
    handleRequestChange = open => this.setState({open: open})
    ...
    ./src/components/AppShell.js
    

    View Slide

36. class App extends React.Component {
    render() {
    return (
    
    Hello World !!
    
    );
    }
    }
    ./src/components/AppShell.js
    

    View Slide

37. View Slide

38. Web Manifest
    

    View Slide

39. > npm install -g pwa-manifest-cli
    > pwa-manifest ./public \
    --icons=ICONPATH_LOCAL_OR_HTTP
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. > tree -L 3 ./public
    ├── favicon.ico
    ├── icon-144x144.png
    ├── icon-192x192.png
    ├── icon-512x512.png
    ├── index.html
    └── manifest.json
    

    View Slide

44. {
    "name": "react-pwa",
    "short_name": "react-pwa",
    "icons": [
    {
    "src": "icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
    },
    ...
    ],
    "start_url": "./?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "natural",
    "background_color": "#FFFFFF",
    "theme_color": "#3F51B5"
    }
    ./public/manifest.json
    

    View Slide

45. 
    ./public/index.html
    

    View Slide

46. View Slide

47. Service Worker
    

    View Slide

48. View Slide

49. > yarn add --dev \
    sw-precache-webpack-plugin-loader \
    copy-webpack-plugin
    

    View Slide

50. const CopyWebpackPlugin
    = require('copy-webpack-plugin');
    const SWPrecacheWebpackPlugin
    = require('sw-precache-webpack-plugin-loader');
    ./webpack.config.json
    

    View Slide

51. plugins: [
    new CopyWebpackPlugin([{
    context: './public',
    from: '*.*'
    }])
    ]
    ./webpack.config.json
    

    View Slide

52. plugins: [
    new SWPrecacheWebpackPlugin({
    staticFileGlobs: [CACHED_FILES_GLOBS],
    logger: function () {},
    filename: 'sw.js'
    })
    ]
    ./webpack.config.json
    

    View Slide

53. <br/>if ('serviceWorker' in navigator) {<br/>window.addEventListener('load', function() {<br/>navigator.serviceWorker.register('sw.js');<br/>});<br/>}<br/>
    ./public/index.html
    

    View Slide

54. View Slide

55. More views,
    React Routing
    

    View Slide

56. > yarn add react-router-dom
    > touch ./src/components/Home.js
    > tree ./src/components
    ├── App.js
    ├── AppShell.js
    └── Home.js
    

    View Slide

57. import {Card, CardTitle, CardText} from 'material-ui/Card';
    ./src/components/Home.js
    

    View Slide

58. class Home extends React.Component {
    render () {
    return (
    
    
    ...
    
    )
    }
    }
    ./src/components/Home.js
    

    View Slide

59. import {HashRouter as Router, Route} from 'react-router-dom';
    import Home from './Home';
    ./src/components/App.js
    

    View Slide

60. class App extends React.Component {
    render() {
    return (
    Hello World !!
    
    
    
    
    
    
    
    );
    }
    }
    ./src/components/App.js
    

    View Slide

61. View Slide

62. > touch ./src/components/Users.js
    > touch ./src/components/Notification.js
    > tree ./src/components
    ├── App.js
    ├── AppShell.js
    ├── Home.js
    ├── Users.js
    └── Notification.js
    

    View Slide

63. import React from 'react';
    class Users extends React.Component {
    render() {
    return (
    Users
    );
    }
    }
    export default Users;
    ./src/components/Users.js
    

    View Slide

64. import React from 'react';
    class Notification extends React.Component {
    render() {
    return (
    Notification
    );
    }
    }
    export default Notification;
    ./src/components/Notification.js
    

    View Slide

65. import Users from './Users';
    import Notification from './Notification';
    ./src/components/App.js
    

    View Slide

66. 
    
    
    
    
    
    
    
    
    ./src/components/App.js
    

    View Slide

67. import {Link} from 'react-router-dom';
    
    ...
    containerElement={}
    onClick={this.handleDrawerToggle}
    />
    containerElement={}
    onClick={this.handleDrawerToggle}
    />
    
    ./src/components/AppShell.js
    

    View Slide

68. View Slide

69. Firebase
    Hosting with HTTPS
    

    View Slide

70. View Slide

71. > npm install -g firebase-tools
    

    View Slide

72. View Slide

73. > tree -L 1 ./ -a -I node_modules
    ├── .babelrc
    ├── .firebaserc
    ├── firebase.json
    ├── package.json
    ├── public
    ├── src
    ├── webpack.config.js
    └── yarn.lock
    

    View Slide

74. {
    "hosting": {
    "public": "build"
    }
    }
    ./firebase.json
    

    View Slide

75. {
    "projects": {
    "default": "YOUR-PROJECT-NAME"
    }
    }
    ./.firebaserc
    

    View Slide

76. View Slide

77. > yarn build
    > tree -L 1 ./ -a -I node_modules
    ├── favicon.ico
    ├── icon-144x144.png
    ├── icon-192x192.png
    ├── icon-512x512.png
    ├── index.html
    ├── main.js
    ├── manifest.json
    ├── notification.js
    └── sw.js
    

    View Slide

78. Firebase
    Realtime Database
    

    View Slide

79. View Slide

80. View Slide

81. View Slide

82. class Users extends React.Component {
    constructor() {
    super();
    this.state = {
    users: []
    };
    }
    }
    ./src/components/Users.js
    

    View Slide

83. componentDidMount() {
    const databaseURL = 'https: //YOUR_DATABASE_URL';
    fetch(`${databaseURL}/data.json/`).then(res => {
    if (res.status !== 200) {
    throw new Error(res.statusText);
    }
    return res.json();
    }).then(users => this.setState({users: users}))
    }
    ./src/components/Users.js
    

    View Slide

84. render() {
    const users = () => {
    return Object.keys(this.state.users).map(id => {
    const user = this.state.users[id];
    return (
    key={id}
    name={user.name}
    email={user.email} />
    );
    });
    }
    return ({users()} );
    }
    ./src/components/Users.js
    

    View Slide

85. View Slide

86. View Slide

87. plugins: [
    new SWPrecacheWebpackPlugin({
    ...
    runtimeCaching: [{
    urlPattersn: /https:\/\/.+.firebaseio.com/,
    handler: 'networkFirst'
    }]
    })
    ]
    ./webpack.config.js
    

    View Slide

88. View Slide

89. Firebase
    Cloud Messaging
    

    View Slide

90. > yarn add firebase
    

    View Slide

91. View Slide

92. {
    gcm_sender_id: "103953800507",
    ...
    };
    ./manifest.json
    

    View Slide

93. import firebase from 'firebase';
    ./src/components/Notification.js
    

    View Slide

94. var config = {
    apiKey: "AIzasdakagskgei@#9412i8123WWEeFwyuOk4af3vhYFw",
    authDomain: "YOURPROJECT.firebaseapp.com",
    databaseURL: "https: //YOURPROJECT.firebaseio.com",
    projectId: "YOURPROJECT",
    storageBucket: "YOURPROJECT.appspot.com",
    messagingSenderId: "2595534347235"
    };
    ./src/components/Notification.js
    

    View Slide

95. class Notification extends React.Component {
    static firebaseApp;
    constructor(props) {
    super(props);
    if (!Notification.firebaseApp) {
    firebase.initializeApp(config);
    }
    }
    }
    ./src/components/Notification.js
    

    View Slide

96. class Notification extends React.Component {
    constructor(props) {
    ...
    this.state = {
    token: '',
    message: ''
    };
    }
    }
    ./src/components/Notification.js
    

    View Slide

97. componentDidMount() {
    const messaging = firebase.messaging();
    messaging.onMessage(this.handlePushMessage);
    messaging.requestPermission()
    .then(() => messaging.getToken())
    .then(token => this.setState({token: token}))
    .catch(err => {
    throw new Error(err);
    });
    }
    ./src/components/Notification.js
    

    View Slide

98. handlePushMessage = noti => {
    this.setState({
    message: `${noti.title}: ${noti.body}`
    });
    }
    ./src/components/Notification.js
    

    View Slide

99. render() {
    return (
    
    
    
    
    
    
    );
    }
    ./src/components/Notification.js
    

    View Slide

100. > touch ./src/firebase-messaging-sw.js
     > tree -L 1 ./src -I node_modules
     ├── components
     ├── firebase-messaging-sw.js
     └── main.js
     

     View Slide

101. importScripts('https: // www.gstatic.com/firebasejs/3.5.2/firebase-app.js');
     importScripts('https: // www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js');
     ./src/firebase-messaging-sw.js
     

     View Slide

102. var firebaseConfig = { ... };
     firebase.initializeApp(firebaseConfig);
     const messaging = firebase.messaging();
     messaging.setBackgroundMessageHandler(({data} = {}) => {
     const title = data.title || 'Title';
     const opts = Object.assign({body: data.body || 'Body'}, data);
     return self.registration.showNotification(title, opts);
     });
     ./src/firebase-messaging-sw.js
     

     View Slide

103. plugins: [
     new CopyWebpackPlugin([{
     ...
     }, {
     from: './src/firebase-messaging-sw.js',
     to: 'firebase-messaging-sw.js',
     }]),
     ]
     ./webpack.config.js
     

     View Slide

104. > npm install -g fcm-cli
     

     View Slide

105. View Slide

106. View Slide

107. View Slide

108. > fcm send --server-key SERVER_KEY:bKFlxhMqS_PYGlCw4VTV \
     --to TOKEN:A91bFmi_DEQFPQ2FMf_7V8NcEGGqkAZEV- \
     --notification.title hi \
     --notification.body 'Hello World'
     

     View Slide

109. View Slide

110. Tuning on
     PRPL Pattern
     

     View Slide

111. (P)ush critical resources for the initial route
     
     (R)ender initial route and get it interactive as soon as possible,
     
     (P)re-cache components for the remaining routes
     
     (L)azy-load, and create next routes on demand by user
     

     View Slide

112. View Slide

113. View Slide

114. Kicking
     Mega Bundle
     

     View Slide

115. View Slide

116. View Slide

117. Breaking down
     Common Chunks
     

     View Slide

118. module.exports = {
     entry: {
     main: ['./src/main.js'],
     vendor: ['react', 'react-dom']
     },
     plugins: [
     new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor'
     }),
     ]
     }
     ./webpack.config.js
     

     View Slide

119. 
     
     ./public/index.html
     

     View Slide

120. View Slide

121. View Slide

122. Routes based
     Code-splitting
     

     View Slide

123. > yarn add --dev babel-plugin-syntax-
     dynamic-import
     

     View Slide

124. {
     "plugins": [
     "syntax-dynamic-import"
     ]
     }
     ./.babelrc
     

     View Slide

125. export default (getComponent) => (
     class AsyncComponent extends React.Component {
     componentWillMount() {
     if (!this.state.Component) {
     getComponent().then(Component => {
     AsyncComponent.Component = Component
     this.setState({ Component })
     });
     }
     }.
     ...
     }
     );
     ./src/components/AsyncComponent.js
     

     View Slide

126. import asyncComponent from './AsyncComponent';
     const Home = asyncComponent(() => {
     return import( /* webpackChunkName: "home" */ './Home')
     .then(module => module.default);
     });
     const Users = ...'
     const Notification = ...;
     ./src/components/App.js
     

     View Slide

127. View Slide

128. View Slide

129. Tree-shaking,
     Dead-code elimination
     Live-code Importing
     

     View Slide

130. View Slide

131. import {Card, CardHeader} from 'material-ui';
     import {Card, CardHeader} from 'material-ui/Card';
     

     View Slide

132. > yarn add --dev babel-preset-es2015 babel-
     plugin-transform-imports
     

     View Slide

133. {
     "presets": [["es2015", {"modules": false}], "react-app"]
     }
     ./.babelrc
     

     View Slide

134. "plugins": [
     [
     "transform-imports", {
     "material-ui": {
     "transform": "material-ui/${member}",
     "preventFullImport": true
     },
     "react-router-dom": { ...},
     "lodash": { ...}
     }
     ]
     ]
     ./.babelrc
     

     View Slide

135. View Slide

136. 494 kB
     

     View Slide

137. View Slide

138. Extract common parts
     Shared Common Chunk
     

     View Slide

139. plugins: [
     new webpack.optimize.CommonsChunkPlugin({
     children: true,
     async: 'common',
     minChunks: 2
     }),
     ]
     ./webpack.config.js
     

     View Slide

140. 
     ./public/index.html
     

     View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. Control resources pushing
     Preload, Prefetch
     

     View Slide

146. > yarn add --dev html-webpack-plugin
     preload-webpack-plugin
     

     View Slide

147. const HtmlWebpackPlugin = require('html-webpack-plugin');
     const PreloadWebpackPlugin = require('preload-webpack-plugin');
     ./webpack.config.js
     

     View Slide

148. plugins: [
     new HtmlWebpackPlugin({
     filename: 'index.html',
     template: './public/index.html',
     favicon: './public/favicon.ico'
     }),
     new PreloadWebpackPlugin({
     include: ['vendor', 'main', 'common', 'home']
     }),
     ]
     ./webpack.config.js
     

     View Slide

149. 
     
     
     ./public/index.html
     

     View Slide

150. View Slide

151. plugins: [
     new PreloadWebpackPlugin({
     rel: 'prefetch',
     include: ['users', 'notification']
     }),
     ]
     ./webpack.config.js
     

     View Slide

152. View Slide

153. View Slide

154. More
     Optimization
     

     View Slide

155. class LazySidebarDrawer extends React.Component {
     componentDidMount() {
     let frameCount = 0;
     const open = () => (frameCount ++ > 0) ? this.props.onMounted() :
     requestAnimationFrame(open);
     requestAnimationFrame(open);
     }
     render() {
     return (
     onRequestChange={this.props.onRequestChange}>
     ...
     
     );
     }
     }
     

     View Slide

156. render() {
     return (
     ...
     {}
     ...
     );
     }
     ./src/components/AppShell.js
     

     View Slide

157. View Slide

158. > 144 kB
     

     View Slide

159. View Slide

160. View Slide

161. > yarn add react-lite
     

     View Slide

162. More plugins
     for Webpack
     

     View Slide

163. Auditing by
     Lighthouse
     

     View Slide

164. View Slide

165. And more ...
     

     View Slide

166. View Slide