From 58950aa08096b7af6ddfe3f8ffa2208c1f84e673 Mon Sep 17 00:00:00 2001 From: Simon Rozsival Date: Thu, 12 Jan 2017 16:27:02 +0100 Subject: [PATCH] web app introduction --- Rewritten-docs.md | 53 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/Rewritten-docs.md b/Rewritten-docs.md index 87a9868..06430b5 100644 --- a/Rewritten-docs.md +++ b/Rewritten-docs.md @@ -238,7 +238,7 @@ addons (mostly administrative features). assignment); otherwise, the solution with most points is used - teacher can edit student solution and privately resubmit it; optionally saving all results (including temporary ones) -- localization of all texts (UI and exercises) +- localization of all texts (user interface (UI) and exercises) - Markdown support for creating exercise texts - tagging exercises in database and search by these tags - comments, comments, comments (exercises, tests, solutions, ...) @@ -1666,7 +1666,56 @@ be implemented in next releases. ### Web-app -@todo: what technologies can be used on client frontend side, why react was used +The web application is one of the possible client applications of the ReCodEx +system. Creating a web application as a client has several advantages: + +- no installation or setup is required on the user's device +- works on all platforms including mobile platforms +- when a new version is rolled out all the clients will use this version without +any need for installing an update manually + +One of the downsides is the large number of different web browsers (including +the older versions of a specific browser) and their different interpretation +of the code (HTML, CSS, JS). Some features of the latest specifications of HTML5 +are implemented in some browsers which are used by a subset of the Internet +users. This has to be taken into account when choosing apropriate tools +for implementation of a website. + +There are two basic ways how to create a website these days: + +- **server-side approach** - user's actions are processed on the server and the +HTML code with the results of the action is generated on the server and sent back +to the user's Internet browser. The client does not handle any logic (apart from +rendering of the user interface and some basic user interaction) and is therefore +very simple. The server can use the API server for processing of the actions so +the business logic of the server can be very simple as well. A disadvantage of +this approach is that a lot of redundant data is transferred across the requests +although some parts of the content can be cached (e.g., CSS files). This results +in longer loading times of the website. +- **server-side rendering with asynchronous updates (AJAX)** - a slightly different +approach is to render the page on the server as in the previous case but then +execute user's actions asynchronously using the `XMLHttpRequest` JavaScript +functionality. Which creates a HTTP request and transfers only the part of the +website which will be updated. +- **client-side approach** - the opposite approach is to transfer the communication +with the API server and the rendering of the HTML completely from the server directly +to the client. The client runs the code (usually JavaScript) in his/her web browser +and the content of the website is generated based on the data received from the API +server. The script file is usually quite large but it can be cached and does not +have to be downloaded from the server again (until the cached file expires). +Only the data from the API server needs to be transfered over the Internet and +thus reduce the volume of payload on each request which leads to a much more +responsive user experience, especially on slower networks. Since the client-side +code has full control over the UI and a more sophisticated user interactions +with the UI can be achieved. + +All of these approaches are used in production by the web developers and all +of them are well documented and there are mature tools for creating websites +using any of these approaches. + +We decided to use the third approach -- to create a fully client-side application +which would be familiar and intuitive for a user who is used to modern web +applications. @todo: please think about more stuff about api and web-app... thanks ;-)