JavaScript, HTML5 & Angular Days 2016

Datum: 28. November 2016
Autor: Benedikt Keller


Einige von uns Portalentwicklern waren im Oktober in Berlin auf den JavaScript, HTML5 & Angular Days 2016. Hier nachträglich noch kurz meine und Bennis Highlights:

„Dem Benedikt seine Highlights“

CSS3 Flexbox

Der Style „display: flex;“ ist ein unglaublich flexibles und simples Werkzeug, um Responsivität in die kleinsten Module zu bringen. Wo wir heute noch mit Style-Hacks arbeiten, reichen damit zukünftig ein paar wenige Style-Angaben.

Beispiel Größe, Aufteilung und Zentrierung von Teasern:
Wenn wir heute Teaser responsiv bauen wollen, müssen wir erstmal entscheiden, wie viele Teaser wir in einer Reihe erwarten, müssen den Teasern für verschiedene Auflösungsbereiche feste prozentuale Größen und Abstände geben und für die Ausrichtung mit Floats, Margins, Whitespaces und diversen anderen Styles jonglieren.
Mit Flexbox setzen wir dem Wrapper „display: flex“, wodurch alle direkten Kindelemente sofort zu flexiblen Boxen werden und versuchen, sich den vorhandenen Platz gleichmäßig (oder in angegebenem Verhältnis) zu teilen. Setzt man den Kindelementen – also den Teasern – dann eine Mindestbreite, so entscheidet der Browser selbst, wie viele Teaser er unterbringt und wie breit diese sein dürfen/sollen.

Beispiel Zentrierung von Elementen:
Derzeit kursieren verschiedenste Hacks, um Elemente zu zentrieren. Beispielsweise durch eine feste Breite des Elements, eine Verschiebung um 50% und der Rückverschiebung durch die halbe Breite durch Margins.
Bei Flexboxen reicht hier ein simples „margin: auto;“ auf das Element.

Zudem kann man sehr einfach z.B.:

  • Die Reihenfolge der Elemente manipulieren
  • Die Ausrichtung der Elemente ändern
  • Die Contents von Tabellen durch Umwandlung vertikal gespiegelt darstellen

Problematisch ist derzeit noch die Browserunterstützung. Da der Internet-Explorer bisher sein eigenes Süppchen kochte, ist erst seit IE 11 eine partielle Unterstützung und erst ab dem Edge eine vollständige Unterstützung vorhanden. Auch in manch anderen gängigen Browsern war zum Zeitpunkt der Fortbildung noch keine zuverlässige Unterstützung gegeben, diese haben aber seitdem nachgezogen und bieten in den neuesten Versionen die Unterstützung.

JS Pointer-Events

Noch reine Zukunftsmusik sind Pointer-Events. Mit der immer steigenden Anzahl an Endgeräten und Technologien steigt auch das Problem mit Listenern auf verschiedene Eingabetypen.

Wollen wir heute auf mehr als simple Click-Events o.ä. hören, so müssen wir einzeln die Listener für Maus, Tastatur, Touch-Display, Stift, … umsetzen. Das macht eine umfangreichere und saubere Verwendung der Listener sehr aufwändig, komplex und fast unmöglich.

An der Lösung dieses Problems wird derzeit gearbeitet. So sollen sogenannte Pointer-Events zukünftig die Events aller Eingabetypen vereinen und die Anzahl zu setzender Listener drastisch reduzieren. Will man das Verhalten eines Events überschreiben, muss man nur einen Listener setzen, will man für einen speziellen Eingabetyp etwas ändern, so kann man zur Prüfung den aktuellen Eingabetyp im Event-Objekt erfragen. Mit diesem automatischen Handling soll dann auch endgültig der 300ms Delay fallen, wodurch die gefühlte Performance erheblich verbessert wird.

Wann das allerdings als Standard verabschiedet und einsetzbar wird, steht derzeit noch in den Sternen.

„Dem Benni seine Highlights“

CouchDB

CouchDB ist genial! RESTful, per Javascript „konfigurierbar“ und replizierbar. Anwendungsfälle könnte ich bei uns durchaus in imx.Image und imx.Mapwork sehen.

Promises

Promises sind das geilste JS-Feature ever! Sollten wir unbedingt verwenden und zwar exzessiv.

Frontend-Frameworks

Frontend-Frameworks (in meinem Fall Aurelia) führen extrem schnell zu coolen Ergebnissen, sind bei uns jedoch eher schwierig zu integrieren. Ansonsten sehe ich hier auch durchaus Karten und Metasuchen als Anwendungsgebiete.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Erste Eindrücke von der WJAX2012

Autor: Christian Göbel


Technologie


Heute gab es im Dev-Meeting schon einige Eindrücke von der diesjährigen WJAX von mir zu hören. Diese Punkte möchte ich nun an dieser Stelle noch einmal kurz zusammenfassen. Neben Rucksäcken, T-Shirts und Kulis gab es auch dieses Jahr im Westin Grand Hotel in München wieder einige spannende Sessions. Vor der Eröffnung der eigentlichen Hauptkonferenz am …


Beitrag lesen
08.
Nov.
2012

Weitere Neuigkeiten von der JAX 2015

Autor: Christian Göbel


Technologie


Bevor es zu spät ist und alle Neuigkeiten und Trends von der JAX 2015 in den Tiefen meiner Erinnerungen verschwinden, möchte ich die Gelegenheit nutzen und Euch eine Fortsetzung zu meinem ersten Bericht von der diesjährigen JAX liefern. API-Design mit Java 8 Lambdas (Angelika Langer) Hier gab es eine kurze Einführung zu Lambda-Ausdrücken aus Java …


Beitrag lesen
30.
Juli
2015

Preload – was bringts?

Autor: Philip Dumas


Technologie


Im Laufe der Umsetzung des Grassau-Portals habe ich mich mal mit Preloading im html auseinandergesetzt. Benutzt wird das Ganze, um Resourcen wie z.B. Styles, Fonts etc. effizienter laden zu können und somit die Performance zu verbessern. Der Vorteil gegenüber dem ja inzwischen schon etwas älteren Prefetching ist, dass im Tag ein Type angegeben wird, der …


Beitrag lesen
28.
Februar
2017

Xdebug Stacktrace verbessern

Autor: Florian Müller


Technologie


Ich habe mich heute im Zuge eines kleinen Problems mit einem Stacktrace etwas mit der xDebug Konfiguration beschäftigt. Dabei bin ich auf eine kleine nützliche Option gestoßen, welche ich euch nicht vorenthalten möchte. Die Optionen xdebug.collect_params Es gibt die Option xdebug.collect_params, welche verschiedene Level an Output ermöglicht. Ich habe mich in meiner VM für den …


Beitrag lesen
03.
August
2017