lake of constance with mountain behind

Unser Repertoire kurz vorgestellt

Wir bei Weblake stehen auf moderne und elegante Technologien.

Um dem Wandel der Welt nicht nachzustehen, bilden sich unsere Entwickler täglich weiter und somit, haben in den vergangenen Jahren ein Haufen toller Technologien ihren Platz in unserem sogenannten "Stack" gefunden.


React

Wir haben viel ausprobiert: Angular, Vue, Statisches HTML, Cordova, und zig weitere Technologien, um Apps zu entwickeln.

Dann lief uns React über den Weg. Dieser Tag, sollte unser Leben verändern.

Mittlerweile blicken wir zurück, auf viele Jahre in der Entwicklung mit React.

Umgesetzt haben wir sowohl Apps fürs Smartphone, als auch simple Webseiten, oder Blogs.

React und die Welt in der React sein Unwesen treibt, sind so faszinierend und gut durchdacht, dass die Projektgröße keinen Faktor mehr darstellt.

React – A JavaScript library for building user interfaces
A JavaScript library for building user interfaces

Redux

Wenn Applikationen eine gewisse Größe erreichen, wird es unumgänglich, gute Architekturentscheidungen zu treffen.

Eine der Entscheidungen, von der wir am häufigsten profitieren, ist das Arbeiten mit Redux. Redux ist ein System, mit dem der Zustand einer Applikation innerhalb und ausserhalb der App nach einheitlichen Mustern gesteuert werden kann.

Hier arbeitet man mit Aktionen, die man von jeglicher Stelle abfeuern kann. Die Aktion löst dann an einer anderen Stelle einen gewünschten Effekt aus.

So einfach das auch klingt, so komplex ist es in Wirklichkeit. Viele Jahre waren nötig, um den Umgang mit diesem Teil unseres Toolsets zu erlernen.

Von dieser Erfahrung profitieren heute alle, die mit uns eine App oder Webseite entwickeln.

Redux - A predictable state container for JavaScript apps.
A predictable state container for JavaScript apps.

Emotion

Wenn wir eine App oder eine Webseite entwickeln, ist uns die Repräsentation besonders wichtig. Denn das ist der Teil, mit dem der Benutzer später interagieren wird.

Aus diesem Grund entwerfen wir grundsätzlich Designsysteme, die vor Erweiterbarkeit nur so strotzen.

Ein Tooling, auf das wir hierbei nicht verzichten können, ist die Bibliothek emotion.

Emotion ermöglicht es uns, Designs in React Applikationen, so richtig in Szene zu setzen.

Durch emotion ist es zum Beispiel möglich, unser Design von hell auf dunkel zu wechseln.

https://emotion.sh/docs/introduction


Typescript

Typescript erwähnen wir hier nicht umsonst an erster Stelle.

Schon lange ist klar, dass Javascript im Wissens-Repertoire eines Softwareentwicklers, in unserem Bereich nicht fehlen darf.

Javascript bringt viele Vorteile mit sich, auf die wir in weiteren Beiträgen gerne eingehen möchten.

So haben wir bei Weblake uns dazu entschlossen, Projekte soweit es sinnvoll ist, in Javascript umzusetzen und nur kleinste Teile in andere Programmiersprachen umzusetzen.

Bei Javascript fehlt in unseren Augen, ganz klar die Typensicherheit.

Wir versuchten uns zunächst darin, diese Typensicherheit durch Javascript Bordmittel zu ersetzen, doch das führte zu unsauberem Code in Produktivumgebungen und somit entschlossen wir uns, einen weiteren Layer aufzuziehen.

Wir wogen verschiedene Praktiken (Flow, Typescript, ScalaJs etc.) gegeneinander aus und entschieden uns für Typescript.

Etliche Vorteile begegneten uns auf dem Weg von Javascript zu Typescript und diese Vorteile können wir heute stolz mit unseren Partnern teilen.

TypeScript - JavaScript that scales.
TypeScript brings you optional static type-checking along with the latest ECMAScript features.

Lerna

Je größer Applikationen werden, desto wichtiger wird Wiederverwendbarkeit. Zur gleichen Zeit, wächst mit der Größe eines Projektes allerdings auch die Komplexität, Wiederverwendbarkeit zu schaffen.

Aus diesem Grunde hat Weblake, das Erstellen von Libraries fest in seinen Entwicklungsprozess eingegossen.

Wir beginnen schon in frühen Phasen eines Projektes, Komponenten auszugliedern und verwalten diese dann an Stellen außerhalb eines bestimmten Projektes.

Diese Entwicklung macht es uns möglich, Partnern an den Erfolgen anderer Partner teilhaben zu lassen und stärkt am Ende jeden in diesem Kreis.

Bei der Entwicklung von Libraries muss einiges beachtet werden.

Hier ist der Output extrem wichtig, denn man kennt während der Entwicklung die etlichen verschiedenen Anwendungsfälle nicht.

Bei einer Anzahl von 100 verschiedenen Libraries und mehr, wird es schnell schwierig, den Überblick zu wahren. Nach schweißtreibenden Nächten, trafen wir dann auf Lerna. Lerna ist ein Programm, welches Pakete und deren Veröffentlichung für uns verwalten kann. Somit ist Versionierung und Paketübergreifende Abhängigkeit ein Kinderspiel.

https://lerna.js.org/


Storybook

Wenn wir mal wieder eine App entwickeln, beginnen wir nach der Erstellung des Designs und der Planung des Ablaufs meistens damit, die Applikation in ganz kleine Stücke zu zerteilen. Diese Stücke nennen wir hier Komponenten.

Um hieraus den besten Vorteil zu erzielen, setzen wir auf Storybook.

Wir entwerfen die einzelnen Komponenten getrennt von einander und das "Zusammenstöpseln" der Komponenten in der eigentlichen App, ist dann ein Leichtes.

Jede Komponente ist ihre eigene Bibliothek, die später per Paketmanager einfach in der App installiert werden kann.

Ohne Storybook wäre das nicht möglich.

Storybook: UI component explorer for frontend developers
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Seaground
Weblake Logo (shark, mountain, sea)

weblake

Impressum

copyright © 2019 weblake ug (haftungsbeschränkt)

  • Wir verwenden Cookies um das Nutzererlebnis zu verbessern

    Datenschutz