React with Meteor Backend

What makes Meteor great in conjunction with React.

Hold that talk at the HSR in Rapperswil, Switzerland

Transcript

1. React with Meteor Backend @vuhrmeister Experiences made with nemms
2. That’s me … • Javascript / Frontend Developer • Co-Founder at nemms • Formerly worked at HolidayCheck, Namics, innoQ • CAS-FEE since 2015 • Passionate in creating great web experiences • Experience with Meteor since 2015 • I like Material Design :) Valentin Uhrmeister Twitter / Github: @vuhrmeister
3. https://nemms.app
4. nemms
5. What is Meteor?
6. Javascript Node.js MongoDB Websockets Optimistic UI Frontend Backend Web Mobile Desktop Cordova Dynamic Imports Server Side Rendering Realtime Hot Deployment Hot Code Push Open Source Build & Bundling Modern / legacy Browser Code Splitting Isomorph Universal Javascript
7. “Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community.” – meteor.com • One language • Data on the wire • Integrate technologies you already use • Full stack reactivity • Build apps for any device • Ship more with less code
8. Let’s get started … It’s as easy as: $ curl https://install.meteor.com/ | sh $ meteor create myapp $ cd myapp $ meteor
9. And React? You know already how to … $ meteor npm install react react-dom
10. Or even better … $ curl https://install.meteor.com/ | sh $ meteor create --react myapp
11. Okay … and what about the code?
12. main.html <head> <title>Meteor + React</title> </head> <body> <div id=”app”></div> </body> main.jsx import { Meteor } from 'meteor/meteor' import React from 'react' import { render } from 'react-dom' const MyApp = () => ( <h1>Meteor + React</h1> ) Meteor.startup(() => { render(<MyApp />, document.getElementById('app')) })
13. Why Meteor (for the Backend)?
14. Choose your Frontend
15. One language – be universal Javascript for live! Or maybe TypeScript?
16. Build system Just don’t care! It transpiles, minifies and delivers without any configuration. Want to use TypeScript? SASS? Just install a package and lean back.
17. Evergreen vs. Nevergreen Need to support older browsers? Want latest browser to benefit from latest Javascript features? Just lean back and keep on coding
18. MongoDB check ✔ MongoDB out of the box, already running and connected.
19. Reactivity Building a real time experience? You are all set!
20. Deployment Meteor Galaxy Meteor Up meteor-now Scalingo (and others) Custom $ meteor deploy $ mup deploy $ meteor-now $ git push scalingo master $ meteor build
21. Hot Deployment Hot code push (during development) – of course! Instant update of connected clients – nice!
22. Server side rendering check ✔
23. How does React fit in?
24. What we’ll cover Working with data Code splitting Server Side Rendering The rest is just … nothing special
25. Working with data
26. Database everywhere Server Client MongoDB by default Minimongo realtime
27. Collections Abstraction of a MongoDB collection Working the same on server + client Reactive
28. Collections // common code on client and server declares a DDP-managed mongo collection. const Messages = new Mongo.Collection('messages') // Return a cursor const myMessages = Messages.find({ userId: '123' }) // Return one document const myMessage = Messages.findOne({ _id: 'xyz' }) Messages.update({ _id: 'xyz' }, { $set: { important: true } }) Messages.insert({ text: 'Hello, world!' })
29. Getting the data into a component withTracker as HOC Similar to using connect() in case of Redux react-meteor-data Atmosphere Package
30. 1. Declare the collection // Must be loaded on the server and client import { Mongo } from 'meteor/mongo' export default Links = new Mongo.Collection('links')
31. 2. Create component and connect import React from 'react' import { withTracker } from 'meteor/react-meteor-data' import Links from '../api/links' const Info = ({ links }) => ( <div> <h2>Get the data!</h2> <ul>{links.map(link => <li><Link id={link._id} url={link.url} title={link.title} /></li>)}</ul> </div> ) export default InfoContainer = withTracker(() => { return { links: Links.find().fetch(), } })(Info)
32. Publish & Subscribe Concept of updating local data store Source: https://www.netvlies.nl
33. Publish & Subscribe // On the server Meteor.publish('links', function () { return Links.find() }) // On the client in our previously created Info component export default InfoContainer = withTracker(() => { const subscription = Meteor.subscribe('links') return { links: Links.find().fetch(), // loading: !subscription.ready(), } })(Info)
34. Performance considerations Avoid unnecessary re-renders → limit result set by defining “fields” Links.find({}, { fields: { url: 1, title: 1, }, })
35. Updating data … with Methods They are like RPCs (Remote Procedure Calls)
36. Methods class Link extends React.Component { handleDelete = () => { Meteor.call('deleteLink', this.props.id, (error, response) => { console.log(error, response) }) } render() { return ( <> <a href={this.props.url}>{this.props.title}</a> <button onClick={this.handleDelete}>x</button> </> ) } }
37. Methods // On the server Meteor.methods({ 'deleteLink' (linkId) { return Links.remove(linkId) } })
38. Working with data – Redux –
39. Want to use Redux? It’s a pretty different approach Why might it be a good idea? Why should you want to use it?
40. How do we use it? Not consequently Mainly for SSR
41. What’s our vision? Take advantage of having a central store Being able to cache on the client
42. Code splitting
43. General aspects Load modules dynamically with ES proposal dynamic import Benefits: - Lower initial bundle size - Less execution time - Caching import('./my-module')
44. Split by component / route Super easy with React Loadable
45. Using React Loadable with dynamic import import Loadable from 'react-loadable' import LoadingIndicator from 'imports/components/LoadingIndicator' import Home from 'imports/modules/Home' const Chat = Loadable({ loader: () => import('imports/modules/Chat'), loading: LoadingIndicator, }) export default Main = () => ( <Switch> <Route path="/chat" component={Chat} /> <Route path="/" component={Home} /> </Switch> )
46. How do we use it? Actual app code is dynamically loaded Mostly per route splitting Preload important components
47. Server Side Rendering
48. Basic usage Pretty simple Sleek API for Server & Client
49. Basic usage on the server import React from 'react' import { renderToString } from 'react-dom/server' import { onPageLoad } from 'meteor/server-render' import App from '/imports/Server.js' onPageLoad(sink => { sink.renderIntoElementById('app', renderToString( <App location={sink.request.url} /> )) })
50. Basic usage on the client import React from 'react' import ReactDOM from 'react-dom' import { onPageLoad } from 'meteor/server-render' onPageLoad(async sink => { const App = (await import('/imports/Client.js')).default ReactDOM.hydrate( <App />, document.getElementById('app'), ) })
51. Might get a bit more complex when you want to use: • jss or styled components • a router • Redux • dynamic imports Extended usage
52. Limitations of SSR with Meteor Remember the “Evergreen vs. Nevergreen”? Delivering different JS bundles makes it hard to cache markup
53. How do we use it? Only for the website No need for the app
54. Challenges SSR makes everything else a bit tricky
55. Conclusion
56. Use Meteor because: • No initial setup • Don’t care about the build process • Support for modern Javascript • Flexible • Performance in mind
57. Use React (with Meteor) because: • First class support in Meteor • Lots of documentation and examples • Just start writing your components as you’re used to • If you don’t need SSR, it couldn’t get easier
58. Was it the right decision? yes
59. (or at least for being here tonight) Thanks for listening