16-mal heruntergeladen
Was darf’s denn sein: Angular, React, Vue.js – Das "beste" Frontend für Java!
- 1. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Peter Hecker, HECKERCONSULTING Was darf’s denn sein Angular, React, Vue.js – Das "beste" Frontend für Java! © 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
- 3.
- 4.
- 5.
- 6.
- 7.
- 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
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Quelle: https://de.wikipedia.org/ Angular "The modernweb developer’s platform" React "A JavaScript library for building user interfaces" Vue.js "The Progressive JavaScript Framework"
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 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 Slots Template Children Class Component Elements Functional Component Hooks JSX Lifecycle Props State Bindings Components Composables 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 eigentlicheine "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 + Logicin Components Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
- 69.
- 70.
- 71.
- 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 - Managementin 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
- 75.
- 76. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. State-Container für AngularState-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 AngularREST-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 AngularRouting 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 eigentlichein "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 AngularModularisierung 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
- 83.
- 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/
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Von einem objektorientierten Programmierhintergrundkommend 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
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110. 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
- 111. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Peter Hecker • Informatikseit 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)
- 112.