A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in...
Transcript of A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in...
![Page 1: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/1.jpg)
A Comparison of the Frontend JavaScript GUI Frameworks
Angular, React, and Vue
!1
![Page 2: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/2.jpg)
History of Frontend GUIs
!2
![Page 3: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/3.jpg)
History of Frontend GUIs
• JavaScript Introduced in 1995
• Standardized in 1997 by ECMA
• DOM Manipulations
• Plugins
• jQuery in 2006 by John Resig
!3
![Page 4: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/4.jpg)
Component-Based Web Design
!4
![Page 5: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/5.jpg)
!5
![Page 6: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/6.jpg)
!6
![Page 7: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/7.jpg)
Component-Based Web Design
• Brad Frost in 2013: „Atomic Design“
• Improved Stability
• Separation of Concerns
• Reusability
• Cleaner Design
• Predictability
!7
![Page 8: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/8.jpg)
Framework Overview
!8
![Page 9: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/9.jpg)
Angular• Miško Hevery in 2009
• „Google Feedback“
• Angular 2 in 2016
• TypeScript
• Two Separate Documentations
• High Modularity
!9
![Page 10: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/10.jpg)
Angular<!-- greeter.component.html --> <h1 class="greeting">{{ this.name }}</h1>
// 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
![Page 11: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/11.jpg)
React• Jordan Walke in 2011
• Facebook Newsfeed
• Open Sourced in 2013
• JSX
• Data Management
!11
![Page 12: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/12.jpg)
React// greeter.jsx import React from 'react'; import ReactDOM from 'react-dom';
class Greeter extends React.Component { render() { return ( <h1 className="greeting"> Hello, {this.props.name} </h1> ) } }
export default Greeter;
!12
![Page 13: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/13.jpg)
Vue• Evan You in 2014
• „Improved Angular“
• Single-File Components
• Proprietary Templating Language
• Scoped CSS
• Progressive Frontend Framework
!13
![Page 14: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/14.jpg)
Vue<!-- greeter.vue --> <template> <h1 class='greeting'>Hello, {{ name }}</h1> </template>
<script> export default { props: ['name'] } </script>
<style scoped> h1.greeting { text-decoration: underline; } </style>
!14
![Page 15: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/15.jpg)
Virtual DOM
• DOM Manipulations Expensive
• Additional Data Structure
• Minimal Change-Sets
• Not Necessarily More Performant
• Implemented by React and Vue
!15
![Page 16: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/16.jpg)
ToDo List Application
!16
![Page 17: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/17.jpg)
!17
![Page 18: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/18.jpg)
!18
![Page 19: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/19.jpg)
!19
![Page 20: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/20.jpg)
!20
![Page 21: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/21.jpg)
DEMO
!21
![Page 22: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/22.jpg)
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
![Page 23: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/23.jpg)
Results
!23
![Page 24: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/24.jpg)
Rendering
!24
Angular React Vue
Component-Based ✓ ✓ ✓
Rendering Technique Service Worker Virtual DOM Virtual DOM
Container Components ✓ ✓ ✓
Directives ✓ ✗ ✓
![Page 25: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/25.jpg)
Dynamic Content
!25
Angular React Vue
Data Binding ✓ ✓ ✓
Two-Way Bindings ✓ ✗ ✓
Conditional Rendering Directives JavaScript Directives
Event Handlers Directives JavaScript Directives
Message Passing Bottom-Up Top-Down Bottom-Up
![Page 26: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/26.jpg)
Routing
!26
Angular React Vue
Routing Module ✓ Third Party ✓
Hash-Based ✓ ✓ ✓
History pushState ✓ ✓ ✓
Dynamic Segments ✓ ✓ ✓
Nested Routes ✓ ✓ ✓
![Page 27: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/27.jpg)
Documentation
!27
Angular React Vue
Getting Started Guide ✓ ✓ ✓
User Guides Extensive Basics Basics
API Documentation ✓ ✓ ✓
User Experience Needs Improvement Good Great
![Page 28: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/28.jpg)
Overall Comparison
!28
Angular React Vue
Initial Startup Time (ToDo List Application) 6 h 3 h 2 h
Total Time Until Finished
(ToDo List Application)17 h 12 h 10 h
Beginner Experience Poor Ok Great
Target Audience Medium-Large Teams
Small-Medium Teams
Small-Medium Teams
Intended Use-Case SPAs SPAs, Small Components
SPAs, Small Components
![Page 29: A Comparison of the Frontend JavaScript GUI Frameworks ...€¦ · Angular • Miško Hevery in 2009 • „Google Feedback“ • Angular 2 in 2016 • TypeScript ... Angular React](https://reader030.fdocuments.in/reader030/viewer/2022041023/5ed556edcfcb033b55255c61/html5/thumbnails/29.jpg)
Questions?
!29