JavaScript, HTML5 & Angular Days 2016

Avatar 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


OOP 2014

Autor: Christian Göbel


Projekte // Technologie // Über den Tellerrand


Auf geht’s zu Tag 2 auf der OOP in München. Dieses Jahr steht die Konferenz unter dem Motto: Complexity – Managing Today’s Challenges. Und dieses Leitthema wurde gestern in zwei Keynotes von Tim Mattson (Intel Corp.) und Glenda Eoyang (Human System Dynamics Institute) bereits in seinen vielschichtigen Facetten aufgegriffen. Die Quintessenz: Komplexität (in IT-Projekten) lässt …


Beitrag lesen
05
FEB
14

Bug in Netbeans 8.0.1 und Lösung

Autor: Bastian Schwarz


Technologie


Wie einige mitbekommen haben hatte ich nach dem Update auf Netbeans 8.0.1 kein Autcomplete mehr und auch alle anderen Sachen wie Open Class, Navigation etc. gingen nicht mehr. Heute habe ich endlich eine Lösung gefunden: https://netbeans.org/bugzilla/show_bug.cgi?id=247026 Readers Digest: Offenbar gab es Änderungen wie der Index geschrieben wird, dieser sollte das erkennen und sich neu aufbauen. …


Beitrag lesen
23
SEP
14

Kleiner Postfix- Guide

Autor: Sascha Nützel


Technologie // Über den Tellerrand


Nachdem die letzten Tage „kleinere“ Postfix Probleme aufgetreten sind, hier mal ein kleiner Guide wie man sich den Mail- Queue anschauen und bereinigen kann. Mail- Queue anschauen mailq | less Um die Anzahl der Mail’s in der Queue anzuzeigen, je nach Menge kann dies ein paar Minuten dauern: mailq | egrep ‚^–‚ Um den Queue von …


Beitrag lesen
14
FEB
17

Recap Velocity Conference Amsterdam 2016

Autor: Robert Klauser


Technologie // Über den Tellerrand


Nach drei spannenden Tagen von 7. bis 9. November 2016 in Amsterdam bin ich mit vielen neuen und interessanten Eindrücken von der Konferenz zurückgekehrt, die ich gerne mit Euch teilen möchte. Bei der Velocity Conference ging es um die Themen Web Performance in allen Facetten sowie DevOps als Prozess für den agilen und performanten Betrieb …


Beitrag lesen
11
NOV
16