Mein nicht ganz so normaler Einstieg bei PHMU

Hi, mein Name ist Madlen, glückliche Mama und Ehefrau, leidenschaftliche Weltenbummlerin und „Jongliererin” zwischen den Welten (Familie und Job). 
Aktuell natürlich noch viel mehr als sonst, aber mit wundervoller familiärer Unterstützung.

Bald habe ich schon die 5 Monate bei PHMU „angerissen”.
Wow, fast ein halbes Jahr bin ich schon hier und bemerke mal wieder aufs Neue, wie doch die Zeit rennt! 
„Rennt” aber im positiven Sinne, denn für mich persönlich heißt das auch Bewegung… „Fortbewegung”. 
Und bewegt habe ich mich in den letzten 5 Monaten enorm. 
Nach über 15 Jahren habe ich einen sicheren Job als Führungsposition in einer ganz anderen Branche (Druckindustrie – Logistik) aufgegeben. Ich war dort also fast mein halbes Leben.

Noch dazu bin ich superglückliche Mama einer 3 jährigen Tochter. Und es ist gar nicht so einfach das alles unter einen Hut zu bekommen. Aber das kennen ja alle Eltern. 😉
-> Also beruflicher Neuanfang, von Herzen Mamasein und dann noch dazu „Corona”.

Viele haben mich damals irritiert gefragt, warum ich in so einer aktuell eher schwierigen Zeit einen kompletten Neuanfang wage. 
Aber meine Gedanken dazu waren ganz klar: „Wer nicht wagt der nicht gewinnt!”
Glücklicherweise bin ich von Natur aus mit der „Glas halb voll, statt halb leer- Herangehensweise” ausgestattet.
Von daher war mir eigentlich von vorn herein klar, dass dieser Weg nur der Richtige sein kann. Einbahnstraßen gibt es für mich tatsächlich nur im Straßenverkehr. 🙂 Glückliche Wege und Straßen findet man überall. Auch mit Umwegen.

Ich habe damals die Jobanzeige im Netz gefunden und als ich dann auf die Webseite von PHMU gegangen bin, hat mich sofort das offene, vielseitige und kreative Konzept von PHMU angesprochen und begeistert. Ich dachte mir, wer auf seinen Firmenbildern ganz lässig mit Chucks da steht, kann nur herrlich kreativ, innovativ und offen sein. 🙂 Genau das hatte mich irgendwie sofort angesprochen. 

Nach dem Vorstellungsgespräch mit Philipp war mir dann recht schnell klar, dass ich mir ein Arbeiten bei PHMU super vorstellen könnte und somit sagte ich den anderen Angeboten/ Zusagen ab.

Ich war früher zeitweise ein absoluter Workaholic und habe es gar nicht verstanden das Batterien auch wieder aufgeladen werden müssen und dass nicht nur auf unseren vielen Fernreisen. Ich fand es sofort super-sympathisch, dass PHMU so verständnisvoll und flexibel mit dem Thema Leben und Arbeiten umgeht. Das ist leider nicht selbstverständlich. 
Wir sind ja beide (Philipp und ich) Eltern und verstehen somit auch, was dieser Spagat bedeutet.

Trotz des 21. Jahrhunderts hinken wir da leider, was flexible Zeitmodelle betrifft, Teilzeit, 4- Tage- Woche und Co., in Deutschland noch etwas hinterher.
Aber ich bin zuversichtlich, dass sich da in den kommenden Jahren noch vieles positiv drehen wird und sich die Work-Life- Balance noch viel mehr durchsetzen wird. Auch moderne und flexible Homeoffice- Modelle werden sich auf Grund der aktuellen Entwicklung, sicherlich noch mehr etablieren.

Mein Einstieg im Februar war daher natürlich kein ganz normaler Einstieg. 
Bereits nach knapp einem Monat Arbeiten im Office, hatte uns die neue Normalität mit Corona, nun auch „eingeholt”. Wir sind dann wie viele andere Unternehmen auch, alle ins Homeoffice übergegangen. Das war natürlich zu Beginn gar nicht so einfach. 
Aber nach einigen Tagen stellte sich dann auch bei uns ein super Tagesablauf, mit festen Meetings und Telko´s ein. 

Eins hatte ich auch relativ schnell gelernt in dieser Zeit: „Umso weiter man von einander weg ist, umso mehr muss man kommunizieren”. 
So haben wir letztendlich im Team einen prima Weg gefunden, uns über diese lange Zeit des nicht Sehens, trotzdem nicht aus den Augen zu verlieren und weiterhin noch als „Team” gemeinsam zu agieren. 
Ich habe inzwischen sogar das Gefühl, dass wir zum Teil noch viel mehr miteinander sprechen, als im Office.

Wir führen sogar Team- Workshops/ Teamentwicklungen online durch und es klappt wirklich wunderbar!

Auch in dieser heftigen Zeit (auch wirtschaftlich gesehen) haben wir sogar einen neuen Mitarbeiter eingestellt (im Homeoffice) und super ins Team integriert. Das fand ich wirklich bemerkenswert und keinesfalls selbstverständlich.

Ich selbst habe im engeren Umfeld leider einige Menschen, die aktuell in Kurzarbeit sind, finanzielle Sorgen haben und nicht arbeiten können.
Dass wir also weiterhin so tolle Projekte und Kundenanfragen bekommen und überhaupt arbeiten dürfen in dieser Zeit, empfinde ich als großes Glück!

Ich persönlich wünsche mir, dass alle weiterhin das Positive sehen, nach vorn blicken und nicht zurück!
Und auch wenn das Glas mal halb leer „erscheint”, sollte man es nach einer Zeit des Erholens und Aufatmens wieder neu auffüllen. 🙂

Liebe Grüße, Madlen von PHMU

Was ist neu bei Vue.js 3?

Seit der Veröffentlichung von Vue.js 2 ist die Vue.js-Community schnell gewachsen und erhält von den Usern großartige Bewertungen. Neben Angular und React zählt es zu den beliebtesten JavaScript-Frameworks. Nun steht Vue.js 3 kurz vor der Veröffentlichung und hat in den letzten Monaten für einen ziemlichen Hype in der Welt der Webentwicklung gesorgt.

Verbesserungen

Die neue Version von Vue.js ist auf Geschwindigkeit ausgelegt. Obwohl Vue 2 schon relativ schnell war, hat Vue 3 eine bis zu 100% bessere Update-Leistung und bis zu 200% schnellere serverseitige Renderings. Auch die Komponenten-Initialisierung ist jetzt effizienter, sogar mit Compiler-informierten schnellen Pfaden zur Ausführung. Das virtuelle DOM wurde ebenfalls vollständig neu geschrieben und übertrifft in Sachen Geschwindigkeit seine alte Version deutlich.

Auch von der Größe her gibt es nun Verbesserungen. Vue 2 war mit einem Gewicht von etwa 20 kB gzipped bereits verdammt klein. Mit einer konstanten Gundliniengröße von < 10 kB gzipped wiegt Vue 3 nur noch halb so viel. Wie? Größtenteils durch Eliminieren nicht genutzter Bibliotheken (Tree Shaking). Wenn du also ein Element nicht verwendest, ist es nicht enthalten.

Vue 3 wird TypeScript unterstützen. Zusätzlich werden die Pakete entkoppelt, wodurch alles modularer und einfacher zu warten sein wird.

Das Erstellen nativer Anwendungen mit Vue ist gar nicht so schwierig, aber mit Vue 3 ist der Laufzeit-Kern plattformunabhängig, wodurch es noch einfacher wird, diese Technologie mit jeder Art von Plattform zu verwenden.

Wie du siehst, lohnt es sich mal anzuschauen, welche Neuerungen es bei Vue geben wird. Werfen wir nun einen Blick auf die wichtigsten Features von Vue 3.

Composition API

Bisher griffen wir beim Erstellen neuer Komponenten auf die Options API zurück. Diese API zwang uns, den Code der Komponente durch Optionen zu trennen, was bedeutete, dass wir alle reaktiven Daten an einer Stelle (Data), alle berechneten Eigenschaften an einer Stelle (Computed), alle Methoden an einer Stelle (Methods) usw. haben mussten.

Obwohl es zwar für kleinere Komponenten handlich und lesbar ist, wird es jedoch schmerzhaft, wenn die Komponente komplexer wird und mit mehreren Funktionalitäten zu tun hat. Gewöhnlich enthält die Logik, die sich auf eine bestimmte Funktionalität bezieht, einige reaktive Daten, berechnete Eigenschaften, eine Methode oder einige wenige davon; manchmal beinhaltet sie auch die Verwendung von Component-Lifecylcle-Hooks. Das führt dazu, dass man bei der Arbeit an einem einzigen logischen Anliegen ständig zwischen verschiedenen Optionen im Code hin- und herspringen muss.

Das andere Problem, auf das man bei der Arbeit mit Vue gestoßen sein könnte, ist die Frage, wie man eine gemeinsame Logik extrahieren kann, die von mehreren Komponenten wiederverwendet werden kann. Vue hat bereits wenige Optionen, um dies zu tun, aber alle haben ihre eigenen Nachteile (z.B. Mixins und Scoped-Slots).

Die Lösung von Vue 3 hierfür ist eine setup()-Methode, die es uns ermöglicht, die Kompositionssyntax zu verwenden. Jedes Stück Logik ist außerhalb dieser Methode als Kompositionsfunktion definiert.

Codebeispiel aus einem Color-Picking-Spiel unter Nutzung der Komposition API:

<script>
import Vue from "vue";
import ColorChoiceButton from "@/components/ColorChoiceButton";
import GameControlHeader from "@/components/GameControlHeader";
import { reactive } from "vue";
import { getRandomColor } from "@/utils/getRandomColor";
 
export default {
  components: {
    GameControlHeader,
    ColorChoiceButton
  },
  setup() {
    const score = reactive({
      lost: 0,
      won: 0
    });
 
    const colors = reactive({
      picked: "",
      right: "",
      choices: ["", "", ""]
    });
 
    function pickColor(color = "") {
      colors.picked = color;
      if (colors.picked === colors.right) {
        //round won
        score.won++;
      } else {
        //round lost
        score.lost++;
      }
    }
    function setFreshColors() {
      colors.choices[0] = getRandomColor();
      colors.choices[1] = getRandomColor();
      colors.choices[2] = getRandomColor();
 
      // we should detect the rare case that we get the same color twice and generate colors again
 
      const randomChoice = Math.round(Math.random() * 2);
      colors.right = colors.choices[randomChoice];
      colors.picked = "";
    }
    function resetGame() {
      score.won = 0;
      score.lost = 0;
      setFreshColors();
    } //new colors, score = 0
 
    resetGame();
 
    return { pickColor, resetGame, setFreshColors, score, colors };
  }
};
</script>

Kurz gesagt, es handelt sich lediglich nur um eine Funktion, die Properties und Funktionen an das Template zurückgibt. Wir deklarieren hier alle reaktiven Properties, computed Properties, Watchers und Lifecycle-Hooks und geben sie dann zurück, damit sie im Template verwendet werden können.

Die Composition API ist eine großartige Möglichkeit, Code lesbarer und wartbarer zu machen. Sie wird dazu beitragen, dass größere Vue-Projekte modularer und wiederverwendbarer sind; ein sehr vielversprechendes Zeichen für die entwicklerfreundlichen Änderungen, die das Vue-Team vornimmt. Es scheint, als hätten sie viele Schmerzpunkte der Entwicklerteams entdeckt und versucht, praktikable Lösungen anzubieten, ohne dabei extrem drastische Änderungen vorzunehmen.

Mehrere Root Elemente

In Vue 2 kann das Template-Tag nur ein Wurzelelement aufnehmen. Selbst wenn wir nur zwei <p>-Tags hätten, müssten wir sie in ein <div>-Tag einschließen, damit es funktioniert. Aus diesem Grund mussten wir auch den CSS-Code in der übergeordneten Komponente so ändern, dass er wie erwartet aussah.

In Vue 3 wird diese Einschränkung aufgehoben. Es wird kein Root-Element mehr benötigt.

Wir können eine beliebige Anzahl von Tags direkt innerhalb der Sektion <template></template> verwenden:

<template>
  <p> Count: {{ count }} </p>
  <button @click="increment"> Increment </button>
  <button @click="decrement"> Decrement</button>
</template>

Suspense

Suspense ist eine Komponente, die während des Lazy-Loadings benötigt wird, das im Wesentlichen dazu dient,  Lazy-Komponenten zu umhüllen. Mehrere Lazy-Komponenten können mit der Suspense-Komponente umwickelt werden. In der Version 3 von Vue JS wird Suspense eingeführt, um auf verschachtelte asynchrone Abhängigkeiten in einem verschachtelten Baum zu warten, und es funktioniert gut mit asynchronen Komponenten. Anstelle unserer Komponente wird ein Fallback-Content angezeigt, bis eine gewünschte Bedingung erfüllt ist. Die Bedingung ist in der Regel ein asynchroner Vorgang, der innerhalb unserer Komponenten-Setup-Funktion stattfindet.

Beispiel:

<Suspense>
  <template >
    <suspended-component />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

Portals

Die <teleport to=”target”>-Komponente verschiebt alle Children zum ersten durch target beschriebenen Element im DOM-Tree. Dabei funktioniert target wie ein herkömmlicher Query-Selektor, das heißt, ein Element kann über die ID (#target), die Klasse (.target) oder den Tag-Namen (z.B. main) angewählt werden.

Mit Teleports können sich vor den Content stellende Elemente wie Modals, (Cookie) Banners, Pop Ups etc. von überall aus in der App aufgerufen werden, rendern aber stets an derselben Stellen im DOM-Tree.

App.vue

<Component>
  <teleport to="#target">
    <div>...</div>
  </teleport>
</Component>

index.html

<body>
  ...
  <div id="app"></div>
  <div id="portal-target"></div>
</body>

Multiple V-Models

Wenn du Vue verwendest, weißt du bereits, dass v-models für die bidirektionale Datenbindung von Vue-Komponenten verwendet werden. In Vue 2 erhältst du ein v-model für eine Komponente, aber in dieser neuen Version gibt es tolle Neuigkeiten!

Du kannst jetzt so viele v-model-Deklarationen und -Bindungen pro Komponente haben wie du willst und die einzelnen v-models auch benennen.

So etwas ist jetzt möglich:

<InviteeForm
   v-model:name="inviteeName"
   v-model:email="inviteeEmail"
/>

Global mounting/configuration API Änderung

Wir können eine weitere wichtige Änderung in der Art und Weise finden, wie wir unsere Anwendung instanziieren und konfigurieren. Derzeit verwenden wir das globale Vue-Objekt, um jede beliebige Konfiguration bereitzustellen und neue Vue-Instanzen zu erstellen. Jede am Vue-Objekt vorgenommene Änderung wirkt sich auf jede Vue-Instanz und Komponente aus.

Schauen wir uns nun an, wie es in Vue 3 funktionieren wird:

import { createApp } from 'vue'
import App from './App.vue'
 
const app = createApp(App)
 
app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)
 
app.mount('#app')

Fazit

Abgesehen von der Composition API, welche die größte neue API in Vue 3 ist, können wir auch eine Menge kleinerer Verbesserungen finden. Wir können sehen, dass sich Vue in Richtung einer besseren Erfahrung für Entwickler und einfachere, intuitivere APIs bewegt. Es ist auch großartig zu sehen, dass das Vue-Team beschlossen hat, viele Ideen, die derzeit nur über Bibliotheken von Drittanbietern verfügbar sind, in den Kern des Frameworks zu übernehmen.