Continuing writing report

This commit is contained in:
Marko Korhonen 2020-04-17 18:07:19 +03:00
parent bbaf01dafe
commit 95e8347efc
No known key found for this signature in database
GPG key ID: 911B85FBC6003FE5
19 changed files with 175 additions and 222 deletions

View file

@ -0,0 +1,91 @@
use log::info;
use yew::prelude::*;
pub struct LoginComponent {
component_link: ComponentLink<LoginComponent>,
username: String,
password: String,
login_button_disabled: bool,
}
pub enum Message {
UpdateUsername(String),
UpdatePassword(String),
HandleForm(),
}
impl Component for LoginComponent {
type Message = Message;
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
Self {
component_link: link,
username: String::new(),
password: String::new(),
login_button_disabled: true,
}
}
fn change(&mut self, _: Self::Properties) -> ShouldRender {
true
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Message::UpdateUsername(new_username) => {
self.username = new_username;
self.update_button_state();
}
Message::UpdatePassword(new_password) => {
info!("Password changed");
self.password = new_password;
self.update_button_state();
}
Message::HandleForm() => {
info!("Submit button clicked");
}
}
true
}
fn view(&self) -> Html {
let onclick = self.component_link.callback(|_| Message::HandleForm());
let oninput_username = self
.component_link
.callback(|e: InputData| Message::UpdateUsername(e.value));
let oninput_password = self
.component_link
.callback(|e: InputData| Message::UpdatePassword(e.value));
html! {
<div class="uk-card uk-card-default uk-card-body uk-width-1-3@s uk-position-center">
<h1 class="uk-card-title">{ "Please log in" }</h1>
<form>
<fieldset class="uk-fieldset">
<input class="uk-input uk-margin",
placeholder="Username",
value=&self.username,
oninput=oninput_username, />
<input class="uk-input uk-margin-bottom",
placeholder="Password",
type="password",
value=&self.password,
oninput=oninput_password, />
<button
class="uk-button uk-button-primary",
type="submit", onclick=onclick>
{ "Submit" }
</button>
</fieldset>
</form>
</div>
}
}
}
impl LoginComponent {
fn update_button_state(&mut self) {
self.login_button_disabled = self.username.is_empty() || self.password.is_empty();
}
}

View file

@ -0,0 +1 @@
pub mod login;

View file

@ -3,6 +3,15 @@
author = "Richard Kenneth Eng",
publisher = "Medium",
year = "2016",
journal = "asd",
url = "https://medium.com/javascript-non-grata/the-top-10-things-wrong-with-javascript-58f440d6b3d8",
lastchecked = "5. Maaliskuuta, 2020"
}
@misc{wiki:actor,
title = "Actor model --- {W}ikipedia{,} The Free Encyclopedia",
author = "{Wikipedia contributors}",
year = "2020",
url = "https://en.wikipedia.org/wiki/Actor_model",
lastchecked = "16. Huhtikuuta, 2020"
}

View file

@ -5,19 +5,27 @@
\newacronym{html}{HTML}{HyperText Markup Language}
\newacronym{php}{PHP}{Hypertext Preprocessor}
\newacronym{orm}{ORM}{Object-relational mapping}
\newacronym{json}{JSON}{JavaScript Object Notation}
\newacronym{jwt}{JWT}{JSON Web Token}
% Glossary entries
\newglossaryentry{asiakaspuoli}{
name={asiakaspuoli},
\newglossaryentry{Asiakaspuoli}{
name={Asiakaspuoli},
plural={asiakaspuolen},
description={Nettiselaimessa pyörivät ohjelmointikielet, esimerkiksi JavaScript}
}
\newglossaryentry{palvelinpuoli}{
name={palvelinpuoli},
\newglossaryentry{Palvelinpuoli}{
name={Palvelinpuoli},
plural={palvelinpuolen},
description={Palvelimella pyörivät ohjelmointikielet, esimerkiksi PHP}
}
\newglossaryentry{ORM}{
name={ORM},
description={Ohjelman objektien kartoittamista relaatiotietokannan tauluihin ja tietokannasta takaisin ohjelmaan}
}
\glsaddall

View file

@ -30,7 +30,7 @@
\multicolumn{2}{|p{15cm}|}{\vspace{-22pt}
Tämän opinnäytetyön tavoitteena on selvittää Rust-ohjelmointikielen soveltuvuutta web-ohjelmointiin.\newline
Opinnäytetyön yhteydessä tehtiin projekti, missä frontend ja backend toteutetaan molemmat Rustilla. Tämän pohjalta arvioitiin kielen soveltuvuutta web-ojelmointiin.
Opinnäytetyön yhteydessä tehtiin projekti, missä palvelin- ja asiakaspuoli toteutettiin molemmat Rustilla. Tämän pohjalta arvioitiin kielen soveltuvuutta web-ojelmointiin.
} \\[14cm] \hline
Avainsanat & \avainsanat
\\ \hline

View file

@ -1,13 +0,0 @@
% Acknowledgement
% If relevant give a special thanks to the people who supported you during your thesis
% writing.
\pagestyle{empty}
\chapter*{Acknowledgement}
Thanks to Panu Leppäniemi, Patrik Luoto and Patrick Ausderau for the \LaTeX{} ~thesis template.
Thanks to my cat who jump on my keyboard while the text was not saved :D
\clearpage

View file

@ -1,35 +0,0 @@
% License of your thesis
% If you wish to explain what it means. When you publish your thesis in https://theseus.fi
% you will be able to choose between some Creative Commons licenses
% https://creativecommons.org
% Adapt this example text to your taste.
% This would also be the right place to explain the license you choose for the code you
% produced for your thesis.
\pagestyle{empty}
\chapter*{Licenses}
\vspace{-20pt}
\begin{center}
\includegraphics[width=80pt]{cc_by_sa}
\end{center}\vspace{-32pt}
This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. That means:\\
\textbf{You are free to:}
\vspace{-17pt} \begin{itemize}
\item Share \textemdash copy and redistribute the material in any medium or format
\item Adapt \textemdash remix, transform, and build upon the material
\end{itemize}\vspace{-17pt}
\textbf{Under the following terms:}
\vspace{-17pt} \begin{itemize}
\item Attribution \textemdash You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
\item ShareAlike \textemdash If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
\item No additional restrictions \textemdash You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
\item Any of the above conditions can be waived if you get my permission
\end{itemize}%\vspace{-17pt}
To view a copy of this license, visit \url{http://creativecommons.org/licenses/by-sa/4.0/}.
I decided to publish my thesis work under the Creative Commons Attribution-ShareAlike 4.0 International License because I strongly believe that you as reader deserve the freedom to copy, share and modify this work and if you do modify it, it is fair to give these same permissions to the others. A copy in electronic form of this work can be found in \url{https://some.place} with the \LaTeX{} source.
\clearpage

View file

@ -5,7 +5,7 @@
Tämän takia myös web-ohjelmoinnissa käytettävissä teknologioissa on tapahtunut paljon muutoksia. Jotta nettisivuista saatiin pelkkien HTML-dokumenttien sijasta ohjelmia, 90-luvun puolivälissä julkaistiin PHP (palvelinpuolen kieli) ja JavaScript (asiakaspuolen kieli). Tänä päivänä näistä kahdesta JavaScript on ehdottomasti suositumpi, minkä takia keskityn tässä opinnäytetyössä sen vertailuun Rustin kanssa.
Vaikka JavaScript onkin suosittu, siinä on paljon ongelmia\cite{medium:javascript}. Suurimmat ongelmat liittyvät kielen heikkoon tyypitykseen, mikä saattaa aiheuttaa ongelmia jotka ilmenevät vasta ajon aikana ja vain tietyissä rajatapauksissa. Tämän takia koodin testaamiseen ja laadun ylläpitämiseen pitää panostaa enemmän. Toinen iso ongelma on se, että JavaScript ei ole tarkka koodin tyylistä. Tämä hankaloittaa projekteissa kommunikointia ja työtoverien koodin lukemista.
Vaikka JavaScript onkin suosittu, siinä on paljon ongelmia\cite{medium:javascript}. Suurimmat ongelmat liittyvät kielen heikkoon tyypitykseen, mikä saattaa aiheuttaa ongelmia jotka ilmenevät vasta ajon aikana ja vain tietyissä rajatapauksissa. Tämän takia koodin testaamiseen ja laadun ylläpitämiseen pitää panostaa enemmän. Toinen iso ongelma on se, että JavaScript ei ole tarkka koodin tyylistä. Jo pelkästään funktion kirjoittamiseen on useita eri tyylejä. Tämä hankaloittaa projekteissa kommunikointia ja työtoverien koodin lukemista.
Koska JavaScript on tulkittava kieli, se tulee aina häviämään suorituskyvyssä koottaville kielille. Tätä eroa on osittain kavennettu ajonaikaisen kääntämisen optimoinneilla.

View file

@ -6,6 +6,6 @@ Rust on Mozillan 2010 julkaisema ohjelmointikieli. Se on hyvin suorituskykyinen
\section{WebAssembly}
WebAssembly on kehitteillä oleva asiakaspuolen ohjelmointikieli. Sitä on suunniteltu JavaScriptin seuraajaksi ja sen suurinpana etuna JavaScriptiin verrattuna on huomattavasti matalemman tason esitysmuoto, minkä ansiosta se on suorituskykyisempi.
Kehittäjän ei ole tarkoitus kirjoittaa WebAssemblya suoraan, vaan monien olemassa olevien ohjelmointikielien kääntäjät, esimerkiksi C++ ja Rust tukevat koodin kokoamista WebAssemblyksi.
Kehittäjän ei ole tarkoitus kirjoittaa WebAssemblya suoraan, vaan käyttää työkaluja, joilla olemassa olevia ohjelmointikieliä voi koota WebAssemblyksi. Rust on tästä hyvä esimerkki, sillä WebAssembly on yksi sen kokoojan natiiveista "targeteista", samalla tavalla kuin vaikka x86-prosessorit.
\clearpage

View file

@ -0,0 +1,47 @@
\chapter{Projekti}
Tein opinnäytetyön yhteydessä fullstack-projektin, missä sekä palvelin- että asiakaspuolen ohjelmointi tehtiin Rustilla. Tarkoituksena ei ollut saada aikaiseksi mitään todella monimutkaista ohjelmaa, vaan puhtaasti arvioida Rustin soveltuvuutta web-ohjelmointiin.
\section{Palvelinpuoli}
Palvelinpuolen rungoksi valikoitui Actix web. Se on käytännössä vastine JavaScript-maailman Express.js:lle, eli se hoitaa HTTP-palvelimen työtä ja reitittää GET ja POST pyynnöt ohjelman oikeille funktioille.
Actix web on puolestaan rakennettu hyödyntämällä Actix frameworkiä, mikä on rakennettu löyhästi actor-mallin pohjalta. Actor-malli\cite{wiki:actor} on Carl Hewittin vuonna 1973 luoma matemaattinen ja tietotekninen malli rinnakkaisajosta. Tämän ansiosta Actix web on hyvin suorituskykyinen ja helposti skaalautuva ratkaisu rajapintoja rakennettaessa.
Actix web on myös hyvin integroitu Rustin vahvaan tyypitykseen. Erityisen vaikuttavaa oli se, että esimerkiksi tietyn rajapinnan päätepisteen POST-pyyntöön pystyy määrittämään parametriksi tietyn rakenteen (struct). Esimerkiksi näin:
\begin{minted}{rust}
struct RegisterUser {
username: String,
password: String,
admin: bool,
password_confirmation: String,
}
#[post("/auth/register")]
fn register(
new_user: actix_web::web::Json<RegisterUser>,
) -> Result<HttpResponse, HttpResponse> {
register(new_user);
}
\end{minted}
Tällöin varmistutaan automaattisesti siitä, että kun asiakkaan POST-pyyntö saapuu tähän funktioon, kaikki data on oikeanlaista tyyppiä ja kaikki tarvittava data on pyynnössä mukana. Verrattuna JavaScriptiin, jossa ei ole tyyppejä, kaikki vastaanotettava data pitäisi tarkastaa käsin. Jatkaakseni edellistä esimerkkiä, otetaan seuraava JSON-merkkijono:
\begin{minted}{JSON}
{
"username": "TestUser",
"password": "verysecurepassword",
"admin": 3,
}
\end{minted}
Koska tässä JSON-objektissa ''admin'' ei ole tyyppiä boolean, Actix vastaa ''400 Bad Request''.
Actix webin modulaarisuus mahdollisti myös helposti tarvittavien väliohjelmistojen sisällyttämisen ohjelman toimintaan. Actix identity -paketista löytyi tarvittavat palikat itse kirjoittamani sisäänkirjautumistoiminnallisuuden lisäämisen suojattuihin reitteihin. Siinä käytin JSON Web Tokeneita, jotka lähetettiin onnistumisen kirjautumisen jälkeen asiakkaalle, ja jotka asiakas sitten lähettää serverille suojattuja reittejä käytettäessä.
Tietokannaksi valikoitui itselleni tuttu MySQL. Relaatiotietokannan sai helposti yhdistettyä Rust-koodiini Diesel ORM:llä. Diesel on tähän mennessä käyttämistäni ORM-kirjastoista selkeästi mukavin käyttää.
Käytännöllisimmät ominaisuudet kehittäjän näkökulmasta olivat Dieselin mukana tuleva komentorivikäyttöliittymä ja migraatiot. Jokaiselle taululle luodaan uusi migraatio, esimerkiksi \code{diesel migration generate users}, jonka jälkeen dieselin luomaan hakemistoon kirjoitetaan up.sql ja down.sql tiedostot, eli ohjeet siitä, miten tämä taulu luodaan ja poistetaan. Taulu viedään tietokantaan komennolla \code{diesel migration run} ja taulun voi poistaa ja luoda uudelleen komennolla \code{diesel migration redo}. Tämä mahdollistaa myös samalla sen, että versiohallintaan voi tallentaa useita versioita samasta taulusta ja palata helposti takaisin vanhempaan versioon jos uudemman kanssa ilmenee ongelmia.
Edellä mainitut työkalut helpottivat tietokannan kehitystä huomattavasti. Usein varsinkin projektin alkuvaiheilla tietokanta muuttuu jatkuvasti ja usein tulee tarve poistaa ja luoda tietokanta uudelleen. Monet pitävät kehittäjät juurikin tällaista Dieselin up.sql kaltaista tiedostoa versiohallinnassa ja tarpeen mukaan poistavat tietokannan käsin ja liittävät komennon tiedostosta tietokannan komentorivikäyttöliittymään.
\section{Asiakaspuoli}
\clearpage

View file

@ -1,7 +0,0 @@
% Conclusions
\chapter{Conclusions}
Check Final Year Project Guide for the content of Conclusions chapter.
\clearpage %force the next chapter to start on a new page. Keep that as the last line of your chapter!

View file

@ -1,7 +0,0 @@
% Material and Methods
\chapter{Material and Methods}
Check Final Year Project Guide for the content of Material and Methods chapter.
\clearpage %force the next chapter to start on a new page. Keep that as the last line of your chapter!

View file

@ -1,7 +0,0 @@
% Project Specifications
\chapter{Project Specifications}
Check Final Year Project Guide for the content of Project Specifications chapter.
\clearpage %force the next chapter to start on a new page. Keep that as the last line of your chapter!

View file

@ -1,7 +0,0 @@
% Proposed solution
\chapter{Proposed solution}
Check Final Year Project Guide for the content of Proposed solution chapter.
\clearpage %force the next chapter to start on a new page. Keep that as the last line of your chapter!

View file

@ -1,7 +0,0 @@
% Theoretical background
\chapter{Theoretical background}
Check Final Year Project Guide for the content of Theoretical background chapter.
\clearpage %force the next chapter to start on a new page. Keep that as the last line of your chapter!

View file

@ -1,71 +1,9 @@
%----------------------------------------------------------------------------------------
% Metropolia Thesis LaTeX Template
%----------------------------------------------------------------------------------------
% License:
% This work is licensed under the Creative Commons Attribution 4.0 International License.
% To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/.
%
% However, this license apply to this template. As a template, it is supposed to be
% modified for your own needs (with your thesis content). For this reason, if you use
% this project as a template and not specifically distribute it as part of a another
% package/program, we grant the extra permission to freely copy and modify these files as
% you see fit and even to delete this copyright notice.
% In short, you are free to publish your thesis under whatever license you wish, even
% keep the all rights reserved to you.
%
% Authors:
% Panu Leppäniemi, Patrik Luoto and Patrick Ausderau
%
% Credits:
% Panu Leppäniemi: abstract, def, cleaning,...
% Patrik Luoto: title page, abstract in Finnish, abbreviation, math,...
% Patrick Ausderau: initial version, style, table of content, bibliography, figure,
% appendix, table, source code listing...
%
% Please:
% If you find mistakes, improve this template and alike, please contribute by sharing
% your improvements and/or send us your feedback there:
% https://github.com/panunu/metropolia-thesis-latex
% And of course, if you improve it, add yourself as an author.
%
% Compiler:
% Use XeLaTeX as a compiler.
%----------------------------------------------------------------------------------------
% THESIS INFO
%----------------------------------------------------------------------------------------
% All general information (main language, title, author (you), degree programme, major
% option, etc.)
% Edit the file chapters/0info.tex to change these information
\input{chapters/0info.tex}
%----------------------------------------------------------------------------------------
% GLOBAL STYLES
%----------------------------------------------------------------------------------------
% If you need extra package, etc. modify the style/style.tex file.
% If you are using Windows OS, you will need to change default font to Arial in that
% style/style.tex file (or install Liberation Sans font to your system).
% If you are using MacOS or linux, make sure you have Liberation Sans font installed.
\input{chapters/0-info.tex}
\input{style/style.tex}
% Normally, you do not need to modify the title style. It's content comes from the
% chapters/0info.tex file.
\input{style/title.tex}
\input{chapters/0-abbr.tex}
%----------------------------------------------------------------------------------------
% ABBREVIATION AND GLOSSARY
%----------------------------------------------------------------------------------------
% Add/edit all your acronyms, abbreviations, glossary entries, etc. definitions in
% chapters/0abbr.tex file.
% You can have as many as you wish. Only the ones you use in your text (inserted with
% \gls{} command) will print in the Glossary/Lyhenteet.
\input{chapters/0abbr.tex}
%----------------------------------------------------------------------------------------
% DOCUMENT STARTS HERE...
%----------------------------------------------------------------------------------------
\def\code#1{\texttt{#1}}
\begin{document}
\counterwithout{listing}{chapter}
@ -78,80 +16,22 @@
\maketitle
\newpage
%----------------------------------------------------------------------------------------
% ABSTRACT / Tiivistelmä
%----------------------------------------------------------------------------------------
% If you are international student writing in English, remove the Finnish abstract.
% If you are Finnish citizen, you must have 2 abstracts, one in Finnish (or Swedish
% depending on your mother tongue) and one in English regardless of the main language of
% your thesis.
\input{chapters/0abstract_fi.tex}
\input{chapters/0abstract_en.tex}
%----------------------------------------------------------------------------------------
% License? Acknowledgement?
%----------------------------------------------------------------------------------------
% Uncomment next line and edit chapters/0license.tex if you want license in your thesis.
%\input{chapters/0license.tex}
% Uncomment next line and edit chapters/0acknowledgement.tex if you want acknowledgements.
%\input{chapters/0acknowledgement.tex}
%----------------------------------------------------------------------------------------
% TABLE OF CONTENTS
%----------------------------------------------------------------------------------------
\input{chapters/0-abstract_fi.tex}
\input{chapters/0-abstract_en.tex}
\input{style/toc.tex}
%list of figure, tables would come here if relevant?
%----------------------------------------------------------------------------------------
% Lyhenteet / Abbreviation
%----------------------------------------------------------------------------------------
% If you don't use abbreviations/glossary, remove the following line.
\input{style/abbr.tex}
%----------------------------------------------------------------------------------------
% CONTENT
%----------------------------------------------------------------------------------------
\input{style/content.tex}%reset page number to 1, etc.
% Thesis content if you strictly follow the "Final Year Project guide". Of course, you
% can adapt to your specific needs (add more chapter, rename them, etc.).
\input{chapters/1introduction.tex}
\input{chapters/2languages.tex}
%----------------------------------------------------------------------------------------
% BIBLIOGRAPHY REFERENCES
%----------------------------------------------------------------------------------------
% Chapters
\input{chapters/1-johdanto.tex}
\input{chapters/2-kielet.tex}
\input{chapters/3-projekti.tex}
%%%%%%%%%%
\input{style/biblio.tex}
%----------------------------------------------------------------------------------------
% APPENDICES
%----------------------------------------------------------------------------------------
\input{style/appendix.tex}
%force smaller vertical spacing in table of content
%!!! There can be some fun depending if the appendices have (sub)sections or not :D
% You will have to play with these numbers and eventually add the \vspace line before
% some \chapter and force another number.
% To add more fun, time to time the table of content get wrong after a build :(
\addtocontents{toc}{\vspace{11pt}}
\pretocmd{\chapter}{\addtocontents{toc}{\protect\vspace{-24pt}}}{}{}
\liite{1}% This is a hack to have right page numbering for each appendix. Make sure to
% use a unique number for each appendix.
% \addtocontents{toc}{\vspace{11pt}}%fix vertical space for Table of Content
% \liite{2}
% \input{sample/Xappendix2.tex}
%----------------------------------------------------------------------------------------
% THIS IS THE END
%----------------------------------------------------------------------------------------
\liite{1}% This is a hack to have right page numbering for each appendix. Make sure to use a unique number for each appendix.
\end{document}

View file

@ -9,7 +9,7 @@ fi
makeglossaries main
find chapters | entr -cp xelatex -shell-escape -8bit main &
#ls biblio.bib | entr -cp bibtex8 main &
ls biblio.bib | entr -cp bibtex8 main &
#ls chapters/0abbr.tex | entr -cp makeglossaries main &
zathura >/dev/null 2>&1 main.pdf