programmier.bar – der Podcast für App- und Webentwicklung

Project Fugu versucht Web-Anwendungen auf die nächste Stufe zu heben, indem es Fähigkeiten mit nativer Power ins Web bringt. Mit diesen Worten beschreibt unser Gast Christian Liebel das Thema dieser Folge. Ihr kennt ihn bereits aus Folge 70, in der er mit uns über Web Components spricht. Mit dem Slogan “Bridging the Native Gap” startete Google das Projekt für einen neuen Standard, der die Entwicklung von Web- und Native-Apps vereinfachen soll. Auch bekannt unter dem Namen Web Capabilities, haben sich mit der Zeit die beiden Tech-Riesen Intel und Microsoft angeschlossen. Nun verfolgen sie gemeinsam das Ziel, das Web mit neuen Schnittstellen auszustatten und Browser so mit nativen Funktionen auszustatten. Denkbar ist hier beispielsweise der Zugriff auf die Hardware oder das Dateisystem des Endgeräts. Weitere Links aus der Folge: Liste bereits bestehender Features und aktueller Statusüberblick gewünschter Features. Jährlicher Bericht des HTTP Archive, an dem Christian in diesem Jahr mitwirkt. Aufgepasst! Ihr könnt Christian Liebels Buch “Progressive Web Apps. Das Praxisbuch” (2018) von uns zugesandt bekommen! Schreibt uns einfach eine Direktnachricht über Twitter, weshalb das Buch genau das Richtige für euch ist. Die schnellsten drei von euch bekommen ein Paket von uns. Mit Christian könnt ihr über seine Webseite und über alle dort verlinkten Social-Media-Accounts in Kontakt treten. Picks of the Day Jojo: Clubdesk - Eine Vewaltungssoftware für das Vereinswesen. Sebi: Asynchrone Generatoren in JavaScript - Mach mit einem Await eine “for…of”-Schleife.  Dennis: Sketchup - Software zur 3D-Modellierung, bspw. zur Planung einer Renovierung im Haus. Christian: Pokered auf GitHub - Eine Disassembly von Pokémon Red. Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback. podcast@programmier.bar Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. Twitter Instagram Facebook Meetup YouTube Musik: Hanimo

Effiziente, zuverlässige und skalierbare serverseitige Applikationen bauen mit diesem Node.js-Framework: Gemeinsam mit Dr. Gerd Jungbluth geben wir euch in dieser Folge einen Überblick darüber, was NestJS besonders macht.NestJS war im letzten Jahr das am schnellsten wachsende Node.js-Framework und sein erfolgreicher Einsatz in großen Projekten von beispielsweise adidas, Decathlon oder Rewe gibt ihm recht. Es ist vergleichbar mit Koa.js und hat Ähnlichkeiten mit Angular. NestJS ist in TypeScript geschrieben und genießt alle Vorteile von progressivem JavaScript. Als opinionated Framework erleichtert es die Entwicklung von serverseitigen Applikationen, die skalierbar, effizient und zuverlässig sind. Dennoch ist es durch seine Modularität flexibel durch andere Libraries erweiterbar. In dieser Podcastfolge gibt uns unser Gast Gerd einen Einblick in seine Erfahrungen mit dem Framework.Picks of the Day ohne LinkGerd empfiehlt in diesem Kontext die Medienreichhaltigkeitstheorie von Robert H. Lengel und Richard L. Daft aus den 1980er Jahren.Picks of the Day: Jojo: Komoot – Komoot zum Planen von Fahrradtouren und Laufstrecken. Die App schlägt euch für eure Region schöne Routen vor. Gerd: Moccamaster – Moccamaster Filterkaffeemaschine für ein analoges Kaffee-Erlebnis an langen Workshoptagen. Gerd: Prisma.io – Prisma.io - Toolkit zum Zugriff auf Datenbanken mit Node.js, das sich auch zur Pflege und Migration von Datenbankstrukturen eignet. Dennis: Slack – Slack - Direct Messenger im Unternehmensumfeld, der die träge und textlastige Kommunikation per Mail drastisch vereinfacht. Slack ermöglicht reibungslosen, einfachen und schnellen Austausch in Direktnachrichten oder per Channelstruktur, um in Gruppen über spezifische Themen zu diskutieren. Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback: podcast@programmier.barFolgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. TwitterInstagramFacebookMeetupYouTubeMusik: Hanimo

In der ersten Folge unseres CTO-Specials haben wir Jesper Richter-Reichhelm zu Gast. Er ist CTO der Heritas GmbH und spricht mit uns über die Erfahrungen aus seiner Zeit als Softwareentwickler bei Jamba, Head of Engineering bei Wooga und CTO bei Outfittery. Jesper erzählt uns davon, wie er – begonnen als Entwickler – bei der Skalierung des Teams von Wooga von 10 auf 300 Personen geholfen hat. Als späterer Head of Engineering organisierte er die Arbeit von rund 90 EntwicklerInnen und lernte viel darüber, was es beim Firmenwachstum zu beachten gibt. Welche Strategien sind bei Einstellungsprozessen erfolgversprechend und wie etabliert man eine Firmenkultur, die auf Feedback und Eigenständigkeit fußt? Haben alle EntwicklerInnen das Zeug zum CTO? Diese und weitere Fragen rund um die Rolle eines Chief Technology Officers klären wir in dieser Folge. Bleibt bis zum Schluss dran, um wertvolle Tipps von Jesper zu erhalten, die er nicht nur (angehenden) CTOs, sondern allen MitarbeiterInnen eines Technologie-Unternehmens mitgeben möchte. Zum Einstieg in das Thema Management im Softwarebereich empfiehlt er das Buch “Accelerate: The Science of Lean Software and Devops”. Im CTO-Special holt sich Dennis Unterstützung durch Dominik, einem der Gründer der Lotum GmbH. Gemeinsam sprechen sie mit CTOs über Erwartungen, Anforderungen und Erfahrungen, welche die Rolle mit sich bringt.Schreibt uns! Was haltet ihr von dem neuen Format? Habt ihr Feedback, das ihr gern mit uns teilen wollt? Schickt uns eure Themenwünsche und euer Feedback. podcast@programmier.bar Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. Twitter Instagram Facebook Meetup YouTube Musik: Hanimo

Wie kann ich ein Front-End ganz ohne Framework bauen? Probier's mit Web Components! In dieser Folge erzählt uns Christian Liebel von den Potenzialen der wiederverwendbaren HTML-Komponenten. Web Components sind ein Set von APIs, die es modernen Browsern ermöglichen, komponentenbasierte Architekturen zu verwenden. Dieses Komponentenmodell wird als Standard kontinuierlich vom W3C weiterentwickelt. Es bietet den großen Vorteil, dass einzelne Elemente einer Webseite aktualisiert werden können, ohne dabei die grundlegende Struktur durcheinander zu bringen. Wir nähern uns in dieser Folge der Frage, ob Web Components womöglich in Zukunft Frameworks wie Angular oder React ablösen werden, gemeinsam mit Christian Liebel von Thinktecture. In seinem Buch “Progressive Web Apps: Das Praxisbuch” schreibt er über plattformübergreifende App-Entwicklung mit Angular und Workbox und ist nicht nur Google Developers Expert, sondern auch Microsoft MVP. Auf Twitter könnt ihr Christian unter @christianliebel folgen. Picks of the Day Christian hat mit Web Components auf Paint.js.org die klassische Version von Microsoft Paint nachgebaut und es fühlt sich schön retronostalgisch an! Auf seinem GitHub-Profil gibt’s dazu noch mehr Infos. Sebi: Die JavaScript-Methode ‘Promise.allSettled()’ ermöglicht mehrere asynchrone Tasks, die voneinander unabhängig sind. Jojo: Die neue, coole JavaScript-Funktionalität ‘Private Fields’ wird im EcmaScript-Standard implementiert und ist Teil des Class-Field-Proposals TC39. Aktuell können die Private Fields mit Babel 7 und dem Stage 3 Preset verwendet werden. Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback. podcast@programmier.bar Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. Twitter Instagram Facebook Meetup YouTube Musik: Hanimo 

React ist die meistgenutzte deklarative JavaScript-Bibliothek. Was es mit ihrem Motto “Learn once, write anywhere” auf sich hat, erzählt uns in dieser Folge Fabian Hiller, Gründer von Megalink.io und Mitgründer von Adstock.io. React ermöglicht eine komponentenbasierte Entwicklung und hat auch darüber hinaus ähnliche Ansätze wie Vue.js. Initial entwickelte Facebook das Framework Open Source, das heute im Web auch von Instagram, Netflix, Airbnb und Weiteren genutzt wird. Unser Gast Fabian erzählt uns von seinen Erfahrungen mit React, die er in seinen beiden Projekten Megalink und Adstock sammeln konnte. Gemeinsam sprechen wir über einfach erstellbare, interaktive User Interfaces, Komponenten und Props, React Native, JSX und Hooks. Fabian teilt sein Wissen über App- und Webentwicklung auf seinem YouTube-Kanal. Klickt hier, um ihm auf Instagram zu folgen. Picks of the Day Fabian: Storybook ist ein Tool, um UI-Komponenten zu isolieren und zu dokumentieren. Jojo: Mit “State of JS 2019” ganz einfach Technologien vergleichen, die im Umfeld von JavaScript beliebt sind. Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback. podcast@programmier.bar Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. Twitter Instagram Facebook Meetup YouTube Musik: Hanimo

WebAssembly, kurz Wasm, ist Bytecode, der Webapplikationen in modernen Browsern schneller machen soll. Wie kann ich den Webstandard in mein eigenes Projekt integrieren und wie funktioniert er als Ergänzung zu JavaScript? In dieser Folge sprechen wir mit Christian Weyer, Mitgründer und CTO von Thinktecture, über die größten Vorteile von WebAssembly. Als CTO einer Beratungsfirma für SoftwareentwicklerInnen und -architektInnen kennt sich Christian mit allem aus, was .NET-Frameworks betrifft. Eins der großen Potenziale von WebAssembly sieht er darin, dass Projekte, die in älteren Sprachen geschrieben wurden, wieder mühelos zugänglich gemacht werden können. Der Bytecode ist aber auch für neue Projekte nützlich: Nativen Code auf Basis von C, C++ und Rust macht WebAssembly im Browser verfügbar, ohne dass Plugins wie früher mit Flash, Silverlight oder Java notwendig sind. Christian Weyer ist auf Twitter aktiv und Thinktecture findet ihr auch dort. Picks of the Day Christian ist Fan von alter Hardware. Tiny Emus läuft in WebAssembly und ist ein Emulator für alte Geräte wie bspw. den Commodore 64. Fabi: Wie in der letzten Folge spricht Fabi wieder von der Liste, die einen 1x Engineer definiert. Er möchte, dass sich jeder Entwickler diese Liste einmal zu Herzen nimmt. Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback. podcast@programmier.bar Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. Twitter Instagram Facebook Meetup YouTube Musik: Hanimo

Die Trennung von HTML und CSS aufheben, um User Interfaces schnell und flexibel gestalten zu können – klingt gut für euch? Dann könnte Tailwind CSS etwas für euch sein! In dieser Folge erzählt uns Alexander von Studnitz von dem utility-first CSS Framework, das super einfach zu bedienen ist. Was auf den ersten Blick unübersichtlich wirken mag, macht bei genauerem Hinsehen einen großen Unterschied zu klassischen CSS-Lösungen: Mit Tailwind wird Design direkt im Code erkennbar. Während bspw. Bootstrap mit vordefinierten Stilen arbeitet, bietet Tailwind die passenden Werkzeuge zum individualisierbaren Bau von Webapplikationen an. Unser Gast Alexander studiert Informatik an der TU Darmstadt und codet für die junge und dynamische Digitalagentur clickbar., wo er bereits einige jahrelang Erfahrungen mit dem Framework sammeln konnte. Deshalb ist er unser Experte für einen Blick auf das von Adam Wathan und Steve Schoger entwickelte Open Source Framework. Folgt Alexander und clickbar. auf Twitter oder schaut euch den Tailwind CSS Account an! Weitere Links aus der Folge: Alexander hat mit einer kleinen Gruppe beim WirVsVirus-Hackathon im März 2020 teilgenommen, über den wir in Folge in Folge 58 gesprochen haben. Seht euch den frühen Vorgänger Corona-Warn-App namens “Logbook” an, der mit Tailwind kreiert wurde! Adam Wathan und Steve Schoger, die Entwickler von Tailwind, bieten ein Set von Komponenten an, die kostenpflichtig für das Open Source Framework nutzbar sind. Funfact: Das letzte Redesign von Spiegel.de wurde mit Tailwind CSS umgesetzt.Picks of the Day Alexander: Kostenlose Icon-Sammlung, die mit Tailwind CSS verwendet werden kann auf Heroicons.dev. Sebi: Ein Buch über Design, das jeder Entwickler gelesen haben sollte. Wathan, Adam u. Schoger, Steve (2018): Refactoring UI. Fabi: Kennt ihr die Theorie des 10x Engineers? Keep cool, hier ist eine Liste, was einen 1x Engineer ausmacht. Dennis: Obwohl Tailwind nicht viel für euren persönlichen Stil vorgibt, hat es hübsche, ausgewählte Grundfarben. Dennis’ Lieblingsfarbe ist Gray-300 mit dem Hex-Code E2E8F0. Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback. podcast@programmier.bar Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. Twitter Instagram Facebook Meetup YouTube Musik: Hanimo

Wir möchten euch auf unserem Weg zu zwei neuen Webseiten mitnehmen und beginnen in dieser Folge mit der Vorstellung des High-Level-Frameworks Nuxt.js für Vue.js-Apps. Unser Ziel ist die Generalüberholung der Webseiten der programmier.bar und unseres Entwicklerstudios Lotum. In dieser Folge erläutern wir grundlegende Begriffe wie Single Page Application (SPA), Isomorphic und Universal Web Apps, Server Side Rendering (SSR) und Static Site Generation. Nuxt.js ist ein sogenanntes Opinionated Framework, das den Rahmen in der Entwicklung stark vorgibt und von Beginn an bis zur fertigen Seite unterstützt. Damit wird der Werkzeugkasten optionaler Module einfacher bedienbar und die moderne, weltweit erreichbare und vor allem schnelle Webseite ist nicht mehr weit. Picks of the Day Dennis: Die iOS 14 Public Beta ist erstaunlich stabil und eine Empfehlung wert. Achtung Edit: Die Corona-Warn-App funktioniert nicht mehr mit iOS 14! Sebi: Entwickler-Tools der Developer Preview von Safari Fabi: Dedicated Devtools für Node im Chrome Inspect Tab (chrome://inspect) Jojo: CodePen-Playground unterstützt jetzt auch Flutter Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback. podcast@programmier.bar Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. Twitter Instagram Facebook Meetup YouTube Musik: Hanimo

Halb so groß und doppelt so schnell – das verspricht Vue.js 3. Der stable Release steht kurz bevor und wir haben uns die Versprechungen der neuen Version in der Beta angesehen. In Folge 65 möchten wir unsere Impressionen zu den spannendsten Features mit euch teilen! Vue 3 wurde bereits 2018 von Evan You, dem Gründer von Vue.js, angekündigt und seither von allen Vue-Enthusiasten sehnlichst erwartet. Hatte man in der alten Version manchmal damit zu kämpfen, eigene große Projekte in TypeScript aufzusetzen, so ist Vue 3 nun von Haus aus in TypeScript geschrieben und bietet damit eine bessere Typsicherheit sowie Typinferenz. Wir sprechen in dieser Folge zunächst über die Motivation der Entwickler zur Neuauflage von Vue und gehen dann ans Eingemachte: die neuen Features und allem voran die neue Composition API! Hier geht es auch zu den Podcastfolgen 43 und 48, in denen wir über unsere meistgenutzten Features der älteren Versionen von Vue.js sprechen. Picks of the Day Sebi: MQL (MetaQuotes Language) von Google, um flexibel die Visualisierung von Daten zu beeinflussen, die seitens Google in Graphen dargestellt werden. Nützlich bspw. für die Ratio zweier Datenwerte. Mit dem dpdm Tool könnt ihr euch Circular Dependencies einfacher anzeigen lassen. Fabi: Mit der Extension Remote SSH von Visual Studio Code Folder der SSH-Verbindung anzeigen lassen und Files bearbeiten. Dennis: Drücke auf dem Mac gemeinsam Cmd, Shift und T im Browser, um einen eben geschlossenen Tab wieder zu öffnen. Streamt uns!Diese und alle vergangenen Live-Folgen könnt ihr auf YouTube anschauen. Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback. podcast@programmier.bar  Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. Twitter Instagram Facebook Meetup YouTube Musik: Hanimo

Ein neuer Ansatz in der Webentwicklung dank des JavaScript-Frameworks Svelte? Wir wollen wissen, was es mit diesem Framework auf sich hat und haben Vanessa Böhner, Frontend-Entwicklerin und begeisterte Svelte-Nutzerin, eingeladen mit uns darüber zu sprechen. Sie verrät uns, wieso man bei Svelte von „Write less, do more” spricht und was die Vorzüge gegenüber den Klassikern Vue.js und React sind. Vanessa war lange als Senior Product Engineer tätig und koordiniert die „VueVixens” (künftig „Front-End Foxes”) in München, eine Female-Focus-Community im Frontend-Development. Als sie auf Svelte stieß, waren ihr die größten Vorzüge des Frameworks noch gar nicht bewusst. Svelte kann theoretisch als Compiler bezeichnet werden und verfügt im Gegensatz zu React und Vue nicht über einen virtuellen DOM, wodurch es deutlich schneller als seine klassischen Alternativen ist. Um reaktiv arbeiten zu können, müssen mit Svelte keine weiteren manuellen Schritte getan werden, da seine Reaktivität in Svelte selbst verankert ist. Diese und weitere Vorzüge erzählte uns Vanessa im Livestream dieser Folge. Schön, dass ihr Teil davon wart! Rich Harris hielt auf dem JSCAMP 2019 einen Talk über Reaktivität, den wir in dieser Folge zitieren.Auf Vanessas Webseite könnt ihr sehen, wie Svelte am Ende aussehen kann und den Code der Webseite auf Vanessas GitHub-Account studieren. Unter @vannsl findet ihr Vanessa auf Twitter. Picks of the Day Vanessa mag CMS Storyblok. Dennis empfiehlt euch, in die beiden Podcasts von Vanessa reinzuhören. Beide handeln von Testing: In expect(Exception) geht es ums Frontend-Testing, während sie sich in Ausbaufähig dem Weintesten widmet.  Fabi automatisiert nun auch seine Rollläden zuhause mit dem Shelly 2.5. Jojo lobt die schöne Webseite von Svelte. Streamt uns! Die nächste Live-Folge nehmen wir am Mittwoch, den 3. Juni, um 18 Uhr auf. Seid dabei und bringt eure Fragen und Anregungen ein! Auf unserer Webseite erhaltet ihr mehr Informationen. Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback. podcast@programmier.bar Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. Twitter Instagram Facebook Meetup YouTube Musik: Hanimo