Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / neuigkeiten / Entwickler-Blog.php

https://entwickler.de/feed/rss2

WordPress, Datenbankdesign und mehr ? Neu am Kiosk: PHP Magazin 5.19 (17.07.2019 08:20:29)

Das neue PHP Magazin ist ab sofort am Kiosk erhältlich: Die Ausgabe enthält neben PHP-Themen Beiträge zu WordPress im Jahr 2024, zu den Grundlagen des rationalen Datenbankdesigns und wie man PHP-Applikationen containerisiert und auf Kubernetes deployed

Wo sehen Sie sich in fünf Jahren?

Liebe Leserinnen, liebe Leser,

die einen haben nur davon gehört, die anderen haben es schon live erlebt: Die berühmt-berüchtigte Frage im Bewerbungsgespräch: ?Wo sehen Sie sich in fünf Jahren?? Nun ja, eine schwierige Frage in der heutigen, schnelllebigen Zeit Vielleicht hat man grobe Pläne für das eigene Leben im Kopf, die sich nicht auf die nächsten fünf Jahre beschränken lassen Eventuell weiß man aber noch gar nicht, was man überhaupt möchte ? abgesehen idealerweise von dem Job, auf den man sich gerade bewirbt Alles in allem ist das eine komplexe und sehr weitreichende Frage Man sagt: „Immer, wenn der Mensch anfängt; seine Zukunft zu planen, fällt im Hintergrund das Schicksal lachend vom Stuhl“

Florian Simeth hat sich in der neuen Ausgabe des PHP Magazins der Frage nach einer solchen Zukunft angenommen und wagt für WordPress einen Blick in die Zukunft, genauer gesagt, in die so oft gefragten kommenden fünf Jahre Das CMS WordPress ist weitverbreitet und sorgte zuletzt in der Community mit der Einführung des neuen Standardeditors Gutenberg für Aufruhr Doch wie wird WordPress 2024 aussehen? Wird es mehr JavaScript-Anteil geben? Wird das CMS nur noch aus Gutenberg mit einem austauschbaren Backend bestehen? Florian Simeths Artikel endet mit „Alles ist denkbar und trotzdem ist die Zukunft [?] nicht vorhersagbar“ Das wäre wohl auch eine mögliche Antwort auf die Frage in einem Bewerbungsgespräch Eines steht für mich fest: Man kann eine Prognose wagen, sollte aber im Hinterkopf behalten, dass auch mal etwas schief gehen kann und man mit seinen Plänen scheitern kann

Sebastian Bergmann widmet sich in der vorliegenden Ausgabe innerhalb der neuen PHP-Kolumne eben diesem Thema, dem Scheitern In diesem Zusammenhang geht es um gescheiterte Softwareprojekte und wie man daraus dennoch etwas Positives ziehen kann Denn auch wenn Pläne mal nicht aufgehen, lässt sich ?aus Steinen, die einem in den Weg gelegt werden, Schönes bauen? der letzte Spruch, versprochen!

„Erfolgreich Software zu entwickeln bedeutet, zielgerichtet vorzugehen“ ? meiner Meinung nach auch eine gute Antwort auf die Frage nach einer Fünfjahresprognose Man sollte das Ziel nicht aus den Augen verlieren, doch dabei auch Umwege in Kauf nehmen

Nun zurück zu den Inhalten der neuen Ausgabe des PHP Magazins Wir haben wieder viele spannende Themen rund um PHP für euch zusammengestellt: Stefan Marx stellt ein nützliches PHP-Monitoring vor, und unsere Autoren Dr Veikko Krypczyk und Elena Bochkor zeigen die Grundlagen des relationalen Datenbankdesigns Natürlich haben wir auch wieder einen Blick über den Tellerrand gewagt: Michael Rohrlich gratuliert der DSGVO zum Geburtstag und lässt das vergangene erste Jahr ? mit den ersten Gerichtsurteilen zur DSGVO ? Revue passieren Sebastian Springer stellt uns die JavaScript-Farbbibliothek Color vor, während uns Thomas Eiling Einblicke in die neue sechste Version von Shopware gewährt

In der vorliegenden Ausgabe des PHP Magazins erwartet euch ein breites Themenspektrum mit und rund um PHP

Viel Spaß beim Lesen wünscht Ihnen
Madeleine Domogalla, Redakteurin

Die Highlights im PHP Magazin 519

WordPress 2024: Ein Blick in die Zukunft
Wird WordPress zum Block-Gram-Work-Modul-Baukasten-Plattform-OS?

Die Basics beherrschen
Grundlagen des relationalen Datenbankdesigns ? kompakt und klar

Auf den Datadog gekommen
Optimal im Zusammenspiel zwischen Services und Anwendungen

Happy Birthday, DSGVO?
Eine Bilanz nach einem Jahr Datenschutz-Grundverordnung

Jetzt bestellen: PHP Magazin 519 – WordPress 2024: Ein Blick in die Zukunft

Der Beitrag WordPress, Datenbankdesign und mehr – Neu am Kiosk: PHP Magazin 519 ist auf entwicklerde erschienen


Electron: Wie man Web-Technologien auf den Desktop bringt (16.07.2019 12:28:04)

Mit Electron bringt man JavaScript auf den Desktop, mit WebAssembly dreht man den Spieß um: Welche Technologien stecken hinter den Konzepten und wie unterschiedlich sind die Ideen hinter Electron und WebAssembly wirklich? Das haben wir Jakob Westhoff im Interview auf den JavaScript Days 2019 gefragt

Mit Electron lassen sich JavaScript-Anwendungen auf den Desktop holen Was aussieht wie eine ganz normale Anwendung, wird im Hintergrund aber doch in einer unsichtbaren Browser-Instanz ausgeführt Damit wirken Web-Apps wie native Desktop-Anwendungen Neben dem Trend, JavaScript auf diese Weise auf den Desktop zu holen, gibt es mit WebAssembly nun auch eine Option dafür, den gegenteiligen Weg zu beschreiten und C/C++-Anwendungen in den Browser zu bringen Die Grenzen der Plattformen verschwimmen, die technologischen Kategorien dahinter lösen sich auf Auf den JavaScript Days 2019 haben wir mit Jakob Westhoff darüber gesprochen, wie sich Electron über die Jahre weiterentwickelt hat und wie man WebAssembly sogar zusammen mit Electron nutzen könnte

Der Speaker: Jakob Westhoff

Jakob Westhoff ist professioneller Full-Stack Entwickler mit großem Interesse für Web-Architekturen Nach einer erfolgreichen Karriere als Geschäftsführer, Berater und Trainer arbeitet Jakob heute für die Crosscan GmbH aus dem schönen Witten Mit seiner Leidenschaft für hochqualitativen JavaScript- und PHP-Code, sowie seinen großen Erfahrungsschatz unterschiedlichster Technologien und Architekturen ist er hier mitverantwortlich für die Entwicklung innovativer Lösungen für den Einzelhandel und die Industrie Darüber hinaus unterstützt er andere Entwickler weltweit darin, Probleme zu lösen und komplexe Projekte umzusetzen

JavaScript Testing in der Praxis Teil 1 + 2

mit Dominik Ehrenberg Crosscan und Sebastian Springer MaibornWolff

Fortgeschrittene schwarze Magie in TypeScript

mit Peter Kröner ‚Webtechnologie-Erklärbär‘

Der Beitrag Electron: Wie man Web-Technologien auf den Desktop bringt ist auf entwicklerde erschienen


SymfonyCloud wurde vom Stapel gelassen (16.07.2019 12:04:44)

Nach einer zweijährigen Entwicklungszeit ist nun die SymfonyCloud an den Start gegangen Der Platform-as-a-Service soll insbesondere als Hosting-Dienst und vollständiger Stack für Nutzer des Symfony-Frameworks dienen

Der für Symfony-Anwendungen optimierte PaaS wurde wie berichtet erstmals im vergangenen Dezember vorgestellt Während eines sechsmonatigen Early-Access-Programms wurde zwischenzeitlich ua die Benutzeroberfläche, die Dokumentation und der Support weiterentwickelt Nun wurde die Symfony-Cloud als weiterer Dienst eingeführt, um Symfony-Entwicklern einen weiteren Mehrwert zu bieten Neben dem Hostingdienst, soll die Plattform alle notwendigen Tools und Dienste bieten, um die Entwickler bei der Arbeit mit Symfony zu unterstützen

Projekte komplett in der Konsole entwickeln

Die jetzt von den Symfony-Machern vorgestellte PaaS-Lösung lässt sich laut des Blogbeitrages von Chefentwickler Fabien Potencier nahtlos in den Entwicklungsworkflow von Symfony integrieren Standardmäßig implementiert sind unterstützte Dienste wie MySQL/MariaDB, PostgreSQL, Redis, Memcached, Elasticsearch, RabbitMQ, MongoDB, Influx DB, Solr, Varnish und Kafka Mit einem vollständig verwalteten Stack sollen Symfony-Projekte künftig komplett in der Konsole entwickelt werden können So kann mit der Git-Integration und einer Ceph-Layering-Technologie innerhalb von wenigen Minuten von der Entwicklungsoberfläche zum Staging und zur Produktion und zurück gewechselt werden

Gestaffeltes Abo-Modell

Die zur Verfügung stehenden Cloud-Abos gliedern sich in die Kategorien Development und Production In der Kategorie Development werden 10 Euro pro Monat und Projekt aufgerufen Dafür hat der Entwickler ua vier Umgebungen und einen 5 GB-Speicher zur Verfügung Bei den Produktions-Abos fangen die Kosten bei der Standard-Version bei 50 Euro monatlich und pro Projekt an und gehen bis zu 1000 Euro bei der Double Extra Large Version Alle weiteren Informationen sind auf der Produktseite der SymfonyCloud zu finden

Der Beitrag SymfonyCloud wurde vom Stapel gelassen ist auf entwicklerde erschienen


Ember 3.11 für Ember.js, Ember Data und CLI erschienen: 5 neue Features (16.07.2019 11:45:24)

Ember 311 ist da Das JavaScript Framework erhält in dem Update einige neue Features, darunter Element Modifiers mit attributes im Core Framework Emberjs Was sind die weiteren Neuerungen in v311?

Ember 311 wurde veröffentlicht Sowohl das Core Framework Emberjs als auch Ember Data und das Command Line Interface Ember CLI sind jetzt in Version 311 verfügbar In Emberjs sind vier neue Features mit an Bord, während Ember Data ein neues Feature erhält

Emberjs 311

Version 311 des Core Frameworks Emberjs ist inkrementell und abwärtskompatibel Es sind neben einigen Bugfixes und Deprecations auch vier neue Features enthalten:

Das erste neue Feature sind Element Modifiers mit attributes, auch als ?Splattributes? bezeichnet Näheres zu diesem Feature gibt es im RFC auf GitHub Als weitere Funktion ist der {{fn}} Helper hinzugekommen, wodurch Argumente an Aktionen übergeben werden können Der neue {{on}} Modifier betrifft den Umgang mit dem Listening für DOM-Events Das vierte neue Feature im Core Framework ist die Inject Parameter Normalization

Alle Neuerungen in Emberjs zeigt die Release Page

Ember Data 311

In Ember Data ist ein neues Feature enthalten: Version 311 ist das erste Release, das Ember-Daten als Kollektion von kleineren Packages ausliefert Damit geht auch eine neue Syntax für den Import einher

In Ember Data 311 ist ein Bug bekannt, durch den ember generate model something nicht verwendet werden kann An einem Patch wird schon gearbeitet Sobald er bereitsteht, soll das auf dem Ember-Blog bekanntgegeben werden

Weiteres zu Ember Data 311 gibt es auf der Release-Seite Zum Ember CLI steht ebenfalls eine Release Page bereit, jedoch wurden dort nur einige Bugfixes implementiert

Zu den Features aller Komponenten von Ember 311 wurde ein Blogeintrag auf dem Ember-Blog veröffentlicht

Der Beitrag Ember 311 für Emberjs, Ember Data und CLI erschienen: 5 neue Features ist auf entwicklerde erschienen


Faulheit und andere Tugenden: Selbstverbesserung mit klarem Ziel (16.07.2019 08:48:24)

Manchmal musste ich mich in der Vergangenheit rechtfertigen, wenn ich einmal etwas Programmierzeit mit spielerischen Projekten verbracht habe Das verwundert Chefs und Lebenspartner, sorgt höchstens bei Kindern für Begeisterung: "Wow, Zahlenraten!" Letzteres ist erdacht ? selbst sehr junge Leute sind heute mit den einfachsten Programmen kaum noch zu begeistern

Das war mal anders Als ich ein Teenager war, gab es Computerzeitschriften, etwa für Commodore-Computer, in denen BASIC-Listings abgedruckt waren Diese konnte man einfach eintippen und ausprobieren, oder natürlich auch im Detail lesen und verstehen lernen Ich fand das ganz spannend und verbrachte oft Zeit damit, den Fehlern, die diese Listings fast immer enthielten, nachzugehen, oder das ganze Beispielprogramm einfach zu verbessern

Für Leute mit mehr Langeweile gab es in den Zeitschriften auch manchmal Programme, die man in Form von Kolonnen hexadezimaler Zahlen eintippen musste Damit man sich dabei nicht scheußlich oft vertippte, hatte jede Zeile am Ende eine Prüfsumme, und ein spezielles Eintipp-hilfsprogramm prüfte jede Zeile sofort Alternativ gab’s auch sehr clevere Systeme, bei denen man mit einem Handscanner eine dicht gedruckte Spalte mit Pixeldaten einlesen musste Diese wurde dann ebenfalls von einem Hilfsprogramm in Programmcode übersetzt Vorteile beider Ansätze: Es passt mehr Code auf die Seite, die Programme konnten komplexer sein, und der Leser konnte den Code nicht lesen ? ich vermute, dass der Autor des Codes das gut fand Großer Nachteil aus meiner Sicht: Ich konnte den Code nicht lesen! Gar so spannend war die reine Funktion der Programme für gewöhnlich nicht Wenn nun der Mehrwert wegfiel, daraus etwas zu lernen, war das nicht mehr so interessant

Nun gibt es ja Leute, die interessieren sich gar nicht besonders dafür, warum Dinge eigentlich so funktionieren, wie sie funktionieren Oder auch, warum sie manchmal nicht mehr? so funktionieren Genau genommen betrifft das uns alle, denn jeder hat gewisse praktische Grenzen für das Interesse an dem, was um uns herum geschieht Wir fahren alle Auto, wissen aber größtenteils nicht im Detail, wie der Motor genau arbeitet oder was man tun muss, wenn er stehen bleibt Wir sehen alle fern, aber spätestens seit dem Flachbildschirm gibt es nicht mehr viele Menschen, die ihren Fernseher von innen kennen

Neugier ist wichtig

Erstaunlich finde ich allerdings, dass es auch viele Menschen gibt, die in ihrem eigenen Wahlumfeld ? also Computer und Programmierung und dergleichen, soweit es diesen Artikel betrifft ? wenig Neugier für die Grundlagen haben Ein Freund, der anonym bleiben möchte, arbeitet seit vielen Jahren als Webentwickler, hat beruflich viel geschafft, verdient gutes Geld und ist als Fachmann in seiner Welt angesehen Auf private Nachfrage hin gibt er allerdings zu, dass er nicht weiß, woher diese komischen Zahlen kommen, mit denen man in HTML und CSS Farben definiert #ff0000 ist rot und #0000ff ist blau, er weiß das auswendig, hat aber keine Ahnung, warum Seltsam, finde ich Fragt man denn da nicht mal nach?

Gestatten, mein Name ist Oliver Sturm und ich bin ein Nachfrager In der Schule habe ich mal diesen Spruch gehört: „Wer nichts weiß und weiß, dass er nichts weiß, weiß mehr als jemand, der nichts weiß und nicht weiß, dass er nichts weiß“ Das fand ich irgendwie cool, andere fanden das irgendwie doof, aber erst im Lauf der Zeit ist mir klar geworden, worin wirklich die Bedeutung der Aussage für mich steckt Wissen, was man nicht weiß, ist im Leben sehr wichtig Egal, um welches Thema es geht ? man hat immer gewisse Kenntnisse und drumherum Lücken Es ist beinahe genauso wichtig, die Lücken richtig einzuschätzen und zu verstehen wie die Kenntnisse anzuwenden

Auf ZX Spectrum und Commodore 116 ging für mich die Reise los, mit Logo und BASIC und ein bisschen Assembler, später C und Pascal BASIC ist natürlich ein Anfang, aber man kann auch hinterfragen, wie das eigentlich funktioniert Assembler ist vielleicht eine Antwort auf manche solcher Fragen, aber was passiert denn im Prozessor? Ich bin noch heute auf dieser Reise, die gleichzeitig vorwärts und rückwärts führt Vor einigen Jahre etwa habe ich für mich die Wissenslücke erkannt, dass ich mich kaum mit der grundlegenden Elektronik auskannte, auf der Computer basieren Irgendwie haben wir da in der Schule nicht viel drüber gelernt, Schluss war nach ein paar Grundlagen zu Gleichstrom, Batterien und Glühbirnen

Lücken füllen

Nun bin ich seit ein paar Monaten dabei, Lizenzen für den Amateurfunk zu erlangen Amateurfunk ist ein sehr interessantes Hobby, und mit der höchsten Lizenzstufe darf der Funker z B auch eigene Geräte bauen und betreiben Das habe ich persönlich bisher nicht vor, aber durch diese weitgehenden Rechte erklärt sich, dass in den Lizenzprüfungen sehr viele Details zu elektronischen Grundlagen abgefragt werden ? die verantwortlichen Stellen wollen sicher sein, dass mein selbstgebautes Funkgerät nicht im ganzen Stadtteil die WLANs lahm legt! So ist dieses Thema für mich sehr spannend, weil es mir hilft, die Lücke zu füllen, die ich aus Sicht eines Computersoftwarearchitekten bisher hatte

Ich finde, wer in einem technischen Beruf arbeitet, sollte Ansprüche an sich selbst stellen Natürlich ist da der Anspruch, im Beruf ausreichende Qualität zu liefern Oft ist die tägliche Arbeit aber nicht die größte Herausforderung, die man sich als Programmierer vorstellen kann Da wird im Team gearbeitet, die eigene Verantwortlichkeit wird oft von außen definiert, Möglichkeiten zur Einflussnahme gibt es manchmal auch nicht viele Wer an den meisten Tagen an einem Modul eines Moduls herumprogrammiert, das sich jemand anderes ausgedacht hat, ist leicht mit dem Notwendigsten zufrieden Natürlich würde der Chef behaupten, man nehme Teil an einer Entwicklung, die eines Tages die Welt verändern könnte usw usf Aber langweilig ist das eben trotzdem manchmal Umso wichtiger ist es also, sich selbst zu fordern!

Anforderungen von außen gibt es auch: an die Qualität und an das Verständnis von Grundlagen, komplexen und aktuellen Themen Software-Craftsmanship ist ein Thema, das in den letzten Jahren populär war Von Programmierern wird verlangt, dass sie die Werkzeuge des Berufs gut kennen DevOps ist ein aktuelles Thema, in dem es oft und gern darum geht, den Devs ? also uns ? neue Verantwortung zuzuweisen All diese Sichtweisen haben gemeinsam, dass es keine strikten Grenzen gibt Wie weit geht die Erwartungshaltung? Ist es okay für Programmierer, manchmal zuzugeben, dass sie etwas Grundlegendes nicht wissen?

Grundlagen sind wichtig

Ich glaube persönlich fest an Ehrlichkeit, wenn es um vorhandene oder fehlende Kenntnisse geht Allerdings ist ganz klar, dass man beim Chef besser dasteht, wenn man alles weiß und jede Frage aus einer plausiblen Perspektive beantworten kann Dazu sind fast immer Grundlagen wichtiger als Infos zu aktuellen Trends Leider gibt es jederzeit so viele unterschiedliche aktuelle Trends, dass die Entscheidung für die wichtigsten, richtigen und zukunftsweisenden oft schwer fällt Mit einer gesunden Ausstattung an Grundlagen wiederum lässt sich der vielversprechende Trend einfacher erkennen, und ich kann neue Technologie oft verstehen, ohne viel dazu lesen, nachdenken oder ausprobieren zu müssen

Nun klingt alles, was ich hier geschrieben habe, nach viel Arbeit Ich denke zwar, dass diese Arbeit Spaß machen kann, kann aber nicht bestreiten, dass mit dem Interesse, der Neugier und dem Nachfragen auch Arbeit einhergeht Deshalb soll dieses Thema nicht ohne eine weitere Betrachtung dastehen, nämlich der Betrachtung von Faulheit Wenn Sie anderen Menschen unterstellen, dass sie faul seien, müssen Sie mit Gegenwehr rechnen Das finde ich persönlich interessant, denn faul sein ist für mich eine Tugend Meine Interpretation ist dabei analog zum Sprichwort ?Ein gutes Pferd springt nicht höher, als es muss?

Natürlich kann man faul sein auch anders einordnen Es gibt sicher Menschen, die Faulheit so weit treiben, dass sie nie etwas tun ? oder zumindest so weit, dass sie selbst das Notwendigste im Leben nicht tun, bis hin zur Existenzbedrohung Davon rede ich natürlich nicht, und hoffentlich ist das auch recht selten Leider gibt es für den genauen Grad der Faulheit, um den es hier geht, keinen besonderen Begriff Den sollte es aber geben, zum Beispiel so in der Art ?hochfunktional faul? Das wäre also ein Mensch, dem es ein Bedürfnis ist, nicht mehr zu arbeiten als er muss, der aber gleichzeitig die Notwendigkeit der Arbeit als solche anerkennt und auch Spaß an ihr hat ? sofern sie eben zweifellos erforderlich und sinnvoll ist

Faulheit als Tugend

Hochfunktionale Faulheit in diesem Sinn halte ich für eine gesunde Grundeinstellung Oft beobachte ich Menschen, denen es an dieser Sichtweise mangelt Die sind bereit, die langweiligsten Aufgaben der Welt tausendfach auf die immer gleiche Art zu erledigen, und denken offenbar nie über mögliche Optimierungen nach Sachbearbeiter in Büros gehören oft in diese Gruppe, wie ich in Kundengesprächen festgestellt habe Solche Leute sehen sich außerstande, die eigene tägliche Arbeit zu beschreiben ? und wenn man sie doch dazu bringt, bleibt der Zweck verschiedener Teiltätigkeiten oft höchst unklar

Optimierung ist der Weg zur Faulheit Wie es der Zufall will, ist Optimierung gleichzeitig der Weg zu konsistenten Resultaten Da wird eine Kampagne für die Kundschaft gestartet, bestimmte Kunden werden nach Kriterien ausgewählt Zu diesen Kunden müssen dann Details in der Datenbank nachgesehen werden, eine Vorlage für das Anschreiben je nach Kundengruppe ausgewählt, Details korrekt eingetragen, Formulierungen gegebenenfalls von Singular nach Plural korrigiert, Anschreiben versandt und als PDF mit korrekten Stichworten am rechten Ort abgelegt, der bearbeitete Datensatz in einer anderen Liste verzeichnet Wer das ein paar hundertmal tun soll, der macht Fehler, verschreibt sich oder vergisst einen Schritt Wenn der Vorgang hingegen automatisiert werden kann, geht’s plötzlich ganz schnell und einfach und vor allem fehlerfrei Als hochfunktionaler Fauler tendiere ich dazu, etwas Zeit auf die Automatisierung zu verwenden und danach die eigentliche Aufgabe zügig und korrekt zu erledigen ? zum großen Teil deshalb, weil ich mich so sehr gegen die Idee sträube, die nächsten Tage oder Wochen mit repetitiver Arbeit zu verbringen

Für Programmierer gilt all das natürlich auch Oft haben wir bei der Programmierung die Wahl, ein Problem nur oberflächlich oder auch tiefergehend zu lösen Vielleicht gibt’s da einen Algorithmus, den wir auf Stack Overflow finden Vielleicht gibt’s auch in der eigenen Codebasis schon eine ähnliche Implementation, die per Copy-and-paste übernommen und angepasst werden kann Solche Ansätze sind natürlich mit Faulheit im Allgemeinen gut zu vereinbaren, aber der Erfolg ist kurzfristig In nicht allzu ferner Zukunft werden wir zusätzlich Arbeit investieren müssen, um die entstehende technische Schuld wieder abzubauen Der hochfunktional Faule hingegen denkt klüger über die Sache nach und entscheidet sich, anfangs ein wenig mehr Arbeit zu investieren Natürlich können wir dennoch den Algorithmus von Stack Overflow benutzen, aber er kann so in die eigene Architektur integriert werden, dass kein enormer Refaktorisierungsbedarf entsteht Copy-and-paste im eigenen Code vermeiden wir sicher besser gleich, soweit möglich

Fazit

Allgemein geht diese Sichtweise gut mit den Ideen der agilen Programmierung einher Jede Implementierung einer User Story erfordert, dass ein guter Weg zur Integration der neuen Anforderung gefunden wird Je besser der Weg, desto weniger Arbeit steht jetzt und in der Zukunft an Damit schlage ich den Bogen: Wer zusätzlich zur eigenen Anwendung auch ihr Umfeld und die Technologieplattform im Detail versteht, kann in der täglichen Arbeit die besten Entscheidungen treffen Für dieses tiefe Verständnis ist es wichtig, ausreichend in die Grundlagen zu investieren, nachzufragen, mit einer gesunden Neugier an jede Aufgabe heranzutreten Arbeit an der richtigen Stelle ist der Weg zur gesunden Faulheit

Der Beitrag Faulheit und andere Tugenden: Selbstverbesserung mit klarem Ziel ist auf entwicklerde erschienen


Browser-DevTool ?Elements? für Visual Studio Code verfügbar (15.07.2019 13:55:55)

Eine neue Preview-Erweiterung für Visual Studio Code steht bereit: Mit Elements for Microsoft Edge Chromium findet das beliebte Browser-DevTool Elements seinen Weg in den Quelltexteditor

Microsoft hat das DevTool Elements aus dem Chromium-basierten Browser Microsoft Edge für VS Code zur Verfügung gestellt Zur Nutzung der Extension, die als Preview veröffentlicht wurde, muss ein Dev oder Canary Build von Microsoft Edge Chromium verwendet werden Der Browser hat ebenfalls noch Preview-Status

Elements for Microsoft Edge Chromium

In den DevTools von Microsoft Edge Chromium können durch das Elements-Panel z B HTML und CSS editiert und DOM Mutation Breakpoints eingestellt werden Durch die Integration in VS Code sollen die verschiedenen Workflows zwischen DevTools und IDE verbessert werden

Mithilfe der Elements-Erweiterung kann das DOM direkt aus VS Code heraus untersucht und debuggt werden Zudem sind die Änderungen an CSS und HTML in Echtzeit sichtbar In einem Demo-Gif werden die Features gezeigt:

Elements for Microsoft Edge Chromium in VS Code; Quelle: Microsoft

Microsoft plant laut Blogeintrag, weitere DevTools in VS Code zu integrieren In diesem Rahmen sei als erster Prototyp Elements ausgewählt worden, da es das meistgenutzte DevTool in Edge sei Der weitere Verlauf des Prozesses werde auf dem Community-Feedback aufbauen Allerdings sollen die DevTools nicht komplett aus dem Browser in die IDE migriert werden

Alle weiteren Details zu Elements for Microsoft Edge Chromium gibt es auf dem Windows-Blog Im VS Code Marketplace steht die Preview Extension zum Download bereit

Der Beitrag Browser-DevTool ?Elements? für Visual Studio Code verfügbar ist auf entwicklerde erschienen


StandardJS: Version 13 des JavaScript Standard Style veröffentlicht (15.07.2019 11:36:23)

Das Modul JavaScript Standard Style, auch bekannt als StandardJS, umfasst einen Styleguide, Linter und Formatter für JavaScript-Projekte Nun ist Version 13 des Projekts erschienen, die den Standard erweitern soll

StandardJS 13 ist da Das JavaScript-Modul bietet verschiedene Funktionen zur Formatierung, für das Linting und die Umsetzung von Code-Styles in JavaScript an; Version 13 bringt einige neue Formatierungsregeln und ein paar Breaking Changes mit Zu letzteren gehört, dass der Support für Nodejs 6 entfällt Diesen Schritt gehen derzeit viele Tools, da Nodejs 6 sein End of Life erreicht hat Eine größere Änderung an StandardJS betrifft außerdem die Nutzer der ESLint Standard Configuration Bislang mussten Plug-ins für ESLint global installiert werden; seit ESLint v6 wird jedoch eine lokale Installation empfohlen Davon ist auch die StandardJS-Config betroffen

Zu den neuen Regeln, die StandardJS 13 einführt, gehört, dass Leerzeichen innerhalb von Klammern nun vorgeschrieben sind Außerdem können keine APIs mehr genutzt werden, die in Node 10 als deprecated markiert wurden und Properties können sich nicht mehr selbst zuweisen

Mehr Informationen zu StandardJS 13 können dem Blogpost zum Release entnommen werden

Der Beitrag StandardJS: Version 13 des JavaScript Standard Style veröffentlicht ist auf entwicklerde erschienen


PHP-Votings, Angular & User-centered Design ? Unsere Top-Themen der Woche (15.07.2019 10:52:08)

Neben Themen wie Angular, DevOps und User-centered Design, interessierten euch in der vergangenen Woche auch die Geschehnisse rund um PHP Einige Votings für die PHP 74 sind gestartet Diese und weitere Themen haben wir für euch im Wochenrückblick zusammengestellt, damit ihr noch einmal nachlesen könnt

Kalenderwoche 28 liegt hinter uns Wir werfen einen Blick zurück in die vergangene Woche und schauen auf die Themen, die euch am meisten interessiert haben:

PHP-Votings zu PHP 74

PHP 74 soll am 28 November 2019 erscheinen Deswegen ist zur Zeit in der PHP-Welt viel los Wir haben in der vergangenen Woche über zwei Votings auf PHP-Wiki berichtet, die über neue Features und zukünftige Deprecations entscheiden sollen Zum einen gibt es eine Abstimmung über vorgefertigte Standardfunktionen wie str_starts_with, str_ends_with sowie über neue Deprecations Es stehen einige Features bereit, die in PHP 74 als veraltet und in Version 80 entfernt werden sollen

User-centered Design: Nutzerorientierung in der Praxis

Teil 1 der Artikelserie von Olena Bochkor und Dr Veikko Krypczyk fokusierte it-fachartikelde sich auf die Grundlagen des User-centered-Design-Ansatzes Im zweiten Teil zeigen sie das mögliche Vorgehen und weitere Methoden an praktischen Beispielen, wie man den Kunden am Entwicklungsprozess beteiligen kann

Angular für öffentliche Webportale

Angular und andere SPA-Frameworks sind für den Einsatz in Geschäftsanwendungen bestens geeignet Sie müssen nur einmal in den Browser geladen werden und ermöglichen so flüssiges Arbeiten, ohne weitere Seiten auffordern zu müssen Hinsichtlich des Einsatz bei öffentlichen Webportalen ist dies jedoch anders Wir eine Seite nicht schnell genug geladen, kann der ein oder andere Kunde schon mal abspringen Manfred Steyer wwwsoftwarearchitektat zeigt in seinem Beitrag, wie man mit Angluar dennoch auch in diesem Bereich gut arbeiten kann

Die Top 10 der wichtigsten IT-Kompetenzen 2019

In der vergangenen Woche haben wir den DEKRA Arbeitsmarkt-Report näher unter die Lupe genommen und euch über die Top 10 der wichtigsten IT-Kompetenzen im Jahr 2019 informiert Im Fokus stehen Softwareentwickler und welche Kompetenzen sie auf dem deutschen Arbeitsmarkt benötigen Außerdem zeigt der Report auch, welche die häufigsten Aufgaben in der Entwicklung sind und welche Soft Skills gefragt sind

DevOps-Fallstricke und wie man ihnen entkommen kann

Vor einigen Jahren wurde die IT in Unternehmen eher stiefmütterlich behandelt Mittlerweile ist der Begriff DevOps jedem bekannt und es scheint die Lösung aller Probleme zu sein Allerdings ist der Weg ein steiniger, denn man muss sich neuen Herausforderungen stellen und der Wettbewerbsdruck steigt Kevin Gerndt erklärt in seinem Beitrag, wie DevOps und das notwendige einreißen festgesetzter Silos gelingen kann

Weitere Must-Reads der Wochen:

  • Planet Android: Huawei bricht den US-Bann, Fuchsia OS gestartet und Gestensteuerung in Android Q Beta 5 geändert
  • Voilà ? Live-Dashboards aus Jupyter Notebooks sind da
  • Women in Tech: ?Wir müssen heute Vorbilder sein und vorleben, dass es selbstverständlich ist, im Tech-Bereich zu arbeiten?
  • PyRobot: Robotikprogrammierung soll einfacher und günstiger werden
  • R: Streng, funktional, dynamisch

Der Beitrag PHP-Votings, Angular & User-centered Design – Unsere Top-Themen der Woche ist auf entwicklerde erschienen


Microsoft stellt Quanten-Programmiersprache Q# Open Source (15.07.2019 10:41:40)

Für das Quanten-Computing entwickelte Microsoft vor etwa zwei Jahren das Quantum Development Kit QDK Jetzt wurden weitere Bestandteile inklusive der Programmiersprache Q# Open Source gestellt

Microsoft Quantum, eine Abteilung von Microsoft, beschäftigt sich bereits seit längerem mit Quanten-Computing ? und hat dazu sogar eigens die Programmiersprache Q# in Verbindung mit dem Quantum Development Kit QDK entwickelt Das QDK war bereits auf GitHub vertreten, doch jetzt wurde auch Q# öffentlich zugänglich gemacht

Microsoft Quantum Development Kit

Die schon länger bestehende Orientierung von Microsoft zur Open-Source-Welt nimmt wieder einmal Form an, und nicht nur das: Laut einem Blogeintrag wurde das QDK von Microsoft veröffentlicht, sei aber in Wahrheit ein ?kollektives QDK?, bei dem die Entwickler-Community eine entscheidende Rolle spiele

Das QDK enthält Microsofts domänenspezifische Programmiersprache Q#, inklusive Compiler, Beispielen und Tutorials Auch Simulatoren und Ressourcenschätzer für Quantenprogramme sind mit an Bord Das QDK bringt Extensions für Visual Studio und Visual Studio Code mit, kann aber auch auf der Jupyter-Plattform verwendet werden Anleitungen zur Verwendung gibt es in der Dokumentation

Weitere Details gibt es auf Microsofts Quantum Repository auf GitHub Die neuerdings Open Source gestellten QDK-Komponenten umfassen den Q# Compiler, die Q# Runtime und den IQ# Kernel

Der Beitrag Microsoft stellt Quanten-Programmiersprache Q# Open Source ist auf entwicklerde erschienen


Web-App Tutorial: Eine Anwendung mit Angular bauen (15.07.2019 10:20:49)

Wiederverwendung wird auch in der Webprogrammierung ganz groß geschrieben Eine nahezu unüberblickbare Auswahl von Bibliotheken und Frameworks bemühen sich um die Aufmerksamkeit des Entwicklers In ein solches Framework muss man sich sorgfältig einarbeiten, um es dann effektiv anwenden zu können Nach einer allgemeinen Einführung wollen wir es mit Angular versuchen Hat man die Funktionsweise und das Prinzip verstanden, dann gelingt ggf auch der spätere Wechsel

Auf dem Weg zum Lernen neuer Technologien und Konzepte für moderne clientseitige Webapplikationen sind wir schon ein gutes Stück vorangeschritten Ein Blick in unsere Agenda zeigt, was heute auf der Tagesordnung steht

Moderne Webprogrammierung: Eine systematische Einführung

  • Teil 1: Motivation ? om Fat-Client zur modernen Web-App, Architektur, HTML5
  • Teil 2: Seiten gestalten ? CSS3/Sass
  • Teil 3: Funktionalität realisieren mit JavaScript
  • Teil 4: TypeScript ? die typsichere Variante von JavaScript
  • Teil 5: Durchstarten ? Eine App mit dem JavaScript Framework Angular
  • Teil 6: UI-Gestaltung, z B mit Ionic
  • Teil 7: Mobile mit Cordova, Desktop mit Electron

Fassen wir kurz für unsere Leser, die erst jetzt zu unserem Kurs stoßen, zusammen, was bisher geschah Zunächst haben wir uns die technologische Basis für moderne Webapplikationen angesehen Die Architektur beruht auf einer clientseitigen Ausgestaltung der Architektur Die technologische Basis bildet HTML5 für die Gestaltung der Seitenstruktur Teil 1; damit ist die Aufgabe von HTML5 auch schon erledigt Um ausdruckstarke Seiten zu erstellen, bietet HTML5 eine Reihe von neuen, spezifischen Tags Das Design, d h das Layout und die Gestaltung einer Seite, werden dagegen in CSS3 vorgenommen Teil 2 Üblicherweise werden HTML5 und CSS3 nicht in einer Datei vermischt, sondern sauber voneinander getrennt Die anzuwendende CSS3-Datei wird im betreffenden HTML5-Dokument referenziert und damit bekannt gemacht Mit HTML5 und CSS3, den absoluten Basistechnologien für das Web, können Sie Webapplikationen erstellen, strukturieren und nach Ihren Vorstellungen gestalten Auch wenn Sie serverseitige Applikationen bauen, zum Beispiel auf Basis von PHP, brauchen Sie beide Technologien Um Dynamik auf Clientseite hinzuzufügen, d h im Browser, müssen Sie JavaScript einsetzen Teil 3 JavaScript ist die Skriptsprache, die heutzutage durch alle modernen Webbrowser verarbeitet werden kann Sie ist dabei plattform- und geräteunabhängig, d h nahezu alle Browser Firefox, Safari, Edge ? auf allen aktuellen Betriebssystemen Windows, Linux, macOS, Android, iOS ? und allen Geräteklassen Desktop, Mobil, Tablet ? können JavaScript ohne weitere Zusätze direkt verarbeiten Mit Hilfe von JavaScript kann man für Aktion und Reaktion sorgen, also etwa für die Verarbeitung von Nutzeraktionen ? Daten können dynamisch ausgewertet, Grafiken auf eine Zeichenfläche im Browser ausgegeben werden Mit der Hilfe spezieller APIs kann man bspw die Ortungsdienste nutzen, den Batteriestatus bei mobilen Geräten abfragen u v m

JavaScript selbst wird von den Browsern in unterschiedlichen Sprachstandards unterstützt Neue Features werden dabei noch nicht von allen Browsern angeboten, sodass man bei der Programmierung ein eher defensives Vorgehen wählen sollte, um eine möglichst breite Kompatibilität zu erreichen Ebenso merkt man JavaScript seinen ursprünglichen Charakter einer Skriptsprache bis heute deutlich an Moderne und häufig eingesetzte Sprachfeatures wie die Objektorientierung sind nicht immer leicht umsetzbar Diese ?Missempfindungen?, meist in Kombination mit einer vermissten Typisierung der Sprache, haben oft Wechsler aus einer anderen modernen Hochsprache wie Java oder C# Die Lösung dafür kann der Einsatz von TypeScript Teil 4, einem Superset von JavaScript sein TypeScript bietet eine vernünftige Syntax für die objektorientierte Programmierung, den Einsatz von Datentypen und weitere Sprachmerkmale moderner Programmiersprachen TypeScript wird während des Entwicklungsvorgangs mit Hilfe eines Transpilers eine Sonderform eines Compilers in JavaScript übersetzt Dabei kann der JavaScript-Standard angegeben werden, wodurch man für eine maximale Kompatibilität mit allen zum Einsatz kommenden Browsern sorgen kann Im Endeffekt bekommt der Browser auch nur JavaScript zur Ausführung angeboten, sodass keine Plug-ins oder Erweiterungen notwendig sind Es bleibt also auf Seiten des Clients Browsers weiterhin bei dem Triple aus HTML5, CSS3 und JavaScript Aus Sicht des Entwicklers kommt noch positiv hinzu, dass jeder gültige JavaScript-Code auch innerhalb von TypeScript verarbeitet wird, d h, JavaScript-Bibliotheken und APIs von Drittanbietern kann man stets ohne Einschränkungen verwenden

Im Grunde hätte man jetzt alles an Bord, um Webapplikationen jeder Größe und Komplexität zu erstellen Der Nachteil bestände jedoch darin, dass man mit jedem neuen Projekt das Rad im sprichwörtlichen Sinn neu erfinden müsste Moderne Softwareentwicklung lebt intensiv von Wiederverwendung Gerade Webapplikationen auf Basis von JavaScript machen davon sehr regen Gebrauch Für fast alle auftretenden Anforderungen und Programmierprobleme stehen Bibliotheken und Frameworks zur Verfügung Sie werden über zentrale Paketmanager ? wie npm ? angeboten und können mit einem einzigen Befehl in bestehende Projekte zur Verwendung eingebunden werden Der Einsatz von Bibliotheken und Frameworks ist das Thema dieses Teils der Artikelserie Neben den theoretischen Grundlagen werden wir uns die konkrete Verwendung anhand des Frameworks Angular ansehen Daran wollen wir die grundsätzliche Funktionsweise studieren und eine erste Beispielapplikation implementieren

Bibliotheken und Frameworks als Basis für die Wiederverwendung

Moderne Softwareentwicklung ist dadurch gekennzeichnet, dass man Code für bekannte Probleme und Anforderungen möglichst nicht neu schreibt, sondern wiederverwendet Open Source hat gerade im Umfeld der Webprogrammierung dazu geführt, dass man vor der Erarbeitung einer eigenen Lösung nach einer generischen Bibliothek oder für umfassendere Fragen nach einem Framework Ausschau hält Der Aufwand kann damit in vielen Fällen erheblich reduziert werden, denn man kann auf erprobte Lösungen zurückgreifen, die Fehlerrate wird sinken und die eigenen Ressourcen können in die spezifische Problemstellung investiert werden

Was ist nun der Unterschied zwischen einer Bibliothek und einem Framework? In der Praxis wird zwischen beiden Grundelementen der Softwareerstellung und -wiederverwendung nicht immer exakt getrennt

Bibliotheken

Ein Entwickler spricht von einer Bibliothek, ein anderer von einem Framework Grundsätzlich kann man sagen: Eine Bibliothek ist eine Ansammlung von Funktionen, Services usw ? meist in Form von generischen Klassen, die durch andere Programme genutzt werden können Für die Verwendung einer Bibliothek muss man diese in das eigene Projekt einbinden bzw die zu nutzenden Elemente importieren Wichtig: Die Bibliothek kann weitgehend ohne Einschränkungen durch das nutzende Programm verwendet werden Sie macht i d R keine Vorgaben bzw Einschränkungen bezüglich des Aufbaus des Programms bzw der Systemarchitektur Da man meist nur wenige Funktionen/Services einer Bibliothek verwendet, wird die Größe des Quellcodes mehr zunehmen, als wenn man die Funktion eigenständig neu implementiert hätte Dennoch werden die Vorteile der Nutzung einer Bibliothek die Nachteile in den meisten Fällen übersteigen Bibliotheken können heruntergeladen und zum Beispiel manuell in die bestehende Projektstruktur eingebunden werden Für die Aktualisierung ist man in diesem Fall vollständig selbst verantwortlich Der Programmierer nutzt eine Bibliothek stets wie eine Blackbox, d h, er muss sich an die vorgegebenen Konventionen zur Kommunikation mit der Schnittstelle halten Wie die Bibliothek intern arbeitet, ist zweitrangig und man muss sich nicht unbedingt damit beschäftigen

Im Umfeld der Webprogrammierung werden Bibliotheken über Paketmanager wie npm eingebunden Dazu werden diese über zentrale Repositories bereitgestellt und auch ein Update kann unproblematisch darüber erledigt werden Viele Services werden heute als nutzbare Dienste über die Cloud in Form von RESTful APIs angeboten und können dann durch das Internet genutzt werden

Frameworks

Ein Framework geht über die Funktion einer Bibliothek hinaus Es bietet ein

Abb 1: Unterschied zwischen Bibliothek und Framework

generisches Lösungskonzept für eine bestimmte Art von Applikationen Die eigene Applikation wird dazu in den Rahmen des Frameworks integriert Meist gibt das Framework eine bestimmte Struktur und Architektur vor, an die man sich halten muss, wenn man das Framework verwenden möchte Im Gegensatz zu einer Bibliothek wird der eigene Code über Callback-Methoden vom Framework aufgerufen Allerdings werden auch beim Einsatz eines Frameworks Bibliotheken genutzt Sowohl der Quellcode der eigenen Applikation als auch das Framework selbst nutzen Webbibliotheken Der Unterschied zwischen einem Framework und einer Bibliothek ist in Abbildung 1 illustriert

Es gibt eine riesige Menge von Bibliotheken und Frameworks für die Nutzung von JavaScript beim Erstellen von modernen Webapplikationen Tabelle 1 enthält eine Auswahl bekannter Frameworks und eine Kurzbeschreibung

Bibliothek/Framework Kurzbeschreibung
Angular Framework zum Erstellen von Webapplikationen Es ist ein clientseitiges JavaScript-Webframework zur Erstellung von Single-Page-Webanwendungen nach dem Model-View-ViewModel-Muster Die Softwareentwicklung und das Testen von Komponenten können damit vereinfacht werden Programmiert wird in TypeScript
jQuery jQuery ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt Die Bibliothek bietet folgende Funktionen: die Elementselektion im Document Object Model, die Document-Object-Model-Manipulation, ein erweitertes Event-System, diverse Hilfsfunktionen, Animationen, Effekte und Ajax-Funktionalitäten Durch Plug-ins kann sie erweitert werden, etwa durch jQuery UI für die einheitliche Gestaltung von Benutzeroberflächen oder jQuery Mobile für Apps auf mobilen Geräten
Vuejs Vue ist ein Framework für die Erstellung von Benutzeroberflächen Im Gegensatz zu anderen Frameworks ist es schrittweise adaptierbar Die Core-Bibliothek konzentriert sich zum Beispiel nur auf die Ansichtsebene und kann leicht in andere Bibliotheken oder vorhandene Projekte integriert werden Andererseits ist man mit Vuejs auch in der Lage, anspruchsvolle Single-Page-Anwendungen zu realisieren
Reactjs React ist eine Bibliothek, die ein Grundgerüst für das User Interface zur Verfügung stellt Sie ist komponentenbasiert, wobei die Komponenten selbst hierarchisch aufgebaut werden React bildet die Basis für Single-Page-Webanwendungen, kann jedoch auch mittels Nodejs serverseitig eingesetzt werden
Aureliajs Bei Aurelia handelt es sich um ein Framework, bei dessen Entwicklung großer Wert darauf gelegt wurde, Komplexität zu reduzieren Aurelia verwendet das MV-Applikations-Entwurfsmuster

Tabelle 1: Ausgewählte JavaScript-Bibliotheken und Frameworks

Sehr häufig lesen und hören Sie von Angular Angular ist inzwischen ein ausgereiftes Framework für eine Vielzahl von Webapplikationen Es ist das Thema der kommenden Textabschnitte

Angular

Was brauchen wir? Sofern noch nicht auf Ihrem Entwicklungsrechner vorhanden, installieren Sie Nodejs und npm und einen Editor bzw eine integrierte Entwicklungsumgebung, zum Beispiel Visual Studio Code Die aktuell installierten Versionen erfragen Sie über die Kommandozeile mit folgenden Befehlen:

node -v
npm ?v

Danach installieren wir bereits das Web-Framework Angular Auch dazu bedarf es nur des Kommandos npm install -g @angular/cli

Wir können an dieser Stelle bereits die erste Angular-App erzeugen Erstellen Sie dazu ein passendes Projektverzeichnis, begeben Sie sich dann auf Ebene der Kommandozeile und erstellen Sie das Gerüst der App wie folgt mit dem Befehl ng new MyApp Beantworten Sie die Frage, ob Sie ein Routing erstellen wollen zustimmend und wählen Sie CSS als Stylingsprache Einige Augenblicke später sollten alle Dateien und Abhängigkeiten zum Projekt erzeugt sein Starten Sie Ihren Editor ? in unserem Fall Visual Studio Code ? und öffnen Sie das Projekt Vielleicht sind Sie etwas überrascht, wie viele Dateien und Ordner angelegt wurden Abb 2 Wie Sie jedoch sehen werden, wird sich die Arbeit hauptsächlich auf den App-Ordner konzentrieren

Abb 2: Die Ordnerstruktur einer Angular-App

Wir sind natürlich mehr als gespannt und möchten das Ergebnis sofort begutachten Aus der Kommandozeile starten Sie die App mittels ng serve ?open und öffnen auch gleichzeitig den Standardbrowser des Systems Dazu wird die App kompiliert und der lokale Server gestartet Über http://localhost:4200/ greifen Sie auf die App aus Ihrem Browser zu Das Ergebnis sehen Sie in Abbildung 3

Abb 3: Die gestartete Angular-App

Es ist Zeit für einige Erläuterungen zur Projektstruktur einer Angular-App Angular verwendet einen komponentenbasierten Aufbau, das heißt, die gesamte Applikation wird als Komponente aufgefasst Auf oberster Ebene gibt es die sogenannte Top Level Component Diese besteht aus weiteren Komponenten usw So entsteht eine Hierarchie, auch als Komponentenbaum bezeichnet wird Im Wesentlichen besteht die Anwendung aus den beiden Dateien appmodulets und appcomponentts im app-Ordner Zusätzlich dient die Datei maints als Startpunkt der Applikation Die Anwendungslogik wird in der Datei appcomponentts definiert Listing 1

import { Component } from '@angular/core';
@Component{
  selector: 'app-root',
  templateUrl: '/appcomponenthtml',
  styleUrls: ['/appcomponentcss']
}
export class AppComponent {
  titel='My App';
}

Es handelt sich hierbei um TypeScript und an dieser Stelle liegt die erste Angular-Komponente vor Diese besteht aus zwei Teilen:

  • Aus dem Komponentencode, der durch eine TypeScript-Klasse repräsentiert wird
  • Aus dem Decorator @Component, der die Konfiguration und die Anmeldung der Komponente beim Angular Framework übernimmt

Mittels import { Component } from ‚@angular/core‘; importieren wir die Klasse Component zur eigenen Verwendung, dann kommen wir auch schon zum Decorator @Component, der hier wie folgt definiert ist:

@Component{
  selector: 'app-root',
  templateUrl: '/appcomponenthtml',
  styleUrls: ['/appcomponentcss']
}

Mit Hilfe eines Decorators werden Klassen um weitere Informationen, d h um Metadaten erweitert Über die Eigenschaft selector zeigen Sie an, an welcher Stelle die Komponente verwendet werden soll Über die template-Eigenschaft konfigurieren Sie schließlich, dass bei der Instanziierung der Komponente das hinterlegte Template gerendert werden soll Ebenso verweisen Sie auf die zugehörige CSS-Datei für das Styling der Komponente Die eigentliche Komponente wird nun in Form einer ECMAScript-2015-Klasse, d h mit TypeScript definiert Im Moment gibt es nur eine einzige Eigenschaft: titel Damit haben Sie eine erste Komponente vollständig definiert bzw von Angular erstellen lassen

JavaScript Testing in der Praxis Teil 1 + 2

mit Dominik Ehrenberg Crosscan und Sebastian Springer MaibornWolff

Fortgeschrittene schwarze Magie in TypeScript

mit Peter Kröner ‚Webtechnologie-Erklärbär‘

Kommen wir zur Datei appmodulets, dem Applikationsmodul Den Quellcode sehen Sie in Listing 2

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from '/app-routingmodule';
import { AppComponent } from '/appcomponent';

@NgModule{
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
}
export class AppModule { }

Nach den Import-Anweisungen folgt der Decorator @NgModule Hier findet eine deklarative Konfiguration eines Angular-Moduls statt Mit Hilfe von Modulen werden in der Angular-Plattform zusammengehörige Komponenten und Services gekapselt Dabei besteht jede Angular-Anwendung aus mindestens einem Modul, nämlich konkret dem Applikationsmodul Folgende Angaben sind verpflichtend:

  • Die Einstiegskomponente in die Applikation: bootstrap: [AppComponent]
  • Die Angabe, welches Zielsystem angesprochen werden soll: imports: [BrowserModule] In diesem Fall möchten wir die Applikation in einem Webbrowser laufen lassen Wir verwenden vorerst nur diesen Applikationstyp Wir haben schon darauf hingewiesen, dass mit Angular auch Applikationen für andere Systeme, wie etwa mobile Geräte, möglich sind In diesem Fall müssten wir andere Module an dieser Stelle importieren Wir stellen diese Möglichkeiten hier jedoch ausdrücklich zurück
  • Abschnitt declarations: Alle hier aufgeführten Komponenten sind im gesamten Applikationsmodul sichtbar und können von jeder anderen Komponente verwendet werden Wir haben im Moment nur eine Komponente namens AppComponent

Wenn Ihnen diese Konfigurationen zunächst etwas verwirrend, vielleicht sogar übertrieben vorkommen, dann liegt es daran, dass Sie im Moment nur eine Komponente haben Sobald die Webapplikationen umfassender werden, wird sich die Stärke einer zentralen Konfiguration schnell bestätigen

Schreiten wir weiter durch die Dateien des Angular-Projekts und kommen wir zur Datei maints Listing 3

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from '/app/appmodule';
import { environment } from '/environments/environment';

if environmentproduction {
  enableProdMode;
}

platformBrowserDynamicbootstrapModuleAppModule
  catcherr => consoleerrorerr;

Hier wird der Start der Applikation definiert Der Browser möchte zum Schluss eine HTML5-Datei verarbeiten Diese trägt auch hier den Namen indexhtml Listing 4

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="faviconico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Innerhalb des <body>-Tags wird der sogenannte Bootstrap-Vorgang ausgelöst Konkret:

<app-root></app-root>

Die selector-Konfiguration der AppComponent-Komponente sorgt ihrerseits dafür, dass an dieser Stelle die Komponente gerendert wird Der <body>-Tag wird nach erfolgreichem Laden der Komponente ersetzt Achten Sie darauf, dass innerhalb der indexhtml-Datei kein <script>-Tag für die Einbindung von JavaScript notwendig ist Auch die Script-Anweisung wird gewissermaßen erst während des Builds der Anwendung dynamisch in die HTML-Datei eingefügt

Das war sicherlich eine sehr umfassende Version eines ?Hello World?-Beispiels Nun wollen wir mit einer echten kleinen Applikation starten

To-do-Liste

Die Überschrift verrät es bereits: es geht um das simple Beispiel einer To-do-Liste Wir können an diesem einfachen Beispiel einige wichtige Vorgehensweisen erklären Schließen Sie die bisherige Testapplikation in Visual Studio Code, begeben Sie sich dann auf die Kommandozeile und legen Sie ein neues Angular-Projekt an Wir nennen es MyToDo Das Projekt erstellen wir also mit dem Befehl ng new MyToDo Danach starten wir die Applikation via ng serve Öffnen Sie nun das Projekt bzw die Ordnerstruktur in Visual Studio Code Los gehts mit den Änderungen

Wir brauchen zunächst eine minimale View Diese definieren wir in der HTML-Datei der Komponente Es genügen uns ein Eingabefeld und ein Button, also:

<input type="text" placeholder="Eintrag hinzufügen"/>
<button >Hinzufügen</button>

Hinweis: Bitte binden Sie beide Tags nicht, wie in HTML üblich, in ein <Form>-Tag ein Ansonsten wird die Seite fälschlicherweise nach dem Betätigen des Buttons neu geladen Das ist bei einer Single-Page-Applikation nicht gewünscht Sie werden jetzt sehen, wie Sie die Daten aus der View html an den Controller ts bekommen Dazu ermöglicht Angular es Ihnen, für jedes Element im DOM-Baum eine lokale Variable zu deklarieren Die Deklaration einer Variablen erfolgt dabei über ein vorangestelltes #-Zeichen Diese Variable steht Ihnen danach innerhalb des gesamten Templates HTML-Datei zur Verfügung Definieren wir eine Variable für den input-Tag:

<input #item type="text" placeholder="Eintrag hinzufügen"/>

Die Variable haben wir mit item bezeichnet, also hier #item Nun müssen wir auf einen Klick auf den Button reagieren, was mit Event Binding passiert Die allgemeine Syntax lautet:

eventName="NameDesEvents"

Und konkret für den Button sieht das dann wie folgt aus:

<button click="addToDoitemvalue">Hinzufügen</button>

Wir definieren also ein Event addToDo und als Parameter übergeben wir den Wert der lokalen Variable item mittels itemvalue An dieser Stelle sind wir in der View zunächst fertig und wechseln in den Controller der Komponente, d h in die zugehörige TypeScript-Datei Die Klasse AppComponent erweitern wir wie folgt:

export class AppComponent {  

  toDoArray:Array<string>=[];

  addToDoitem:string{
    thistoDoArraypushitem;
  }
}

Wir definieren ein Array für die Aufnahme der Listeneinträge und das Event addToDo Dieses nimmt den Wert über den Parameter item entgegen und fügt diesen der Liste hinzu Im Übrigen muss der Name des Parameters im Controller und in der View nicht übereinstimmen Sie können statt item im Controller zum Beispiel auch value verwenden Zusammengefasst: Der Wert, der in dem Inputfeld des Formulars eingegeben wurde, ist nun durch den Weg über die lokale Variable in der Klasse AppComponent gelandet und kann dort verarbeitet werden

Daten müssen jedoch auch wieder vom Controller in die View übertragen werden Dazu wechseln wir wieder in die View HTML-Datei und erstellen eine Liste mittels <ul>-Tag Die einzelnen Elemente der Liste werden über <li>-Tags generiert Da man sehr häufig Listen von Daten darstellen muss, gibt es in Angular die sogenannte ngFor-Direktive Mit deren Hilfe kann man über die einzelnen Elemente einer Liste iterieren und zwar direkt in der View Wie sieht das genau aus? Relativ einfach, jedoch für den Neueinsteiger in Angular durchaus eindrucksvoll:

<div class="data">
    <ul>
      <li ngFor="let item of toDoArray">{{item}}</li>
    </ul>
  </div>

Wir iterieren über jedes Element der Liste toDoArray und geben den Wert der Liste über item aus Dies erfolgt mit Hilfe der Angular-Direktive ngFor Im Browser können Sie nun einen Eintrag in das Formularfeld schreiben und mit Bestätigung auf den Button wird dieser in das Array geschrieben und als Liste wieder ausgegeben Dass es funktioniert, beweist ein Blick auf Abbildung 4

Abb 4: ?ToDo?-Liste mit Angular

Natürlich sieht das Design alles andere als ansprechend aus Darum haben wir uns jetzt auch in keiner Weise gekümmert Es ging lediglich darum, wie wir Daten aus der View an den Controller übertragen, diese dort verarbeiten und sie wieder ausgeben Ebenso fehlt noch jegliche weitere Funktionalität, zum Beispiel das Löschen von Items

Angular bietet hier also eine Reihe von Features und damit einen umfassenden Rahmen für anspruchsvolle Webqapplikationen Dazu gehören u a:

  • Ein Rahmen zur Strukturierung von Webapplikationen
  • Die Umsetzung des MVC-Patterns zur Trennung der Schichten
  • Daten- und Event-Bindung
  • Erweiterungen in Form von Angular-Direktiven wie ngFor

Im Übrigen reagiert Angular sofort mit einer Neuübersetzung der Quellen und einem Reload im Browser, wenn Sie Änderungen am Quellcode vornehmen Das beschleunigt die Entwicklung erheblich Wir konnten hier nicht viele Features von Angular beschreiben, dennoch zeigt bereits das sehr einfache Beispiel, wie viel Unterstützung man durch ein Framework bei der Entwicklung einer Webapplikation bekommen kann

Fazit und Ausblick

Das Thema dieses Teils der Artikelserie war es, sich mit der Arbeit von Bibliotheken und Frameworks vertraut zu machen Wir haben erfahren, dass diese ein Mittel der Wiederverwendung sind Durch den Einsatz eines Frameworks wird einem als Entwickler die Struktur einer Applikation vorgegeben Bei sehr einfachen Anwendungsfällen mag das etwas aufgesetzt wirken, sobald man jedoch eine gewisse Größe und Komplexität erreicht hat, wird man die Features eines solchen Frameworks zu schätzen wissen Am Beispiel von Angular haben wir den Einstieg vorgenommen Hat man einmal die Idee, den Ansatz und die Projektstruktur verstanden, wird man nach und nach besser damit zurechtkommen Die vielen Features, die ein Framework mit sich bringt, kann man nur sehr schwer eigenhändig programmieren Daher lohnen sich i d R der Aufwand für die Einarbeitung und der Overhead, der mit der Nutzung verbunden ist

Im kommenden Teil der Artikelserie wird es um Ionic gehen Ionic ist ein Open-Source-Web-Framework zur Erstellung von Hybrid-Apps und Progressive Web Apps PWAs auf Basis von HTML5, CSS, Sass und JavaScript bzw TypeScript Dabei basiert es zudem auf Angular und Apache Cordova und stellt eine Programmbibliothek aus verschiedenen Komponenten zur Verfügung, mit denen interaktive Apps programmiert werden können Wir bauen also erneut auf dem vorhanden Technologiestack auf und sehen uns ein anderes Teilgebiet der modernen Webprogrammierung an Bis dahin: Feilen Sie an Ihrer ersten Angular-App Hinweis: Den Quellcode zum Projekt finden Sie auf https://larinetcom

Entwickler Magazin

Dieser Artikel ist im Entwickler Magazin erschienen

Natürlich können Sie das Entwickler Magazin über den entwicklerkiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich

Der Beitrag Web-App Tutorial: Eine Anwendung mit Angular bauen ist auf entwicklerde erschienen


.NET, Open Source und du?! (15.07.2019 08:38:21)

Hurra, alles ist nun Open Source Was das im Microsoft-Ökosystem für Konsumenten ? vor allem in einem kommerziellen Kontext ? bedeutet, beleuchtet Dominick Baier in seiner BASTA!-Session

Hurra, alles ist nun Open Source Ist Microsoft jetzt eine wohltätige Einrichtung? Verschenken wir nun alle unseren Code ? und unsere Zeit? Was bedeutet Open Source im Microsoft-Ökosystem für Konsumenten ? vor allem in einem kommerziellen Kontext? Was muss ich wissen, um selbst Open Source zu produzieren? Mein Projekt IdentityServer hat sich von einem Hobby zu einem der größten NET-Open-Source-Projekte entwickelt In diesem Vortrag versuche ich, alles Wichtige zu erzählen, was ich über Philosophie, Prozesse, Tools und schwierige Entscheidungen in den letzten zehn Jahren Open Source und in meiner Rolle als Advisor für die NET Foundation gelernt habe

Der Speaker: Dominick Baier

Dominick Baier ist ein unabhängiger Sicherheitsberater mit Schwerpunkt auf Identity und Access Control Er unterstützt Kunden weltweit beim Design und der Implementierung von Authentifizierung und Autorisierung in nativen und verteilten Webanwendungen Er ist der Co-Autor des weitverbreiteten OpenID-Connect- und OAuth-20-Frameworks ?IdentityServer? http://identityserverio, hat Bücher geschrieben, bloggt bei http://leastprivilegecom und ist auf Twitter unter @leastprivilege zu finden

Der Beitrag NET, Open Source und du?! ist auf entwicklerde erschienen


PHP 7.4 alpha 3 ist da: Neue Features und Bugfixes (12.07.2019 15:21:04)

Das PHP-Kernteam hat die dritte Alphaversion zu PHP 74 veröffentlicht Es wurden einige Bugs behoben und neue Funktionen implementiert Wir haben die Änderungen im Blick

Auf dem Weg zum Major Release von PHP 74 ist nun die dritte Alphaversion erschienen Darin werden unter anderem 10 Bugs behoben und neue Funktionen implementiert PHP 74 ist für den 28 November geplant Der Feature Freeze ist für den 22 Juli angesetzt

PHP 74 alpha 3: Die neuen Features

Die dritte Alpha zu PHP 74 bringt einige neue Überarbeitungen mit Die Weitergabe von CFLAGS, LDFLAGS und anderen aus der Environment-Methode soll mit dem Update auch unter Windows unterstützt werden

PHP 74 alpha 3 beinhaltet ein Update der Zeitzonen- und Datum/Uhrzeit-Bibliothek Timelib auf Version 20182 Es handelt sich hierbei um eine Bibliothek, die die Date/Time-Erweiterung von PHP und den Zeitzonensupport von MongoDB unterstützt

Neben den genannten neu implementierten Features wurden weitere Bereiche überarbeitet, die den Release Notes entnommen werden können

10 Bugfixes in alpha 3

Mit dem Update wurden auch einige Bugs behoben Die Methode finfo_file hatte laut Bug-Report #78183 den falschen MIME-Typ für tga-Dateien zurückgegeben Dieser Bug wurde in der aktuellen Alphaversion ausgemerzt Außerdem waren Probleme bei der Verwendung der Methode touch aufgetreten: touch kann unter PHP 7220 64-Bit Windows das Datum einer Datei nicht auf ein Datum nach 2038 setzen Mit der dritten Alphaversion zu PHP 74 soll dies nun möglich sein

Nähere Informationen zu den genannten und weiteren Neuerungen finden sich in der Release Note auf GitHub

Der Beitrag PHP 74 alpha 3 ist da: Neue Features und Bugfixes ist auf entwicklerde erschienen


Diese Seite wurde in 0.173974 Sekunden geladen