Structuring Modern Web Applications
Total Page:16
File Type:pdf, Size:1020Kb
Structuring modern web applications A study of how to structure web clients to achieve modular, maintainable and long lived applications TIM JOHAN MALMSTRÖM [email protected] Master’s Thesis at NADA Supervisor: Olov Engwall Examiner: Olle Bälter February 2, 2014 Abstract This degree project, conducted at Decerno AB, investigates what can be done to create client side web applications that are maintainable for a long time. The focus is on basing the application on an existing frame- work which both simplifies the development process and helps keeping the application well structured. Which framework is currently the best is evaluated using a compar- ison between the currently most popular frameworks. The comparison is done using a set of categories that is defined through discussion with experienced web developers at the principal company for the project: Decerno AB. The alternatives considered the most relevant from the discussion are also implemented and tested for further results to show which framework is the best suited for the solution in the project. The best solution is a structure that is based on the structure used in Angular JS which is a JavaScript framework developed by Google Inc. The reason to why this framework is the most relevant is its huge community support and that it encourages developers to keep their code well structured. In the solution a set of rules are defined that limit the uses of the framework and at the same time defining a structure that achieves the goal of the project: to create applications that are easy to maintain and long lived. Referat Strukturera moderna web-klienter för att få hållbara och långlivade applikationer Detta examensarbete, utfört på Decerno AB, ämnar att undersöka vad man kan göra för att skapa klientbaserade webapplikationer som går att driva och underhålla under en längre tid. Fokus i arbetet är att basera applikationen på ett existerande ramverk, vilket både underlättar utvecklingsprocessen och hjälper till med att hålla applikationen väl strukturerad. Vilket ramverk som är det bästa utvärderas genom en jämförelse av olika ramverk som är mest diskuterade i dagens webutveckling. Jämfö- relsen görs inom en grupp kategorier som definierats genom diskussion med erfarna webutvecklare på uppdragsgivaren för projektet: Decerno AB. Ramverken som anses vara mest relevanta från jämförelsen imple- menteras även och testas för att få ytterligare resultat att väga in i diskussionen om vilket ramverk som bör användas i lösningen till pro- jektet. Den bästa lösningen är en struktur baserad på ett ramverk som heter Angular JS, utvecklat av Google Inc. Huvudsakligen för att det är det ramverk som har störst stöd av utvecklare just nu samt att det uppmuntrar utvecklare till att skriva väl strukturerad kod. Lösningen definieras som en lista med regler definierade för att begränsa ramverket till att användas som det är gjort för att användas och samtidigt definie- ra en struktur som uppnår målet med projektet: att skapa applikationer som är lätta att underhålla och välstrukturerade. Preface This degree project is the final task in my Degree of Masters of Science in Engineer- ing. I would like to thank every one that has supported and helped me throughout the project. A special thanks to: Olov Engwall for being supervisor with invaluable pieces of advice. Johan Behrenfeldt, Sven Norman, Leif Pettersson, Mattias Knutsson and Mats Dahl, Decerno AB for being available and interested in discussing found re- sults, progress and how to improve the results of the project. Decerno AB for being the principal company for this thesis providing the neces- sary tools and environment to work on the project. Ylva Ersvik for being opponent for my project presentation and helping to im- prove the report by giving great feedback. Helen Elemida, Aked Hindi, Joakim Jalap and Moa Ristner for reflections on work progress and discussion sessions during the thesis work. Contents Preface 1 Introduction 1 1.1 Background . 1 1.2 Problem description . 1 1.3 Project Goal . 2 1.4 Approach . 2 1.4.1 Scientific methodology . 3 1.5 Scope & limitations . 4 1.6 History & Related work . 4 1.6.1 JavaScript . 4 1.6.2 Web development . 5 1.6.3 Software architecture and design . 6 1.7 Definitions . 8 1.7.1 Framework . 8 1.7.2 Web Application . 9 1.7.3 Data bindings . 9 1.7.4 Code template . 9 1.7.5 Pub/Sub . 10 1.7.6 SPA . 10 1.7.7 DOM . 10 1.7.8 Architectural pattern . 10 1.7.9 Bug . 10 1.7.10 Business logic . 11 1.7.11 Maturity / Stability . 11 1.7.12 JSON . 12 2 Theoretical comparison 13 2.1 Considered frameworks . 13 2.1.1 Angular JS . 14 2.1.2 Knockout JS . 15 2.1.3 Backbone JS . 15 2.1.4 Ember JS . 16 2.1.5 Batman JS . 17 2.1.6 Meteor . 17 2.1.7 Summary . 18 2.2 Requirements . 19 2.2.1 Maintainability . 19 2.2.2 Maturity . 21 2.2.3 Performance (caching) . 23 2.2.4 Portability . 24 2.2.5 Testability . 25 2.2.6 Modularity . 26 2.2.7 Popularity . 27 2.3 Sample Application . 29 2.3.1 Application description . 29 2.3.2 Form management . 30 2.3.3 Data validation . 31 2.3.4 Navigation . 32 2.4 Conclusions . 33 2.4.1 Maintainability . 33 2.4.2 Maturity / Stability . 33 2.4.3 Performance (Caching) . 33 2.4.4 Portability . 34 2.4.5 Testability . 34 2.4.6 Modularity . 34 2.4.7 Popularity . 34 2.4.8 Form management . 35 2.4.9 Data validation . 35 2.4.10 Navigation . 35 2.5 Summary . 36 3 Implementation 37 3.1 Learning threshold . 37 3.1.1 Angular . 37 3.1.2 Knockout . 38 3.2 Documentation . 38 3.2.1 Angular . 38 3.2.2 Knockout . 39 3.3 Code comparison . 39 3.3.1 Data bindings . 39 3.3.2 Collections . 43 3.4 Conclusions . 46 4 Testing 48 4.1 Testing methodology . 48 4.1.1 Problems with testing client side applications . 48 4.1.2 Size of the client . 49 4.1.3 Speed in calculations . 49 4.1.4 Storing large data sets . 49 4.1.5 Runtime testing . 50 4.2 Test environment & affecting factors . 50 4.2.1 Benchmarking framework . 50 4.2.2 Test device and browser . 50 4.2.3 Test data . 51 4.3 Specific tests . 51 4.3.1 Data binding updates . 51 4.3.2 Loading data . 52 4.3.3 Sorting data . 52 4.3.4 Linked dependencies . 52 5 Results 54 5.1 Test results . 54 5.1.1 Clarification . 54 5.1.2 Results . 54 5.1.3 Conclusions . 58 5.2 Conclusions . 59 6 Structure 60 6.1 Defining a structure . 60 6.1.1 Comments on the structure . 61 6.2 Weaknesses . 62 6.2.1 Performance . 62 6.2.2 Data model . 62 6.2.3 Security . 62 7 Conclusion 63 7.1 Summary . 63 7.1.1 Socio-ethical effects . 63 7.2 Future work . 64 Appendices 65 List of Figures 65 List of Tables 66 Bibliography.