JavaScript, HTML5 & Angular Days 2016


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


PHP-Funktionen in PHPUnit testen

Autor*in: Benjamin Hofmann


Technologie


Gestern bin ich auf eine interessante Erweiterung für PHPUnit gestoßen, die es erlaubt auch reine Funktionen als Mock-Objekte anzulegen und deren Verhalten damit zu testen: PHP-Mock bzw. dessen Erweiterung für die Nutzung in PHPUnit. Damit kann man dann sehr bequem auch interne Funktionen testen, z.B. file_get_contents() oder auch ein mail(). Ein so gearteter Test könnte …


Beitrag lesen
13
JAN
17

OOP 2015 – Tag 1

Autor*in: Marc Kurzmann


Technologie // Über den Tellerrand


Auch dieses Jahr haben die Organisatoren die OOP voll mit interessanten Themen gespickt, vornehmlich aus den Bereichen Software-Architektur, Projekt-Management, agile Prozesse und Technologietrends. Begonnen hat es für mich heute früh mit der Session „NoSQL in transaktionalen Enterprisesystemen“ aus dem Themenslot „Trends & Techniques“. Während der erste Teil des Vortrags einen interessanten Überblick über die NoSQL-Datenbanken …


Beitrag lesen
27
JAN
15

Umzug eines MediaWiki auf neuen Server? Auweh…

Autor*in:


Projekte // Technologie // Über den Tellerrand


Ein kleiner Hinweis an Entwickler und Projektmanager, sollten MediaWiki-Projekte einen Serverumzug erfahren dürfen: Das Problem Versionen vor 1.19.x kommen mit den neuen Versionen der PCRX-Library (Perl Compatible Regular Expressions) nicht zurecht. So gehabt nun bei einem alten Projekt. Das Problem äußert sich dadurch, dass plötzlich auf den Seiten unter der Überschrift keine Contents mehr auftauchen, in der …


Beitrag lesen
03
DEZ
15

Microsoft Edge

Autor*in: Benjamin Hofmann


Technologie


Mit Windows 10 kommt Microsofts neuer Browser, sein Codename war bisher „Spartan“. Gestern hat Microsoft dem IE-Nachfolger nun einen richtigen Namen gegeben: Microsoft Edge. Neben der Integration von Cortana gibt es die Möglichkeit, Dinge auf Websites zu markieren, zu beschriften und dann direkt mit anderen zu teilen. Interessant ist ebenfalls, dass Microsoft es erlaub Erweiterungen …


Beitrag lesen
30
APR
15