DNA transcription and translation in WebAssembly using Rust
Transcription and translation are both part of protein synthesis, an integral process for cells. The central dogma of biology states that DNA is transcribed to RNA, which is translated into proteins. I'm not the best at explaining concepts like these, so you might want to check out this wikipedia article 😉
This program converts a DNA strand to messenger RNA (mRNA), which is then converted into amino acids.
First, it takes in a DNA strand as input and converts this strand to a complementary messenger RNA strand using these mappings:
A → U
T → A
C → G
G → C
For example, GTACTAGAGCATTT would be converted to CAUGAUCUCGUAA. After this, it looks for a start codon (AUG) and removes anything before that codon. For example, CAUGAUCUCGUAA would be converted to AUGAUCUCGUAA. Then, it turns the result of the previous step into a vector broken into 3-character items. For example, AUGAUCUCGUAA would be converted to ['AUG', 'AUC', 'UCG', 'UAA']. Then, it looks for a STOP codon (UAA, UAG, UGA) and truncates the vector at that codon. Finally, it uses an awesome match statement, which is basically a predefined codon chart, to translate each codon to an amino acid.
I'm glad you asked! Unlike a regular program that just transcribes and translates DNA into amino acids, this one utilizes WebAssembly, so you can do it all in a browser. The index.html file has a form field, which redirects to app.html with a query string in the form ?strand=DNAstrandHere. The app.js file then parses this query string and passes it to the Rust program as input. After transcribing and translating the strand, the Rust program uses web_sys to insert the amino acids into the DOM.
Of course there's some CSS as well to make it all look nice ✨
Before installing this program, you'll need a few dependencies. These include:
- An up to date Rust install
- wasm-bindgen
- wasm-pack
- node.js & NPM
After making sure these dependencies are installed, clone the repository using git clone https://github.com/Rav4s/wasm-dna-transcription-translation.git. Then, enter the cloned repo and run wasm-pack build. Install the NPM packages using cd www && npm install Now, you can start the web server using npm start.
The web server will now be accessible at localhost:8080.
This is available in action at https://dna-transcription-translation.yeetpc.com/