React Day Berlin

React Day Berlin 2022

In this talk we will see how we can bridge React Native app with commonly used game engine Unity3d for two way interaction between the game and React Native app by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Run Games Within Your React Native Apps

Vladimir Novick

React Summit Remote Edition

React Summit Remote Edition 2020

What is the future of user interactions? Will we continue using web and mobile or will we switch into VR and AR completely? What is our UX today on web and mobile and how it will change when the digital world will bridge into new dimensions. Would we still use keyboard and mouse or gestures or will we use something else? In this talk we will get a glimpse into the future where we will control apps with our thoughts. Literally. It’s not a thought experiment, but a journey into our brainwaves with consumer EEG headset. We will explore how we can use them and AI to create futuristic experiences, which will lay a foundation stone to our future interactions with the digital world. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Controlling Apps with Your Mind and AI

Hi everyone. Really excited to be here at React Summit Remote Edition streaming from outer space. And today I want to talk about controlling apps with your mind. My name is Vladimir Novik. I'm a software architect and consultant in Vladimir Novik Labs. I'm a Google Developer Expert, author, engineer, and on a daily basis I work in web, mobile, VR, AR, IoT, and AI fields. I'm also CTO and co-founder of Event Loop, and we are creating robust, performant, feature-rich conference experience, online conference experience. And basically instead of having Zoom for your virtual conference, we bring you the set of conference tools and different plugins and widgets and so on that helps you to organize the conference, attend the conference. So if your organizer or speaker or attendee reach out to us and sign up for our alpha product, it will be an open source product. So if you want to collaborate, you're welcome. You can find us at eventloop.ai or on Twitter at eventloopHQ. Today I want to talk about the future. And I think we are in kind of transition phase technologically wise. When we're exploring new horizons, we're exploring new medium, we have VR, AR, mixed reality, web, mobile, everything is constantly changing. And that's why we are sort of the ones who break the rules to make the new ones. And let's think about what medium we will use in the future. What dimensions we will use. Maybe VR, maybe AR, maybe something different. I mean, I'm just thinking here, but there are like quantum computing is getting traction and VR is getting traction, AR, and everything is kind of changing, right? So which dimensions we will use. Will there be web as it is today or mobile or we completely switch to different medium? And how we should prepare for that transition, right? How we should adapt. Should we adapt or should we actually shatter foundations that we have and maybe invent new techniques to manipulate things, to interact differently, right? Maybe new UX patterns, maybe new best practices. So we have this ability right now to change things, to adapt and transform things to something totally different. And let's talk what are the very foundations of UI and what are the very foundations of UX. And I think it's 2D medium. And if you think about that, we've gone a long way from cave drawings to the mobile apps. But if you think about all the color theory and lines and how history of art and how everything kind of created the foundation of design and everything in our screens are basically 2D medium. Because we fake 3D, third dimension. It's not really like third dimension. We have 3D models in the browser or in headset or wherever, but all the like shapes and depth is based on shaders, which is basically a function of how light is reflected. So it's kind of fake, right? And we have things on our phones, we have screens. Everything is 2D. And the XR is adding a new dimension to that. So how we've adapted. We took different forms. Let's say you have a sign up form. So we have this form hovering in thin air in VR. Realistic? Not really. Something that we've adapted from 2D medium, right? Or we have in AR, we have arrows pointing to different directions that completely break the notion, but we have it because we've adapted and we haven't invented something new. So I think it's more crucial to create some sort of like reality based interactions in VR and AR. And if you think about that, if you need to log in inside VR. So currently you have a login form, you have this hovering keyboard, you type on this keyboard and then you get into, you type your username and password, you get inside. But is it something that you will see in the reality? Not really, right? So it's more realistic to have some kind of passport or key or whatever that you just put on the spot or turn the key inside the door and it will let you through. It's a sort of reality based interactions, right? So we need to understand our reality in order to create these interactions. The medium is completely different. Now in VR, there is another dimension of something happening behind the viewer, right? So I'm looking at the camera, but something is happening behind. So I cannot use color theory to do this amazing call to action buttons or animation. So I need to use different things like haptics, like sounds, like maybe slowing time and so on. There is also an adaptive UI. Adaptive UI is something that is used on the web and the idea is UI is kind of learning from what are you doing with it. So like forms are learning and adapting. So you can Google that. It's a kind of new trend-ish. Another thing that I propose is actual mind reading. And yeah, obviously I cannot read your thoughts, right? But to some degree. And I want to ask you what is it, right? And obviously we are online, so you can answer in chat. I'll pause. So it's the known universe. And all these dots are clusters of galaxies and it looks amazing. But what is this? It looks pretty much the same, right? But it's actually neurons in our brains. So we are the universe and act accordingly. So how do neurons in our brain, how do they work? So the neurons come in pairs and there is excitatory neuron and it releases glutamate and creates dipole mechanism. Basically have plus and minus and it sort of acts like a battery. So you have potential change between different neurons. So it creates a potential change that can be measured by electrodes on our skull. And it looks like this if you measure your brain. So this is the awake state. This is a sleep state. And you see it's kind of different, right? But it's sort of random-ish, right? So we need to analyze that and to get what does all this mean, right? So in order to do so, we will use EEG headsets. And there are lots of consumer and research versions of EEG headsets. And the idea is to put electrodes on your skull. And based on that, measure the potential change under our skull. So research EEGs look like this. And they are quite costly. But there are consumer ones. And I actually have one here. It's called Muse. It's a nice product that helps you with meditation. So if you're doing meditation, it kind of helps you to focus and so on. And yeah, I will read my brain now, my brainwaves, and you will see how it looks like. So it's fairly cheap. It has only like five electrodes and that's about it. But it's good for our example. So how do we connect this thing to our brain? Now I don't need to open my skull and plug it in. I can connect it using Bluetooth. And specifically, we will use web Bluetooth. I can use Bluetooth by accessing Navigator Bluetooth object. And I call request device. I will filter the Muse service. And I will just connect to and get some attributes from the Bluetooth. Now the support is not quite there, right? So we see it in Chrome and for some reason Opera. But the rest is kind of, no, right? It doesn't support. But we're talking about the experiment, right? It's sort of thoughts experiment, literally. But also like experiment where technology will lead us. And let's look at the demo. So I have this playground here and I can pair to my headset and you will see the brainwaves coming through. And this is my actual brainwaves. As you can see, when I talk and the waves kind of change, when I blink, you see these tiny spikes of voltage spikes. If I do something like this, you see the higher spikes. So I can measure to some degree what's happening on my brain, right? So this is pretty nice. But what do I do with this data, right? So I created here a little app. And before connecting to Muse, actually, yeah, before connecting to Muse, what I want to do, I want to see all the readings of this headset. I will subscribe to readings and I will just console log them. Now I use Muse JS library and this library exposes the readings as RxStream that I can subscribe to and just console log whatever Muse shows me. So let's connect. And let's see what we have here. And as you can see, similar as the graph, we don't really have, like the data is quite weird, right? So we cannot do pretty much anything with that. So the question is how we measure things more precisely. And to measure more precisely, we will use bandpass filter. So we cut out the frequencies on, this is like the graph, right? We cut out these and get only the spikes. Now then we need to cut all these into epochs, which is basically a timeframe because we want like time reference. If in specific amount of time there is a spike, that's probably a blink, right? So we cut these into epochs and also we need to pass it through Fast Fourier Transform. So that means that we take the data that we get is a micron volts and we want to convert that to frequency domain. So we use Fast Fourier Transform and we convert that to frequency domain. So it looks from like the raw data that we get, we will see different frequencies. Now we can recognize different brain waves based on these frequencies and the differentiation is gamma, beta, alpha, theta and delta. And each one of them is different to our state of mind. So for an instance in delta, this is like a sleep, a loss of body awareness, repair and so on. And like gamma is like heightened perception, learning, problem solving tasks, quality processing. As you can see, they are not like super distinctive, there's like a broad range. Beta is generally awake, right? And alpha is like relaxed. So I can measure the alpha state and see if I'm relaxed. So we can react basically to brain wave spikes. And we also can feed this data into machine learning. But before doing some amazing stuff with machine learning, I want to show you something. I want to subscribe to the focus. And basically it will give me the alpha wave readings. So as far as code goes, if... And also I want to subscribe to blinking. So in order to differentiate the blink, basically what I do, I get the readings. I filter them, I get the reading only for the electrode above my left eye, get the maximum of it, like the spike, right? And then I use RX operator switch map to differentiate the spike, because I don't really care about the rest of the data, just the spike. If there is a spike, then this is something that I will return. So how it will look like. These are... okay, I need to also remove this one. Let's connect it again. And what we will see. If I blink, you can see here, me blinking. So as you can see, sometimes it works, sometimes it's not, because it's like a threshold and maybe I put it not really close to my skull. So yeah, so this is the blinking. So now we want to feed this data to machine learning. In order to do so, what I will do, I will go to my app.js and I will add my prediction panel. I will predict some stuff. And here I have three cards. And these three cards, one is web and mobile, other is VRXR and another is IoT AI. So what I will try to do, I will connect to my use headset, get all the data, pass through all the filters that I need, and then add this as a sample to KNNClassifier, which is machine learning algorithm. And we'll start classifying which card I'm thinking about. So let me record these waves really quick. So click on this button while looking at the web and mobile. Now VRXR. And now IoT AI. So now if I click on classify, I will be able to switch by just looking, hands are here, so I can just look at different cards and switch between them. And yeah, as you can see, the main topic that I'm interested in is VRXR and IoT AI. So this is quite cool, but if it will work, I will bring another level of coolness here. So I have MobX store here with enable drone flag. And yeah, I have a drone here, this tiny fellow. So it occasionally works. So let's see if it will work this time. So what I will do, I will first connect to my Muse headset. I need not to blink. And then I will connect to my drone. Okay, so here we have the drone. And hopefully you see it. I will record brainwaves and start classifying. Now I hope it's in the camera view. Now I will try to move it by just looking at it. And let's land it. And it fell. I'm not sure if it was in the view. So let me try to put it in the view again. Now it's probably here and again I'm just moving that with the power of my thought. So that was quite cool. And the main takeaway here is what is the purpose of all of this, right? Like why are we flying drones with our mind, why we're using these devices, they are not that reliable. We have web Bluetooth support only in Chrome. The main reason for that is that we are the ones who made the rules and we break the rules, we invent new things, right? And my main takeaway from this talk is that the future is already here and you are the ones to build it. Thank you. All right. That was incredible. I mean I didn't think that we were going to see somebody fly a drone with their mind this early in the morning. Unfortunately, we don't have much time but we're going to bring Vlad back to the stage for one quick question and then we're going to move on to our next session. So Vlad, I think after seeing something like this, the mind control with the AR, where does somebody even start if they want to start learning this stuff for themselves? I mean the whole point of this talk was like, right, you can change the world basically, right? You're the one who can change everything, right? And then you need to decide what you want to learn like technology wise. You want to learn, be more experienced just in React or you want to broaden your horizons, right? So for instance, if you want to have a React native and AR or have React and web Bluetooth and drones, you can get on different resources. There's egghead.io which is an amazing website where I will be also doing courses there. Actually, I will be doing a workshop on React native and AR pretty soon. So I actually created this sound for React Summit so I will send the link in the community channel. So if you want to get to this workshop, you can do so. And VR wise, I also had a bunch of talks. So I have a YouTube channel streamed about VR, but I'll be also recording a bunch of stuff on this topic because I mean, I like to teach these things, right? So that's why I also started a Twitch channel. And yeah, that's like one of the places, but obviously there are lots of places where to learn and if you really want to get into this, I would say just DM me on Twitter. I will let you know, like, let me know what you want to do as far as technology is concerned. But I probably will be able to direct you to the learning materials and free sources somewhere and so on. Excellent. Well, Vlad, thank you so much. We really appreciate it. I wish we had more time for Q&A, but to get us back on track, we are going to jump now to a panel discussion.


React Summit

React Summit 2020

Virtual Reality gives us an ability to experience virtual worlds from the comfort of our homes. But it doesn't have to be experienced alone. In this talk we will see how we can use React, WebVR and GraphQL to create social VR experience in the browser. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Create Collaborative VR Environment in the Browser with React and GraphQL

♪ Hi everyone, really excited to be here at React Summit and today we'll talk about how you can create collaborative VR environments using React and GraphQL. So let's dive in. A little bit about myself, my name is Vladimir Novik, I'm a software architect, author, entrepreneur and I work in web, mobile, VR, AR, IoT and AI industries. You can follow me on Twitter or check out my website for more information there. I'm also CTO and co-founder of Eventloop and we create a robust, performant, feature-rich online conference experience that you really want to be a part of. We have our own conference running on Eventloop in March next year and it's called Modern Web Summit and you can check out more info about us on eventloop.app or follow us on Twitter for updates. So let's start. VR in the browser. So how it started? We started with WebGL, it was so-called like Canvas 3D back in the time, 2006, then continued into WebGL 1.0 spec and now WebVR, WebGL 2, and eventually it turned to be WebXR when WebVR was deprecated in favor of having both AR and VR in one API. As you can see on the Can I Use website, there is not much browsers that are using WebVR or ready for that, so mostly just Firefox. So you cannot rely on WebVR or WebXR on Chrome. WebXR device API is also not that good, as you can see here, but it's a work in progress, so we can envision that in upcoming years it will be better, hopefully. So what are our solutions today if we want to create some kind of VR experience? I'm using Chrome here and will still be using VR. So with WebVR and WebXR, if you don't have WebXR enabled in the browser, it defaults to 3D environment and game-like experiences and so on, which is also good and nice, we'll see it today. So with WebVR and WebXR, you can actually get your sensors positioned, you can get your headset positioned, and based on that, you can do interactions with the UI. For that, you can use different tools. One is for developing that. One is A-Frame, which is an amazing library and huge community that basically wraps around 3GS and gives you lots of capabilities like physics, particle effects, movement, controllers, break-casting, you name it, lots of things. And you can actually create really complicated experiences with that just by using its so-called NT component system and using JavaScript. Now, if it uses JavaScript, obviously we can embed this in React as well, and we'll see today how it's done. Another option is just to fall back to best practices in terms of game engines. We can use Unity game engine and develop something in C Sharp, or we can use Unreal Engine and develop in C++, or their so-called feature, feature so-called Blueprints. But we are not here to talk about Unreal Unity, so we are here to talk about both A-Frame and React 360, mostly about React 360. So let's continue. Let's take a look at the A-Frame, and let's look at the examples of experience that you can get. I don't have VR enabled here because I'm on Chrome, but I still can navigate the environment by pressing arrow keys and by just looking around this wall of basic shapes. So this is a nice experience, but it's just a really simple one. I want to see something more complex, so for more complex, let's get into a directory of different examples. And one of such examples is Minecraft-like world, VR blocks, you can go around it, navigate, and it's pretty awesome what you can do just with the power of A-Frame and JavaScript. You can get all these cool stuff here. So apart from that, let's take a look at something more complex, something more like Beat Saber type of thing, if you played on Quest or other devices. So we can get something like this also developed in A-Frame. And I think it's pretty nice, also music is kind of nice here. And you absolutely cannot create something like that in React 360. So with A-Frame, you can do really amazing and hypnotizing experiences, right? So pretty cool what you can do with that. Now, what A-Frame uses? A-Frame uses coordinate systems, and not just A-Frame, basically every 3D environment uses coordinate systems. And one of these, like this system, is basically either left-handed or right-handed. And the idea is if you take your hand and you point middle finger at you, so Z-axis will be the point at you. So it means that positive X will be to the right side, and the negative X to the left side. If you need to position something in front of the viewer, it will be minus Z, and so on. So we use right-handed coordinate systems. So when you see coordinates, take in mind that, give in mind that we'll have these coordinate systems both in A-Frame, in React 360, and so on. So axis direction also changed when applied rotation. So if we rotate something to the right, then all the axis change, and we need to take this into account. A-Frame uses entity component system, which means it consists of entities, components, and systems. Entities are containers into which components can be attached. So you will see, when you will see it in the code, it looks more like entities are like React components, components are like props, and systems are the global systems like services and stuff. So the reason why it's so, because in game engines, entity component system is pretty common pattern, and A-Frame kind of mimics that system. Unity uses also entity component system, so it's pretty close. So if we look at the A-Frame code, we'll see something like that. So this just loaded, so I can navigate around, I have these basic shapes. As you can see, I need to just import A-Frame, bring a bunch of styles, and then this is the scene component, these are assets component, entity. I call it component, but in A-Frame, this is called entities. So these are entities, and like background, fog, and scale, roughness, width segments, all of that are components. So it's kind of misleading because in React, we're used to the whole thing is component, and these are props, but in A-Frame, in documentation, you will see these are entities and these are components. The main point of showing that is that you can easily see that you can just take this and abstract that into React component and start using it. So there is React A-Frame library, but I'm not sure it's maintained. I think it's not maintained for a while now. So you can just create wrappers yourself, and as you can see, it's just fairly straightforward here to pass different data to them and so on. So what about React 360? So React 360 is built for 360 user interfaces, hence the name. The main idea is that you don't create these fancy experience, you don't walk around, you just look at the curved screens and interact with curved screens in VR, or in general, in 3D environment on the web. So the architecture of React 360 is actually based on React Native architecture. We have React running in a Web Worker. When you bootstrap a new project, you will see an index.js. This code doesn't have any access to browser APIs. It's just running in a Web Worker. We have a React Native bridge that uses MessageQueue to pass all the asynchronous messaging to the browser, to the client.js. Now on client.js, you need to define native modules, which basically have access to browser APIs. So to get started, you run npx React 360 CLI init, you get your demo up, and then you get these kind of components. So this is a client.js, the one that has access to the browser APIs. So you have the init function, you have a bunch of React instance creation, and you pass a bunch of stuff, such as getting default surfaces, setting background to the whole environment, and so on. We'll see more complicated examples here, but this is the thing that you will get once you create a new project. Now what you can do, you can render something on different surfaces. And there are several types of surfaces. The most important ones are the cylinder one and the flat one. Actually, it's supposed to be... this one's supposed to be cylinder, but anyways. Cylinder is a cylinder that surrounds you. And rendering something on top of this cylinder will have something curved in front of you. So it will look better in UI. It's the best practice in VR user experience, in VR design, to put flat UIs on curved surfaces so it will look more natural, so to speak. And if you put a flat surface, then it's just a flat surface that you can position however you want, like set an angle, and that's it. So to interact with the browser, you need to define different native modules. This is how we can define them. We import module from React 3.16. We just define a class here, and we have the game state and game ID and user ID. You understand in a bit what is this game state because it relates to the demo I will show in the end of the talk. Then you basically register these modules, and you register them by adding native modules array here, and adding a function will get a context. And you can return a new game module passing the context back. So you can use the context to pass callbacks around and so on. So this is pretty cool thing that you can create different surfaces, can create a game module to basically share your logic between different surfaces. Because they are rendered in different places, basically. So on the React side, you use regular React components, and you use different components provided by React 360. For example, you have VR button, and you have different callbacks for that, like on enter, on exit, on click. Now, in VR, you have a concept of, in general, in 3D environments, you have concept of ray casting. When you project an invisible ray going into specific direction, when it hits the target, it will return back the target that it hit. When dealing with VR controllers or VR headsets in general, there is a ray cast projected from the camera or projected from the controller. And it hits the button or hits the target or hits something like that. So in React 360, VR button does that under the hood. So if you just look at the button in VR, depends on the headset or you point with the controller and enter the button space, basically with the reticle of controller, then it will trigger on enter or trigger on exit if you leave that. So it's like on mouse enter or mouse leave, but in VR. And we have our component here, game tile, and that's about it. So it's pretty similar to React Native. We have views. We have different styles we can provide, like so, for the buttons. There are specific styles for positioning and so on. We can animate using animated similar to React Native and basically use practices we are aware of and using for several years. So what about the data? How we can bring in the data into our VR environment? And in addition to that, how we can bring it real time? Because we're talking about collaborative in VR environments, we need to bring some data, we need to have data updated constantly and so on. So for that, we'll use GraphQL. And GraphQL, as you all probably know, it's a query language for API. And it's like magic that just works. And yeah, I'm really passionate about GraphQL. I talk a lot about GraphQL. So this talk is no different. We'll talk about that as well. So the idea with the GraphQL is that we can send one request to the server and get all the data we need. And the shape of the data will be the same as we requested. So it gives us a lot of benefits of having the data when we need and in the shape that we need and having all the introspection of what is happening on the server. So this is how GraphQL looks like in like sandbox environment, pretty simple one. And under the hood, we send in the query and getting the data back. The query sent in stringified format with variables and we're getting back the data in JSON. Now, this is more like realistic format, how it will look like in production. This is like Star Wars API. We have different directives, we have variables, we have different types. GraphQL is all about types. So yeah, GraphQL is amazing and we will use it for our talk as well. So what about architecture and especially how about architecting something collaborative, right? So lots of things happening asynchronously. We have different third parties APIs, we have lots of things, like lots of moving parts. And obviously, architecture wise, we need to think about more like microservices architecture. So having different microservices here and third party APIs and everything combined into one GraphQL facade that will return everything back. And the best practice to my experience is to use something like called the three-factor app architecture. And the three-factor architecture is something similar to that. You have an app which talks with the real-time GraphQL API. It updates some kind of state in the database or wherever you like and we trigger events. Now, an event will trigger a serverless function that will update the state and basically do the processing that it needs. And when state is updated, everything is propagated back to the client using subscriptions. For our example, we will use Hasura, which is an open source and free engine, gives you auto-generated real-time API. And on top of new existing Postgres and it has a bunch of features that I won't go through right now, but you can read that after the talk in the slides, there are lots and lots of features. This is just like the tip of the iceberg. To see in action our environment, we can go to Hasura console and see something like this. We have a game with a bunch of moves happening. We can see these moves, like subscription is running, and we get a bunch of data back. This is the subscription that I'm calling and I always can insert a new move and this will be updated. Now, what this backend serves is this demo. Basically, I have a tic-tac-toe game and I can change my background, I can change it from being a grid to being a Skyrim background. I can have a chat, I can scroll in this chat. The coolest thing here is that we have subscriptions in place and it's all real-time. For example, if I will click on something here, you see this one was updated. Let me click here. Again, I get another move updated here. Now, in turn, if I will go and try to stop that, we'll execute a move. Let's say we have a row number zero and column two. Let's write move here, zero, two. We insert a move. What will happen? Oh, yeah, it's like a race. It starts from zero. We have this one added or let's add another one. Insert move. You see everything is updated in VR and in real-time. This is pretty cool how we can do this with React 360 and Hasura together and create this kind of environment. Also, we can chat here. The code is in GitHub, so you're welcome to look through the code. We will briefly look through that. But you're welcome to look more closely at the code and comment on that and so on. How we add things to VR, how we add things, for example, here in A-Frame, we basically add Apollo, Apollo provider. We have our HTTP link, we have a WebSocket link, and we wrap everything with Apollo provider. Now, here in A-Frame example, it looks pretty ugly because A-Frame is not built for something like this. It's built more for games and interaction. I did the other things around. The Tic-Tac-Toe game was a game in React 360 and A-Frame is like a blog post list in A-Frame. Maybe it's a bad example. But anyway, you can go into posts here and get a subscription, getting all the data back, and you can see that you can update lots of stuff. It's different endpoints, so you will see different things here. You're welcome to play around with that after the talk. How to add stuff to React 360, you add Apollo provider, you add our game board, and basically, you execute subscriptions, you execute queries. Now, before finalizing this talk, let's look briefly through the examples here, through the code here. Here we see our client.js. In client.js, we'll have multiple things. We'll have cylinder surfaces rendering the whole game board, and we have our VR chat panel rendering on the right side of things, and game gallery rendering on the left side where you can change the background. The whole logic is done through the native modules here. We have one native module called game module, and it will be shared later on. Not now, but it can be shared between this instance and other instances here. We have ‑‑ yeah, it can be shared across the whole thing. We can also look into index.js. Index.js is registering multiple components. Now, you have to register a component, VR chat panel component to use that, or game gallery, you have to register that, because these are different routes. You basically wrap each one of them with Apollo wrapper, and you can use subscriptions inside. Here I can render the board, and the whole idea with the board rendering is that I have the matrix that I go through, and I basically execute mutations whenever I click. One caveat, though, React 360, unfortunately, is not updated to the recent version of React, so unfortunately we cannot use hooks, so we still use the old method of render props with mutation, and you have a component mount and all of this stuff. I wish the hooks will be there soon, but it doesn't depend on me, so whenever it will be ready, it will be ready. Meanwhile, you can use A-frame easily with hooks and context and all the new React by just wrapping A-frame components and so on. So let's get back here, and before wrapping up, I just want to first of all thank you, thanks for React Summit organizer for inviting me, and I want to basically encourage you to get into VR and AR and try things and try to create these amazing demos that were created for A-frame, create amazing demos for React 360, experiment, play around with the code. VR is just starting, it's just getting into the browser, it's still not supported everywhere, but it will be, so get into this stuff, try to learn new things, and thanks for having me, and enjoy the conference. Bye-bye. See you. ♪♪♪


React Summit Remote Edition 2021

Blockchain is arguably a future technology that can be somewhat confusing to get started. Even though there are plenty of resources scattered across the web, but to get started developing distributed apps in React on the blockchain can sound intimidating. In this talk, Vladimir Novick will share how we can get started and what you should know about blockchain architecture. If you always wanted to get into Blockchain development and didn't know where to start, this talk is for you. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>