Software Transition from Flash to HTML5
Total Page:16
File Type:pdf, Size:1020Kb
MASARYK UNIVERSITY FACULTY OF INFORMATICS Software transition from Flash to HTML5 MASTER’S THESIS Marián Rusnák Brno, 2016 Declaration I hereby declare that this thesis is my original authorial work, which I have completed independently. All sources, references and literature used or ex- cerpted during elaboration of this work are properly cited and listed in complete reference with links to the original sources. Advisor: doc. RNDr. Tomáš Pitner, PhD. v Acknowledgement I would like to thank Peter Krafčík and Martin Klimo from Interaktívna škola s.r.o. for the opportunity to work for them and for making this thesis possible. Next, I would like to thank my advisor, doc. Tomáš Pitner for his patience, for his valuable advices and for his positive attitude through my studies at the faculty. Special thanks go to Dušan Piroh, my colleague and my brother-in- law, for mentoring me throughout my entire life and for initiating my inter- est in software development and computer science. My gratitude also goes to my co-workers from AOL in London for their inspiration and support. Specifically, I would like to thank to Samuel Adu for all his effort in my English language revision. Big thank goes to my parents and my family for pushing me in writ- ing of this thesis as well as the entire studies. After all, I would like to thank all the influencers in the software de- velopment industry, all the smart people around me and my teachers for their contribution to my knowledge and skills required to finish this thesis. vii Abstract The aim of this thesis is to describe the process of manual transition of soft- ware from Adobe Flash technology to HTML5. Alf software, interactive tests creator and player, a non-trivial application made in Flash, is the main area of focus. The output of this thesis is a new HTML5 version developed from scratch, as a replacement for the former Flash one. The thesis describes its development from requirements specification to implementation and vali- dation. It also includes a comparison of Flash and standard web development workflows. Apart from HTML and other web technologies, which are mentioned in the thesis, it also outlines other development options to support the growing mobile platforms, including specifics for Flash. ix Keywords Alf software, Adobe Flash, HTML5, web, mobile, Single-Page Application, animations, interactive, ECMAScript 2015 xi Table of Contents 1 Introduction ..................................................................................................... 1 2 Alf Software ..................................................................................................... 3 2.1 Overview .................................................................................................... 3 2.2 Technologies............................................................................................... 6 2.2.1 Adobe Flash ........................................................................................ 6 2.2.2 Desktop Application .......................................................................... 8 2.2.3 Mobile Support Limitations ............................................................. 8 3 Options for Supporting Mobile Devices .................................................. 11 3.1 Native Applications ................................................................................ 11 3.2 Web Applications .................................................................................... 12 3.2.1 Mobile UI Frameworks ................................................................... 15 3.2.2 Adobe Edge ....................................................................................... 16 3.2.3 Google Web Designer ...................................................................... 16 3.3 Hybrid Applications ............................................................................... 16 3.3.1 PhoneGap .......................................................................................... 17 3.4 Native Cross-platform Approach ......................................................... 17 3.4.1 Xamarin ............................................................................................. 18 3.4.2 Appcelerator Titanium .................................................................... 18 3.4.3 NativeScript ...................................................................................... 18 3.5 Flash-based Approaches ........................................................................ 19 3.5.1 Adobe AIR......................................................................................... 19 3.5.2 Swiffy ................................................................................................. 19 3.5.3 Mozilla Shumway ............................................................................ 20 3.5.4 HTML5 Canvas Document ............................................................. 20 3.6 Summary and Conclusion ...................................................................... 20 4 Web Technologies ......................................................................................... 23 4.1 HTML5 ...................................................................................................... 23 4.1.1 Canvas ............................................................................................... 24 4.1.2 Audio and Video .............................................................................. 24 xiii TABLE OF CONTENTS 4.1.3 Other Features ................................................................................... 25 4.2 CSS3 ........................................................................................................... 25 4.2.1 Transformations ................................................................................ 25 4.2.2 Transitions ......................................................................................... 26 4.2.3 Animations ........................................................................................ 26 4.2.4 Other Features ................................................................................... 27 4.3 SVG ............................................................................................................ 27 4.4 JavaScript................................................................................................... 28 4.4.1 Modules.............................................................................................. 29 4.4.2 ECMAScript 2015 .............................................................................. 29 4.4.3 Single-Page Application Frameworks ........................................... 33 4.4.4 Testing ................................................................................................ 34 4.5 Build ........................................................................................................... 35 5 New Alf HTML5 Application ..................................................................... 37 5.1 Requirements ............................................................................................ 37 5.1.1 Functional .......................................................................................... 37 5.1.2 Non-functional .................................................................................. 38 5.1.3 Browser Support ............................................................................... 38 5.2 Analysis and Design ................................................................................ 40 5.2.1 Client-side Frameworks Analysis .................................................. 41 5.2.2 Prototyping ........................................................................................ 41 5.2.3 Architecture ....................................................................................... 43 5.2.4 Single-Page Application .................................................................. 46 5.3 Implementation ........................................................................................ 48 5.3.1 Back-end ............................................................................................. 48 5.3.2 Front-end ........................................................................................... 49 5.4 Comparison to Flash Development ....................................................... 59 5.4.1 User Interface .................................................................................... 59 5.4.2 Animations ........................................................................................ 59 5.4.3 Drag & Drop ...................................................................................... 60 5.4.4 Audio .................................................................................................. 60 5.4.5 Optimization ..................................................................................... 60 xiv TABLE OF CONTENTS 5.4.6 Compatibility and debugging ........................................................ 60 6 Conclusion ...................................................................................................... 63 6.1 Areas for Further Development ............................................................ 63 References ............................................................................................................... 65 Appendix A: Screenshots of all the Alf Tasks............................................ 73 Appendix B: Source Code .............................................................................