title
Realtime Chat App | React, GraphQL & Websockets

description
Let's build a realtime chat app with React, Apollo, GraphQL Subscriptions, Websockets and Module Federation Jack Herrington YouTube Channel: https://www.youtube.com/channel/UC6vRUjYqDuoUsYsku86Lrsw Code: https://github.com/jherr/chat-o-matic React starter project: https://github.com/jherr/wp5-starter-react Apollo client: https://www.apollographql.com/docs/react/ Graphql-Yoga: https://github.com/prisma-labs/graphql-yoga 💖 Support The Channel! http://www.patreon.com/traversymedia Website & Brad Traversy Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia

detail
{'title': 'Realtime Chat App | React, GraphQL & Websockets', 'heatmap': [{'end': 339.225, 'start': 319.537, 'weight': 1}, {'end': 924.337, 'start': 895.062, 'weight': 0.714}, {'end': 1554.677, 'start': 1523.183, 'weight': 0.87}, {'end': 1648.188, 'start': 1623.02, 'weight': 0.802}, {'end': 1723.039, 'start': 1667.435, 'weight': 0.741}], 'summary': "Tutorial series covers building a multi-user real-time chat system using graphql subscriptions, websockets, and webpack 5's module federation. it includes setting up a graphql server, handling onsend function, implementing graphql subscriptions, and using websockets for efficient ui and live code sharing.", 'chapters': [{'end': 88.013, 'segs': [{'end': 88.013, 'src': 'embed', 'start': 45.481, 'weight': 0, 'content': [{'end': 49.806, 'text': "Okay, so how are we going to do it? So step one, we're going to go build out our GraphQL server.", 'start': 45.481, 'duration': 4.325}, {'end': 52.889, 'text': "It's going to be pretty simple, just reading and writing messages.", 'start': 49.846, 'duration': 3.043}, {'end': 58.635, 'text': "Then we'll use in step two, Apollo Client to go and build out a React app.", 'start': 53.55, 'duration': 5.085}, {'end': 62.021, 'text': 'that uses polling to connect to that server.', 'start': 59.56, 'duration': 2.461}, {'end': 63.461, 'text': "And that's not particularly efficient.", 'start': 62.041, 'duration': 1.42}, {'end': 69.283, 'text': "So we're going to go back in step three to the server and upgrade it to a subscriptions model.", 'start': 63.481, 'duration': 5.802}, {'end': 74.485, 'text': "And then in step four, we'll go and upgrade the client to use those subscriptions.", 'start': 70.043, 'duration': 4.442}, {'end': 86.813, 'text': "And then you're going to do in step five something really cool and share that chat component to another application live using Webpack 5's module federation feature.", 'start': 75.305, 'duration': 11.508}, {'end': 88.013, 'text': "It's really cool.", 'start': 86.873, 'duration': 1.14}], 'summary': 'Build graphql server, upgrade to subscriptions, share chat component using webpack 5.', 'duration': 42.532, 'max_score': 45.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ45481.jpg'}], 'start': 7.076, 'title': 'Building multi-user real-time chat system', 'summary': "Discusses creating a multi-user real-time chat system using graphql subscriptions, websockets, and webpack 5's module federation, covering steps for building the server, using apollo client for the react app, and upgrading to a subscriptions model.", 'chapters': [{'end': 88.013, 'start': 7.076, 'title': 'Building multi-user real-time chat system', 'summary': "Discusses creating a multi-user real-time chat system using graphql subscriptions, websockets, and webpack 5's module federation, covering steps for building the server, using apollo client for the react app, and upgrading to a subscriptions model.", 'duration': 80.937, 'highlights': ["Step 5 involves sharing the chat component to another application live using Webpack 5's module federation feature, showcasing its capabilities.", 'Step 4 includes upgrading the client to use subscriptions, optimizing the chat system for real-time communication.', 'Step 3 involves upgrading the server to a subscriptions model, enhancing the efficiency and real-time functionality of the chat system.', 'Step 2 utilizes Apollo Client to build a React app that connects to the GraphQL server using polling for basic functionality.', 'Step 1 focuses on building a simple GraphQL server for reading and writing messages, laying the foundation for the multi-user chat system.']}], 'duration': 80.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ7076.jpg', 'highlights': ["Step 5 involves sharing the chat component to another application live using Webpack 5's module federation feature, showcasing its capabilities.", 'Step 4 includes upgrading the client to use subscriptions, optimizing the chat system for real-time communication.', 'Step 3 involves upgrading the server to a subscriptions model, enhancing the efficiency and real-time functionality of the chat system.', 'Step 2 utilizes Apollo Client to build a React app that connects to the GraphQL server using polling for basic functionality.', 'Step 1 focuses on building a simple GraphQL server for reading and writing messages, laying the foundation for the multi-user chat system.']}, {'end': 496.99, 'segs': [{'end': 122.279, 'src': 'embed', 'start': 88.673, 'weight': 4, 'content': [{'end': 91.394, 'text': "But I've talked enough, so let's just go jump into the code.", 'start': 88.673, 'duration': 2.721}, {'end': 93.935, 'text': "All right, so here's our app that we're going to build.", 'start': 92.214, 'duration': 1.721}, {'end': 96.216, 'text': "And it's actually side by side.", 'start': 94.795, 'duration': 1.421}, {'end': 99.897, 'text': "We're showing two versions of it, localhost 8080 on both sides.", 'start': 96.256, 'duration': 3.641}, {'end': 101.977, 'text': "And it's basically a chat window.", 'start': 100.657, 'duration': 1.32}, {'end': 106.759, 'text': "It's got the chat list at the top, and then it's got a three-column section down below.", 'start': 102.017, 'duration': 4.742}, {'end': 113.461, 'text': 'The first column has who you are, and you get to just define that on the fly, and the message you want to send, and an Ascend button.', 'start': 106.799, 'duration': 6.662}, {'end': 115.875, 'text': 'Although you can hit return just to make it easy.', 'start': 113.854, 'duration': 2.021}, {'end': 122.279, 'text': "And you can see immediately I click send and boom, it's over in the other window.", 'start': 116.996, 'duration': 5.283}], 'summary': 'Building a chat app with chat list, user column, and instant messaging.', 'duration': 33.606, 'max_score': 88.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ88673.jpg'}, {'end': 176.702, 'src': 'embed', 'start': 149.44, 'weight': 0, 'content': [{'end': 152.922, 'text': "And to make that easy on ourselves, we're going to use a starter kit called GraphQL Yoga.", 'start': 149.44, 'duration': 3.482}, {'end': 154.803, 'text': "So let's go build that server.", 'start': 153.702, 'duration': 1.101}, {'end': 159.405, 'text': "I'm going to create a new directory called Chatomatic.", 'start': 154.823, 'duration': 4.582}, {'end': 163.187, 'text': "It's going to have, well, three projects in it, but we're going to start with server.", 'start': 159.465, 'duration': 3.722}, {'end': 170.571, 'text': "And we're going to init that package JSON and then add in GraphQL Yoga.", 'start': 163.207, 'duration': 7.364}, {'end': 176.702, 'text': 'Okay, looking pretty good.', 'start': 175.802, 'duration': 0.9}], 'summary': 'Using graphql yoga starter kit to build a server for chatomatic with three projects in it.', 'duration': 27.262, 'max_score': 149.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ149440.jpg'}, {'end': 346.948, 'src': 'heatmap', 'start': 297.903, 'weight': 1, 'content': [{'end': 301.964, 'text': 'And the resolvers kind of match the keys that are in the type definitions.', 'start': 297.903, 'duration': 4.061}, {'end': 303.284, 'text': "So in this case, we've got a query.", 'start': 302.104, 'duration': 1.18}, {'end': 305.704, 'text': "And then within that, we've got those messages.", 'start': 303.784, 'duration': 1.92}, {'end': 307.905, 'text': 'So a resolver is a function.', 'start': 306.645, 'duration': 1.26}, {'end': 310.085, 'text': "And in this case, it's got to return an array.", 'start': 308.305, 'duration': 1.78}, {'end': 313.486, 'text': "So, well, let's go make it a new array called messages.", 'start': 310.505, 'duration': 2.981}, {'end': 322.018, 'text': 'And then we add those resolvers to the GraphQL server.', 'start': 319.537, 'duration': 2.481}, {'end': 326, 'text': "So now we've got the types and how to go get them all set up.", 'start': 322.098, 'duration': 3.902}, {'end': 327.14, 'text': "So let's start our server.", 'start': 326.08, 'duration': 1.06}, {'end': 332.682, 'text': "And here's a really cool thing about, well, most GraphQL servers, but GraphQL yoga as well.", 'start': 328.441, 'duration': 4.241}, {'end': 339.225, 'text': 'They have this GraphQL interface built right in so we can start playing with it right away.', 'start': 334.043, 'duration': 5.182}, {'end': 346.948, 'text': "So I bring it up and if I'm not making a request from like a fetch, I get this cool GraphQL UI.", 'start': 339.905, 'duration': 7.043}], 'summary': 'Resolvers match type definitions to return an array. graphql server has built-in interface for easy testing.', 'duration': 49.045, 'max_score': 297.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ297903.jpg'}, {'end': 376.986, 'src': 'embed', 'start': 347.828, 'weight': 2, 'content': [{'end': 349.069, 'text': "So let's go make our first query.", 'start': 347.828, 'duration': 1.241}, {'end': 351.388, 'text': 'And the syntax for that looks like this.', 'start': 350.027, 'duration': 1.361}, {'end': 352.549, 'text': 'Just give it a query.', 'start': 351.408, 'duration': 1.141}, {'end': 354.09, 'text': 'You say, I want messages.', 'start': 353.129, 'duration': 0.961}, {'end': 355.351, 'text': 'You give it the fields that you want.', 'start': 354.27, 'duration': 1.081}, {'end': 359.734, 'text': 'And then you execute it.', 'start': 358.893, 'duration': 0.841}, {'end': 363.257, 'text': "In this case, it's not too exciting, right? We don't have anything in messages.", 'start': 360.575, 'duration': 2.682}, {'end': 367.7, 'text': 'So we have to go create a mutation.', 'start': 366.059, 'duration': 1.641}, {'end': 371.723, 'text': 'Now, a mutation is essentially like, you know, post in the REST world.', 'start': 367.74, 'duration': 3.983}, {'end': 376.986, 'text': 'And what do we want to do with this? We want to post a message, a new message.', 'start': 373.904, 'duration': 3.082}], 'summary': 'Introduction to making a query and mutation in graphql for posting messages.', 'duration': 29.158, 'max_score': 347.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ347828.jpg'}], 'start': 88.673, 'title': 'Building chat app with graphql and query basics', 'summary': 'Covers building a chat application with graphql and graphql yoga, demonstrating real-time message sending, and setting up a graphql server with types, queries, and resolvers. it also covers the basics of making queries and mutations in graphql, including syntax, creating mutations, and executing queries, with examples of posting messages and retrieving ids from the array.', 'chapters': [{'end': 346.948, 'start': 88.673, 'title': 'Building chat app with graphql', 'summary': 'Covers building a chat application with graphql and graphql yoga, demonstrating a chat window with real-time message sending and the setup of graphql server with types, queries, and resolvers.', 'duration': 258.275, 'highlights': ['The chapter covers building a chat application with GraphQL and GraphQL Yoga Demonstrates the creation of a chat window with real-time message sending and multiple participants.', 'Setup of GraphQL server with types, queries, and resolvers Explains the process of defining message types, creating query types for messages, and implementing resolvers for data retrieval.', 'Real-time message sending and chat window demonstration Shows the functionality of sending messages in real-time and the layout of the chat window with multiple participants.']}, {'end': 496.99, 'start': 347.828, 'title': 'Graphql query and mutation basics', 'summary': 'Covers the basics of making queries and mutations in graphql, including syntax, creating mutations, adding resolvers, and executing queries, demonstrating the process with examples of posting messages and retrieving ids from the array.', 'duration': 149.162, 'highlights': ['Creating mutations, adding resolvers, and executing queries in GraphQL, including examples of posting messages and retrieving IDs from the array.', 'Explaining the syntax for making the first query in GraphQL and the resemblance of mutations to post in the REST world.', 'Demonstrating the process of posting messages and retrieving IDs from the array, showing successful returns for message posts.', 'Restarting the server to pick up changes and the successful execution of a mutation to post a message with a user and content, returning the new ID.']}], 'duration': 408.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ88673.jpg', 'highlights': ['Covers building a chat application with GraphQL and GraphQL Yoga Demonstrates the creation of a chat window with real-time message sending and multiple participants.', 'Setup of GraphQL server with types, queries, and resolvers Explains the process of defining message types, creating query types for messages, and implementing resolvers for data retrieval.', 'Creating mutations, adding resolvers, and executing queries in GraphQL, including examples of posting messages and retrieving IDs from the array.', 'Explaining the syntax for making the first query in GraphQL and the resemblance of mutations to post in the REST world.', 'Real-time message sending and chat window demonstration Shows the functionality of sending messages in real-time and the layout of the chat window with multiple participants.']}, {'end': 1240.417, 'segs': [{'end': 567.691, 'src': 'embed', 'start': 496.99, 'weight': 0, 'content': [{'end': 505.693, 'text': "now we've got a working GraphQL server that supports a schema that you can now request data from and also add data to dynamically.", 'start': 496.99, 'duration': 8.703}, {'end': 507.013, 'text': "It's pretty exciting.", 'start': 505.713, 'duration': 1.3}, {'end': 510.189, 'text': "Okay, we've got our GraphQL server running.", 'start': 508.027, 'duration': 2.162}, {'end': 512.071, 'text': "It wasn't that hard, which is great.", 'start': 510.729, 'duration': 1.342}, {'end': 516.014, 'text': 'So the next thing to do is to go build a UI based on that.', 'start': 512.611, 'duration': 3.403}, {'end': 519.517, 'text': "So we're going to use a component library called Shards.", 'start': 516.034, 'duration': 3.483}, {'end': 520.158, 'text': "It's new.", 'start': 519.537, 'duration': 0.621}, {'end': 520.798, 'text': "It's pretty cool.", 'start': 520.258, 'duration': 0.54}, {'end': 521.458, 'text': "It's lightweight.", 'start': 520.878, 'duration': 0.58}, {'end': 526.463, 'text': "And we're going to use Apollo Client to go and connect to the server.", 'start': 522.119, 'duration': 4.344}, {'end': 528.225, 'text': "Let's go try it out in the code.", 'start': 527.144, 'duration': 1.081}, {'end': 530.026, 'text': "But this isn't a great UI.", 'start': 529.025, 'duration': 1.001}, {'end': 535.591, 'text': 'Obviously, we want to go and create our chat UI to go on top of the service that we just created.', 'start': 530.146, 'duration': 5.445}, {'end': 538.714, 'text': "So I'm going to use a starter kit that I built.", 'start': 536.653, 'duration': 2.061}, {'end': 542.374, 'text': "It's kind of like a pared down Create React app.", 'start': 539.894, 'duration': 2.48}, {'end': 546.835, 'text': "All it's got is just React and Babel, but it is based on Webpack 5,", 'start': 542.414, 'duration': 4.421}, {'end': 552.677, 'text': "which is important because at the end of this video we're going to use an exciting new feature in Webpack 5 called Module Federation.", 'start': 546.835, 'duration': 5.842}, {'end': 556.858, 'text': "I'm going to go create another terminal window in my VS Code.", 'start': 554.197, 'duration': 2.661}, {'end': 565.55, 'text': 'And then I go back up a directory and do mpx dgit and then give it the URL of that project.', 'start': 557.807, 'duration': 7.743}, {'end': 567.691, 'text': 'And dgit does this really nice thing.', 'start': 565.75, 'duration': 1.941}], 'summary': 'Developed a graphql server, integrated with ui using shards and apollo client, and utilized a starter kit for a chat ui implementation.', 'duration': 70.701, 'max_score': 496.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ496990.jpg'}, {'end': 618.908, 'src': 'embed', 'start': 591.109, 'weight': 5, 'content': [{'end': 594.031, 'text': "So let's go take a look at our Webpack config for this project.", 'start': 591.109, 'duration': 2.922}, {'end': 597.852, 'text': "You can see that it's fired up on 8080.", 'start': 594.991, 'duration': 2.861}, {'end': 604.516, 'text': 'All it really does is apply Babel to our JS and then bring in any CSS we want using a style loader.', 'start': 597.852, 'duration': 6.664}, {'end': 609.778, 'text': "And then there's also this module federation plugin that we'll get to in a bit.", 'start': 606.897, 'duration': 2.881}, {'end': 614.267, 'text': 'And then the HTML Webpack plugin, which basically gives us our index page.', 'start': 611.366, 'duration': 2.901}, {'end': 618.908, 'text': "Okay, let's go take a look over the code.", 'start': 617.747, 'duration': 1.161}], 'summary': 'Webpack config runs on 8080, applies babel to js, uses style loader for css, and includes module federation and html webpack plugin.', 'duration': 27.799, 'max_score': 591.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ591109.jpg'}, {'end': 660.903, 'src': 'embed', 'start': 632.21, 'weight': 6, 'content': [{'end': 646.091, 'text': 'creates a really simple component called app and uses React DOM renderer with that app component to render it into a div with the id of app in our index page.', 'start': 632.21, 'duration': 13.881}, {'end': 649.274, 'text': "okay, let's start that up.", 'start': 646.091, 'duration': 3.183}, {'end': 650.755, 'text': 'hey, it looks pretty great.', 'start': 649.274, 'duration': 1.481}, {'end': 654.959, 'text': 'okay, a good starting point for us.', 'start': 650.755, 'duration': 4.204}, {'end': 660.903, 'text': "so for our ui toolkit we're going to use a new one called shards, very lightweight framework.", 'start': 654.959, 'duration': 5.944}], 'summary': 'Created app component with react dom, started shards ui toolkit.', 'duration': 28.693, 'max_score': 632.21, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ632210.jpg'}, {'end': 721.353, 'src': 'embed', 'start': 686.713, 'weight': 4, 'content': [{'end': 688.693, 'text': 'And all of these links are in there for all of this.', 'start': 686.713, 'duration': 1.98}, {'end': 692.134, 'text': "So let's go and follow their instructions to install it.", 'start': 689.534, 'duration': 2.6}, {'end': 694.275, 'text': "We'll just bring in Apollo Client and GraphQL.", 'start': 692.334, 'duration': 1.941}, {'end': 698.195, 'text': "And just to make sure everything's cool, we'll just fire that up again.", 'start': 696.135, 'duration': 2.06}, {'end': 700.076, 'text': 'Looking pretty good.', 'start': 698.215, 'duration': 1.861}, {'end': 707.067, 'text': 'Great So what do we want to do? Well, we want to go and first connect to the GraphQL server.', 'start': 700.416, 'duration': 6.651}, {'end': 708.748, 'text': 'So we need to create a client for that.', 'start': 707.247, 'duration': 1.501}, {'end': 710.788, 'text': "So we'll scroll down a little bit.", 'start': 709.648, 'duration': 1.14}, {'end': 713.73, 'text': "We'll grab this code for creating a client.", 'start': 710.808, 'duration': 2.922}, {'end': 721.353, 'text': "And you're going to paste that into a new file called chat.jsx.", 'start': 716.111, 'duration': 5.242}], 'summary': 'Installing apollo client and graphql to create a client for the graphql server in chat.jsx.', 'duration': 34.64, 'max_score': 686.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ686713.jpg'}, {'end': 924.337, 'src': 'heatmap', 'start': 895.062, 'weight': 0.714, 'content': [{'end': 897.203, 'text': "We haven't made the query, so we're going to just return null.", 'start': 895.062, 'duration': 2.141}, {'end': 902.405, 'text': "But if we have, then let's just return the JSON stringified payload.", 'start': 898.103, 'duration': 4.302}, {'end': 907.212, 'text': 'What do we get back? Hey, okay, that looks pretty good.', 'start': 903.406, 'duration': 3.806}, {'end': 910.553, 'text': 'So that is the return from the server.', 'start': 907.552, 'duration': 3.001}, {'end': 915.354, 'text': "So we're actually making the request, and we're getting back the data, and they're putting it on the page.", 'start': 910.693, 'duration': 4.661}, {'end': 916.114, 'text': 'Really cool.', 'start': 915.734, 'duration': 0.38}, {'end': 917.975, 'text': "We're going to go see that we're making the request.", 'start': 916.134, 'duration': 1.841}, {'end': 924.337, 'text': "We can go over here to our network inspector panel, and we can see that we're making a request to 4,000.", 'start': 917.995, 'duration': 6.342}], 'summary': 'Request to server returns data, displayed on page.', 'duration': 29.275, 'max_score': 895.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ895062.jpg'}, {'end': 1155.812, 'src': 'embed', 'start': 1130.342, 'weight': 3, 'content': [{'end': 1135.375, 'text': 'Okay So the next thing we need to be able to do is post a message to this thing.', 'start': 1130.342, 'duration': 5.033}, {'end': 1136.696, 'text': 'So we need some UI for that.', 'start': 1135.655, 'duration': 1.041}, {'end': 1138.998, 'text': 'So we need a row and a column.', 'start': 1137.056, 'duration': 1.942}, {'end': 1140.119, 'text': "We're going to use that for layout.", 'start': 1139.018, 'duration': 1.101}, {'end': 1144.663, 'text': 'And then we need the form input, which is the input field and a button for that send button.', 'start': 1140.239, 'duration': 4.424}, {'end': 1146.805, 'text': "And we're just going to manage this out of chat.", 'start': 1145.463, 'duration': 1.342}, {'end': 1151.629, 'text': "So we're going to create some state and use good old fashioned React use state for this.", 'start': 1147.145, 'duration': 4.484}, {'end': 1155.812, 'text': "And we're going to say that the user is me and the content is nothing.", 'start': 1151.649, 'duration': 4.163}], 'summary': 'Develop ui to post message using react, manage state with react usestate.', 'duration': 25.47, 'max_score': 1130.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1130342.jpg'}], 'start': 496.99, 'title': 'Setting up graphql server and ui with shards and apollo client', 'summary': 'Discusses setting up a graphql server and building a ui using shards, apollo client, and webpack 5 with a focus on creating a chat ui on top of the server. it also covers configuring webpack for babel and css, integrating shards, and connecting to a graphql server using apollo client, culminating in adding ui components for messaging.', 'chapters': [{'end': 588.128, 'start': 496.99, 'title': 'Building graphql server and ui with shards and apollo client', 'summary': 'Discusses setting up a graphql server and building a ui using shards, apollo client, and webpack 5 with a focus on creating a chat ui on top of the server.', 'duration': 91.138, 'highlights': ['Setting up a GraphQL server and building a UI using Shards and Apollo Client The chapter covers the process of setting up a GraphQL server and building a UI using Shards, including the use of Apollo Client to connect to the server.', 'Utilizing Webpack 5 and Module Federation for the project The chapter emphasizes the significance of Webpack 5, specifically mentioning the use of an exciting new feature, Module Federation, for the project.', 'Creating a chat UI on top of the GraphQL server The focus is on utilizing a starter kit to create a chat UI on top of the GraphQL server, emphasizing the lightweight nature of the kit and its key components.']}, {'end': 1240.417, 'start': 591.109, 'title': 'Configuring webpack and apollo client for graphql server', 'summary': 'Covers configuring webpack for babel and css, integrating a lightweight ui toolkit called shards, and connecting to a graphql server using apollo client, including making requests and displaying data, culminating in adding ui components for messaging.', 'duration': 649.308, 'highlights': ['Configuring Webpack for Babel and CSS The Webpack config applies Babel to JavaScript and brings in CSS using a style loader, with the project running on port 8080.', 'Integrating Apollo Client for GraphQL Server The process involves bringing in Apollo Client and GraphQL, creating a client and providing it as context to components inside the app, followed by making a request to the GraphQL server and displaying the data received.', 'Integrating Shards UI Toolkit The chapter introduces the use of Shards, a lightweight UI toolkit, and incorporates its CSS to support the toolkit, potentially using Bootstrap CSS.', 'Adding UI Components for Messaging The process includes creating UI components for displaying messages, styling message content based on the sender, and adding a UI for posting messages, resulting in a functional messaging interface.']}], 'duration': 743.427, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ496990.jpg', 'highlights': ['Setting up a GraphQL server and building a UI using Shards and Apollo Client', 'Creating a chat UI on top of the GraphQL server', 'Utilizing Webpack 5 and Module Federation for the project', 'Adding UI Components for Messaging', 'Integrating Apollo Client for GraphQL Server', 'Configuring Webpack for Babel and CSS', 'Integrating Shards UI Toolkit']}, {'end': 1501.221, 'segs': [{'end': 1316.64, 'src': 'embed', 'start': 1244.847, 'weight': 0, 'content': [{'end': 1247.388, 'text': "And we'll just call some onSend function that we're going to go create.", 'start': 1244.847, 'duration': 2.541}, {'end': 1250.829, 'text': "So we're going to also make it easy on ourselves.", 'start': 1249.148, 'duration': 1.681}, {'end': 1255.35, 'text': "We're going to handle somebody hitting return in the content form field.", 'start': 1250.849, 'duration': 4.501}, {'end': 1258.431, 'text': 'And that just means we need to look at the key up.', 'start': 1256.09, 'duration': 2.341}, {'end': 1262.312, 'text': 'And then within that, the event has a key code of 13, which is return.', 'start': 1258.631, 'duration': 3.681}, {'end': 1264.513, 'text': "We're going to call that onSend function.", 'start': 1262.832, 'duration': 1.681}, {'end': 1269.094, 'text': "So let's go and make that on send function.", 'start': 1267.352, 'duration': 1.742}, {'end': 1272.877, 'text': "First thing we need to do, hey, if we don't have any length in the content, then don't send it.", 'start': 1269.514, 'duration': 3.363}, {'end': 1274.718, 'text': 'Come on, no blank messages.', 'start': 1272.917, 'duration': 1.801}, {'end': 1282.505, 'text': "So then once we've sent it, we're going to go and reset the content to, yeah, blank.", 'start': 1277.26, 'duration': 5.245}, {'end': 1290.091, 'text': "That's a nice thing to do, right? So how do we go and run a mutation? So let's go over to our handy Apollo client documentation again.", 'start': 1282.545, 'duration': 7.546}, {'end': 1292.013, 'text': "Let's click on the mutations section.", 'start': 1290.111, 'duration': 1.902}, {'end': 1299.152, 'text': 'And we can see that there is this use mutation hook.', 'start': 1295.711, 'duration': 3.441}, {'end': 1300.773, 'text': "So let's go and get that.", 'start': 1299.353, 'duration': 1.42}, {'end': 1308.516, 'text': "And turns out, hey, we've already got some code for mutation.", 'start': 1306.175, 'duration': 2.341}, {'end': 1311.878, 'text': "So let's go and grab that out of localhost 4000 again.", 'start': 1309.117, 'duration': 2.761}, {'end': 1316.64, 'text': "And we're going to use our GQL thing, but this time we're going to call it postMessage.", 'start': 1311.898, 'duration': 4.742}], 'summary': 'Creating an onsend function, handling key events, and running a mutation using apollo client.', 'duration': 71.793, 'max_score': 1244.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1244847.jpg'}, {'end': 1411.647, 'src': 'embed', 'start': 1381.903, 'weight': 2, 'content': [{'end': 1383.604, 'text': "So we're going to call it postMessage.", 'start': 1381.903, 'duration': 1.701}, {'end': 1390.306, 'text': "And then we're going to use mutation and give it postMessage.", 'start': 1387.345, 'duration': 2.961}, {'end': 1398.42, 'text': 'So how do we invoke that? Well, you give it an object and the object has variables as a key and then the variables you want.', 'start': 1390.936, 'duration': 7.484}, {'end': 1403.083, 'text': "So let's go drop that in there post message.", 'start': 1399.801, 'duration': 3.282}, {'end': 1408.526, 'text': 'And then within that variables and we just send the state, right? Because user and content match up.', 'start': 1403.323, 'duration': 5.203}, {'end': 1411.647, 'text': "Awesome Let's go try it out.", 'start': 1409.426, 'duration': 2.221}], 'summary': 'Using postmessage with mutation to send state variables.', 'duration': 29.744, 'max_score': 1381.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1381903.jpg'}, {'end': 1481.482, 'src': 'embed', 'start': 1438.969, 'weight': 4, 'content': [{'end': 1441.751, 'text': 'So all we need to do is add in this poll interval on our query.', 'start': 1438.969, 'duration': 2.782}, {'end': 1451.078, 'text': "So let's go back up here to messages, and then just add in an options object that says, poll interval is 500.", 'start': 1444.332, 'duration': 6.746}, {'end': 1453.159, 'text': 'Sure, why not? That sounds good.', 'start': 1451.078, 'duration': 2.081}, {'end': 1457.563, 'text': "And that basically means that every 500 milliseconds, we're going to re-fetch that query.", 'start': 1453.86, 'duration': 3.703}, {'end': 1460.926, 'text': "So let's type in this one, and boom, there we go.", 'start': 1458.384, 'duration': 2.542}, {'end': 1467.594, 'text': "Nice, but let's have a look over at our network inspector and see the damage that we have wrought.", 'start': 1462.267, 'duration': 5.327}, {'end': 1468.034, 'text': 'Look at that.', 'start': 1467.634, 'duration': 0.4}, {'end': 1474.342, 'text': "Okay, so that's now every 500 milliseconds we're making another query and that's probably not great.", 'start': 1468.134, 'duration': 6.208}, {'end': 1476.598, 'text': "OK, we've got our client running.", 'start': 1475.157, 'duration': 1.441}, {'end': 1477.219, 'text': "That's great.", 'start': 1476.798, 'duration': 0.421}, {'end': 1480.081, 'text': "But it's doing this polling thing like every 500 milliseconds.", 'start': 1477.279, 'duration': 2.802}, {'end': 1481.482, 'text': "And that's just inefficient.", 'start': 1480.141, 'duration': 1.341}], 'summary': 'Adding a poll interval of 500ms for query, causing inefficient polling.', 'duration': 42.513, 'max_score': 1438.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1438969.jpg'}], 'start': 1244.847, 'title': 'Handling onsend function and optimizing api requests', 'summary': 'Discusses creating an onsend function to handle the return key press event and running mutations, along with optimizing api requests by adding polling with a 500-millisecond interval, based on the apollo client documentation.', 'chapters': [{'end': 1380.823, 'start': 1244.847, 'title': 'Handling onsend function and running mutations', 'summary': 'Discusses creating an onsend function to handle the return key press event, preventing sending blank messages, and running a mutation using the usemutation hook and defining variables to map to the fields in the post message, as seen in the apollo client documentation.', 'duration': 135.976, 'highlights': ['The chapter discusses creating an onSend function to handle the return key press event, preventing sending blank messages, and running a mutation using the useMutation hook, as seen in the Apollo client documentation.', 'The event has a key code of 13, which is return, triggering the onSend function when the return key is pressed.', 'The onSend function includes a condition to prevent sending blank messages, ensuring that the content has a length before sending it.', 'The process of running a mutation involves defining variables to map to the fields in the post message, as outlined in the Apollo client documentation.', 'The chapter demonstrates the use of the useMutation hook for running mutations, providing an efficient way to handle GraphQL mutations within the application.']}, {'end': 1501.221, 'start': 1381.903, 'title': 'Optimizing api requests', 'summary': 'Discusses implementing postmessage, adding polling with a 500-millisecond interval, and the inefficiency of making unnecessary api requests every 500 milliseconds.', 'duration': 119.318, 'highlights': ['Implementing postMessage by using mutation with variables to send state, ensuring content disappears upon clicking send.', 'Adding polling with a 500-millisecond interval to re-fetch the query, resulting in frequent unnecessary API requests.', 'Highlighting the inefficiency of the 500-millisecond polling, which leads to unnecessary API requests and overhead.']}], 'duration': 256.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1244847.jpg', 'highlights': ['The chapter discusses creating an onSend function to handle the return key press event and running a mutation using the useMutation hook.', 'The onSend function includes a condition to prevent sending blank messages, ensuring that the content has a length before sending it.', 'The process of running a mutation involves defining variables to map to the fields in the post message, as outlined in the Apollo client documentation.', 'The chapter demonstrates the use of the useMutation hook for running mutations, providing an efficient way to handle GraphQL mutations within the application.', 'Adding polling with a 500-millisecond interval to re-fetch the query, resulting in frequent unnecessary API requests.', 'Highlighting the inefficiency of the 500-millisecond polling, which leads to unnecessary API requests and overhead.', 'The event has a key code of 13, which is return, triggering the onSend function when the return key is pressed.', 'Implementing postMessage by using mutation with variables to send state, ensuring content disappears upon clicking send.']}, {'end': 1959.005, 'segs': [{'end': 1554.677, 'src': 'heatmap', 'start': 1501.521, 'weight': 0, 'content': [{'end': 1511.404, 'text': "We're going to use the subscription system built into the GraphQL standard and create a WebSocket connection between the client and the server.", 'start': 1501.521, 'duration': 9.883}, {'end': 1513.625, 'text': "And it's just really cool.", 'start': 1511.985, 'duration': 1.64}, {'end': 1517.567, 'text': "Let's go check out in the code how that's done to start changing out the server.", 'start': 1513.845, 'duration': 3.722}, {'end': 1519.307, 'text': "So that's a subscriptions model.", 'start': 1517.787, 'duration': 1.52}, {'end': 1521.168, 'text': "We're going to first stop the server.", 'start': 1519.747, 'duration': 1.421}, {'end': 1526.005, 'text': "And then we're going to bring in PubSub from GraphQL Yoga.", 'start': 1523.183, 'duration': 2.822}, {'end': 1529.468, 'text': "And that's a publish subscribe handler for this GraphQL system.", 'start': 1526.025, 'duration': 3.443}, {'end': 1532.05, 'text': "And then we're going to define a new type.", 'start': 1530.549, 'duration': 1.501}, {'end': 1533.871, 'text': 'And that type is subscription.', 'start': 1532.47, 'duration': 1.401}, {'end': 1535.452, 'text': "It's just like query and mutation.", 'start': 1534.111, 'duration': 1.341}, {'end': 1536.353, 'text': "It's a special type.", 'start': 1535.492, 'duration': 0.861}, {'end': 1539.475, 'text': "And it's going to have the same thing.", 'start': 1537.974, 'duration': 1.501}, {'end': 1540.957, 'text': 'You can subscribe to messages.', 'start': 1539.636, 'duration': 1.321}, {'end': 1554.677, 'text': "And in that subscription and this is probably the most complicated code we're going to do here we're going to have a subscribe function.", 'start': 1543.819, 'duration': 10.858}], 'summary': 'Using graphql subscriptions with websocket for real-time updates.', 'duration': 39.436, 'max_score': 1501.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1501521.jpg'}, {'end': 1622.459, 'src': 'embed', 'start': 1566.745, 'weight': 2, 'content': [{'end': 1571.988, 'text': "And we're going to add that in as context.", 'start': 1566.745, 'duration': 5.243}, {'end': 1580.634, 'text': 'So the first thing we need to do is define a new random channel.', 'start': 1577.213, 'duration': 3.421}, {'end': 1586.755, 'text': "So we'll just go use math random, and it's going to return 0 dot something, some random number.", 'start': 1580.914, 'duration': 5.841}, {'end': 1593.436, 'text': "So we'll slice off the 0 dot, and we'll just get the number.", 'start': 1587.135, 'duration': 6.301}, {'end': 1596.577, 'text': "And it's going to give us a nice little random string there.", 'start': 1593.896, 'duration': 2.681}, {'end': 1600.918, 'text': "And then we're going to return, effectively, the PubSubAsyncIterator for this channel.", 'start': 1597.037, 'duration': 3.881}, {'end': 1610.61, 'text': "And so in addition to that, we also need to keep a persistent list of who's actually subscribing, who's on all these channels.", 'start': 1604.485, 'duration': 6.125}, {'end': 1612.671, 'text': "So we're going to call that subscribers.", 'start': 1610.63, 'duration': 2.041}, {'end': 1622.459, 'text': "And then we're going to have a new function called onMessagesUpdate, which allows us to add a new subscriber to this list of subscribers.", 'start': 1613.452, 'duration': 9.007}], 'summary': 'Defining new random channel using math random and maintaining list of subscribers.', 'duration': 55.714, 'max_score': 1566.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1566745.jpg'}, {'end': 1653.789, 'src': 'heatmap', 'start': 1623.02, 'weight': 0.802, 'content': [{'end': 1624.621, 'text': "So we'll call that onMessagesUpdate.", 'start': 1623.02, 'duration': 1.601}, {'end': 1627.723, 'text': "And it'll take a function, which is our subscriber callback.", 'start': 1624.901, 'duration': 2.822}, {'end': 1631.026, 'text': "And we'll just push it onto our list of subscribers.", 'start': 1628.444, 'duration': 2.582}, {'end': 1636.205, 'text': "And so the first thing we need to do is say, cool, all right, you've shown up.", 'start': 1632.964, 'duration': 3.241}, {'end': 1637.705, 'text': "You've asked for a subscription on messages.", 'start': 1636.245, 'duration': 1.46}, {'end': 1640.166, 'text': 'So we will go and add you to that.', 'start': 1638.205, 'duration': 1.961}, {'end': 1641.926, 'text': 'So go and give it the function.', 'start': 1640.806, 'duration': 1.12}, {'end': 1648.188, 'text': 'And that callback is then going to use PubSubPublish on that channel to send you a message.', 'start': 1642.706, 'duration': 5.482}, {'end': 1649.588, 'text': "Hey, here's the new messages.", 'start': 1648.208, 'duration': 1.38}, {'end': 1653.789, 'text': "So we'll use channel, and then we'll give it the content of messages.", 'start': 1650.608, 'duration': 3.181}], 'summary': 'Implementing onmessagesupdate function to add subscribers and send new messages via pubsubpublish.', 'duration': 30.769, 'max_score': 1623.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1623020.jpg'}, {'end': 1723.039, 'src': 'heatmap', 'start': 1667.435, 'weight': 0.741, 'content': [{'end': 1671.919, 'text': "And then we'll do it on zero, which means on the next tick, we're going to go send you that data.", 'start': 1667.435, 'duration': 4.484}, {'end': 1672.86, 'text': "You've subscribed.", 'start': 1672.159, 'duration': 0.701}, {'end': 1673.82, 'text': "Here's the data.", 'start': 1673.26, 'duration': 0.56}, {'end': 1674.701, 'text': 'Boom There you go.', 'start': 1673.84, 'duration': 0.861}, {'end': 1679.625, 'text': "You don't have to wait for somebody to actually go and post a message in order for you to see the new messages.", 'start': 1675.022, 'duration': 4.603}, {'end': 1682.408, 'text': "Now there's one thing left to do.", 'start': 1679.645, 'duration': 2.763}, {'end': 1690.284, 'text': 'So we need to go over here to the mutation, and we need to alert the system when a new set of messages is out there.', 'start': 1683.22, 'duration': 7.064}, {'end': 1696.748, 'text': 'So the way that we do that is we iterate over subscribers, and then for each one of those, we just call that callback.', 'start': 1691.025, 'duration': 5.723}, {'end': 1697.749, 'text': 'There you go.', 'start': 1697.289, 'duration': 0.46}, {'end': 1701.091, 'text': "So let's start up our server.", 'start': 1700.09, 'duration': 1.001}, {'end': 1705.554, 'text': "All right, so now we're gonna try this out.", 'start': 1704.353, 'duration': 1.201}, {'end': 1707.175, 'text': "The first thing we're gonna do is we're gonna post a message.", 'start': 1705.574, 'duration': 1.601}, {'end': 1712.018, 'text': "Cool Then we're gonna create a new tab.", 'start': 1709.857, 'duration': 2.161}, {'end': 1716.517, 'text': 'where we basically create our subscriptions.', 'start': 1714.616, 'duration': 1.901}, {'end': 1723.039, 'text': "We go create a subscription, here's messages, we want ID and user name and hit play.", 'start': 1716.557, 'duration': 6.482}], 'summary': 'Real-time messaging system implemented, allowing instant data delivery to subscribers.', 'duration': 55.604, 'max_score': 1667.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1667435.jpg'}], 'start': 1501.521, 'title': 'Implementing graphql subscriptions and pubsub with websocket', 'summary': 'Demonstrates implementing graphql subscriptions using websocket and pubsub from graphql yoga, including creating a subscription type and a subscribe function, and defining a new random channel for pubsub. it also describes maintaining a list of subscribers, sending messages to subscribers, and integrating websocket on the client side to enable real-time data updates via subscriptions.', 'chapters': [{'end': 1596.577, 'start': 1501.521, 'title': 'Implementing graphql subscriptions with websocket', 'summary': 'Demonstrates implementing graphql subscriptions using websocket and pubsub from graphql yoga, including creating a subscription type and a subscribe function, and defining a new random channel for pubsub.', 'duration': 95.056, 'highlights': ['Creating a subscription type and a subscribe function The transcript discusses defining a new type called subscription and a subscribe function, enabling users to subscribe to messages.', 'Using PubSub from GraphQL Yoga to establish a publish-subscribe handler The chapter explains the use of PubSub from GraphQL Yoga, which serves as a publish-subscribe handler for the GraphQL system.', 'Defining a new random channel for PubSub The speaker demonstrates the process of defining a new random channel for PubSub by using math random to generate a unique channel identifier.']}, {'end': 1959.005, 'start': 1597.037, 'title': 'Implementing pubsub and websocket in graphql', 'summary': 'Describes the implementation of pubsub and websocket in graphql, including maintaining a list of subscribers, sending messages to subscribers, and integrating websocket on the client side to enable real-time data updates via subscriptions.', 'duration': 361.968, 'highlights': ['The chapter describes the implementation of PubSub and WebSocket in GraphQL It covers the implementation of PubSub and WebSocket in GraphQL, focusing on real-time data updates and communication between the client and server.', 'Maintaining a list of subscribers and sending messages to subscribers The system maintains a persistent list of subscribers and utilizes a function called onMessagesUpdate to add new subscribers and send messages to them using PubSubPublish on a channel.', 'Integrating WebSocket on the client side for real-time data updates via subscriptions The process involves adding the subscriptions transport WS library, changing the link to the server, using subscription instead of query, and observing instantaneous updates using GraphQL interface.']}], 'duration': 457.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1501521.jpg', 'highlights': ['Creating a subscription type and a subscribe function The transcript discusses defining a new type called subscription and a subscribe function, enabling users to subscribe to messages.', 'Using PubSub from GraphQL Yoga to establish a publish-subscribe handler The chapter explains the use of PubSub from GraphQL Yoga, which serves as a publish-subscribe handler for the GraphQL system.', 'Defining a new random channel for PubSub The speaker demonstrates the process of defining a new random channel for PubSub by using math random to generate a unique channel identifier.', 'The chapter describes the implementation of PubSub and WebSocket in GraphQL It covers the implementation of PubSub and WebSocket in GraphQL, focusing on real-time data updates and communication between the client and server.', 'Maintaining a list of subscribers and sending messages to subscribers The system maintains a persistent list of subscribers and utilizes a function called onMessagesUpdate to add new subscribers and send messages to them using PubSubPublish on a channel.', 'Integrating WebSocket on the client side for real-time data updates via subscriptions The process involves adding the subscriptions transport WS library, changing the link to the server, using subscription instead of query, and observing instantaneous updates using GraphQL interface.']}, {'end': 2420.23, 'segs': [{'end': 2026.8, 'src': 'embed', 'start': 1959.685, 'weight': 0, 'content': [{'end': 1967.469, 'text': "How cool is that? All right, so we've got our efficient UI that uses WebSockets and only gets data as it's needed, which is awesome.", 'start': 1959.685, 'duration': 7.784}, {'end': 1969.39, 'text': "But it wouldn't be like me to leave it there.", 'start': 1967.929, 'duration': 1.461}, {'end': 1980.199, 'text': "So we're going to kick it up a notch by going and using Webpack 5's Module Federation technology to share this chat component with another application.", 'start': 1969.851, 'duration': 10.348}, {'end': 1983.562, 'text': 'So Module Federation is really interesting.', 'start': 1981.02, 'duration': 2.542}, {'end': 1990.514, 'text': "if you're in the kind of medium to very large business context, you might be using what's called a microsite architecture,", 'start': 1983.562, 'duration': 6.952}, {'end': 1995.981, 'text': 'which means that your site is actually composed of a bunch of smaller apps.', 'start': 1990.514, 'duration': 5.467}, {'end': 2003.023, 'text': 'And in that model, sharing code can be a little problematic.', 'start': 1996.482, 'duration': 6.541}, {'end': 2012.445, 'text': 'So module federation allows you to take parts and pieces of your application and share them directly out of your app, which is really exciting.', 'start': 2003.583, 'duration': 8.862}, {'end': 2015.766, 'text': "And it's a live sharing system.", 'start': 2013.405, 'duration': 2.361}, {'end': 2020.967, 'text': 'So that means that when we update the chat mechanism that we have in the current client app,', 'start': 2015.786, 'duration': 5.181}, {'end': 2026.8, 'text': "it's going to automatically update in the new app that's consuming it, which is really neat.", 'start': 2021.897, 'duration': 4.903}], 'summary': "Using webpack 5's module federation to share chat component, enabling automatic updates in new app.", 'duration': 67.115, 'max_score': 1959.685, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1959685.jpg'}, {'end': 2322.741, 'src': 'embed', 'start': 2294.955, 'weight': 6, 'content': [{'end': 2298.478, 'text': 'So just go tweak this remotes key and just add a chat.', 'start': 2294.955, 'duration': 3.523}, {'end': 2299.499, 'text': 'Chat is chat.', 'start': 2298.638, 'duration': 0.861}, {'end': 2302.161, 'text': 'Start it up again.', 'start': 2301.58, 'duration': 0.581}, {'end': 2306.304, 'text': 'And there it is.', 'start': 2305.663, 'duration': 0.641}, {'end': 2309.787, 'text': "Now we're importing chat as a React component.", 'start': 2307.105, 'duration': 2.682}, {'end': 2311.409, 'text': 'This is not an iframe.', 'start': 2309.807, 'duration': 1.602}, {'end': 2312.991, 'text': "It's not anything like that.", 'start': 2311.589, 'duration': 1.402}, {'end': 2321.5, 'text': 'It is straight up the React code from the other application automatically brought in live at runtime and brought into our app and run.', 'start': 2313.111, 'duration': 8.389}, {'end': 2322.741, 'text': 'And it works.', 'start': 2322.261, 'duration': 0.48}], 'summary': 'Imported chat as react component, works at runtime.', 'duration': 27.786, 'max_score': 2294.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ2294955.jpg'}], 'start': 1959.685, 'title': 'Efficient ui and live code sharing with websockets and module federation', 'summary': "Explores the use of websockets for efficient ui and introduces webpack 5's module federation technology to share components in a microsite architecture context, addressing code sharing challenges. it also explains how module federation enables live code sharing between apps, allowing seamless updates and integration of components, demonstrated through the example of integrating a chat component into a home page app, with real-time updates and visual changes while running on different ports.", 'chapters': [{'end': 2003.023, 'start': 1959.685, 'title': 'Efficient ui with websockets and module federation', 'summary': "Explores the use of websockets for efficient ui and introduces webpack 5's module federation technology to share components in a microsite architecture context, addressing code sharing challenges.", 'duration': 43.338, 'highlights': ['Introduction to WebSockets and Module Federation for efficient UI and code sharing in microsite architecture context.', "Use of Webpack 5's Module Federation to share chat component with another application in a microsite architecture context.", 'Challenges of code sharing in a microsite architecture context and the need for solutions like Module Federation.']}, {'end': 2420.23, 'start': 2003.583, 'title': 'Module federation: live code sharing', 'summary': 'Explains how module federation enables live code sharing between apps, allowing seamless updates and integration of components, demonstrated through the example of integrating a chat component into a home page app, with real-time updates and visual changes while running on different ports.', 'duration': 416.647, 'highlights': ['Module federation enables live code sharing between apps, allowing seamless updates and integration of components, demonstrated through the example of integrating a chat component into a home page app, with real-time updates and visual changes while running on different ports.', 'The chat component in the current client app automatically updates in the new app consuming it, showcasing the live sharing system of module federation.', 'Demonstration of modifying webpack config and using module federation plugin to expose and consume components from different apps, ensuring real-time integration and updates of the shared component.', 'The chat code from another app is seamlessly brought into the home page app at runtime, not as an iframe, but as straight up React code, allowing for live updates and changes in the UI.', 'Real-time visual changes made in the original client app reflect immediately in the home page app, demonstrating the live code sharing capability of module federation.']}], 'duration': 460.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E3NHd-PkLrQ/pics/E3NHd-PkLrQ1959685.jpg', 'highlights': ['Module federation enables live code sharing between apps, allowing seamless updates and integration of components, demonstrated through the example of integrating a chat component into a home page app, with real-time updates and visual changes while running on different ports.', 'The chat component in the current client app automatically updates in the new app consuming it, showcasing the live sharing system of module federation.', 'Demonstration of modifying webpack config and using module federation plugin to expose and consume components from different apps, ensuring real-time integration and updates of the shared component.', 'Introduction to WebSockets and Module Federation for efficient UI and code sharing in microsite architecture context.', "Use of Webpack 5's Module Federation to share chat component with another application in a microsite architecture context.", 'Challenges of code sharing in a microsite architecture context and the need for solutions like Module Federation.', 'The chat code from another app is seamlessly brought into the home page app at runtime, not as an iframe, but as straight up React code, allowing for live updates and changes in the UI.', 'Real-time visual changes made in the original client app reflect immediately in the home page app, demonstrating the live code sharing capability of module federation.']}], 'highlights': ['Module federation enables live code sharing between apps, allowing seamless updates and integration of components, demonstrated through the example of integrating a chat component into a home page app, with real-time updates and visual changes while running on different ports.', 'The chat component in the current client app automatically updates in the new app consuming it, showcasing the live sharing system of module federation.', 'Demonstration of modifying webpack config and using module federation plugin to expose and consume components from different apps, ensuring real-time integration and updates of the shared component.', 'Introduction to WebSockets and Module Federation for efficient UI and code sharing in microsite architecture context.', "Use of Webpack 5's Module Federation to share chat component with another application in a microsite architecture context.", 'Challenges of code sharing in a microsite architecture context and the need for solutions like Module Federation.', 'The chat code from another app is seamlessly brought into the home page app at runtime, not as an iframe, but as straight up React code, allowing for live updates and changes in the UI.', 'Real-time visual changes made in the original client app reflect immediately in the home page app, demonstrating the live code sharing capability of module federation.', 'Creating a subscription type and a subscribe function The transcript discusses defining a new type called subscription and a subscribe function, enabling users to subscribe to messages.', 'Using PubSub from GraphQL Yoga to establish a publish-subscribe handler The chapter explains the use of PubSub from GraphQL Yoga, which serves as a publish-subscribe handler for the GraphQL system.', 'Defining a new random channel for PubSub The speaker demonstrates the process of defining a new random channel for PubSub by using math random to generate a unique channel identifier.', 'The chapter describes the implementation of PubSub and WebSocket in GraphQL It covers the implementation of PubSub and WebSocket in GraphQL, focusing on real-time data updates and communication between the client and server.', 'Maintaining a list of subscribers and sending messages to subscribers The system maintains a persistent list of subscribers and utilizes a function called onMessagesUpdate to add new subscribers and send messages to them using PubSubPublish on a channel.', 'Integrating WebSocket on the client side for real-time data updates via subscriptions The process involves adding the subscriptions transport WS library, changing the link to the server, using subscription instead of query, and observing instantaneous updates using GraphQL interface.', 'The chapter discusses creating an onSend function to handle the return key press event and running a mutation using the useMutation hook.', 'The onSend function includes a condition to prevent sending blank messages, ensuring that the content has a length before sending it.', 'The process of running a mutation involves defining variables to map to the fields in the post message, as outlined in the Apollo client documentation.', 'The chapter demonstrates the use of the useMutation hook for running mutations, providing an efficient way to handle GraphQL mutations within the application.', 'Adding polling with a 500-millisecond interval to re-fetch the query, resulting in frequent unnecessary API requests.', 'Highlighting the inefficiency of the 500-millisecond polling, which leads to unnecessary API requests and overhead.', 'The event has a key code of 13, which is return, triggering the onSend function when the return key is pressed.', 'Implementing postMessage by using mutation with variables to send state, ensuring content disappears upon clicking send.', 'Setting up a GraphQL server and building a UI using Shards and Apollo Client', 'Creating a chat UI on top of the GraphQL server', 'Utilizing Webpack 5 and Module Federation for the project', 'Adding UI Components for Messaging', 'Integrating Apollo Client for GraphQL Server', 'Configuring Webpack for Babel and CSS', 'Integrating Shards UI Toolkit', 'Covers building a chat application with GraphQL and GraphQL Yoga Demonstrates the creation of a chat window with real-time message sending and multiple participants.', 'Setup of GraphQL server with types, queries, and resolvers Explains the process of defining message types, creating query types for messages, and implementing resolvers for data retrieval.', 'Creating mutations, adding resolvers, and executing queries in GraphQL, including examples of posting messages and retrieving IDs from the array.', 'Explaining the syntax for making the first query in GraphQL and the resemblance of mutations to post in the REST world.', 'Real-time message sending and chat window demonstration Shows the functionality of sending messages in real-time and the layout of the chat window with multiple participants.', "Step 5 involves sharing the chat component to another application live using Webpack 5's module federation feature, showcasing its capabilities.", 'Step 4 includes upgrading the client to use subscriptions, optimizing the chat system for real-time communication.', 'Step 3 involves upgrading the server to a subscriptions model, enhancing the efficiency and real-time functionality of the chat system.', 'Step 2 utilizes Apollo Client to build a React app that connects to the GraphQL server using polling for basic functionality.', 'Step 1 focuses on building a simple GraphQL server for reading and writing messages, laying the foundation for the multi-user chat system.']}