1 00:00:00,270 --> 00:00:05,640 In this lecture, we're going to import the WebAssembly file generated by a Web pack. 2 00:00:06,000 --> 00:00:10,500 There are a couple of adjustments we're going to perform in our configuration files. 3 00:00:10,800 --> 00:00:17,880 In the resource section of this lecture, I provide a link to a crate called W Asymm Bind Jen. 4 00:00:18,540 --> 00:00:22,470 This crate will help us export robust functions into JavaScript. 5 00:00:22,710 --> 00:00:26,100 We could write the code ourselves, but why reinvent the wheel? 6 00:00:26,400 --> 00:00:31,800 This crate is the most popular package for helping us expose functions to JavaScript. 7 00:00:32,189 --> 00:00:33,880 The same is true, vice versa. 8 00:00:34,200 --> 00:00:37,230 We can expose JavaScript functions into rust. 9 00:00:37,560 --> 00:00:41,010 You can think of it as the glue between Rust and JavaScript. 10 00:00:41,520 --> 00:00:44,640 You may be thinking, What about the crate type option? 11 00:00:44,950 --> 00:00:46,440 Any previous lecture? 12 00:00:46,440 --> 00:00:49,710 We added the crate type setting to our configuration. 13 00:00:50,100 --> 00:00:54,390 This setting allows us to communicate with any language other than rust. 14 00:00:54,660 --> 00:00:59,220 However, Rust doesn't know which language we are trying to communicate with. 15 00:00:59,580 --> 00:01:01,650 This crate will close that gap. 16 00:01:01,950 --> 00:01:05,910 It allows direct communication between Rust and JavaScript. 17 00:01:06,480 --> 00:01:12,430 We can download this crate by including it in our configuration file on the right side of the page. 18 00:01:12,480 --> 00:01:14,460 There's a section called Install. 19 00:01:14,850 --> 00:01:18,510 There's a code snippet we can click on to copy to our clipboard. 20 00:01:18,900 --> 00:01:23,100 After copying this line, open the cargo configuration file. 21 00:01:25,620 --> 00:01:29,280 We're going to paste this code below the dependences table. 22 00:01:31,740 --> 00:01:35,220 Dependencies must be listed under the Dependencies Table. 23 00:01:35,580 --> 00:01:41,550 The format for a dependency is the name, followed by the version number as of the recording of this 24 00:01:41,550 --> 00:01:42,130 course. 25 00:01:42,180 --> 00:01:44,550 The latest version is zero point two. 26 00:01:44,880 --> 00:01:52,200 If you're using a newer version that's perfectly fine before compilation cargo will scan our configuration 27 00:01:52,200 --> 00:01:53,910 file for dependencies. 28 00:01:54,240 --> 00:02:00,720 If it finds a dependency, it'll automatically download the dependency before compiling our project. 29 00:02:01,020 --> 00:02:04,230 We don't need to perform this step in the process manually. 30 00:02:04,560 --> 00:02:07,020 Let's move on to importing WebAssembly. 31 00:02:07,380 --> 00:02:10,350 Open the Minogue's file in your editor. 32 00:02:12,160 --> 00:02:16,900 Importing a WebAssembly file is the same as importing a JavaScript file. 33 00:02:17,320 --> 00:02:20,440 We can use the import function to import a file. 34 00:02:20,830 --> 00:02:23,860 Importing a file is an asynchronous operation. 35 00:02:24,160 --> 00:02:28,990 Therefore, we should add the async keyword to the initialize function. 36 00:02:31,630 --> 00:02:38,320 Next, we're going to import the WebAssembly file at the top of the function, the fine a variable called 37 00:02:38,320 --> 00:02:41,080 Rust AB, with an initial value of no. 38 00:02:43,760 --> 00:02:46,730 Next, we're going to write a try catch block. 39 00:02:49,230 --> 00:02:51,780 Importing a file can potentially fail. 40 00:02:52,050 --> 00:02:55,890 We could stop the function from running before executing further code. 41 00:02:56,340 --> 00:03:00,750 We are deciding to import rice before listening to events in our scripts. 42 00:03:01,110 --> 00:03:07,620 It doesn't make sense to listen to events when Russ can't do anything with the data inside the try block. 43 00:03:07,830 --> 00:03:12,750 Update the rust at variable to the import function with the await keyword. 44 00:03:15,410 --> 00:03:18,350 The path to the file is the package directory. 45 00:03:20,870 --> 00:03:27,620 The package directory is created by the Web assembly tools plug in one of the benefits of using this 46 00:03:27,620 --> 00:03:32,480 plugin is exporting web assembly files inside this directory. 47 00:03:32,570 --> 00:03:38,480 There's a file called Indexed on G.S., which is responsible for exporting WebAssembly. 48 00:03:38,750 --> 00:03:44,180 It's an abstraction layer for importing WebAssembly as long as we import this file. 49 00:03:44,210 --> 00:03:49,800 Our rust program will be imported into our function if this import fails. 50 00:03:49,820 --> 00:03:53,470 We should handle the error inside the catch block log. 51 00:03:53,480 --> 00:03:58,730 The error with the console port error function subsequently return the function. 52 00:04:01,260 --> 00:04:08,910 Lastly, let's say the import is a success after the try catch block, log the rust at variable. 53 00:04:11,450 --> 00:04:17,750 There's one final line of code we need to add to our project WebAssembly as an experimental feature 54 00:04:17,750 --> 00:04:18,649 in web pack. 55 00:04:18,890 --> 00:04:22,820 Keep in mind, it's a relatively new feature with slow adoption. 56 00:04:23,120 --> 00:04:26,780 We're not entirely sure of the implications of WebAssembly yet. 57 00:04:27,140 --> 00:04:30,770 We need to tell Pack to enable support for WebAssembly. 58 00:04:31,070 --> 00:04:33,530 Open the Web Pack Configuration File. 59 00:04:36,040 --> 00:04:40,000 At the bottom of the object at an object called experiments. 60 00:04:42,440 --> 00:04:45,650 We can turn on experimental features from this object. 61 00:04:45,860 --> 00:04:50,210 The feature we're interested in enabling is called async WebAssembly. 62 00:04:50,570 --> 00:04:53,750 We can turn on a feature by setting the value to true. 63 00:04:56,430 --> 00:05:01,720 After making those changes, we should be able to run our project in the command line. 64 00:05:01,740 --> 00:05:04,680 Run the 21:00 Run Serve Command. 65 00:05:07,270 --> 00:05:09,850 Compiling the project may take some time. 66 00:05:10,150 --> 00:05:17,350 We added a new dependency to our Rust Project Cargo needs to download this dependency, compile it and 67 00:05:17,350 --> 00:05:17,920 build it. 68 00:05:18,250 --> 00:05:19,960 This process may take a while. 69 00:05:20,140 --> 00:05:20,920 Be patient. 70 00:05:23,460 --> 00:05:28,740 After the project has been compiled, let's check it out in the browser with the console opened. 71 00:05:31,270 --> 00:05:31,900 Perfect. 72 00:05:32,080 --> 00:05:34,390 The file has been successfully imported. 73 00:05:34,630 --> 00:05:38,350 We can start calling functions from rust in our JavaScript code. 74 00:05:38,740 --> 00:05:41,890 Let's begin setting up a function in the next lecture.