Laboratory WebAssembly

Georgina González Enríquez

Sebastián Cedeño González

Web Applications Development Laboratory

Basic 

  • Imagine what kind of applications you can do using WebAssembly

Some applications that can be done using WebAssembly are interactive pages for a business or academic entity, game applications, or streaming of content.

  • Do you see a future for WebAssembly?

Yes, because since it can be implemented along with web developing languages, it can bring together the advantages of the language WebAssembly is compiling, like C, with the advantages of web languages, like javascript.

Research

  • Write a mini-tutorial for using WebAssembly with another language. You must write at least three simple examples. 

Compile and run a hello world program in C

  1. Clone precompiled Toolchain repo to compile C to WebAssembly:

$ git clone https://github.com/emscripten-core/emsdk.git

$ cd emsdk

$ ./emsdk install latest

$ ./emsdk activate latest

2. In current command prompt, setup an Emscripten compiler environment (variables and directory entries):

$ source ./emsdk_env.sh –build=Release

3. Create our hello world program in C:

$ mkdir hello

$ cd hello

$ cat << EOF > hello.c

#include <stdio.h>

int main(int argc, char ** argv) {

  printf(“Hello, world!\n”);

}

EOF

4. Compile our program to WebAssembly:

$ emcc hello.c -o hello.html

5. Serve compiled files over HTTP:

$ emrun –no_browser –port 8080 .

6. Open http://localhost:8080/hello.html in your browser. The result should display “Hello, World!”:

1

Reference: https://webassembly.org/getting-started/developers-guide/

Compile and run a hello world program in C++

Note: since the toolchain used in the previous lesson works also with c++, the steps are almost the same.

  1. Clone precompiled Toolchain repo to compile C to WebAssembly

$ git clone https://github.com/emscripten-core/emsdk.git

$ cd emsdk

$ ./emsdk install latest

$ ./emsdk activate latest

2. In current command prompt, setup an Emscripten compiler environment (variables and directory entries):

$ source ./emsdk_env.sh –build=Release

3. Create our hello world program in C++:

$ mkdir hello2

$ cd hello2

$ cat << EOF > hello.cpp

#include<iostream>

int main() {

  std::cout << “Hello World” << std::endl;

  return 0;

}

EOF

4. Compile our program to WebAssembly:

$ em++ hello.cpp -s WASM=1 -o hello.html

5. Serve compiled files over HTTP:

$ emrun –no_browser –port 8080 .

6. Open http://localhost:8080/hello.html in your browser. The result should display “Hello, World”:

2

References: https://webassembly.org/getting-started/developers-guide/

      https://medium.com/@tdeniffel/pragmatic-compiling-from-c-to-webassembly-a-guide-a496cc5954b8

Compile and run a hello world program in Rust

  1. You must have Rust installed in your system. If not, here’s a link with instructions for the installation: https://www.rust-lang.org/tools/install
  2. You must also install wasm-pack: https://rustwasm.github.io/wasm-pack/installer/
  3. Install cargo-generate with the next command:

cargo install cargo-generate

It will not work if openssl is not well configured

4. Also, install or update npm with this

npm install npm@latest -g

5. Clone the project template with the next command:

cargo generate –git https://github.com/rustwasm/wasm-pack-template

Then name your project as you wish, for this tutorial we will use the name “wasm-game-of-life”

6. Then enter the folder where your project was created

cd wasm-game-of-life

7. After you are inside the folder, build a wasm project with the next command:

wasm-pack build

8. Now, to put the project in a web page run the next command:

npm init wasm-app www

9. Now, enter the www folder and install the dependencies with the next commands:

cd www

npm install

10.  Finally, to run the project, use this command:

npm run start

11. Open your browser on the localhost port 8080

http://localhost:8080/

It should look something like this:

3

Course review!

Ken’s courses are very different from the traditional way of learning to which I’m used to. The thing is, the teacher doesn’t actually teach in the classroom. Instead, he is a sort of guide in the process, but the student is the one who learns by himself. It sounds kind of harsh, and I must say I was kind of skepticall at first, but now that I have lived through the process, I have a different opinion.

Not all students learn the same; some do it better by reading a book about the topic, others prefer to watch a video tutorial, others need someone to explain it to them, etc. With this teaching method, students can actually choose the way they want to do it, as well as the pace they want to have, which I personally think it’s awesome since some take longer to understand a concept than others, and that’s ok! The teacher, of course, can help you whenever you have a doubt or need a specific explanation. He also gives the topics we need to study (at least!), and hands weekly problems and quizzes for us to know what sort of things we should be able to do.

Something important to take into consideration if you want to dive into this process of learning is that the student has lots of responsability. The teacher is not going to be behind your back all the time making sure you are working, it’s 100% your decision if you want to get it done or not, and when you are going to do it. You need to be very organised, because since there are no due dates until the last day of the semester, you could procrastinate a lot and end up with bad results. That is why so much flexibility could not be good for everyone, but if you are willing to take it into your own hands and work for it by your own will, you can enjoy it very much.

Just remember, you will gain as much knowledge as you decide.

Blog’s topics 📚

Hi!

Here are the topics covered in my blog with the link to its page! They are all the topics I learned this semester 😀

wsq: 1  2  3  4  5  6  7  8  9  10  11-(problem nine)  12  13

quizzes: 3  4  5  6  8  9  11  11.2  *not all weeks we had a quizz, that’s why some numbers are missing.

Python types

*The information of the following paragragh is gotten from this page, check it out to learn more, and the image is gotten from this one, it doesn’t belong to me.

Variables are reserved memory space to store values, which can be integers, decimals or characters. In python you don’t need to declare variables to reserve memory space, it happens automatically when you assign a value to one.

Python data types:

 

Zen of Python

https://en.wikipedia.org/wiki/Zen_of_Python

Beautiful is better than ugly. (Do things in a pretty way)

Explicit is better than implicit. (Make it so it is understandable for someone else)

Simple is better than complex. (Figure out the easiest solution for a problem)

Complex is better than complicated. (Don’t make it hard)

Flat is better than nested. (Don’t nest unnecessarily)

Sparse is better than dense. (Split the problem into smaller problems)

Readability counts. (Make it easy to read)

Special cases aren’t special enough to break the rules. (Rules matter!)

Although practicality beats purity. (Be practical)

Errors should never pass silently. (Debug)

Unless explicitly silenced. (Unless!)

In the face of ambiguity, refuse the temptation to guess. (Do not assume)

There should be one—and preferably only one—obvious way to do it. (Think simple)

Although that way may not be obvious at first unless you’re Dutch. (Duh)

Now is better than never. (Just do it!)

Although never is often better than right now. (Easter egg)

If the implementation is hard to explain, it’s a bad idea. (Keep it simple!)

If the implementation is easy to explain, it may be a good idea. (Yei!)

Namespaces are one honking great idea—let’s do more of those! (Wuuuuuuu)

46 exercises: 26-31

In this post I’m going to show the section of higher order functions and list comprehensions of the 46 exercises.

To solve all six, I had to learn about the functions reduce(), map(), filter() and about lambda, as well as list comprehensions. I read about all this in the following pages:

In number 26 I wrote a function that, using reduce(), finds the maximum number in a list:

2626run

Number 27 is a function that takes a list of words and returns a list of their lengths. I had to do it in three different ways: with a for-loop, with map() and with list comprehensions.

The first one I had done it in exercise 14. Here are the other two:

2727run

27.227.2run

Notice how in the last one, the list included an integer, and the program just skipped it. The function isinstance() checks that the element is a string, and if it is, then the length is applied.

Number 28 is a function that takes a list of words and returns the length of the longest one:

2828run

Number 29 is a function that takes a list of words and an integer, and returns a list of the words that are longer than the given number, using filter():

2929run

Number 30 is a function that takes a dictionary and a list of words, and returns the translation of those words, using map():

3030run

And number 31 consisted of implementing the three functions:

3131run

And with that, I finished the second section!

46 exercises: 23-25

Continuing with the 46 problems, number 23 was a function that receives a sentence and eliminates any double spaces, as well as adds one after a point if there was not one already. My teacher Ken helped me with this:

2323run

Number 24 was a function that receives a verb and returns its third person form:

2424run

And number 25 was a function that receives a verb in infinitive and returns its present participle form:

2525run

And with that, I finished the section of very simple exercises!

Cars! 🚗

Another activity I did was to create a program that would open and read a file called 93cars.dat.txt, gotten from this page, and calculate the following:

  • average gas mileage in city (City MPG)
  • average gas mileage on highway (Highway MPG)
  • average midrange price of the vehicles in the set.

I had worked with text files in a previous problem, so I went back to my post about it in order to remember the proper commands:

https://pythoncoursesite.wordpress.com/2017/03/08/files/

After that, this is the program I wrote:

carscars_run

And that’s it! ❤

Estimating e!

This week’s activity consisted of creating a function that would calculate the number e with the precision determined by the user.

The formula to do it is this one:

{\displaystyle e=1+{\frac {1}{1}}+{\frac {1}{1\cdot 2}}+{\frac {1}{1\cdot 2\cdot 3}}+\cdots }

which is the same as this:

e = \frac{1}{0!} + \frac{1}{1!} + \frac{1}{2!} + \frac{1}{3!} + \cdots

My teacher Ken explained to me that when the difference between two consecutive numbers is less or equal to the precision, the program should stop and return the answer.

e

Notice how in my function, I’m calling another function, factorial.

It runs like this:

e_run