1 00:00:00,060 --> 00:00:05,850 Hello and welcome to the WebAssembly course, WebAssembly is currently a cutting edge technology for 2 00:00:05,850 --> 00:00:06,300 the web. 3 00:00:06,630 --> 00:00:09,780 A few years ago, I remember when React entered the scene. 4 00:00:10,020 --> 00:00:11,700 It was a total game changer. 5 00:00:11,940 --> 00:00:16,180 For years, developers created apps with a library called jQuery. 6 00:00:16,470 --> 00:00:21,450 At the time, writing an app with React was utterly foreign to most web developers. 7 00:00:21,930 --> 00:00:26,610 If you were one of the lucky few to understand, react, companies wanted to hire you. 8 00:00:26,910 --> 00:00:29,100 It was one of the most in-demand skills. 9 00:00:29,370 --> 00:00:30,690 Times have changed. 10 00:00:30,930 --> 00:00:33,450 Various frameworks have popped up over time. 11 00:00:33,750 --> 00:00:38,790 It's considered a standard skill for most web developers to know a front end framework. 12 00:00:39,030 --> 00:00:40,800 History is repeating itself. 13 00:00:41,040 --> 00:00:44,160 A new technology has rose called web assembly. 14 00:00:44,490 --> 00:00:48,510 It's become very desirable to no web assembly in today's market. 15 00:00:48,870 --> 00:00:54,480 That leads us to the question What is WebAssembly WebAssembly as a language for the web? 16 00:00:54,780 --> 00:00:57,930 JavaScript has been the dominant language for decades. 17 00:00:58,170 --> 00:01:00,270 It's unlikely this fact will change. 18 00:01:00,510 --> 00:01:03,540 JavaScript is an awesome and powerful language. 19 00:01:03,780 --> 00:01:07,410 However, there are some shortcomings that can't be ignored. 20 00:01:07,680 --> 00:01:14,280 To better understand, let's talk about systems programming versus applications programming when learning 21 00:01:14,280 --> 00:01:15,390 about programming. 22 00:01:15,450 --> 00:01:18,780 Most students have various paths at their disposal. 23 00:01:19,080 --> 00:01:25,920 Generally speaking, we can categorize programming into two categories which are systems, programming 24 00:01:25,920 --> 00:01:27,900 and application programming. 25 00:01:28,590 --> 00:01:32,370 Application programming focuses on software with a UI. 26 00:01:32,640 --> 00:01:39,000 Users are meant to interact with this type of software, whereas system programming focuses on the hardware 27 00:01:39,000 --> 00:01:39,930 of a computer. 28 00:01:40,260 --> 00:01:46,710 Creating operating systems, game engines, industrial automation and drivers can be considered the 29 00:01:46,710 --> 00:01:50,130 types of programs that can be done with systems programming. 30 00:01:50,550 --> 00:01:54,150 JavaScript is mostly utilized for application programming. 31 00:01:54,390 --> 00:01:56,700 These two worlds are not always separate. 32 00:01:57,000 --> 00:02:00,810 For example, a web server can be considered a systems program. 33 00:02:01,050 --> 00:02:02,370 We need web servers. 34 00:02:02,370 --> 00:02:08,400 If we want to deliver JavaScript apps, you're most likely work with a backend developer to work with 35 00:02:08,400 --> 00:02:09,060 servers. 36 00:02:09,630 --> 00:02:12,000 Technology is progressing very fast. 37 00:02:12,240 --> 00:02:15,990 We're starting to see a transition from desktop apps to web apps. 38 00:02:16,290 --> 00:02:19,890 However, not all desktop apps can be transitioned easily. 39 00:02:20,130 --> 00:02:25,170 For example, financial apps work fine on the web, but not video editing software. 40 00:02:25,440 --> 00:02:31,800 This is because video editing software requires access to a computer hardware to process videos. 41 00:02:32,310 --> 00:02:36,810 Therefore, browsers need to expose access to a user's hardware. 42 00:02:37,080 --> 00:02:39,720 Do they use JavaScript or some other language? 43 00:02:40,020 --> 00:02:43,560 Like I said before, JavaScript is a beautiful language. 44 00:02:43,800 --> 00:02:46,980 I'm biased, but its popularity is undeniable. 45 00:02:47,190 --> 00:02:52,050 For a user, interfaces JavaScript works great for assistance programming. 46 00:02:52,110 --> 00:02:53,310 That's another story. 47 00:02:55,300 --> 00:03:01,930 Designing a web or mobile app is mainly done through Photoshop that's starting to change Figma as a 48 00:03:01,930 --> 00:03:04,300 product for designing apps in the browser. 49 00:03:04,660 --> 00:03:07,180 You don't need to install a program to get started. 50 00:03:07,450 --> 00:03:10,750 Simply visit Fig Montcalm and you're good to go. 51 00:03:11,080 --> 00:03:14,560 In recent years, designers have fallen in love with Figma. 52 00:03:14,860 --> 00:03:18,070 They're using Figma to design apps over a Photoshop. 53 00:03:18,640 --> 00:03:24,490 The most exciting thing about Figma is how it ports features from a desktop app to a web app. 54 00:03:24,790 --> 00:03:29,620 Unfortunately, processing and editing images require access to hardware. 55 00:03:29,920 --> 00:03:32,080 It's not easily done with JavaScript. 56 00:03:32,380 --> 00:03:33,970 It's possible, but slow. 57 00:03:34,420 --> 00:03:39,880 In the resource section of this lecture, I provide a link to a blog post by the Dev team. 58 00:03:40,540 --> 00:03:45,220 According to this article, the developers struggled when launching Figma on time. 59 00:03:45,580 --> 00:03:50,930 For example, opening a file would take over 10 seconds thanks to web assembly. 60 00:03:50,980 --> 00:03:53,830 This time was reduced to about three seconds. 61 00:03:54,100 --> 00:03:55,270 Incredible, right? 62 00:03:55,630 --> 00:04:01,840 By using web assembly, developers can write apps for the web without compromising on performance. 63 00:04:02,350 --> 00:04:05,170 You may be thinking, Doesn't this kill JavaScript? 64 00:04:05,410 --> 00:04:06,520 Not necessarily. 65 00:04:06,820 --> 00:04:14,710 The Figma team still uses JavaScript for UI elements like buttons, inputs or events for CPU intensive 66 00:04:14,710 --> 00:04:15,280 tasks. 67 00:04:15,430 --> 00:04:16,720 They use web assembly. 68 00:04:17,050 --> 00:04:23,380 Unlike JavaScript, WebAssembly does not provide an API for selecting or modifying elements. 69 00:04:23,680 --> 00:04:25,750 It's not meant to write an application. 70 00:04:26,000 --> 00:04:31,480 Instead, it's intended to give developers a way to access the system's hardware. 71 00:04:32,170 --> 00:04:35,980 If we need to handle user interactions, JavaScript will work. 72 00:04:36,220 --> 00:04:39,040 WebAssembly is for computational tasks. 73 00:04:39,340 --> 00:04:42,400 Hopefully, this clears up the goals of WebAssembly. 74 00:04:42,670 --> 00:04:47,010 You may be itching to get started, but there's one more thing I want to mention. 75 00:04:48,720 --> 00:04:53,010 Typically, developers will not refer to WebAssembly as a language. 76 00:04:53,340 --> 00:04:56,850 Technically, it is, but there's a better word to describe it. 77 00:04:57,090 --> 00:05:03,660 WebAssembly is seen as a compilation, targets a compilation target refers to the language targeted 78 00:05:03,660 --> 00:05:04,750 by a compiler. 79 00:05:05,370 --> 00:05:09,540 If you're familiar with TypeScript, you may be familiar with this concept. 80 00:05:09,810 --> 00:05:16,170 To the dismay of many developers, TypeScript does not run in the browser and has to be compiled from 81 00:05:16,170 --> 00:05:18,030 TypeScript to JavaScript. 82 00:05:18,450 --> 00:05:21,510 JavaScript can be considered a compilation target. 83 00:05:21,780 --> 00:05:24,360 It's the language targeted by the compiler. 84 00:05:24,900 --> 00:05:31,530 Similarly, WebAssembly is not meant to be written and read by humans and said we can use our favorite 85 00:05:31,530 --> 00:05:34,890 programming language after we're finished writing our app. 86 00:05:35,040 --> 00:05:37,140 We can compile it to web assembly. 87 00:05:37,440 --> 00:05:40,380 You may be thinking, why should we use another language? 88 00:05:40,620 --> 00:05:45,060 There are two main reasons for writing web assembly with a different language. 89 00:05:45,690 --> 00:05:50,820 Firstly, it allows developers to continue writing code in their preferred language. 90 00:05:51,060 --> 00:05:57,300 A C++ developer can write WebAssembly without dedicating their weekend to learning a new language. 91 00:05:57,570 --> 00:05:59,220 They can get started right away. 92 00:05:59,850 --> 00:06:03,600 Secondly, web assembly is not an easy language to learn. 93 00:06:03,840 --> 00:06:06,780 Let me show you an example of web assembly code. 94 00:06:08,760 --> 00:06:12,420 In my editor, I have opened a Web assembly text file. 95 00:06:12,780 --> 00:06:14,160 This file is huge. 96 00:06:14,370 --> 00:06:17,310 There are about 400000 lines of code. 97 00:06:17,670 --> 00:06:23,700 Even if I wanted to, I don't think it's possible to go over every line of code in a single course. 98 00:06:24,030 --> 00:06:30,360 In another tab, I have a rust file with the original code instead of thousands of lines of code. 99 00:06:30,570 --> 00:06:33,660 The original source code is less than 40 lines. 100 00:06:33,930 --> 00:06:38,670 You tell me, do you want to write four hundred thousand lines of code or 40? 101 00:06:38,940 --> 00:06:40,110 I'm going to guess forty. 102 00:06:41,850 --> 00:06:47,130 The creators of WebAssembly didn't intend for developers to write WebAssembly code. 103 00:06:47,430 --> 00:06:50,340 Rather, they recommend choosing another language. 104 00:06:50,640 --> 00:06:54,510 Thus, you should treat WebAssembly as a compilation target. 105 00:06:54,780 --> 00:06:57,630 The question is which language should we use? 106 00:06:58,200 --> 00:07:00,990 WebAssembly supports dozens of languages. 107 00:07:01,170 --> 00:07:09,990 We can use C++, C, Sharp, Java, Go, Python, Rust, etc. The list goes on and on. 108 00:07:10,290 --> 00:07:13,920 It can be challenging to choose a language for this course. 109 00:07:14,100 --> 00:07:16,950 We're going to be using a language called rust. 110 00:07:17,550 --> 00:07:23,190 Rust is considered the most beloved language by developers, but don't take my word for it. 111 00:07:23,400 --> 00:07:27,420 StackOverflow conducts the largest programming survey in the world. 112 00:07:27,840 --> 00:07:31,140 Thousands of developers submit responses to their survey. 113 00:07:31,500 --> 00:07:36,480 For the past few years, Rust has been rated as the most loved language. 114 00:07:37,050 --> 00:07:44,220 Scott Logic, the largest newsletter for web assembly, conducts its own survey for a web assembly developers 115 00:07:44,550 --> 00:07:45,570 from their survey. 116 00:07:45,750 --> 00:07:50,790 Rust is considered the most popular and desirable language for web assembly. 117 00:07:51,090 --> 00:07:57,600 You're very likely to encounter a WebAssembly project written with rust out of all the languages available. 118 00:07:59,020 --> 00:08:05,050 In the resource section of this lecture, I provide a link to a repository with a list of supported 119 00:08:05,050 --> 00:08:05,840 languages. 120 00:08:06,190 --> 00:08:08,320 Not all languages are fully supported. 121 00:08:08,590 --> 00:08:12,580 For example, you may be tempted to use JavaScript or Python. 122 00:08:12,880 --> 00:08:16,420 Unfortunately, these languages are not fully supported. 123 00:08:16,750 --> 00:08:20,860 Developers prefer a language with a strong background in systems. 124 00:08:20,860 --> 00:08:26,800 Programming languages like C++ or ROS are considered the cream of the crop. 125 00:08:27,370 --> 00:08:31,400 For that reason, we are going to be learning rust in this course. 126 00:08:31,420 --> 00:08:37,299 We're going to focus on learning the fundamentals of rust after we've become familiar with rust. 127 00:08:37,480 --> 00:08:39,159 We'll move on to WebAssembly. 128 00:08:39,429 --> 00:08:42,190 I have a mini project planned for this course. 129 00:08:42,730 --> 00:08:47,650 By the end of this course, you'll have a project you can proudly add to your portfolio. 130 00:08:47,890 --> 00:08:51,160 When you're ready, I'll see you in the following lecture.