Was darf’s denn sein: Angular, React, Vue.js – Über Frontend-Entwicklung im Jahr 2022 + 2023
•
0 gefällt mir•13 views
In der Welt von JavaScript gibt es eine Vielzahl von Bibliotheken und Frameworks. Aber es gibt drei Frameworks für die Erstellung von Webanwendungen, von denen jeder Frontend-Entwickler schon einmal gehört hat: Angular, React und Vue.js. Angular ist ein vollwertiges Frontend-Framework, React ist eine UI-Bibliothek und Vue.js nennt sich selbst ein progressives Framework. Sie können fast austauschbar verwendet werden, um Front-End-Anwendungen zu erstellen, aber sie sind nicht zu 100 Prozent gleich, daher ist es sinnvoll, sie zu vergleichen und ihre Unterschiede zu verstehen. Im Vortrag geht es um die Architektur der Frameworks und wir betrachten außerdem die Aspekte Basis-Technologien, Popularität, Ökosystem, Lernkurve und versuchen einen Blick in die Zukunft der JavaScript-Frameworks.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Mehr von Peter Hecker
Mehr von Peter Hecker (9)
Was darf’s denn sein: Angular, React, Vue.js – Über Frontend-Entwicklung im Jahr 2022 + 2023
- 1. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Peter Hecker, HECKER CONSULTING Was darf’s denn sein Angular, React, Vue.js – Über Frontend-Entwicklung im Jahr 2022 © HECKER CONSULTING | ☞ https://www.hco.de | ✉︎ info@hco.de | ☏ 0211 / 542 480 40
- 2. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Angular, React, Vue.js - Frontend-Entwicklung 2022 Die Themen Einführung Popularität Leistung Architektur + Technologien Ökosystem Lernkurve Zukunft
- 8. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Quelle: https://www.youtube.com/watch?v=ztspvPYybIY JSCONF BERLIN, NOVEMBER 7 & 8, 2009 THE EUROPEAN JAVASCRIPT CONFERENCE Node.js by Ryan Dahl
- 34. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Quelle: https://de.wikipedia.org/ Angular "The modern web developer’s platform" React "A JavaScript library for building user interfaces" Vue.js "The Progressive JavaScript Framework"
- 57. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. https://perf-track.web.app/
- 64. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Architektur + Technologien
- 65. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. MVC, MVP, MVVM, MV* (*=what-ever) "Separate ALL the Concerns!" Quelle: https://khalilstemmler.com/articles/client-side-architecture/architecture
- 66. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Quelle: https://angular.io/guide/glossary, https://reactjs.org/docs/glossary.html, https://vuejs.org/api/ Die Welt von Angular Die Welt von React Die Welt von Vue.js Bindings Components Dependency Injection Directives Input Lifecycle Modules Observables Output Pipes Projection Provider Router Services Template Children Class Component Elements Functional Component Hooks JSX Lifecycle Props State Bindings Components Computed Properties Directives Events Lifecycle Hooks Props Single File Component Slots Watchers
- 67. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Was ist eigentlich eine "Component"? Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
- 68. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. UI/UX + Logic in Components Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
- 72. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. UI/UX - Styling, Libraries, Frameworks Moderne Ober fl ächen mit Angular, React, Vue.js 1. DIY (Do-It-Yourself) CSS, SASS/SCSS, Less 2. CSS-Frameworks Bootstrap, Tailwind, Material Design... 3. UI/UX-Components Bootstrap, Material Design, Primefaces... https://dev.to/haycuoilennao19/34-ui-libraries-for-react-vue-and-angular-525l https://dev.to/alexmercedcoder/ultimate-2021-list-of-css-frameworks-and-component- libraries-for-angular-react-vue-and-svelte-18p
- 73. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. State - Management in Components Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
- 74. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. State Container - Redux und Co. Moderne Zustandsverwaltung Quelle: https://redux.js.org/tutorials/essentials/part-1-overview-concepts
- 76. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. State-Container für Angular State-Container für React State-Container für Vue.js NgRx https://ngrx.io/ NGXS https://www.ngxs.io/ Redux Tookit https://redux-toolkit.js.org/ Recoil https://recoiljs.org/ Akita Jotai MobX React Hooks Rematch Zustand ... VueX https://vuex.vuejs.org/ Pinia https://pinia.vuejs.org/ https://openbase.com/categories/js/best-react-state-management-libraries https://github.com/olegrjumin/awesome-react-state-management
- 77. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. API in Components Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
- 78. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. REST-API und Angular REST-API und React REST-API und Vue.js HttpClient https://angular.io/guide/http XHR, Fetch https://reactjs.org/docs/faq-ajax.html Axios https://axios-http.com/ React Query https://react-query.tanstack.com/ XHR, Fetch Axios https://axios-http.com/ Vue Query https://github.com/DamianOsipiuk/vue- query - GraphQL und Angular - - GraphQL und React - - GraphQL und Vue.js - Apollo Angular https://apollo-angular.com/ Apollo Client for React https://www.apollographql.com/docs/react/ Vue Apollo https://apollo.vuejs.org/
- 79. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Routing und Modularisierung Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
- 80. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Routing in Angular Routing in React Routing in Vue.js Angular Router https://angular.io/guide/routing-overview Imperativ (Prozeduren) => Code React Router https://reactrouter.com/ Deklarativ => Tags Vue Router https://router.vuejs.org/ Imperativ (Prozeduren) => Code
- 81. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Was ist eigentlich ein "Modul"? Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
- 82. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Modularisierung in Angular Modularisierung in React Modularisierung in Vue.js JavaScript-Module = Dateien mit Code Angular-Module = Klassen mit Metadaten "Feature"-Module = Ordner als Container Lazy-Loading über Router Angular nutzt Dependency Injection(DI) JavaScript-Module = Dateien mit Code "Feature"-Module = Ordner als Container Lazy-Loading über React.lazy JavaScript-Module = Dateien mit Code "Feature"-Module = Ordner als Container Lazy-Loading über Router
- 84. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Backend - Projekte Angular, React, Vue.js als Basis für Backend-Apps NestJS https://nestjs.com/ Next.js https://nextjs.org/ Nuxt https://nuxtjs.org/
- 85. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Hybrid Apps Angular, React, Vue.js als Basis für Hybrid-Apps Ionic https://ionicframework.com/ Ionic https://ionicframework.com/ Ionic https://ionicframework.com/
- 86. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Hybrid Apps Angular, React, Vue.js als Basis für Hybrid-Apps Ionic https://ionicframework.com/ Ionic https://ionicframework.com/ Quasar https://quasar.dev/
- 87. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Native Apps Angular, React, Vue.js als Basis für Native-Apps NativeScript https://nativescript.org/ NativeScript https://nativescript.org/ NativeScript https://nativescript.org/
- 88. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Native Apps Angular, React, Vue.js als Basis für Native-Apps Nativescript https://nativescript.org/ React Native https://reactnative.dev/ NativeScript https://nativescript.org/
- 89. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Mobile Apps - Empfehlung Angular, React, Vue.js als Basis für Mobile-Apps Ionic https://ionicframework.com/ React Native https://reactnative.dev/ Ionic https://ionicframework.com/
- 96. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. • Angular hat vor kurzem den Ivy Compiler eingeführt. Er verkürzt die Build-Zeiten, optimiert die Assets, ermöglicht schnellere Tests und verbessert allgemein die Erfahrung der Entwickler. • Das Angular-Team verö ff entlicht zweimal im Jahr größere Updates, die neue Funktionen enthalten oder das Framework einfach nur an neue Browser-Versionen anpassen. • Die wöchentlichen Downloads von Angular sind seit letztem Jahr um etwa 50 Prozent gestiegen, es ist also immer noch ein beliebtes Projekt. Angular
- 97. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. • React v17.0 wurde verö ff entlicht, aber überraschenderweise enthält es keine neuen Funktionen für Entwickler. • Die wichtigste Änderung ist, dass diese neue Version es einfacher macht, React selbst zu aktualisieren. • Dieses Update macht React zu einer langfristigen Wahl, weil es einfacher ist, mit neuen Versionen auf dem Laufenden zu bleiben. • React ist seit letztem Jahr bei den wöchentlichen npm-Downloads um 44 Prozent gewachsen. In absoluten Zahlen ist es immer noch das meist heruntergeladene der drei Projekte. React
- 98. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. • Vue,js 3 wurde im September 2020 verö ff entlicht und behebt viele gravierende Probleme, die Vue.js 2 in großen Projekten hat. Es führt die Composition API ein, die von React Hooks inspiriert ist und die Wiederverwendung von Logik über Komponenten hinweg erleichtert. • Das gesamte Projekt wurde in TypeScript umgeschrieben, was die TypeScript-Unterstützung in neuen Vue.js-Projekten verbessert und das Projekt gleichzeitig wartbarer macht. • Vue.js 3 ist ein dringend benötigtes Upgrade und macht Vue.js besser geeignet für große Projekte. • Die wöchentlichen Downloads von Vue.js sind seit letztem Jahr um 87 Prozent gestiegen, was Vue.js relativ gesehen zum am schnellsten wachsenden Framework macht. Wenn Vue.js diese Wachstumsrate beibehalten kann, dann wird es sicherlich bald Angular überholen. Vue.js
- 99. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Von einem objektorientierten Programmierhintergrund kommend Starker Fokus auf Verwendung von TypeScript Betonung von Richtlinien und Struktur in Projekten Starker Fokus auf Verwendung von JavaScript Großes Ökosystem Hohe Bedeutung von Flexibilität Geringer anfänglicher Lernprozess Schwerpunkt auf der Verwendung der neuesten, beliebtesten Technologien Trennung von Belangen in einer Datei Designer müssen mit HTML-Code arbeiten Enterprise-Anwendungen
- 100. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Quelle: https://svelte.dev/
- 106. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Keep learning! Vielen Dank, das war's!
- 107. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Kontakt © HECKER CONSULTING | ☞ https://www.hco.de | ✉︎ info@hco.de | ☏ 0211 / 542 480 40
- 108. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Peter Hecker • Informatik seit der 7. Klasse • >30 Jahre Unternehmer + Führungskraft in IT-, Online- und Weiterbildungsunternehmen • >20 Jahre Dozent + Trainer für IT- Themen • 1989 – 1994: ICT GmbH • Gründer/GF, medizinische Software • ab 1995: HECKER CONSULTING • Gründer/GF, Coaching, Workshop, Training • ab 1999: MARTINSFELD GmbH & Co. KG • Gründer/GF, Online- und Digitale Lösungen • Online-Pro fi le • XING, LinkedIn, Twitter (@phecker65)