Maincon AB är ett företag som sysslar med att skapa kurser tillsammans medandra företag och sedan lära ut dessa via Moodle som är en plattform för elärande.Företaget ville ha hjälp med att förbättra en rapportfunktion för eninsticksmodul i Moodle så att en bättre överblick över situationen i en kurskunde fås. Detta projekt är ett fortsättningsarbete på ett tidigare projekt där ettdiagram introducerades för att visuellt ge en bättre överblicksbild. Metodensom valdes var att skapa en egen version av denna rapportfunktion då dendåvarande PHP lösningen var bristfällig. En ny och förbättrad version skapadesi JavaScript där mer information kunde visas och filtreras i HTML och sammainformation kan exporteras till CSV som sen kan importeras till Excel. / Maincon AB is a company that among other things develops courses togetherwith other companies and then teach these courses via Moodle which is aplatform for e-learning. The company wanted help to improve a report-functionfor a plugin in Moodle so they could get a better overview of the situation in acourse. This project is a continuation of a previous project that implemented achart that visually improved the overview. In this project, the method toimprove the overview was to create a new version of the previous PHP solutionthat lacked the functionality. A new and improved version was created withJavaScript where more information could be shown and filtered in HTML, andthe same information could be exported to CSV and then imported to Excel.

La plupart des grands services web commencèrent comme de simples projets, et grossirent exponentiellement. Internet supporte cette croissance en étendant les communications et réduisant leur latence. Pendant son développement, une application doit croître exponentiellement, sans quoi elle risque de se faire dépasser par la compétition. Dès le début, il est important de s'assurer de répondre aux besoins du marché : Fail fast. Des langages comme Ruby ou Java sont devenus populaires en proposant la productivité nécessaire pour itérer rapidement sur les retours utilisateurs. Une application web qui répond correctement aux besoins des utilisateurs peut être adoptée de manière virale. Mais à terme, une application doit être efficace pour traiter cette augmentation de trafic. Il est difficile pour une application d'être à la fois productive et efficace. Quand l'audience devient trop importante, il est souvent nécessaire de remplacer l'approche productive pour un modèle plus efficace. Aucune plateforme de développement ne permet de concilier ces deux objectifs, il est donc nécessaire de réécrire l'application vers un modèle plus efficace, tel qu'un pipeline. Ce changement représente un risque. Il implique une quantité de travail conséquente et incertaine. Pour éviter ce risque, cette thèse propose de maintenir conjointement les représentations productives et efficaces d'une même application. Javascript est un langage productif avec une communauté importante. C'est l’environnement d’exécution le plus largement déployé puisqu'il est omniprésent dans les navigateurs, et également sur certains serveurs avec Node.js. Il est maintenant considéré comme le langage principal du web, détrônant Ruby ou Java. De plus, sa boucle évènementielle est similaire à un pipeline. Ces deux modèles d’exécution traitent un flux de requêtes en chaînant des fonctions les unes après les autres. Cependant, la boucle évènementielle permet une approche productive grâce à sa mémoire globale, tandis que le pipeline permet une exécution efficace du fait de sa parallélisation. Cette thèse étudie la possibilité pour une équivalence de transformer une implémentation d'une représentation vers l'autre. Avec cette équivalence, l'équipe de développement peut suivre les deux approches simultanément. Elle peut itérer continuellement pour prendre en compte les avantages des deux approches. Cette thèse présente un compilateur qui permet d'identifier un pipeline dans une application Javascript, et d'isoler chaque étape dans une fluxion. Une fluxion est nommée par contraction entre fonction et flux. Elle exécute une fonction pour chaque datum sur le flux. Les fluxions sont indépendantes, et peuvent être déplacées d'une machine à l'autre pour amortir l'augmentation du trafic. L'équipe de développement peut commencer à développer avec la productivité de la boucle évènementielle. Et avec la transformation, elle peut itérer pour progressivement atteindre l’efficacité du pipeline. / Most of the now popular web services started as small projects created by few individuals, and grew exponentially. Internet supports this growth because it extends the reach of our communications world wide, while reducing their latency. During its development, an application must grow exponentially, otherwise the risk is to be outpaced by the competition. In the beginning, it is important to verify quickly that the service can respond to the user needs: Fail fast. Languages like Ruby or Java became popular because they propose a productive approach to iterate quickly on user feedbacks. A web application that correctly responds to user needs can become viral. Eventually, the application needs to be efficient to cope with the traffic increase. But it is difficult for an application to be at once productive and efficient. When the user base becomes too important, it is often required to switch the development approach from productivity to efficiency. No platform conciliates these two objectives, so it implies to rewrite the application into an efficient execution model, such as a pipeline. It is a risk as it is a huge and uncertain amount of work. To avoid this risk, this thesis proposes to maintain the productive representation of an application with the efficient one. Javascript is a productive language with a significant community. It is the execution engine the most deployed, as it is present in every browser, and on some servers as well with Node.js. It is now considered as the main language of the web, ousting Ruby or Java. Moreover, the Javascript event-loop is similar to a pipeline. Both execution models process a stream of requests by chaining independent functions. Though, the event-loop supports the needs in development productivity with its global memory, while the pipeline representation allows an efficient execution by allowing parallelization. This thesis studies the possibility for an equivalence to transform an implementation from one representation to the other. With this equivalence, the development team can follow the two approaches concurrently. It can continuously iterate the development to take advantage of their conflicting objectives. This thesis presents a compiler that allows to identify the pipeline from a Javascript application, and isolate its stages into fluxions. A fluxion is named after the contraction between function and flux. It executes a function for each datum on a stream. Fluxions are independent, and can be moved from one machine to the other, so as to cope with the increasing traffic. The development team can begin with the productivity of the event-loop representation. And with the transformation, it can progressively iterate to reach the efficiency of the pipeline representation.

This study is a second year thesis in Software Engineering at the Blekinge Institute of Technology. It investigates differences between frameworks and Vanilla JavaScript according to requirements in modern web applications. Region Blekinge, a municipal institution, wanted to research a prototype for a search function for their future website. Using the prototype young people would be able to retrieve information about schools and educations in their area to better be able to make a good choice. The objective is to find out what a JavaScript framework has to contribute, and especially when it comes to maintainability. A comparative analysis focusing on the code implementation was therefore made between two prototypes of the application. The results of the study shows that Vanilla JavaScript is more popular and has a higher maturity, while the framework Vue.js is more maintainable when it comes to reusability of code components, databinding, readability of code and code size. A drawback for frameworks is that they have a tendency to evolve quickly, and some of them even gets obsolete. The choice between the competing techniques was hard, but in the end Vanilla JavaScript was chosen for the application. The main reason being that the future is estimated to be more stable for Vanilla JavaScript, and for a municipal institution stability is important since one needs to appear trustworthy and build systems that will remain as stable as possible in the long term. / Denna studie är en andraårs exjobbsrapport i Programvaruteknik vid Blekinges Tekniska Högskola. Den undersöker skillnader i ramverk och Vanilla JavaScript enligt krav för modernawebbapplikationer. Region Blekinge efterfrågade en prototyp för en sökfunktion för deras framtida webbsida. Genom att använda prototypen skulle unga kunna söka information om skolor och utbildningar i deras område för att lättare kunna göra ett bra val. Målsättningen är att ta reda på vad ett JavaScript-ramverk kan erbjuda, där fokus ligger på frågor om underhållbarhet. En jämförande analys som fokuserade på det programmeringstekniska gjordes mellan två prototyper av applikationen. Resultatet av studien visar att Vanilla JavaScript är mer populärt och har en högre grad av mognad, medan ramverket Vue.js är mer underhållbart med tanke på återanvändbarhet av kodkomponenter, datahantering, läsbarhet av kod och kodmängd. En nackdel för ramverk är att de har en tendens att utvecklas snabbt, och vissa av dem blir till och med ibland föråldrade. Valet mellan de konkurrerande teknikerna var inte självklart, men till slut föll det på Vanilla JavaScript. Huvudanledningen är att framtiden bedöms vara mer stabil för Vanilla JavaScript, och för en kommunal institution är stabilitet viktigt eftersom man behöver signalera tillförlitlighet och bygga system som kommer att förbli så stabila som möjligt i det långa perspektivet.

Sogeti is an IT-consulting company active in many countries. It has many different assignments and develops systems for companies in different industries. One of these assignments and systems is a system called GATA made for the company SCA's business-branch SCA SKOG. GATA stands for GPS Assisted Transport Announcement and is a comprehensive solution for timber transport from forest to industry. At this point in time, messages that do not belong to the system's main data must be sent and received outside the system. The purpose of this project has been to create a communication solution that addresses this for the system. The basic objective of the solution has been to create a local communication solution and then integrate this solution with the system. This was supposed to be done in a structured manner during sprints and with a proof-of-concept model. A local communication solution has been created consisting of a server with a message-component, a console application for creating and sending messages and a website for receiving and presenting messages. The result of the local communication solution has been proven to be consistent with the basic objective. Thereafter the local communication solution was integrated with the GATA-system. The integration resulted in a message- component being created on the system server, a console application was created within the system and a component on the system's website was created. This integrated communication solution imitates and can perform the same operations as the local communication solution and has been adapted to the GATA-system. The result of the integration and thus the entire project have been proven to be successful according to the basic target objective. / Sogeti är ett IT-konsultföretag aktivt inom många länder. Det innehar många olika uppdrag och utvecklar system till företag inom olika branscher. Ett av dessa uppdrag och system är ett system vid namn GATA skapat för företaget SCAs verksamhet SCA SKOG. GATA står för GPS Assisted Transport Announcement och är en helhetslösning för transport av timmer från skog till industri. I dagens skede måste meddelanden som inte tillhör systemets huvudsakliga data skickas och tas emot utanför systemet. Syftet med detta projekt har varit att skapa en kommunikationslösning som åtgärdar detta för systemet. Den grundläggande målbilden för lösningen har bestått av att skapa en lokal kommunikationslösning och därefter integrera denna lösning med systemet. Detta skulle göras på ett strukturerat sätt under sprinter och med en proof-of-concept modell. En lokal kommunikationslösning har skapats bestående av en server med meddelande-komponent, en konsol-applikation för att skapa och skicka meddelanden och en webbplats för att motta och presentera meddelanden. Resultatet av den lokala kommunikationslösningen har bevisats stämma överens med den grundläggande målbilden. Därefter integrerades den lokala kommunikationslösningen med GATA-systemet. Integrationen resulterade i att en meddelande-komponent skapades på systemets server, en konsol-applikation skapades inom systemet och en komponent på systemets webbplats skapades. Denna integrerade kommunikationslösning imiterar och kan utföra samma operationer som den lokala kommunikationslösningen och har anpassats till GATA-systemet. Resultatet av integrationen och därigenom hela projektet har enligt den grundläggande målbilden bevisats vara framgångsrikt.

I denna rapport så redogör vi för vårt arbete med att ta fram en prototyp till bokföretaget Publit. Vi fick i uppgift av Publit att undersöka möjligheterna för dem att med hjälp av sina egna API:er och API:erna från två andra företag i samma bransch, Valobox och Jellybooks, ta fram en ny produkt eller tjänst. Vi redogör för de olika faserna som vi har gått igenom och de beslut vi tagit angående grafisk design, interaktion och kodning. Resultatet av projektet blev en fungerande prototyp som visar hur Publit med hjälp av Valobox kan skapa en ny funktion till sin widgetshop som gör så att användarna kan provläsa böcker innan de köper dem. / In this report we describe our work with producing a prototype for Publit, which is a book-company. Our assignment from Publit was to explore the possibilities when working with their API and the APIs from two other companies in the same line of business, Valobox and Jellybooks, and by doing this develop a new product or service. We present the phases which we encountered and which decisions we have made regarding graphical design, interaction and coding. The final result of the project is a working prototype which shows how Publit, with the help of Valobox, can create a new function for their widget shop. The function allows the users to sample read a book before they decide whether they want to buy it or not.

Det finns idag fortfarande ett behov av att minska den uppfattade responstiden för användare. Som ett sätt att förbättra prestandan föreslås förhämtning. Förhämtning kan ytterligare förbättra prestandan av AJAX. Med prestanda menas primärt responstiden men bandbredden är också en viktig faktor. Problemet handlar om hur prestandan påverkas av AJAX förhämtning baserad på historiska hints jämfört mot vanlig AJAX. Metoden är experiment och prestandan av 2 versioner av en webbplats för kursinformation jämförs. Under genomförandet byggdes siterna, förhämtningsversionen har en initial förhämtning baserad på historik samt pågående förhämtning baserad på sökningar och interaktion. Tester visar på att responstiden förbättras med förhämtningen, mellan 63 % och 29 % beroende på träffbilden av förhämtningen under en session. Bandbredden ökade dock som ett resultat mellan 61 % och 33 % på de olika sessionerna.

The purpose of this project was to investigate whether it was possible to develop a type of application, where users would solve chess problems. The main goal of the project was that there would exist an functional application after the study has ended with which users could solve chess problems on a computer. One subgoal of the project was to create corresponding application for mobile phones. The study was limited to require users to have at least Internet Explorer 9 +. For other browsers, there were no corresponding limitations. The study did not investigated which programming language that really would be best suited for this kind of project. The project was developed in JavaScript and HTML. After completing the study, it was found that such an application could be created. The application has been tested on standard computer with different screen resolutions, and on mobile phones which use Android. On these, it was found that there were no problems with the appearance or functionality. Keywords: JavaScript, HTML, chess, problem solving

JavaScript est un langage de programmation maintenant très utilisé - y compris dans des domaines où la sécurité est importante. Il est donc important de permettre de vérifier la qualité des logiciels écrit en JavaScript. Cette thèse explore l'approche de la preuve formelle, visant à donner une preuve mathématique qu'un programme donné se comporte comme prévu. Pour construire cette preuve, nous utilisons un assistant de preuve tel que Coq - un programme de confiance permettant de vérifier nos preuves formelles. Pour pouvoir énoncer qu'un programme JavaScript se comporte correctement, nous avons tout d'abord besoin d'une sémantique du langage JavaScript. Cette thèse s'est donc inscrite dans le projet JSCert visant à produire une sémantique formelle pour le langage JavaScript. Devant la taille de la sémantique de JavaScript, il est important de savoir comment on peut lui faire confiance : une faute de frappe peut compromettre toute la sémantique. Pour pouvoir faire confiance à JSCert, nous nous sommes appuyés sur deux sources de confiance. D'une part, JSCert a été conçue pour être très similaire à la spécification officielle de JavaScript, le standard ECMAScript : ils utilisent les mêmes structures de donnée, et il est possible d'associer chaque règle de réduction dans JSCert à une ligne d'ECMAScript. D'autre part, nous avons défini et prouvé relativement à JSCert un interpréteur nommé JSRef. Nous avons aussi pu lancer JSRef sur les suites de test de JavaScript. La sémantique de JSCert n'est pas la première sémantique formelle pour le JavaScript, mais c'est la première à proposer deux manières distinctes pour relier la sémantique formelle au langage JavaScript : en ayant une sémantique très similaire à la spécification officielle, et en ayant testé cette sémantique pour la comparer aux autres interpréteurs. Plutôt que de prouver indépendamment que chaque programme JavaScript s'exécute comme prévu, nous analysons ses programmes par interprétation abstraite. Cela consiste à interpréter la sémantique d'un langage avec des domaines abstraits. Par exemple la valeur concrète 1 pourra être remplacée par la valeur abstraite +. L'interprétation abstraite se compose en deux étapes : d'abord une sémantique abstraite est construite et prouvée correcte vis à vis de sa sémantique concrète, puis des analyseurs sont construits selon cette sémantique abstraite. Nous ne nous intéresserons qu'à la première étape dans cette thèse. La sémantique de JSCert est immense - plus de huit cent règles de réduction. La construction d'une sémantique abstraite traditionnelle ne passent pas à l'échelle face à de telles tailles. Nous avons donc conçu une nouvelle manière de construire des sémantiques abstraites à partir de sémantiques concrètes. Notre méthode se base sur une analyse précise de la structure des règles de réduction et vise à minimiser l'effort de preuve. Nous avons appliqué cette méthode sur plusieurs langages. Dans le but d'appliquer notre approche sur JavaScript, nous avons construit un domaine basé sur la logique de séparation. Cette logique requiert de nombreuses adaptations pour pouvoir s'appliquer dans le cadre de l'interprétation abstraite. Cette thèse en étudie les interactions et propose une nouvelle approche pour les solutionner dans le cadre construit précédemment. Nos domaines, bien qu'assez simple par rapport au modèle mémoire de JavaScript, semblent permettre la preuve d'analyseurs déjà existant. Les contributions de cette thèse sont donc triples : une sémantique formelle de confiance pour le langage JavaScript, un formalisme générique pour construire des sémantiques abstraites, et un domaine non trivial pour ce formalisme. / JavaScript is a trending programming language. It is not used in applications in which security may be an important issue. It thus becomes important to be able to control the quality of softwares written in JavaScript. This thesis explores a formal proof approach, which aims at giving a mathematical proof that a given program behaves as expected. To build this proof, we use proof assistants such as Coq—a trusted program enabling to check formal proofs. To state that a JavaScript program is behaving as expected, we first need a semantics of the JavaScript language. This thesis is thus part of the JSCert project, whose aim it to prove a formal semantics for JavaScript. Because of the size of JavaScript's semantics, it is crucial to know how it can be trusted: a typing mistake could compromise the whole semantics. To trust JSCert, we based ourselves on two trust sources. On one hand, JSCert has been designed to be the most similar it can be from the official JavaScript specification, the ECMAScript standard: they use the same data structures, and it is possible to relate each derivation rule in JSCert to a line of ECMAScript. On the other hand, we defined and proved correct with respect to JSCert an interpreter named JSRef. We have been able to run JSRef on JavaScript test suites. The JSCert semantics is not the first formal semantics of JavaScript, but it is the first to propose two distinct ways to relate the formal semantics to the JavaScript language: by having a semantics close to the official specification, and by testing this semantics and comparing it to other interpreters. Instead of independently proving that each JavaScript program behaves as expected, we chose to analyse programs using abstract interpretation. It consists of interpreting the semantics of a programming language with abstract domains. For instance, the concrete value 1 can be replaced by the abstract value +. Abstract interpretation is split into two steps : first, an abstract semantics is built and proven correct with respect to its concrete semantics, then, analysers are built from this abstract semantics. We only focus on the first step in this thesis. The JSCert semantics is huge - more than height hundred derivation rules. Building an abstract semantics using traditional techniques does not scale towards such sizes. We thus designed a new way to build abstract semantics from concrete semantics. Our approach is based on a careful analysis on the structure of derivation rules. It aims at minimising the proof effort needed to build an abstract semantics. We applied our method on several languages. With the goal of applying our approach to JavaScript, we built a domain based on separation logic. This logic require several adaptations to be able to apply in the context of abstract interpretation. This thesis precisely studies these interactions and introduces a new approach to solve them in our abstract interpretation framework. Our domains, although very simple compared to the memory model of JavaScript, seems to enable the proof of already existing analysers. This thesis has thus three main contributions : a trusted formal semantics for the JavaScript, a generic framework to build abstract semantics, and a non-trivial domain for this formalism.

Nous nous intéressons à la mise en œuvre des politiques de confidentialité et d'intégrité des données dans le contexte des applications Web côté client. Étant donné que la plupart des applications Web est développée en JavaScript, on propose des mécanismes statiques, dynamiques et hybrides pour sécuriser le flux d'information en Core JavaScript - un fragment de JavaScript qui retient ses caractéristiques fondamentales. Nous étudions en particulier: une sémantique à dispositif de contrôle afin de garantir dynamiquement le respect des politiques de sécurité en Core JavaScript aussi bien qu'un compilateur qui instrumente un programme avec le dispositif de contrôle proposé, un système de types qui vérifie statiquement si un programme respecte une politique de sécurité donnée, un système de types hybride qui combine des techniques d'analyse statique à des techniques d'analyse dynamique afin d'accepter des programmes surs que sa version purement statique est obligée de rejeter. La plupart des programmes JavaScript s'exécute dans un navigateur Web dans le contexte d'une page Web. Ces programmes interagissent avec la page dans laquelle ils sont inclus parmi des APIs externes fournies par le navigateur. Souvent, l'exécution d'une API externe dépasse le périmètre de l'interprète du langage. Ainsi, une analyse réaliste des programmes JavaScript côté client doit considérer l'invocation potentielle des APIs externes. Pour cela, on présente une méthodologie générale qui permet d'étendre des dispositifs de contrôle de sécurité afin qu'ils prennent en compte l'invocation potentielle des APIs externes et on applique cette méthodologie à un fragment important de l'API DOM Core Level 1. / In this thesis, we address the issue of enforcing confidentiality and integrity policies in the context of client-side Web applications. Since most Web applications are developed in the JavaScript programming language, we study static, dynamic, and hybrid enforcement mechanisms for securing information flow in Core JavaScript --- a fragment of JavaScript that retains its defining features. Specifically, we propose: a monitored semantics for dynamically enforcing secure information flow in Core JavaScript as well as a source-to-source transformation that inlines the proposed monitor, a type system that statically checks whether or not a program abides by a given information flow policy, and a hybrid type system that combines static and dynamic analyses in order to accept more secure programs than its fully static counterpart. Most JavaScript programs are designed to be executed in a browser in the context of a Web page. These programs often interact with the Web page in which they are included via a large number of external APIs provided by the browser. The execution of these APIs usually takes place outside the perimeter of the language. Hence, any realistic analysis of client-side JavaScript must take into account possible interactions with external APIs. To this end, we present a general methodology for extending security monitors to take into account the possible invocation of arbitrary APIs and we apply this methodology to a representative fragment of the DOM Core Level 1 API that captures DOM-specific information flows.

This project has been carried out to explore the possibilities of working with open-source frameworks and libraries in an existing system. For this project, the existing system is the web application platform Dreamtsoft. The project is divided into two main goals, the first main goal is to integrate an existing web application from a previous project using modern web technologies, specifically React with a number of support libraries. The second main goal is to create a process to automate the integration of node_modules into Dreamtsoft. Both main goals were achieved, the first main goal resulted in an implementation of the existing web application, with a number of minor changes to the functionality. The second main goal resulted in a script to convert node_modules to files that work in Dreamtsoft and an implementation of the React Trello package as a Dreamtsoft component. / Detta projekt har utförts för att undersöka möjligheterna att arbeta med open-source ramverk och bibliotek i ett existerande system. För detta projekt är det existerande systemet webbapplikations-platformen Dreamtsoft. Projektet är uppdelat i två huvudmål, första huvudmålet är att integrera en existerande webbapplikation från ett tidigare projekt som använder moderna webbtekniker, specifikt React med ett antal stödbibliotek. Det andra huvudmålet är att skapa en process för att automatisera integrationen av node_modules i Dreamtsoft. Båda huvudmålen uppnåddes, det första huvudmålet resulterade i en implementation av den existerande webbapplikationen, med ett antal mindre ändringar till funktionaliteten. Det andra huvudmålet resulterade i ett script för att konvertera node_modules till filer som fungerar i Dreamtsoft och en implementation av paketet React Trello som en Dreamtsoft-komponent.