GDG Devfest Hamburg 2016 Recap~ 9 min.

Für mich war es dieses Jahr das erste Mal, dass ich beim GDG Devfest Hamburg dabei war. Es fand im Mindspace statt, was eigentlich ein Co-Working-Space ist, wo aber auch Events stattfinden. Auf 2 Etagen verteilt hatte man sehr viel Platz, um sich zwischendurch auch mal mit seinem Mac hinzusetzen und etwas zu arbeiten, oder um einfach nur mit anderen zu networken. Vielen Dank an die Organisatoren und Sponsoren für die Planung, der Session-Plan wahr sehr gut thematisch unterteilt und auch an Goodies, Essen und Getränken hat es nicht gefehlt. Von den Talks habe ich mir welche zu unterschiedlichen Themen angehört und muss sagen, dass ich den Samstag sogar besser fand als den Freitag, da ich besonders bei den Smart Home Vorträgen viel Spaß hatte. Hier mal meine Zusammenfassung der von mir besuchten Talks:

Microservices in der Google App Engine

@JBaptisteClion
App Engine Evolution:

• 2008: erstes Mal, dass Google darüber im Blog sprach -> der Start und das Skalieren von Apps sollte einfacher gemacht werden, wobei die Instanzen nur auf Abruf reagiert haben und bei Nicht-Nutzung in den Standby-Modus gingen
• 2011: Talk über die App Engine Philosophie, wobei das Backend vorgestellt wurde -> Anfragen an das Backend laufen nun unbegrenzt
• 2013: Module wurden vorgestellt -> Applikationen können nun in Komponenten aufgeteilt werden und isolierte Einstellungen sind möglich
• 2016: Module werden zu Services -> große Probleme können aufgeteilt werden, Autoscaling und Fehlertoleranz werden eingeführt, man kann sich auf HTTPS Kommunikation verlassen, es ist noSQL skalierbar und isolierbar zu lagern und automatisierte Deployment-Prozesse sind möglich

Was sind Microservices? Sie sind kleinere zusammensetzbare Teile, deren Komponenten einzeln entwickelbar sind und die App ist nun die Summe ihrer Komponenten. Was gehört alles zu den Ecosystem Services?

• Datastore
• Task Queue
• Cron Tasks
• Nutzer Authentifizierung
• Messaging
• URL fetch

Insgesamt kann man sagen, dass Microservices in sechs Blöcke unterteilt sind:

1. Konsistente Codereife
2. Skalierbarkeit auf der Y-Achse (funktionale Dekomposition)
3. Asynchrone HTTP-Kommunikation
4. Zustandslose Instanzen
5. Daten-Isolierung
6. API Gateway

Angular 2 – TypeScript to the rescue

@mreinhardt
Zum Anfang wurde mit einer kurzen Geschichte von JavaScript gestartet:

• 1998 ECMAScript 2
• 1999 ECMAScript 3
• 2000 – 2009 ECMAScript 4
• 2005 Ajax und SPAs (jQuery, Dojo)
• 2007 Yahoo ECMAScript 3.1
• 2009 ECMAScript 3.1 -> ECMAScript 5 (ES5)
• 2011 ECMAScript 5.1
• 2015 ES2015 (ES6)

Was sind die Eigenschaften von TypeScript? Der IDE Support ist besser, es gibt ein optionales Typensystem, die Lernkurve für Anfänger ist steiler, es gibt Code als Convention (interfaces, types) und es gibt Syntax-„Zucker“ (optionals, annotations). Generell gibt es weniger Code als im JavaScript, der auch noch aussagekräftiger ist. Die Community von TypeScript ist sehr aktiv und es gibt eine schnelle und offene Weiterentwicklung, Fehler fallen schon bei der Entwicklung auf und es ist eine Abstraktion von ESx, denn die Module können transpiliert und der Code wiederbenutzt werden. Allerdings sollte man die Eigenheiten bei Nicht-JS-Sprachelementen beachten (interfaces, enums).

Warum gibt es Änderungen bei Angular 2? Die Browser entwickeln sich immer weiter und auch in ES6 gibt es so einiges an Neuerungen, die unterstützt werden müssen. WebComponents nehmen zu und sowohl das Thema Performance als auch das Thema Mobile werden immer wichtiger. Außerdem dient es der Wartbarkeit und dem Refactoring vom Code. Weitere Vorteile und Eigenschaften:

• nicht auf Browser beschränkt (Server-Implementierung, Webbrowser)
• einfach zu lernen
• Migration von AngularJS 1.x
• Architekturkonzepte (Module, Routing, Pipes, Properties,…)
• Services können in Komponenten injected werden
• private Constructor-Parameter dank TS
• Singleton pro Modul

Besonders durch die klare Semantik ist es nun gut lesbar und Auszeichnungen sind nun wie folgt:

• {{ }} interpolation
• [ ] property binding
• ( ) event binding
• # variable declaration
• * structural directives

AMP und PWA

@tomayac
Im Jahr 2015 war es erstmals soweit, dass mehr Google-Suchen auf mobilen als auf Desktop-Geräten durchgeführt wurden. Das Problem war, dass die Seiten auf mobilen Geräten allerdings nicht so gut zu bedienen und auch sehr langsam waren. Laut einer Studie verlassen 53% der Nutzer, die mit einem 3G Netz surfen, eine Seite, die länger als 3 Sekunden lädt. Daher brauchte man eine schnelle und einfache Lösung, die auch von Mobilgeräten unterstützt wird. Man musste also vereinfachen (weniger JS), die Datenübertragungsrate optimieren (mit asynchronem Laden) und Seiten cachen (per CDS – Content Delivery System). AMP ist ein open-source-framework, das Blöcke bildet, die das JavaScript ablösen. Es ist eine separate File die per Link auf Artikelseiten aufgerufen wird. Ads laden dabei abseits vom Content in einem sicheren iframe. Zu Beginn gab es AMP nur für News, doch nach und nach sollen mehr Seiten-Arten dazu kommen, z.B. Rezepte, Reisedestinationen, Events.

Die Features von AMP sind:

• intelligente Content-Priorisierung
  • Prefetchen von Elementen
  • kein Re-Layout
  • asynchrones Laden
• Responsive Design
  • bestes Bild für den jeweiligen Screen
• limitiert im Design
  • kein customJS
  • keine Scrolling-Elemente auf der Seite
  • max 50KB großes inline Stylesheet

Für das Debuggen kann man das AMP Validator Plugin nutzen oder, um es in der Console aufzurufen, einfach ein #development=1 an die URL anhängen. Das Lese-Gefühl auf mobilen Geräten wird stark verbessert. Artikel werden gecached und laden somit sofort, Publisher können das Design beeinflussen, das Engagement mit dem Artikel wird erhöht, da die User Experience besser ist, und die gängigen Werbeformate werden unterstützt. Damit die User noch besser mit der Seite interagieren, kann man die Webkomponente amp-install-serviceworker nutzen, der im Hintergrund agiert und PWAs ermöglicht. PWAs verbinden alles, was Webseiten ausmacht (Verfügbarkeit in Browsern, mit nur einem Klick zum Content kommen und schnelles Laden), mit neuen Möglichkeiten (Erreichbarkeit mit Hilfe eines Buttons auf dem Homescreen, Re-Engagement durch Push Notifications, gute Bedienbarkeit auch wenn mal keine Netzwerkverbindung da ist und es arbeitet besser mit Browsern, die neue APIs unterstützen).

From Zero to App – Developing with Firebase

@puf
Bei der traditionellen App Entwicklung hat man den Aufbau App – Server – Database, Dinge wie Offline-Nutzung und ob eine Authentifizierung notwendig ist müssen dann noch nebenbei bedacht werden. Bei der App Entwicklung mit Firebase ist der Aufbau App + Firebase SDK – Firebase – Echtzeit-Datenbank + Speicher. Die Firebase Database ist in der cloud gehosted, noSQL und im JSON Format. Ein listener wird integriert, der eine Echtzeit-Synchronisation der Datenbank ermöglicht. Lokale Events werden in Firebase direkt gefeuert (auch wenn man offline ist) und dann, wenn man online geht, in die Datenbank geschrieben. Bei der Firebase Authentifizierung kann man sich per Email, Github oder einem Sozialen Profil anmelden oder auch als anonymer User agieren. Generell gilt die Devise: Yolo – You only login once (man muss sich also nur ein Mal einloggen und der Zugang wird dann gespeichert). In der Firebase UI Auth kann das Theme angepasst werden, die Cross-Plattform-Konsistenz wird sichergestellt und es gibt einen voll-unterstützten Auth-Flow. Man kann seine Daten wie z.B. Fotos mit anderen Leuten sicher teilen und in der Datenbank (bzw. im Storage) ablegen bzw. aus dieser beziehen.

Mein Minecraft Smart Home

@saschawolter
Bei diesem Talk wurden wahrscheinlich alle vom Speaker überrascht, denn nicht Sascha hat etwas erzählt, sondern sein Sohn Jonathan, der erst 11 Jahre alt ist. Das Internet der Dinge ist heutzutage überall zu finden, es gibt sogar sprachgesteuerte Barbie-Häuser oder Puppen und mit Amazon Echo oder Google Home kann man auch sein Smart Home per Sprache steuern. Um Programme besonders einfach selber schreiben zu können, kann man z.B. Scratchx benutzen. Hier kann man Blöcke zusammenschieben oder auch eigene Blöcke schreiben mit denen man dann sogar auch Hardware steuern kann. Für die App Entwicklung helfen Programme wie der AppInventor.

Hauptsächlich ging es in diesem Talk allerdings um Minecraft und wie man damit ein Smart Home steuern kann. In diesem Computer-Spiel kann man sogar Kommandos wie /weather rain eingeben, um es im Spiel regnen zu lassen. Weiterhin gibt es verschiedene Modi, man kann sich selber verschiedene Dinge craften, mit Schaltern und Leitungen herumbasteln und Mods, also Erweiterungen, selber schreiben oder nutzen (unter anderem gibt es dabei einen Computer mit dem man sogar in Lua programmieren kann). Man kann Minecraft auch per Schnittstelle mit einem Programm/einer Hardware wie Qivicon verbinden und dann auch mit seinem Handy ein in Minecraft gebautes Smart Home bedienen bzw. aus Minecraft heraus sein reales Smart Home zu Hause. Außerdem kann man auch mit Platinen wie einem raspberry pi arbeiten und dort z.B. einen Lichtsensor einbauen, der bei einer Abdeckung im Spiel den Nachtmodus an macht (geht mit Minecraft Spigot). Minecraft Forge ist zum Modden da. Zum einen ist es eine Programmierschnittstelle und zum anderen hat es einen Mod Loader mit dem man Erweiterungen in Minecraft laden kann.

Lego Smart Home bauen

Women Techmakers
In diesem Workshop hat man zum einen den Lego Bausatz von Big Bang Theory bekommen und zum anderen folgende Dinge: einen Wio Link, eine LED, einen Schalter, einen Lichtsensor, einen Vibrationsmotor und einen Ventilator.

Dann konnten wir den Bausatz zusammensetzen und den Wio Link an den PC anschließen und konfigurieren. Die Elemente wie die LED und den Ventilator konnten wir dann sinnvoll in das Wohnzimmer einbauen und diese auch miteinander verknüpfen – z.B. den Lichtsensor an die LED oder den Schalter an den Vibrationsmotor. Es hat sehr viel Spaß gemacht, dies in kleinen Teams zusammenzubasteln und die Ergebnisse aller Teams waren super witzig.

OOCSS & BEM

@ilithya_net
CSS Methodologien sind:

• organisiert
• flexibel
• wiederverwendbar
• verständlich
• instandhaltbar

OOCSS (object oriented CSS) wurde im Jahre 2008 von Nicole Sullivan eingeführt. Eines der beiden Hauptkriterien ist die Separation von Struktur und Skin. Dies bedeutet, dass sich wiederholende Elemente, wie z.B. eine border, zu einer skin Klasse zusammengefügt werden können, die dann in den HTML-Elementen, in denen die border auftaucht, genutzt werden kann. Das andere Kriterium ist die Separation von Container und Content. So können z.B. sich wiederholende span-Elemente in Sidebar und Footer als Parent-Klasse angelegt werden und in den einzelnen Abschnitten eingebaut werden. Die Vorteile von OOCSS sind:

• wiederverwendbares und flexibles CSS
• pflegbare Stylesheets
• Verringerung von Selektoren
• kleinere Stylesheets
• bessere Performance

BEM (Block, Element, Modifier) wurde im Jahre 2009 von Yandex-Entwicklern eingeführt. Man strukturiert CSS-Klassen nach dem folgenden Schema: .block, __element und –modifier. Ein Beispiel wäre:
.person{}
.person__hand{}
.person__hand--left{}.
Die Vorteile von BEM sind:

• einfach zu nutzende Klassennamen
• Reduzierung von CSS Selektoren Nesting
• schnelleres Rendern
• bessere Performance

Insgesamt hat mir das Devfest richtig gut gefallen, ich hatte sehr viel Spaß und konnte auch noch einiges lernen. Nächstes Jahr werde ich auf jeden Fall wieder am Start sein und freue mich dann noch mehr Interessantes zu erfahren. Welcher Talk hat euch am besten gefallen?