Drawbacks of Using React

Which form library do we want to use? Which state management library is currently the best? Which router is ideal for our application?

If you have ever worked with React, you have probably asked yourself these questions before starting a new project. Having many choices is generally not problematic, but React developers worldwide have looked into the same questions and, with a high probability, come to different conclusions than you did.

In your project, you are familiar with the directory structure and the different libraries that you are using. However, if you join another company or want to work on an open-source project in your free time, you will have to get used to the choices made by another developer. In open-source projects, this costs “only” time, but in company projects, it takes both time and money.

At finstreet, we have created many React applications and have faced these problems before. And we needed to provide both faster and cheaper solutions to finishing projects to our clients.

Finstreet Building Blocks

Our first step was to use a fixed set of libraries/frameworks. These are the libraries that we chose to respond to our different challenges:

• Next.js → “The React Framework for Production,” which offers a pleasant developer experience, a good base for our directory structure, and some more perks that will help us build our applications faster.
• ChakraUI → “ChakraUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.” Everything that ChakraUI mentions on their homepage is true, and we enjoy building applications with ChakraUI.
• React Final Form → Complex form wizards are an essential part of our applications. React Final Form makes it easy to develop these complex forms.
• Zod → A great validation library in combination with TypeScript.
• React-Query → Never has data-fetching been easier, and React-Query often removes the need to use a state management library like Redux.

We figured that one of the pain points for our developers after switching to a project is to get used to and learn the application’s libraries. Especially component libraries have different philosophies on how to style your components. Additionally, Next.js offers an excellent directory structure. Having a fixed set of libraries and identical project structure in each and every project helps us develop new applications faster and allows developers to effortlessly switch between projects.

Finstreet Form Wizard

The most integral part of our flagship product – eco.banking – is a complex form wizard. The information our partners need from their customers in order to grant loans differ vastly. Depending on the partner, we might have to build a new form from scratch.

The complexity grows in our application with each new partner because we try to reuse components wherever possible, but we keep adjusting details due to different requirements.

After we transitioned to the fixed set of libraries mentioned above, we started to extract all components that we needed to build forms from scratch. These components were moved into their own library. This library enables us to create a new project per partner while still being able to reuse most components. It reduces each partner’s form complexity and helps developers focus on completing their tasks at hand without struggling to control side effects for other partners.

However, we do not want to stop at having a library for eco.banking. Traditionally, we build many inquiry processes at finstreet, so the form component library will be used for eco.banking as well as all new projects in need of inquiry processes. We will face some challenges with this step as the components need to be absolutely flexible to fit different partners’ needs and completely new UIs.

Fullstack For The Rest of Us

Our applications primarily consist of a Ruby on Rails / Django backend, which provides data through an API to our React frontend. If you have worked in this kind of stack before, you know the pain of syncing with the backend team to send parameters correctly for the API to accept. Another pain point is validation. With complex forms come complex validations which have to be developed and synced for frontend and backend.

Finally, there is an excellent full-stack solution for React developers: Blitz.js. Blitz.js is built on the principles of Ruby on Rails and Django but offers a lot of improvements over these frameworks. In my entire career, I have never created an application faster than with Blitz.js. Some cool features of Blitz.js are:

• “Zero-API” data-layer → in your frontend code, you can directly import backend functions, and during compile time, the function is swapped out with an API call for you. With the help of TypeScript, you do not have to figure out which parameters you sent to the backend. The imported functions are fully typed!
• Shared validations → Program once, validate twice. You only have to maintain one set of validations because you can use them in your frontend and backend code.
• Built-in Authentication → After you scaffold your project, Authentication will be instantly set up for you.
• Code Scaffolding → One command generates all the files you need for a new set of CRUD operations.

Blitz.js is still in beta, but once it hits production, we will start building applications with Blitz.js and use the components mentioned in our first step – a lot of these libraries are already used by Blitz.js. 

Summary

There is a lot more work ahead of us. However, we believe it’s fully worth the effort. Not only can we increase the development experience at finstreet. Since each developer will already be familiar with all project libraries, we will also be able to finish applications significantly faster and reduce costs for our clients.

Wie steigere ich die Online-Bekanntheit meiner Marke? Wie hole ich das Beste aus meinem Websiteauftritt heraus und wie kann ich Inhalte und Texte selber pflegen und verwalten?

Diese Fragen wurden in den letzten Monaten immer häufiger von verschiedenen Kunden an uns herangetragen. Wir selber agieren als unabhängiger Softwareanbieter und können über unsere eigene Erfahrung und unser Partnernetzwerk nahezu jede CMS-Entwicklung (Content Management System) ermöglichen.

Daher analysieren wir zuerst immer die individuelle Ausgangssituation und das Zielbild unserer Kunden und erstellen anhand verschiedener Bewertungskriterien eine Shortlist an verschiedenen Systemen. Gemeinsam mit unseren Kunden entscheiden wir uns dann für die perfekte Lösung.

Erfolgsfaktoren des Projekts

In unserem Projekt mit dem „Verband der Deutschen Bürgschaftsbanken“ standen zum Beispiel folgende Erfolgsfaktoren im Vordergrund:

• Effizienz bei der Pflege des Contents steigern
• Steuerung von zentralen und dezentralen Inhalten
• Akzeptanz bei den Nutzern schaffen
• Integrationen verschiedener Drittservices ermöglichen
• Steuerung verschiedener Pages

In diesem Projektbeispiel hat das CMS-System Wagtail die Konkurrenz ausgestochen - ein kostenloses Open Source Content Management System, das in Python geschrieben wurde und auf dem Django-Framework basiert.

Features von Wagtail

Wesentlich für die Auswahl waren die folgenden Features, die Wagtail bereits mitliefert:

• Das effizientes Rechte-/Rollenkonzept ermöglicht die Zuordnung einzelner Aufgaben zu verschiedenen Nutzern
• Die Nutzung von wiederkehrenden Elementen, s.g. Snippets, erleichtert den nachhaltigen Aufbau von Seiten
• Dank eins übersichtlichen Dashboards ist die Administration der Pages einfach und übersichtlich gestaltet
• Streamfields erleichtern die flexible Content-Pflege unter Berücksichtigung von Storytelling-Aspekten
• Ein smartes Media-Management sorgt für eine effektive Zuordnung von Bildern und Dokumenten einzelner Pages

Wir sind von Wagtail und der Flexibilität absolut überzeugt. Dennoch ist es sehr wichtig die Anforderungen genau zu analysieren und den CMS-Markt gut zu durchforsten, sodass man das richtige System für die richtige Situation auswählt.

Auch interessant

Kennen Sie schon unsere Case Study zu unserer Zusammenarbeit mit dem Verband der Deutschen Bürgschaftsbanken? Lesen Sie hier mehr zur Einführung des Finanzierungsportals, den damit verbundenen Herausforderungen und dem direkten Stresstest während der Coronakrise.

ISO 27001, NPP, BAIT, MaRisk, KWG, OWASP, GDPR – die Liste der Anforderungen, die an uns und unsere Kunden gestellt werden, könnte man noch beliebig fortführen.

Keine Branche ist so stark reguliert wie der Financial Services Sector. Da viele der relevanten Themen unter der Wasseroberfläche schlummern, ist die Umsetzung eines IT-Projektes in diesem Umfeld nicht mit der Programmierung eines E-Commerce-Shops zu vergleichen. Wir kennen die Anforderungen und daraus abgeleiteten Erfolgsfaktoren aus dem Effeff.

In unserem täglichen Doing bewerten wir deswegen jede Situation mit der notwendigen Portion Pragmatismus, um die Balance zwischen Innovation, ökonomischen Faktoren und dem Eisberg der Regulatorik gewährleisten zu können. Dabei ist für uns ein Leitsatz entscheidend:

Gemeinsam meistern wir jede regulatorische Anforderung!

Und da wir auch in regulatorischen Themen nicht mit dem Status Quo zufrieden sind, haben wir uns – neben den jährlichen Datenschutzberichten, der Prüfung unserer Dienstleister und vieler weiterer Themen – für 2021 ein neues Ziel gesetzt: Unter der Führung unseres CISOs Lutz Bigalke haben wir ein Information Security Management System eingeführt, welches wir im zweiten Halbjahr nach ISO 27001 zertifizieren lassen.

Stay tuned!

Wir bewerten den gezielten Technologieeinsatz zur Optimierung der Cost-Income-Ratio einer Bank mit 5 Mrd. Bilanzsumme!

Niedrigzinsumfeld, Regulatorik und Digitalisierung machen sich in der Gesamtbetrachtung aller Kreditinstitute quantitativ bemerkbar – der Jahresüberschuss vor Steuern brach von 2014 auf 2019 um mehr als zwei Drittel ein, die Eigenkapitalrendite sank von 2,66 % auf 1,07 %.

Hingegen belief sich 2020 der Bruttoeinfluss der KI in der deutschen Finanzindustrie auf 6 Mrd. Euro und steigt bis 2030 auf rund 42 Mrd. Euro an. 75 % des Bruttoeinflusses sehen wir übrigens im Bereich der Kosteneinsparung.

In verschiedenen Projekten konnten wir bereits heute gemeinsam mit unseren Kunden Kosten optimieren, Neukunden gewinnen oder die Kundenzentrierung steigern.

Unsere praktischen Erfahrungen haben wir in einen Impulsvortrag zusammengefasst.

Hier ein Einblick in die Agenda:

1. Einsatzgebiete und quantitative Bedeutung der KI
2. Unsere KI-Usecases in der Praxis
   • Marketing Intelligence
   • Kreditentscheidung
3. Ausblick und Diskussion

Melden Sie sich für die Terminabsprache bei David oder Lutz.

Für alle Skeptiker: Mit dem Einsatz der KI werden bei über 70 % der durchgeführten Projekte binnen drei Monaten positive Ergebnisse erzielt.

Die #künstlicheIntelligenz ist längst keine #Zukunftsvision mehr.

Ob beim #autonomenFahren, mit #Sprachassistenten oder in der industriellen Fertigung – intelligente Computer sind schon heute, bewusst oder unbewusst, täglicher Begleiter in unserem Leben – Tendenz weiter steigend.

Wird uns die künstliche Intelligenz vielleicht bald auch Design- und #Gestaltungsprozesse abnehmen?

Dafür wären im Kern besonders zwei #Kompetenzen notwendig: #Empathie und #Kreativität.
Beides ist in der Gestaltung #elementar, denn gutes Design erfordert zum einen, dass man die #Bedürfnisse des Kunden erkennen, nachempfinden und anwenden kann, zum anderen, dass man für Probleme auf kreative Weise neue #Lösungswege findet.

Aber ist die künstliche Intelligenz zu kreativem und empathischem Denken überhaupt in der Lage?

Sicher ist, sie ist dem Menschen schon jetzt klar überlegen – in allem, was „ „regelhaft“, voraussehbar und berechenbar ist. Sie kann #Algorithmen und #Daten so exakt berechnen und anwenden wie es kein Mensch je konnte.

Kreativität jedoch hat damit nichts zu tun. Sie erwächst vielmehr aus dem, was wir nicht regelhaft beschreiben können, denn erst unregelmäßige Probleme erfordern kreative Lösungen.
Zwar kann die KI durchaus Lösungen hervorbringen, jedoch nur insofern, dass sie aus vorhandenen Daten die besten Lösungen berechnet.
Kreativität beginnt erst hinter diesem Punkt, erst dort, wo man komplett neue Lösungen entwickelt, anstatt sich an den vorhandenen zu orientieren.

Auch was das #Einfühlungsvermögen betrifft, sind wir Menschen der KI noch weit voraus. Das liegt daran, dass die menschlichen #Emotionen zu komplex, individuell und ebenfalls unberechenbar sind, als dass eine KI sie so exakt nachempfinden könnte, wie es ein Mensch kann.
Zwar entwickelt sich die KI auch in diesem Feld mit dem #AffectiveComputing immer weiter, jedoch fehlt der KI bisher noch etwas Grundlegendes, um zu ermöglichen, Emotionen wirklich verstehen zu können: das eigene #Bewusstsein.

Solange die künstliche Intelligenz diese beiden grundlegenden Kompetenzen nicht besitzt, kann sie die Menschen im Design nicht ersetzen.

Trotzdem kann und wird sie zukünftig viele neue Wege eröffnen, die aber erst durch das Design erfolgreich werden können.

Denn Designer kreieren die #Schnittstellen zwischen Menschen und der künstlichen Intelligenz, schaffen das Vertrauen und machen die Menschen somit überhaupt erst für die KI zugänglich.