JavaScript GUI Frameworks Angular, React, and Vue 1 Page 2 History of Frontend GUIs 2 Page 3 History of Frontend GUIs • JavaScript Introduced in 1995

UI 04/2014 Titanium 12/2008 jQuery 08/2006 2005 2006 2007 2008 2009 JavaScript Frameworks Libraries: Timeline GUI Frameworks – Events

[PDF] GUI and Web Programming - Washington

HTML + JavaScript + DOM • A GUI toolkit, with some catches • DOM serves as model, view, and controller • Event handlers written in JavaScript • Visual output

[PDF] Documentation of a UI-Library used in Web Development - CORE

AngularJS framework, Typescript language and Bootstrap library Users should Page 9 9 have basic skills in HTML, CSS and Javascript The technologies

[PDF] Creating User Interfaces Using Web-based Technologies to - DiVA

28 nov 2017 · It is built using web technologies and the Javascript framework React together with a web socket server to render the graphical user interface in

[PDF] A Comparison of the Frontend JavaScript GUI Frameworks Angular

JavaScript GUI Frameworks Angular, React, and Vue 1 Page 2 History of Frontend GUIs 2 Page 3 History of Frontend GUIs • JavaScript Introduced in 1995

[PDF] JavaScript Frameworks - Marlene Hasslinger

Dazu werden drei bekannte JavaScript-Frameworks, Angular, React und Vue js A 1 User Interface of a JS-Framework-Benchmark Reference Application

[PDF] A Framework for Automated Testing of JavaScript Web Applications

ity for recording the GUI actions performed by a user in test scripts, for running a suite of tests, We present a new framework for automated testing of JavaScript

[PDF] Java-based Graphical User Interface Framework for In-Vehicle

feasibility of our approach and adequate graphical performance Keywords—In- Vehicle Infotainment, Automotive, Framework, Java, JavaScript, WebGL;

[PDF] Object Oriented Framework design in JavaScript - Computer and

His work was later adapted by programmers to object-oriented programming, by proposing 5 patterns to build GUI based application that comprises of “windows

History of Frontend GUIs!2

History of Frontend GUIs•JavaScript Introduced in 1995 •Standardized in 1997 by ECMA •DOM Manipulations •Plugins •jQuery in 2006 by John Resig!3

Component-Based Web Design!4

!5 !6 Component-Based Web Design•Brad Frost in 2013: "Atomic Design" •Improved Stability •Separation of Concerns •Reusability •Cleaner Design •Predictability!7

Framework Overview!8

Angular•Miško Hevery in 2009

•"Google Feedback" •Angular 2 in 2016 •TypeScript •Two Separate Documentations •High Modularity!9

Angular

// greeter.component.ts import { Component, Input } from '@angular/core'; import template from './greeter.component.html' @Component({ selector: 'greeter', template: template }) export class Greeter { @Input() name: string; }!10

React•Jordan Walke in 2011

•Facebook Newsfeed •Instagram •Open Sourced in 2013 •JSX •Data Management!11

React// greeter.jsx import React from 'react'; import ReactDOM from 'react-dom'; class Greeter extends React.Component { render() { return (

Hello, {this.props.name}

) } } export default Greeter;!12

Vue•Evan You in 2014

•"Improved Angular" •Single-File Components •Proprietary Templating Language •Scoped CSS •Progressive Frontend Framework!13

Vue !14

Virtual DOM•DOM Manipulations Expensive

•Additional Data Structure •Minimal Change-Sets •Not Necessarily More Performant •Implemented by React and Vue!15

ToDo List Application!16

!17 !18 !19 !20

DEMO!21

ToDo List Application•Getting to Know Each Framework •Test Frameworks under "Real-World" Conditions •Consists of 4 "Pages" •Reference Implementation •Implementation Order: Vue, React, Angular!22

Results!23

Rendering!24AngularReactVueComponent-Based✓✓✓Rendering TechniqueService WorkerVirtual DOMVirtual DOMContainer Components✓✓✓Directives✓✗✓

Dynamic Content!25AngularReactVueData Binding✓✓✓Two-Way Bindings✓✗✓Conditional RenderingDirectivesJavaScriptDirectivesEvent HandlersDirectivesJavaScriptDirectivesMessage PassingBottom-UpTop-DownBottom-Up

Routing!26AngularReactVueRouting Module✓Third Party✓Hash-Based✓✓✓History pushState✓✓✓Dynamic Segments✓✓✓Nested Routes✓✓✓

Documentation!27AngularReactVueGetting Started Guide✓✓✓User GuidesExtensiveBasicsBasicsAPI Documentation✓✓✓User ExperienceNeeds ImprovementGoodGreat

Overall Comparison!28AngularReactVueInitial Startup Time (ToDo List Application)6 h3 h2 hTotal Time Until Finished (ToDo List Application)17 h12 h10 hBeginner ExperiencePoorOkGreatTarget AudienceMedium-Large TeamsSmall-Medium TeamsSmall-Medium TeamsIntended Use-CaseSPAsSPAs, Small ComponentsSPAs, Small Components

Questions?!29

quotesdbs_dbs21.pdfusesText_27

[PDF] [PDF] A Comparison of the Frontend JavaScript GUI Frameworks Angular

[PDF] Choosing the Best JavaScript Framework - Esri