DOCSLIB.ORG

2D Web Based Game Engine

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
2D Web Based Game Engine Masaryk University Faculty of Informatics 2D web based game engine Bachelor’s Thesis Martin Petýrek Brno, Spring 2016 Acknowledgement I would like to thank my advisor RNDr. Barbora Kozlíková, Ph.D. for her counsel and the time we spent on this thesis. iii Abstract The goal of this thesis is to create a custom game engine, inspired by features of other engines that are favored by game developers. The result of this thesis should be an easy to use engine which will target simple games and will be easily portable to mobile platforms. It will also feature a website with tutorials on how to start developing, short code samples for individual features of the engine and also complete games. Full API documentation will also be available on the website. iv Keywords game engine, Javascript, Type Script, HTML5. v Contents 1 Introduction ............................1 2 Existing solutions .........................3 2.1 PhaserJS ............................3 2.2 SFML .............................4 2.3 LibGDX ............................5 2.4 Unity3D ............................5 3 mini2d.js Engine .........................7 3.1 Technologies for multi platform web games ..........7 3.1.1 Hybrid applications . .8 3.2 Differences from other solutions ...............8 3.2.1 Mobile first approach . .8 3.2.2 TypeScript . .8 3.2.3 Canvas vs. WebGL . .9 3.3 Performance .......................... 10 3.3.1 SVG . 10 3.3.2 Exporting to mobile platforms . 11 3.3.3 Resolution . 12 3.3.4 Avoiding bad practices . 12 4 Design of mini2d.js ....................... 15 4.1 Classes hierarchy ....................... 15 4.1.1 Game class . 15 4.1.2 Game states . 15 4.1.3 World and UI . 17 4.1.4 Sound . 17 4.1.5 Physics . 17 4.1.6 Resources . 17 4.1.7 Other classes . 17 4.2 Development tools ....................... 18 4.2.1 JavaScript preprocessors . 18 4.2.2 Task runners . 19 5 Implementation .......................... 23 5.1 Game states .......................... 23 5.2 Resource manager ....................... 24 5.3 Input ............................. 24 5.4 Audio ............................. 25 vii 5.5 Camera ............................ 25 5.6 Interfaces ........................... 26 5.6.1 Destroyable . 26 5.6.2 Drawable . 26 5.6.3 Measurable . 26 5.7 UI ............................... 27 5.7.1 Text . 27 5.7.2 Button . 27 5.8 Graphics ............................ 28 5.9 Physics ............................ 28 5.9.1 CollisionEngine . 28 5.9.2 CollisionDetector . 29 5.9.3 CollisionSolver . 29 5.9.4 Body . 29 5.10 Documentation ........................ 30 5.11 JavaDoc ............................ 30 5.12 TypeDoc ............................ 30 6 mini2d.js web page ........................ 31 6.1 Examples ........................... 31 6.2 Tutorials ............................ 31 6.3 Documentation ........................ 33 7 Conclusion ............................. 35 Bibliography . 37 viii 1 Introduction Mobile platforms have grown to the size they are now and have already outgrown other platforms. One could argue that they have pretty much reached the point where nothing significant will ever emerge and therefore the market has become stagnant. There has also been a big shift from traditional devices such as personal computers and laptops. Nowadays more and more people have settled for a mobile device to fulfill their everyday electronic needs. Not only has the market shifted from desktop to mobile devices, it has also been steering towards the web platforms, which despite all their limitations have many advantages. These advantages allow the programmer to write the software once and run it virtually everywhere from a smart phone to a smart TV all the way to the desktop computer. The main difference has always been the performance. However, we are now getting to the state where the performance is sufficient for simple games and therefore HTML51 has become a viable alternative to the classical approach of C/C++ powered engines. And that is the kind of games we will focus on in this thesis. The types of games, that do not require the heavyweight solutions already on the market, crafted to suit the needs of every developer, which are impossible to be used by someone without a prior experi- ence. We are going to focus on simple games, that would not benefit from using an engine under normal circumstances. However, the web is well known for its different behavior on different browsers and platforms. The aim is to write an engine, that will take care of all the inconveniences tied with building mobile games on the web platform and focus on actually developing and designing the game, not dealing with problems related to portability. The goal is to create an engine everyone can use with ease. For those aspiring to build more complex games, there are already very sophisticated and well documented engines with big commu- nities (Unity3D is a great example of such an engine, more on these 1. HTML5 – markup language for the web, fifth and current standard bringing key enhancements to canvas element used for 2D games. 1 1. Introduction later). However, building such a complex system is not the goal of this thesis. This engine will be called mini2d.js and is intended to be stripped of all the unnecessary features which many of these engines offer. This engine aims for portability, consistency, and simplicity. It will feature well described examples showcasing every feature of the engine both separately and combined to create a fully functional mobile first game. It will also offer tutorials for those developers who are in need ofmore in depth explanations. The first part of this work discusses the existing solutions ofHTML5 based game engines and describes the basic techniques behind these, the differences, advantages and disadvantages. The third chapter describes my own implementation and the key enhancements and differences from the existing solutions. It explains the reasoning behind the choices that were made during the process of making this engine. The fourth chapter explains the design of the mini2d.js engine and the development tools chosen for the project. The fifth chapter explains the implementation in detail and demonstrates some of the code required for creating a game in mini2d.js engine. The last part demonstrates the web presentation of the engine, which is an equally important part of this thesis. 2 2 Existing solutions In this chapter we introduce the existing game engines. We then ex- plain their strengths and weaknesses. Some aspects of these solutions have been an inspiration for my work. It was my goal to capture the best concepts of these solutions and combine them into a simple en- gine. The other solutions often possess a feature set that far exceeds what it is required by a developer to do. This could potentially mean using ten megabytes big engine for the game like tic tac toe. Using no engine at all would help to minimize the size of the game, however, it significantly reduces the speed of the development. The existing solu- tions also come with inconveniences specific to those engines when used for the development, so it was also my goal to avoid these and only use the best practice of these solutions. Now we are going to focus on the best solutions that exist as of today on the market. 2.1 PhaserJS PhaserJS[1] is one of the most used HTML5 game frameworks pub- lished on GitHub1. It is an open source solution using Pixi.js2 for rendering. It is actively developed and maintained by Photon Storm Limited[2]. It has a great user base and provides many live examples on its website. I believe the examples are a great way to demonstrate what the engine is capable of and because of this, I have decided to create similar examples for my engine as well. The development team behind PhaserJS has released the last stable version 2.4.6 and is work- ing on rebranding. The new name of the library is going to be Lazer, but it is now in an experimental phase and is not recommended to be used for the development. PhaserJS, although not written in Type- Script, contains TypeScript definitions for TypeScript development and provides the programmer with the ability to take full advantage of TypeScript’s type system. 1. GitHub – the most popular open source git repository hosting service. See https://github.com/. 2. Pixi.js – is a 2D webGL renderer with canvas fallback 3 2. Existing solutions However, it does not come without any shortcomings. PhaserJS is by no means bug free and has many great features that may not be required, making the engine heavyweight. It comes with four different physics engines and many of these features, although useful, have not been authored with the mobile first attitude we strive for. It is still, however, a solid choice for any new game to come. 2.2 SFML SFML[3], created by Laurent Gomila, is very different from PhaserJS and has been the second biggest inspiration for my engine. It takes fundamentally different approach as a game engine. It is written in C++ and the rendering is based on OpenGL3 and Direct3D4. PhaserJS is an engine, that tries to do everything for the programmer and does many things behind the scenes. On the other hand, SFML provides the very basic functionality and the programmer is left to implement the game logic by himself. This is the reason for SFML being lightweight, making it potentially very good, but it does have its big drawbacks which will be mentioned. It is not a complete game engine, but merely a multimedia library, used primarily for simple desktop games. As its homepage says: "It provides a simple interface to the various components of your PC..." It takes care of OpenGL/Direct3D API calls and the creation of a window on any supported operating system. All of this can be either confusing or too complicated for the programmer.
Load more

Recommended publications
  • Machine Learning in the Browser
    Machine Learning in the Browser The Harvard community has made this article openly available. Please share how this access benefits you. Your story matters Citable link http://nrs.harvard.edu/urn-3:HUL.InstRepos:38811507 Terms of Use This article was downloaded from Harvard University’s DASH repository, and is made available under the terms and conditions applicable to Other Posted Material, as set forth at http:// nrs.harvard.edu/urn-3:HUL.InstRepos:dash.current.terms-of- use#LAA Machine Learning in the Browser a thesis presented by Tomas Reimers to The Department of Computer Science in partial fulfillment of the requirements for the degree of Bachelor of Arts in the subject of Computer Science Harvard University Cambridge, Massachusetts March 2017 Contents 1 Introduction 3 1.1 Background . .3 1.2 Motivation . .4 1.2.1 Privacy . .4 1.2.2 Unavailable Server . .4 1.2.3 Simple, Self-Contained Demos . .5 1.3 Challenges . .5 1.3.1 Performance . .5 1.3.2 Poor Generality . .7 1.3.3 Manual Implementation in JavaScript . .7 2 The TensorFlow Architecture 7 2.1 TensorFlow's API . .7 2.2 TensorFlow's Implementation . .9 2.3 Portability . .9 3 Compiling TensorFlow into JavaScript 10 3.1 Motivation to Compile . 10 3.2 Background on Emscripten . 10 3.2.1 Build Process . 12 3.2.2 Dependencies . 12 3.2.3 Bitness Assumptions . 13 3.2.4 Concurrency Model . 13 3.3 Experiences . 14 4 Results 15 4.1 Benchmarks . 15 4.2 Library Size . 16 4.3 WebAssembly . 17 5 Developer Experience 17 5.1 Universal Graph Runner .
    [Show full text]
  • Building a Java First-Person Shooter
    3D Java Game Programming – Episode 0 Building a Java First-Person Shooter Episode 0 [Last update: 5/03/2017] These notes are intended to accompany the video sessions being presented on the youtube channel “3D Java Game Programming” by youtube member “The Cherno” at https://www.youtube.com/playlist?list=PL656DADE0DA25ADBB. I created them as a way to review the material and explore in more depth the topics presented. I am sharing with the world since the original work is based on material freely and openly available. Note: These notes DO NOT stand on their own, that is, I rely on the fact that you viewed and followed along the video and may want more information, clarification and or the material reviewed from a different perspective. The purpose of the videos is to create a first-person shooter (FPS) without using any Java frameworks such as Lightweight Java Game Library (LWJGL), LibGDX, or jMonkey Game Engine. The advantages to creating a 3D FPS game without the support of specialized game libraries that is to limit yourself to the commonly available Java classes (not even use the Java 2D or 3D APIs) is that you get to learn 3D fundamentals. For a different presentation style that is not geared to following video episodes checkout my notes/book on “Creating Games with Java.” Those notes are more in a book format and covers creating 2D and 3D games using Java in detail. In fact, I borrow or steal from these video episode notes quite liberally and incorporate into my own notes. Prerequisites You should be comfortable with basic Java programming knowledge that would be covered in the one- semester college course.
    [Show full text]
  • Create Mobile Apps with HTML5, Javascript and Visual Studio
    Create mobile apps with HTML5, JavaScript and Visual Studio DevExtreme Mobile is a single page application (SPA) framework for your next Windows Phone, iOS and Android application, ready for online publication or packaged as a store-ready native app using Apache Cordova (PhoneGap). With DevExtreme, you can target today’s most popular mobile devices with a single codebase and create interactive solutions that will amaze. Get started today… ・ Leverage your existing Visual Studio expertise. ・ Build a real app, not just a web page. ・ Deliver a native UI and experience on all supported devices. ・ Use over 30 built-in touch optimized widgets. Learn more and download your free trial devexpress.com/mobile All trademarks or registered trademarks are property of their respective owners. Untitled-4 1 10/2/13 11:58 AM APPLICATIONS & DEVELOPMENT SPECIAL GOVERNMENT ISSUE INSIDE Choose a Cloud Network for Government-Compliant magazine Applications Geo-Visualization of SPECIAL GOVERNMENT ISSUE & DEVELOPMENT SPECIAL GOVERNMENT ISSUE APPLICATIONS Government Data Sources Harness Open Data with CKAN, OData and Windows Azure Engage Communities with Open311 THE DIGITAL GOVERNMENT ISSUE Inside the tools, technologies and APIs that are changing the way government interacts with citizens. PLUS SPECIAL GOVERNMENT ISSUE APPLICATIONS & DEVELOPMENT SPECIAL GOVERNMENT ISSUE & DEVELOPMENT SPECIAL GOVERNMENT ISSUE APPLICATIONS Enhance Services with Windows Phone 8 Wallet and NFC Leverage Web Assets as Data Sources for Apps APPLICATIONS & DEVELOPMENT SPECIAL GOVERNMENT ISSUE ISSUE GOVERNMENT SPECIAL DEVELOPMENT & APPLICATIONS Untitled-1 1 10/4/13 11:40 AM CONTENTS OCTOBER 2013/SPECIAL GOVERNMENT ISSUE OCTOBER 2013/SPECIAL GOVERNMENT ISSUE magazine FEATURES MOHAMMAD AL-SABT Editorial Director/[email protected] Geo-Visualization of Government KENT SHARKEY Site Manager Data Sources MICHAEL DESMOND Editor in Chief/[email protected] Malcolm Hyson ..........................................
    [Show full text]
  • Extracting Taint Specifications for Javascript Libraries
    Extracting Taint Specifications for JavaScript Libraries Cristian-Alexandru Staicu Martin Toldam Torp Max Schäfer TU Darmstadt Aarhus University GitHub [email protected] [email protected] [email protected] Anders Møller Michael Pradel Aarhus University University of Stuttgart [email protected] [email protected] ABSTRACT ACM Reference Format: Modern JavaScript applications extensively depend on third-party Cristian-Alexandru Staicu, Martin Toldam Torp, Max Schäfer, Anders Møller, and Michael Pradel. 2020. Extracting Taint Specifications for JavaScript libraries. Especially for the Node.js platform, vulnerabilities can Libraries. In 42nd International Conference on Software Engineering (ICSE have severe consequences to the security of applications, resulting ’20), May 23–29, 2020, Seoul, Republic of Korea. ACM, New York, NY, USA, in, e.g., cross-site scripting and command injection attacks. Existing 12 pages. https://doi.org/10.1145/3377811.3380390 static analysis tools that have been developed to automatically detect such issues are either too coarse-grained, looking only at 1 INTRODUCTION package dependency structure while ignoring dataflow, or rely on JavaScript is powering a wide variety of web applications, both manually written taint specifications for the most popular libraries client-side and server-side. Many of these applications are security- to ensure analysis scalability. critical, such as PayPal, Netflix, or Uber, which handle massive In this work, we propose a technique for automatically extract- amounts of privacy-sensitive user data and other assets. An impor- ing taint specifications for JavaScript libraries, based on a dynamic tant characteristic of modern JavaScript-based applications is the analysis that leverages the existing test suites of the libraries and extensive use of third-party libraries.
    [Show full text]
  • Microsoft AJAX Library Essentials Client-Side ASP.NET AJAX 1.0 Explained
    Microsoft AJAX Library Essentials Client-side ASP.NET AJAX 1.0 Explained A practical tutorial to using Microsoft AJAX Library to enhance the user experience of your ASP.NET Web Applications Bogdan Brinzarea Cristian Darie BIRMINGHAM - MUMBAI Microsoft AJAX Library Essentials Client-side ASP.NET AJAX 1.0 Explained Copyright © 2007 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: July 2007 Production Reference: 1230707 Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK. ISBN 978-1-847190-98-7 www.packtpub.com Cover Image by www.visionwt.com Table of Contents Preface 1 Chapter 1: AJAX and ASP.NET 7 The Big Picture 8 AJAX and Web 2.0 10 Building
    [Show full text]
  • Learning Javascript Design Patterns
    Learning JavaScript Design Patterns Addy Osmani Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo Learning JavaScript Design Patterns by Addy Osmani Copyright © 2012 Addy Osmani. All rights reserved. Revision History for the : 2012-05-01 Early release revision 1 See http://oreilly.com/catalog/errata.csp?isbn=9781449331818 for release details. ISBN: 978-1-449-33181-8 1335906805 Table of Contents Preface ..................................................................... ix 1. Introduction ........................................................... 1 2. What is a Pattern? ...................................................... 3 We already use patterns everyday 4 3. 'Pattern'-ity Testing, Proto-Patterns & The Rule Of Three ...................... 7 4. The Structure Of A Design Pattern ......................................... 9 5. Writing Design Patterns ................................................. 11 6. Anti-Patterns ......................................................... 13 7. Categories Of Design Pattern ............................................ 15 Creational Design Patterns 15 Structural Design Patterns 16 Behavioral Design Patterns 16 8. Design Pattern Categorization ........................................... 17 A brief note on classes 17 9. JavaScript Design Patterns .............................................. 21 The Creational Pattern 22 The Constructor Pattern 23 Basic Constructors 23 Constructors With Prototypes 24 The Singleton Pattern 24 The Module Pattern 27 iii Modules 27 Object Literals 27 The Module Pattern
    [Show full text]
  • Analysing the Use of Outdated Javascript Libraries on the Web
    Updated in September 2017: Require valid versions for library detection throughout the paper. The vulnerability analysis already did so and remains identical. Modifications in Tables I, III and IV; Figures 4 and 7; Sections III-B, IV-B, IV-C, IV-F and IV-H. Additionally, highlight Ember’s security practices in Section V. Thou Shalt Not Depend on Me: Analysing the Use of Outdated JavaScript Libraries on the Web Tobias Lauinger, Abdelberi Chaabane, Sajjad Arshad, William Robertson, Christo Wilson and Engin Kirda Northeastern University {toby, 3abdou, arshad, wkr, cbw, ek}@ccs.neu.edu Abstract—Web developers routinely rely on third-party Java- scripts or HTML into vulnerable websites via a crafted tag. As Script libraries such as jQuery to enhance the functionality of a result, it is of the utmost importance for websites to manage their sites. However, if not properly maintained, such dependen- library dependencies and, in particular, to update vulnerable cies can create attack vectors allowing a site to be compromised. libraries in a timely fashion. In this paper, we conduct the first comprehensive study of To date, security research has addressed a wide range of client-side JavaScript library usage and the resulting security client-side security issues in websites, including validation [30] implications across the Web. Using data from over 133 k websites, we show that 37 % of them include at least one library with a and XSS ([17], [36]), cross-site request forgery [4], and session known vulnerability; the time lag behind the newest release of fixation [34]. However, the use of vulnerable JavaScript libraries a library is measured in the order of years.
    [Show full text]
  • 6. Client-Side Processing
    6. Client-Side Processing 1. Client-side processing 2. JavaScript 3. Client-side scripting 4. Document Object Model (DOM) 5. Document methods and properties 6. Events 7. Calling a function 8. Table of squares function 9. Comments on previous script 10. Defining a function 11. Event handlers 12. Event handlers example 13. Event listeners 14. Functions and form fields 15. Defining the function myTranslate 16. Navigating the DOM tree 17. Finding elements by name 18. Finding elements by name (function body) 19. Using CSS selectors 20. Adding elements 21. Deleting elements 22. Using jQuery 23. Using jQuery to add elements 24. Finding elements by name (jQuery) 25. DOM and XML 26. jQuery method to load an XML file 27. Retrieving RSS item titles 28. Retrieving JSON data 29. JSON country data 30. Code for JSON retrieval (1) 31. Code for JSON retrieval (2) 32. Exercises 33. Links to more information 6.1. Client-side processing client program (e.g. web browser) can be used to customise interaction with the user validate user input (although HTML5 now provides this) generate (part of) document dynamically send requests to a server in the background make interaction with a web page similar to that of a desktop application this is typically done using JavaScript, since a Javascript interpreter is built into browsers 6.2. JavaScript interpreted, scripting language for the web loosely typed variables do not have to be declared the same variable can store values of different types at different times HTML <script> element specifies script to be executed type attribute has value text/javascript src attribute specifies URI of external script usually <script> appears in the <head> and just declares functions to be called later ECMAScript, 10th edition (June 2019) is the latest standard 6.3.
    [Show full text]
  • Performance and Architecture Optimization in an HTML5-Based Web Game
    Linköping University | Department of Computer science Master Thesis | Computer Science Spring term 2016 | LiTH-IDA/ERASMUS-A–16/001—SE Performance and architecture optimization in an HTML5-based web game Corentin Bras Tutor, Aseel Berglund Examinator, Henrik Eriksson Copyright The publishers will keep this document online on the Internet – or its possible replacement – for a period of 25 years starting from the date of publication barring exceptional circumstances. The online availability of the document implies permanent permission for anyone to read, to download, or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the consent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility. According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement. For additional information about the Linköping University Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its www home page: http://www.ep.liu.se/. © Corentin Bras Abstract Web applications are becoming more and more complex and bigger and bigger. In the case of a web game, it can be as big as a software. As well, as these applications are run indirectly through a web browser they need to be quite well optimized. For these reasons, performance and architecture are becoming a crucial point in web development.
    [Show full text]
  • Java Game Developer Interview Questions and Answers Guide
    Java Game Developer Interview Questions And Answers Guide. Global Guideline. https://www.globalguideline.com/ Java Game Developer Interview Questions And Answers Global Guideline . COM Java Game Developer Job Interview Preparation Guide. Question # 1 What is the 'Platform independence 'properties of java? Answer:- The very essence of the platform independence of Java lies in the way the code is stored, parsed and compiled - bytecode. Since these bytecodes run on any system irrespective of the underlying operating system, Java truly is a platform-independent programming language. Read More Answers. Question # 2 Tell us what will you bring to the team? Answer:- I will bring a large amount of support to the team, I endeavour to make sure my team reaches the goal they so desperately need. I feel that adding me to the team will bring our performance up a notch. Read More Answers. Question # 3 Tell us is Game Development Subcontracted? Answer:- I was having a conversation with someone who believed that components of a games code where subcontracted out to programmers in different countries where it would be cheaper, then assembled by the local company. I understand that people often use pre-built engines but I would think that making the actual game would require people to work closely in the same studio. Read More Answers. Question # 4 Tell me is There A Portal Dedicated To Html5 Games? Answer:- Just to get something straight; by "portal", I mean a website that frequently publishes a certain type of games, has a blog, some articles, maybe some tutorials and so on. All of these things are not required (except the game publishing part, of course), for example, I consider Miniclip to be a flash game portal.
    [Show full text]
  • Javascript DOM Manipulation Performance Comparing Vanilla Javascript and Leading Javascript Front-End Frameworks
    JavaScript DOM Manipulation Performance Comparing Vanilla JavaScript and Leading JavaScript Front-end Frameworks Morgan Persson 28/05/2020 Faculty of Computing, Blekinge Institute of Technology, 371 79 Karlskrona, Sweden This thesis is submitted to the Faculty of Computing at Blekinge Institute of Technology in partial fulfillment of the requirements for the bachelor’s degree in software engineering. The thesis is equivalent to 10 weeks of full-time studies. Contact Information: Author(s): Morgan Persson E-mail: [email protected] University advisor: Emil Folino Department of Computer Science Faculty of Computing Internet : www.bth.se Blekinge Institute of Technology Phone : +46 455 38 50 00 SE–371 79 Karlskrona, Sweden Fax : +46 455 38 50 57 Abstract Background. Websites of 2020 are often feature rich and highly interactive ap- plications. JavaScript is a popular programming language for the web, with many frameworks available. A common denominator for highly interactive web applica- tions is the need for efficient methods of manipulating the Document Object Model to enable a solid user experience. Objectives. This study compares Vanilla JavaScript and the JavaScript frameworks Angular, React and Vue.js in regards to DOM performance, DOM manipulation methodology and application size. Methods. A literature study was conducted to compare the DOM manipulation methodologies of Vanilla JavaScript and the selected frameworks. An experiment was conducted where test applications was created using Vanilla JavaScript and the selected frameworks. These applications were used as base for comparing applica- tion size and for comparison tests of DOM performance related metrics using Google Chrome and Firefox. Results. In regards to DOM manipulation methodology, there is a distinct difference between Vanilla JavaScript and the selected frameworks.
    [Show full text]
  • Load Time Optimization of Javascript Web Applications
    URI: urn:nbn:se:bth-17931 Bachelor of Science in Software Engineering May 2019 Load time optimization of JavaScript web applications Simon Huang Faculty of Computing, Blekinge Institute of Technology, 371 79 Karlskrona, Sweden This thesis is submitted to the Faculty of Computing at Blekinge Institute of Technology in partial fulfilment of the requirements for the degree of Bachelor of Science in Software Engineering. The thesis is equivalent to 10 weeks of full time studies. The authors declare that they are the sole authors of this thesis and that they have not used any sources other than those listed in the bibliography and identified as references. They further declare that they have not submitted this thesis at any other institution to obtain a degree. Contact Information: Author: Simon Huang E-mail: [email protected] University advisor: Emil Folino Department of Computer Science Faculty of Computing Internet : www.bth.se Blekinge Institute of Technology Phone : +46 455 38 50 00 SE–371 79 Karlskrona, Sweden Fax : +46 455 38 50 57 Abstract Background. Websites are getting larger in size each year, the median size increased from 1479.6 kilobytes to 1699.0 kilobytes on the desktop and 1334.3 kilobytes to 1524.1 kilobytes on the mobile. There are several methods that can be used to decrease the size. In my experiment I use the methods tree shaking, code splitting, gzip, bundling, and minification. Objectives. I will investigate how using the methods separately affect the loading time and con- duct a survey targeted at participants that works as JavaScript developers in the field.
    [Show full text]