DOCSLIB.ORG

Cross-Platform UI Development: React Vs Svelte

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Cross-Platform UI Development: React Vs Svelte Miikka Oksanen Cross-platform UI Development: React vs Svelte Metropolia University of Applied Sciences Bachelor of Engineering Information and Communication Technology Bachelor’s Thesis 20 May 2021 Abstract Author: Miikka Oksanen Title: Cross-platform UI Development: React vs Svelte Number of Pages: 79 pages Date: 20 May 2021 Degree: Bachelor of Engineering Degree Programme: Information and Communication Technology Professional Major: Software Engineering Instructors: Simo Silander, Senior Lecturer Tommi Lundell, R&D Squad Group Leader at Nokia Petteri Hiisilä, Senior Interaction Designer at Nokia This thesis is part of a project done for Nokia. The goal was to gain insights about four UI frameworks - React, Svelte, React Native and Svelte Native - that will be used for determining which of the two native UI frameworks would be a better base for Nokia’s own native UI framework. Nokia’s native UI framework will be used to build customer applications for smartphones. Each of the four frameworks was used to implement a front-end application GeoHub. The implementation processes were conducted with the purpose of gaining information about the development experience that the UI frameworks offer. Each GeoHub version (excluding GeoHub Svelte Native) was developed to the point that they could be considered completed. The development experiences that the frameworks provided during the implementation of each GeoHub version were compared through five development experience attributes. React and React Native came out on top of their counterparts in this comparison. A major reason why Svelte and Svelte Native did not score as well as their counterparts was due to their immaturity. Thus, it was suggested that the progress of those technologies should be monitored. It was also discovered that the amount of code that could be reused between web and the native implementations of GeoHub was low. The reason for this was deemed to be the extensive use of third party npm packages and the difference in display sizes between desktop and smartphone displays. Keywords: cross-platform UI development, React, React Native, Svelte, Svelte Native Tiivistelmä Tekijä: Miikka Oksanen Otsikko: Järjestelmäriippumaton käyttöliittymäkehitys: React vs. Svelte Sivumäärä: 79 sivua Aika: 20.5.2021 Tutkinto: Insinööri (AMK) Tutkinto-ohjelma: Tieto- ja viestintätekniikka Ammatillinen pääaine: Ohjelmistotuotanto Ohjaajat: Lehtori Simo Silander R&D tiimin johtaja (Nokia) Tommi Lundell Vuorovaikutussuunnitelija (Nokia) Petteri Hiisilä Tämä opinnäytetyö on osa Nokialle tehtyä projektia. Projektin tavoitteena oli kerätä tietoa neljästä käyttöliittymäsovelluskehyksestä (React, Svelte, React Native, Svelte ja Svelte Native). Tätä tietoa käytetään apuna päättämään, kumpaa kahdesta natiivista sovelluskehyksestä (React Native, Svelte Native) kannattaa käyttää perustana Nokian omassa natiivissa sovelluskehyksessä. Nokian natiivia sovelluskehystä tullaan käyttämään asiakkaille suunnattujen älypuhelinsovellusten kehittämisessä. Kullakin sovelluskehyksellä toteutettiin GeoHub-käyttöliittymäsovellus. Näiden prosessien tavoitteena oli kerätä tietoa kunkin sovelluskehyksen tarjoamasta kehittämiskokemuksesta. Kolme neljästä GeoHub-sovelluksesta saatiin kehitetyiksi hyväksyttävään tilaan. ”Svelte Native”:lla kehitettyä sovellusta ei saatu valmiiksi. Sovelluskehyksien tarjoamia kehittämiskokemuksia vertailtiin viidessä osa- alueessa. React ja React Native pärjäsivät vastaosiaan paremmin vertailussa. Suuri syy, miksi Svelte ja Svelte Native eivät pärjänneet vertailussa, perustui niiden uutuuteen. Täten ehdotettiin, että näiden teknologioiden kehitystä olisi seurattava. Todettiin myös, että kierrätettävän koodin määrä verkko- ja natiivitoteutuksien välillä oli alhainen. Syyksi nähtiin laaja kolmannen osapuolen npm-pakkauksien käyttö sekä näyttökokojen eroavaisuus pöytäkone- ja älypuhelinnäytöissä. Avainsanat: järjestelmäriippumattomien käyttöliittymien kehitys, React, React Native, Svelte, Svelte Native Contents List of Abbreviations 1 Introduction 1 2 Cross-platform UI Development 1 2.1 Definition 2 2.1.1 Cross-platform Software 2 2.1.2 UI and Its Development 3 2.2 Benefits of Using Cross-platform UI Frameworks 6 2.3 Problems Related to Cross-platform UI Development 7 3 React - Reigning King of UI Frameworks 11 3.1 History of React 11 3.2 Concepts 12 3.2.1 React Components 13 3.2.2 Virtual DOM 14 3.3 Syntax 16 4 React Native - Smartphone Servant of React 20 4.1 Origin Story 20 4.2 Adding “Native” to React 22 4.3 Syntax 23 5 Svelte - Odd Challenger 26 5.1 Performant Svelte 26 5.2 Not Your Traditional Web UI Framework 29 5.3 Reactive UIs with Svelte 30 5.4 Syntax 31 5.4.1 Reactive Statements with “$” Label 32 5.4.2 Value Bindings 33 6 Svelte Native - Work in Progress 34 6.1 Svelte Native and NativeScript 34 6.2 Syntax 36 7 Development Process 40 7.1 Development Environment and Version Control 40 7.2 Application Idea 41 7.3 Designing GeoHub 42 7.4 GeoHub 44 7.4.1 Use Cases 44 7.4.2 GeoHub UI in Screenshots 47 7.5 Implementation Processes 54 7.5.1 Evaluating Official Framework Documentation 55 7.5.2 Utilizing npm Packages 59 7.5.3 Framework Setup 60 7.5.4 Interactive Map with Leaflet 61 7.5.5 Reverse Engineering Nokia’s React components 62 7.5.6 Material Design UI Component Libraries 63 7.5.7 Working with React and Svelte 66 7.5.8 Working with React Native and Svelte Native 68 8 Conclusion and Future Plans 69 References 74 List of Abbreviations UI: User interface. A two-way interaction layer between humans and machines. HTML: HyperText Markup Language. A text-based markup language for defining web page structures. CSS: Cascading Style Sheets. A text-based style sheet language for altering the appearance of a structure defined in a markup language. XML: Extensible Markup Language. A standardized, text-based markup language for writing human- and machine-readable documents. API: Application programming interface. A collection of related interfaces that defines how one can interact with the software or hardware that owns it. DOM: Document Object Model. A data representation of the structure and contents defined in a HTML or XML file. APK: Android package. An installation file containing a single Android application. AST: Abstract syntax tree. A data structure representing source code structure which is commonly used by compilers for analysing semantic correctness of source code. npm: Node package manager. A collection of JavaScript software tools that automate the process of installing, removing and updating JavaScript software packages. IDE: Integrated development environment. Software that provides tools for efficient software development. 1 1 Introduction Nokia is looking to create a mobile-app development framework to support their existing web app framework. The framework will be used to create mobile applications that support the presentation of Nokia’s products to potential customers. Additionally, the framework should either work with Nokia’s existing web application framework which was built using React or be good enough to warrant the modification of their web framework. This is because the mobile framework would also be used to make smartphone application versions of existing Nokia web applications. The task was to evaluate two native UI frameworks, React Native and Svelte Native, as potential candidates to act as a base for Nokia’s smartphone UI development framework. Consequently, the web UI frameworks React and Svelte needed to be examined as well as the native UI frameworks are based on them. The focus was to be on the developer experience these technologies provide. An ambitious plan was made to evaluate the frameworks. It consisted of building four similar applications, two web applications with React and Svelte and two smartphone applications with React Native and Svelte Native. During this process, the pros and cons of the technologies would be documented. Once completed, convincing arguments could be presented with documentation to back them up. 2 Cross-platform UI Development Before introducing each of the UI frameworks, it is good to have an understanding on where and how they can be used. This chapter also introduces more precise definitions for some of the more ambiguous terms used in the thesis. 2 2.1 Definition The term “cross-platform UI development” means the development of UIs that work on multiple platforms [1]. To properly define the term, it needs to be broken down into two parts: Cross-platform software and UI development. 2.1.1 Cross-platform Software Cross-platform software, by definition, refers to a piece of software that has been implemented in a way where it will work on multiple computing platforms. A computing platform is simply an environment where software can be run. Operating systems, web browsers and hardware are all examples of computing platforms. A single computing device typically contains multiple layers of computing platforms. For example, a piece of hardware runs an operating system which in turn runs a web browser. [1.] There are many ways to write cross-platform software. In the early days, developers implemented separate versions for each computing platform. This way of development was costly and slow as each version required developers that had knowledge of the inner workings of the underlying platform. Nowadays the process is much more efficient due to connecting interfaces that abstract the difference between computing platforms. [1.] In this thesis, the platforms in the term cross-platform are narrowed down to smartphone operating
Load more

Recommended publications
  • Marketing Cloud Published: August 12, 2021
    Marketing Cloud Published: August 12, 2021 The following are notices required by licensors related to distributed components (mobile applications, desktop applications, or other offline components) applicable to the services branded as ExactTarget or Salesforce Marketing Cloud, but excluding those services currently branded as “Radian6,” “Buddy Media,” “Social.com,” “Social Studio,”“iGoDigital,” “Predictive Intelligence,” “Predictive Email,” “Predictive Web,” “Web & Mobile Analytics,” “Web Personalization,” or successor branding, (the “ET Services”), which are provided by salesforce.com, inc. or its affiliate ExactTarget, Inc. (“salesforce.com”): @formatjs/intl-pluralrules Copyright (c) 2019 FormatJS Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    [Show full text]
  • What Is React Native? by High School Technology Services Myhsts.Org
    What is React Native? By High School Technology Services myhsts.org React Native • React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS. Abstracting React from the DOM DOM • Just to get things straight - DOM stands for Document Object Model and is an abstraction of a structured text. For web developers, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM. Cont.. Virtual DOM to abstract react Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions. • Each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created • This is where things get interesting. Updating the browser’s DOM is a three-step process in React. • Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
    [Show full text]
  • Building a Hybrid Application Using React Native
    BUILDING A HYBRID APPLICATION USING REACT NATIVE LAB-University of Applied Sciences Bachelor of Engineering Information Technology Spring 2020 Pauli Sairanen Abstract Author(s) Type of publication Published Sairanen, Pauli Bachelor’s thesis Spring 2020 Number of pages 60 Title of publication Building a hybrid application using React Native Name of Degree Bachelor of Information Technology Abstract The objective of this thesis was to create a hybrid application that could be used at various events organized by the customer. The subgoals of the thesis were formed based on the requirements the customer had for the application. Research was done in order to demonstrate the different technologies used in mobile development as well as pros and cons of using either native, web or hybrid technologies for development. React Native was used as the development platform in this thesis. Further research was conducted in order to gain a better understanding of the operating principles of React Native and React, as well as other technologies required in the development process. The process of creating a hybrid application consisted of different work phases. The purpose of each phase was to implement the required features for the application in an organized manner. As a result, a working hybrid application was created according to the requirements specifications. The application was released on Google Play store and used at the event organized by the customer. Keywords React, React Native, hybrid application, mobile development, JavaScript Tiivistelmä Tekijä(t) Julkaisun laji Valmistumisaika Sairanen, Pauli Opinnäytetyö, AMK Kevät 2020 Sivumäärä 60 Työn nimi Building a hybrid application using React Native Tutkinto Insinööri (AMK) Tiivistelmä Opinnäytetyön tarkoituksena oli luoda hybridimobiilisovellus, jota voidaan käyttää erilaisissa asiakkaan järjestämissä tilaisuuksissa.
    [Show full text]
  • State of Frontend 2020 Is the Biggest Report out There Focused Solely on Frontend Development
    1 Experts Yan Cui Tim Neutkens AWS Serverless Hero Head of Next.js at Vercel Marek Gajda Guillermo Rauch CTO of The Software House CEO of Vercel Jessica Jordan Tomek Rudzki Developer Advocate at .cult Head of R&D at Onely Luca Mezzalira Dylan Schiemann VP of Architecture at DAZN CEO of Living Spec Rocky Neurock Bartosz Skowroński Engineering Team Lead Head of Design at Honeypot.io at The Software House 2 Authors Patryk Mamczur Editor in Chief Marcin Gajda Joanna Swoboda Tomasz Kajtoch Magdalena Habarta Wiktor Toporek Kamil Głowiński Andrzej Wysoczański Publication Design Technical Consulting 3 Table of contents Developers 8 01 Everyday frontend development according to 4,500 experts Frameworks 12 02 React is king. But who’s the contender? Hosting 18 03 Traditional DCs, cloud giants and frontend-focused hosting Jamstack 24 04 Ecstatic about static Micro frontends 28 05 Do we need microservice revolution in frontend development? Search engine optimization 32 06 It seems that you don’t care about SEO. Here’s why you should Application accessibility 07 Making the interface friendly for every user 36 4 Development teams 40 08 Frontend development? It’s a team sport Design 44 09 Striving for close collaboration between designers and developers Quality assurance 48 10 Software testing as the cornerstone of software development Future of frontend 52 11 State of Frontend 2021? 5 How many frontend developers took part in the survey? Total answers: 4500 1082 Western Europe 941 North America 333 Central and 6 South America 107 Other 1581 Eastern Europe 1082 Western Europe 303 South and East Asia 73 Middle East 7 01.
    [Show full text]
  • Facebook Messenger Engineering
    SED 1037 Transcript EPISODE 1037 [INTRODUCTION] [00:00:00] JM: Facebook Messenger is a chat application that millions of people use every day to talk to each other. Over time, Messenger has grown to include group chats, video chats, animations, facial filters, stories and many more features. Messenger is a tool for utility as well as for entertainment. Messengers used on both mobile and desktop, but the size of the mobile application is particularly important. There are many users who are on devices that do not have much storage space. As Messenger has accumulated features, the iOS codebase has grown larger and larger. Several generations of Facebook engineers have rotated through the company with responsibility of working on Facebook Messenger, and that has led to different ways of managing information within the same codebase. The iOS codebase had room for improvement and Project LightSpeed was a project within Facebook that had the goal of making Messenger on iOS much smaller. Mohsen Agsen and is an engineer with Facebook and he joins the show to talk about the process of rewriting the Messenger app. This is a great deep dive into how to rewrite a mission- critical iOS application, and this team became very large at a certain point within Facebook. It's a great story and I hope you enjoy it as well. [SPONSOR MESSAGE] [00:01:27] JM: When I’m building a new product, G2i is the company that I call on to help me find a developer who can build the first version of my product. G2i is a hiring platform run by engineers that matches you with React, React Native, GraphQL and mobile engineers who you can trust.
    [Show full text]
  • Hacking with React Get Started with React, React Router, Jest, Webpack, ES6 and More with This Hands-On Guide
    Hacking with React Get started with React, React Router, Jest, Webpack, ES6 and more with this hands-on guide. Paul Hudson © 2016 Paul Hudson This book is dedicated to my wife, who has been endlessly patient with me while I write and re-write this book. No matter how hard I work, she works just as hard and has always been there for me. CONTENTS Contents Welcome! .............................................. 1 Begin at the Beginning: Chapter One .............................. 3 The Importance of using Webpack with React ......................... 9 Introduction to JSX ........................................ 12 Importing React Components using ES6 ............................ 14 What are React Props? ...................................... 16 Generating Random Values for Our Page ............................ 18 How to Write if/else Conditional Statements in JSX ..................... 20 Using JSX to Render Several Elements at Once ........................ 23 Handling Events with JSX: onClick ............................... 25 State vs Props in React ...................................... 28 Changing a React Component’s State with setState() ..................... 30 State and the Single Source of Truth .............................. 32 Rendering an Array of Data with map() and JSX ....................... 33 Cleaning up and Preparing for a Real Project ......................... 37 Fetching Ajax Data from GitHub using SuperAgent ...................... 40 Converting GitHub’s JSON into Meaningful JSX ....................... 42 Time for a Task:
    [Show full text]
  • REACT NATIVE in INSTAGRAM Yixin Wan — Feb 6, 2018 WHY REACT NATIVE? Developer Velocity
    REACT NATIVE IN INSTAGRAM Yixin Wan — Feb 6, 2018 WHY REACT NATIVE? Developer velocity • Developer velocity is a defining value of Instagram’s mobile engineering. • React Native allowed product teams to ship features faster to both iOS and Android apps through code sharing and higher iteration speeds. https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 2 PAYMENTS CHECKOUT FLOW Highlights • 2 JS engineers finished the development in 4 month on both iOS and Android • 98% iOS and Android code sharing SHOPPING AT&T 1:20 PM AT&T 1:20 PM AT&T 1:20 PM glossier glossier glossier CTA and header update thumbnail-based navigation collapsible description 4 NOTIFICATION SETTINGS Highlights • Metrics neutral in # of notifications sent and crash rate • Looks much better than the old WebView • 92% iOS and Android code sharing COMMENT MODERATION Highlights • 85% iOS and Android Code sharing • Developed by a non-mobile developer with JS experience • Implemented in the span of one release cycle LEAD GEN ADS Highlights • 87% iOS and Android Code sharing • Same React Native code is used for both Facebook and Instagram 7 POST PROMOTE Highlights • 99% Code sharing • Improved Time to Interact from ~7 seconds in original web view to ~3 seconds for React Native version • Positive +3.9% increase in ads creation CHECKPOINTS Highlights • 97% Code sharing CHALLENGES And how to address them • App Size and Android Methods Count • Ended up selectively pulling in the parts needed and re-write other implementations, adding ~3500 methods and 1~2 MB size increase • Start up overhead mostly caused by having to inject the JavaScript bundle into JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers.
    [Show full text]
  • React-Native.Pdf
    react-native #react- native Table of Contents About 1 Chapter 1: Getting started with react-native 2 Remarks 2 Examples 2 Setup for Mac 2 Setup for Windows 14 Setup for Linux (Ubuntu) 15 Start the terminal and run the following commands to install nodeJS: 15 If node command is unavailable 15 Alternatives NodeJS instalations: 16 check if you have the current version 16 Run the npm to install the react-native 16 Android SDK or Android Studio 16 Android SDK e ENV 16 Example app init 17 Obs: Always check if the version on android/app/build.gradle is the same as the Build Tool 17 Open Android AVD to set up a virtual android. Execute the command line: 18 Chapter 2: Android - Hardware Back Button 19 Examples 19 Detect Hardware back button presses in Android 19 Example of BackAndroid along with Navigator 19 Example of Hardware back button detection using BackHandler 20 Hardware back button handling using BackHandler and Navigation Properties (without using d 20 Chapter 3: Animation API 22 Examples 22 Animate an Image 22 Chapter 4: Command Line Instructions 23 Examples 23 Check version installed 23 Upgrade existing project to latest RN version 23 Logging 23 Initialize and getting started with React Native project 23 Start React Native Packager 24 Add android project for your app 24 Chapter 5: Components 25 Examples 25 Basic Component 25 Stateful Component 25 Stateless Component 25 Chapter 6: Create a shareable APK for android 27 Introduction 27 Remarks 27 Examples 27 Create a key to sign the APK 27 Once the key is generated, use it to generate
    [Show full text]
  • The Mobile Phone That Lets You Cheat at ANY Card Game: Handset Has
    2/18/2018 The mobile phone that lets you cheat at ANY card game | Daily Mail Online Feedback Monday, Feb 19th 2018 3AM 47°F 6AM 45°F 5­Day Forecast Home U.K. News Sports U.S. Showbiz Australia Femail Health Science Money Video Travel Columnists DailyMailTV Latest Headlines Science Pictures Coupons Login Ad Hiring a Property Manager? - Now is the Perfect Time Save Yourself A Headache. Find A Local Certied Property Manager Today! VISIT SITE The mobile phone that lets you cheat Site Web Enter your search at ANY card game: Handset has secret sensors to read cards Researcher shares a cheating device that is almost impossible to detect Eli Bursztein purchased what looks like a Samsung smartphone for $1,300 Has a hidden camera and IR LEDs on the side to read each card in the deck Sequences of black spots created by the IR shows the suit and value Everything is then displayed in an app on the device for players to read By STACY LIBERATORE FOR DAILYMAIL.COM PUBLISHED: 17:09 EST, 24 October 2016 | UPDATED: 18:14 EST, 24 October 2016 10 3 shares View comments Counting cards, hand mucking and bottom dealing are all common ways to cheat while playing card games, but are also easily detected. Now, a Google researcher has revealed a gadget that looks and functions like a smartphone - but with software and hardware designed for cheating at cards. An app reads markings on each card with a hidden camera, and can analyse the patterns to determine the card’s suit and value to help the player decide their next move.
    [Show full text]
  • Andrew Keats
    Andrew Keats Genera Experienc Nationality British Aug 2019 - May 2020 Front-end Team Lead Date of Birth 12 November 1983 Toggle, Led delivery of a greenfield 187 Wardour Street, React-TypeScript SPA trading insight Soho app; complex data-driven UI using D3. Contac London Front-end Architect. In charge of a Telephone 07931998868 W1F 8ZB team of front-end developers; defined Email a [email protected] requirements, managed workloads. Defined best practices and set-up automated linting, unit tests and code Skill & Technologie quality processes. Responsible for CI Client & Front-end Development pipeline in GitLab, using Docker, Web Browser: TypeScript/JavaScript (ES5-2017, OO & NodeJS, and Kubernetes. Functional); Svelte, React, Aurelia, Backbone (SPA frameworks); Ramda, Lo-Dash, jQuery, (utility libraries); CSS, Oct 2018 – Aug 2019 Lead Front-end Developer SASS, PostCSS; HTML5 & Markdown; XML & XSLT. Equal Experts, Delivering a greenfield front-end service Desktop and Mobile: C#; .Net WinForms; Unity. 30 Brock St, for John Lewis, using GCP, Docker, Build tools: Parcel; Rollup; Webpack; Gulp; Grunt; Browserify. Kings Cross, NodeJS, isomorphic React with ES6 Test tools: RTL, Enzyme; Jest, Mocha, Karma, Jasmine; Cypress, London and modular SCSS. YAML driven CI. Selenium, ScalaTest.. NW1 3FG TDD using Jest; ATs using Kotlin and ChromeDriver. Back-end Development Server-side UIs: NodeJS with Polka/Express on GCP/Heroku, Apr 2017 – Sep 2017 Senior Front-end Developer SSR Svelte/React; Use of Scala with the Play framework & Clarksons Platou, Helping to deliver the front-end of a some Java; Experience with MS .Net (2-4), C#, use of DNN Commodity Quay, real-time, global shipping brokerage CMS and Episerver CMS; Experience with the Django St Katharine's & platform using TypeScript, Aurelia, AG framework; Some PHP (Wordpress & Laravel).
    [Show full text]
  • Markus Hatvan, Bsc
    Markus Hatvan, BSc Date of birth: 10th December 1990 Address: St.-Veit-Gasse 20, A-1130 Vienna Nationality: Austria Phone: +436647986649 E-Mail: [email protected] Website: https://markushatvan.com Work experience 1.4.2019 - 30.4.2020 Full Stack Developer at ecosio (Full-time) Tech-Stack: React, Redux, Semantic UI, Storybook, Java Spring, ElasticSearch, MongoDB, Testcafe, Slack, Gitlab, Kibana, Swagger UI 7.1.2019 - 31.3.2019 Frontend Developer at Celum (Full-time) Tech-Stack: Angular, Typescript, RxJS, Material UI, Jasmine, Java Spring, Teams, SVN, Jenkins CI, Swagger UI 1.12.2016 - 31.8.2018 Frontend Developer at Waytation (Full-time) Tech-Stack: Angular, Typescript, RxJS, Bootstrap, SCSS, Google Charts, Protractor, JIRA, Confluence, Gitlab 3.10.2016 - 2.1.2017 Frontend Developer at ChillBill (Internship) Tech-Stack: HAML, SCSS, MeteorJS, React, Middleman, Slack, Github, Waffle.io Projects 26.04.2021 - present Development of website for MediaMarktSaturn Tech-Stack: React, Typescript, GraphQL, Styled Components, Node.js, Contentful CMS, Storybook, Jira, Confluence 16.03.2021 - 31.05.2021 Website Relaunch for Denovo Tech-Stack: React, Gatsby, Typescript, GraphQL, Tailwind UI, Node.js, Contentful CMS, Hubspot API, Usercentrics, Workable API, Google Tag Manager, Heroku, Jira 14.03.2021 - 29.03.2021 Technical writer for DebugBear Writing documentation about Google Web Vitals topics like “Time To Interactive” and “First Input Delay” 01.03.2021 - 10.03.2021 Development of involve.me for involve.me Tech-Stack: VueJS, JQuery, Laravel 01.02.2021
    [Show full text]
  • Developing an Information System Solution with React
    DEVELOPING AN INFORMATION SYSTEM SOLUTION WITH REACT Case: FPT Information System (FIS) LAB UNIVERSITY OF APPLIED SCIENCES LTD Degree programme in Business Information Technology Bachelor’s Thesis Autumn 2020 Viet Linh Vu Abstract Author Type of publication Published VU, VIET LINH Bachelor’s Thesis, UAS Autumn 2020 Number of pages Supervisor 39 Aki Vainio Title of publication Developing an Information System solution with React Case: FPT Information System (FIS) Name of Degree Bachelor of Business Administration, Business Information Technology Abstract The subject of front-end JavaScript frameworks has been a popular topic for discussion within the IT community recently. Over the recent years there has been a numerous number of frameworks released on the market. These frameworks varied in terms of features and performances, and they all offer various options and benefits for front-end development, which can be challenging for new developers to choose the right framework for their project. The research presented in this thesis focused on the React JavaScript library, developed by Facebook. Multiple articles and studies regarding React were used to demonstrate the unique features and the benefits as well as drawbacks of the library. Furthermore, the thesis also covered some additional theory on two other equally popular and frequently used frameworks, Angular and Vue, to provide a comparison of these frameworks. A case study was also used for this research to provide a practical example of how React was implemented for the development of an IT solution. The thesis went through a detailed process of describing the usage of React in this case study to provide an evaluation of how React affected the project development.
    [Show full text]