Boilerplates beim Prototyping

Boilerplates beim Prototyping

Ein guter Start ist die halbe Miete..

Solch oder so ähnliche Aussagen treffen auch bei der Entwicklung von Web-Anwendungen zu. Wer zu Beginn schon mit den richtigen Werkzeugen, in der passenden Umgebung und mit einer soliden Grundlage startet, erspart sich später eine mühsame Restrukturierung der App. Design Patterns und Best Practices allgemein werden in Boilerplates oft sehr genau genommen, was dem Entwickler klare Vorgaben mit auf den Weg gibt.

Mit diesem Mindset habe ich mir das „ultimative Boilerplate für Produkte“ Pup von cleverbeagle.com angesehen. Hierbei handelt es sich um eine Vorlage zur Entwicklung einer Webanwendung auf Basis von Meteor, React, MongoDB und GraphQL. In weiterer Folge will ich die Frage beantworten, inwieweit uns Boilerplates bei der Entwicklung von Prototypen helfen und wann sie uns behindern.

Was hat Clever Beagle’s Tool Pup zu bieten?

Mit der Installation von Pup (aktuell in der Version v2.0.1) erhält man den lauffähigen Quellcode einer kleinen Webanwendung zur Verwaltung von Markdown Dokumenten. Die App enthält dabei Komponenten um folgende Aufgabenstellungen zu realisieren:

  • Benutzerregistrierung per OAuth und Benutzerverwaltung über ein Admin Panel
  • Aussenden von E-Mails, basierend auf HTML- und Text-Vorlagen
  • Automatische Generierung eines Datenbanksets und dessen Indizierung
  • Tabellendefinitionen per GraphQL und eigenem GraphQL Playground
  • Erstellung einer Sitemap und SEO Metadaten mit App-Details
  • Routing Setup für öffentliche und authentifizierte Anfragen
  • Server-side-Rendering (SSR) zur schnelleren Darstellung im Browser
  • Formularvalidierung
  • Styling und Individualisierung über Bootstrap und styled-components
  • Browser-Richtlinien zum Schutz vor XSS
  • Datenexport, Kontolöschung und Zustimmungserklärung laut GDPR/DSGVO
  • Lokales git Repository mit eigenen Linter Script Hooks
  • Unit- und Ende-zu-Ende (E2E) Tests
  • Konfiguration für Development/Staging/Production Settings
  • Kompletter Workflow zum App Release und zur kontinuierlichen Integration inklusive DNS Einträge, SSL Zertifikat und Hosting auf Meteor Galaxy (Erfordert weitere Zugangsdaten)

Diese Liste wird laufend erweitert, da Pup hier stets bemüht ist, die Entwickler noch mehr zu entlasten und weitere Bereiche durch das Boilerplate abdecken zu lassen.

Continue reading

Gatsby: Statische Webseiten, super optimiert

Gatsby: Statische Webseiten, super optimiert

Für viele Webauftritte sind statische Seiten ausreichend. Diese haben eine Reihe von Vorteilen: Anspruchsloses Hosting, sicher gegen böswillige Änderung des Content, kurze Wartezeiten. Um diese statische Seiten zu erzeugen, stehen diverse Werkzeuge zur Verfügung. Eines davon ist Gatsby, und dieses zeichnet sich durch die Optimierung auf geringe Latenzzeiten aus. Dabei wird die Website als sogenannte Progressive Web App erzeugt: Beim ersten Aufruf wird nur der erforderliche Inhalt geladen, um die Seite darzustellen. Im Hintergrund werden dann weitere Informationen im Browser gespeichert, sodass weitere Seitenwechsel ohne Wartezeit möglich sind.

Auch andere Innovationen der letzten Jahre werden eingesetzt: React zum komponentenbasierten Aufbau des User Interface, GraphQL als Abfragesprache, Webpack für das Bundling. Neben statischen Dateien können über APIs auch externe Quellen oder CMS für den Inhalt verwendet werden.

Franz Knipp hat mithilfe von Gatsby den Kinderbetreuungsatlas der Arbeiterkammer Burgenland realisiert und zeigte im Rahmen seines zehnten Vortrags bei den Linuxwochen in Eisenstadt und Wien die Möglichkeiten und Erfahrungen.

Die Vortragsfolien stehen zum Download zur Verfügung. Hier ist das Video:

Der Inhalt ist nicht verfügbar.
Bitte erlaube Cookies, indem du auf Übernehmen im Banner klickst.

React Native: JavaScript am Smartphone auf der Überholspur

React Native: JavaScript am Smartphone auf der Überholspur

Die App-Entwicklung teilt die App-ProgrammiererInnen in drei Gruppen: Die iOS-ProgrammiererInnen, die Android-ProgrammiererInnen und die, die mit Apache Cordova (PhoneGap) ihr Glück probieren. Während sich die ersten beiden Gruppen auf genau ein mobiles Betriebssystem konzentrieren, versucht die dritte, Geräte-übergreifend ihre Apps zu entwickeln – allerdings nicht ohne Nachteile, schließlich steht da nur die eingebaute Browser-Komponente zur Darstellung zur Verfügung.

React Native – eine Open Source-Entwicklung des allseits beliebt-gehassten Facebook – möchte die Vorteile der beiden Welten verbinden: Statt mehrerer Programmiersprachen kommt nur mehr eine zum Einsatz, die erzeugten Programme laufen aber unter Verwendung der nativen UI-Komponenten und müssen sich hinsichtlich der Performance nicht hinter der nativen App verstecken.

Franz Knipp zeigte bei den Linuxwochen in Eisenstadt die ersten Schritte zur Erstellung einer React Native-App und gab Tipps aus der Praxis.

Die Präsentation steht auf Prezi zur Verfügung. Hier ist das Video des Vortrags:

Der Inhalt ist nicht verfügbar.
Bitte erlaube Cookies, indem du auf Übernehmen im Banner klickst.

Unsere erste Gemeinwohl-Bilanz ist fertig

Unsere erste Gemeinwohl-Bilanz ist fertig

Wie würde eine Ökonomie aussehen, in der nicht das Geld, sondern das Gemeinwohl zum obersten Ziel des Wirtschaftens wird?

Unter dieser Fragestellung habe ich gemeinsam mit anderen UnternehmerInnen, der sogenannten Peer Group, in den letzten Monaten die Themen der Gemeinwohl-Ökonomie besprochen, die die Werte eines Unternehmens wie Menschenwürde, Solidarität, ökologische Nachhaltigkeit, soziale Gerechtigkeit und demokratische Mitbestimmung & Transparenz bestimmt. Der Bogen spannt sich von den LieferantInnen und GeldgeberInnen über die MitarbeiterInnen, EigentümerInnen bis zu den KundInnen, den Produkten und dem gesellschaftlichen Umfeld.

Punkte, Punkte, Punkte, …

Dabei wird in einzelnen Fragestellungen das Unternehmen durchleuchtet und in einem Bericht dokumentiert. Man bewertet sich anhand einer Skala selbst, die Peer Group gibt dazu Feedback, bevor schließlich der Bericht mit der Bewertung von einer externen AuditorIn noch einmal evaluiert wird und das Testat ausgestellt wird:

2016_testat_peer_qnipp_web

Die Bilanzsumme von 483 von 1.000 möglichen Punkten fasst den Beitrag des Unternehmens in einer Zahl zusammen. Wesentlich wichtiger erscheint mir aber die Auseinandersetzung mit dem Thema und die Erkennung weiterer Verbesserungspotenziale.

Die fertige Gemeinwohl-Bilanz

Gemeinwohl-Bilanz qnippDie Gemeinwohl-Bilanz gibt einen tiefen Einblick in die Firma qnipp, aber auch in meine Rolle als Gründer und Geschäftsführer. Es ist user erste Schritt in die Richtung nachhaltige Unternehmensführung bzw.  Corporate Social Responsibility,  auch CSR abgekürzt. Berichte dieser Form sind übrigens ab nächstem Jahr für große Unternehmen verpflichtend.

Noch sind es nur wenige Unternehmen, die eine derartige Bilanz erstellen. Die Fachhochschule Burgenland, wo ich als externer Lektor mein Wissen zu Betriebssysteme und Web-Technologien weitergebe, ist die erste universitäre Einrichtung, die eine Gemeinwohl-Bilanz erstellt hat.

Mehr darüber?

Mehr über die Gemeinwohlökonomie erfährt man auf der Website www.ecogood.org, wo es unter anderem auch eine Liste der Mitglieder und ein Verzeichnis aller Gemeinwohl-Berichte gibt.

Herzlichen Dank an meine Peers und unsere Beraterin Anja Haider-Wallner, die uns durch diesen Prozess begleitet hat.

 

 

Meteor Erfolgsgeschichte: Teams & Scores

Meteor Erfolgsgeschichte: Teams & Scores

Seit ein paar Wochen verwendet der Burgenländische Sportschützen-Landesverband unsere Meteor-Applikation Teams & Scores zur Verwaltung der Turnierergebnisse.

Das Hauptziel war die Vereinfachung der Ergebniseingabe nach den Bewerben. Die Flexibilität ist dabei ein wichtiges Merkmal: Die Punkteberechnung ist von Disziplin zu Disziplin beim Sportschießen unterschiedlich. Diese Flexibilität ermöglicht die einfache Verwendung der Applikation für andere Sportarten.

Die Applikation beinhaltet außerdem die Verwaltung der Vereine und ihrer Mitglieder. Das Berechtigungsmodell basiert auf den E-Mail-Adressen der Mitglieder und ermöglicht die Bearbeitung in Abhängigkeit ihrer Rolle. So kann beispielsweise der Vereinsobmann Mitglieder hinzufügen und bearbeiten, ein einfaches Mitglied kann nur seinen eigenen Eintrag verändern, etc.

Die Applikation wurde unmittelbar nach der Veröffentlichen der Meteor Version 1.3 erstellt. Ich implementierte sie gemäß das damals frischen Meteor Guide und nutzte das gleich, um Feedback in der Form von Github Pull Requests zu geben, um damit den Guide zu verbessern. Die Erfahrung aus Entwicklersicht war so zufriedenstellend wie erwartet. Der Upgrade zu einer neuen Version brachte einige Änderungen. Die neue Applikation verwendet durchgängig JavaScript Module und ES6. Für das Templating ist Blaze im Einsatz, als Router wurde der Flow Router gewählt. Der Meteor Guide war eine hilfreiche Quelle, wie auch das E-Book Exploring ES6 von Dr. Axel Rauschmayer.

 

Der Kunde ist mit der Applikation sehr glücklich. Die Wettbewerbsleiter haben eine aktuelle Bedienoberfläche zum Eingeben der Resultate, die Vereinsmitglieder können einfach ihre Wertung ansehen.

Der nächste Schritt ist die Implementierung von Mannschaftsbewerben.

Die Applikation ist unter http://bsslv.meteor.qnipp.com online verfügbar.

Meteor Packages: Den Paket-Cache aufräumen

Meteor Packages: Den Paket-Cache aufräumen

Meteor speichert alle heruntergeladenen Pakete im Benutzerverzeichnis unter ~/.meteor/packages. Ein automatisiertes Aufräumen ist nicht möglich, Meteor kennt nicht die Abhängigkeiten aller Applikationen am Computer.

Meine Partition is immer zu klein, daher nutzte ich folgenden Einzeiler, um aufzuräumen:

cd ~/.meteor/packages; for i in * ; do pushd $i > /dev/null; ls | sort -V | head -n-1 | while read v ; do rm -rf $v .$v* ; done ; popd ; done

Damit werden alle bis auf die neueste Version der einzelnen Pakete gelöscht. Wenn eine Applikation eine ältere Version braucht, wir diese beim nächsten Start heruntergeladen und wieder installiert.

Das hat mir heute 2,5 GB Speicher gebracht. Das Skript funktioniert bei mir unter Linux, es sollte aber auch auf Mac OS X funktionieren.

Wenn man sich irrtümlicherweise den Link zum meteor Kommandozeilenwerkzeug löscht – das passierte mir heute mit der ersten Version der obigen Zeile – kann dieser mit folgendem Befehl wieder hergestellt werden.

cd ~/.meteor/packages; ln -sf `ls -d packages/meteor-tool/* | sort -Vr | head -n1`/mt-os.linux.x86_64/meteor .

Die Befehle haben bei mir funktioniert. Ich übernehme aber keine Verantwortung, dass sie auch auf Deinem Rechner machen.