Talk zum Thema Nebenläufigkeit auf der OOP 2016 in München. Neben einer prinzipiellen Einführung und Motivation werden die Sprachen Erlang/OTP, Google Go und Pony vorgestellt. Weiter sind einige typische Designmuster sowie Fallstricke enthalten. Der Vortrag hatte die Dauer von 90 Minuten.
Mein Vortrag auf der EnterJS 2015 über Sicherheit in Node.js Applikationen. Es werden verschiedene Angriffsvektoren vorgestellt und wie man ihnen begegnen kann.
Warum ECMAScript 6 die Welt ein Stückchen besser machtSebastian Springer
Wo die Neuerungen von ECMAScript 5 recht unspektakulär waren, sind die Features des neuen Sprachstandards umso interessanter. ECMAScript 6 versucht einige Anforderungen zu erfüllen, mit denen man als JavaScript-Entwickler täglich konfrontiert ist. Klassische Beispiele sind hier Promises zum Umgang mit asynchronen Funktionen, ein Module Loader zur Strukturierung der Applikation, Generatoren und Iteratoren oder aber ein neuer Gültigkeitsbereich für Variablen. Aber nicht nur große Änderungen, sondern auch sinnvolle Erweiterungen bestehender Objekte wie String und Array halten mit dem neuen Standard Einzug in den Browser. Problematisch wird die Situation jedoch, wenn man in den Genuss verschiedener Features kommen möchte, die aktuell noch von keinem Browser unterstützt werden. Hier schafft Traceur, der ECMAScript-6-Compiler von Google, Abhilfe.
Talk zum Thema Nebenläufigkeit auf der OOP 2016 in München. Neben einer prinzipiellen Einführung und Motivation werden die Sprachen Erlang/OTP, Google Go und Pony vorgestellt. Weiter sind einige typische Designmuster sowie Fallstricke enthalten. Der Vortrag hatte die Dauer von 90 Minuten.
Mein Vortrag auf der EnterJS 2015 über Sicherheit in Node.js Applikationen. Es werden verschiedene Angriffsvektoren vorgestellt und wie man ihnen begegnen kann.
Warum ECMAScript 6 die Welt ein Stückchen besser machtSebastian Springer
Wo die Neuerungen von ECMAScript 5 recht unspektakulär waren, sind die Features des neuen Sprachstandards umso interessanter. ECMAScript 6 versucht einige Anforderungen zu erfüllen, mit denen man als JavaScript-Entwickler täglich konfrontiert ist. Klassische Beispiele sind hier Promises zum Umgang mit asynchronen Funktionen, ein Module Loader zur Strukturierung der Applikation, Generatoren und Iteratoren oder aber ein neuer Gültigkeitsbereich für Variablen. Aber nicht nur große Änderungen, sondern auch sinnvolle Erweiterungen bestehender Objekte wie String und Array halten mit dem neuen Standard Einzug in den Browser. Problematisch wird die Situation jedoch, wenn man in den Genuss verschiedener Features kommen möchte, die aktuell noch von keinem Browser unterstützt werden. Hier schafft Traceur, der ECMAScript-6-Compiler von Google, Abhilfe.
Reaktive Applikationen mit Scala, Play und AkkaMarkus Klink
Dieser Vortrag stellt mit Play2, Scala und Akka einen Technologiestack vor, der es ermöglicht relativ einfach eine skalierbare Webarchitektur aufzubauen, die mit dem Web und nicht gegen das Web arbeitet. Insbesondere der Einsatz von Akka als flexible Messagingplattform bietet dabei einige Vorteile gegenüber konventionellen Thread basierten Lösungen in Bezug auf die horizontale Skalierung der Applikation.
Hands-on Hystrix - Best Practices und Stolperfalleninovex GmbH
Ausfälle im Betrieb kennt jeder – und dennoch ist man selten ausreichend darauf vorbereitet. Allerdings könnten viele dieser Ausfälle deutlich abgemildert oder gar gänzlich verhindert werden. Netflix hat das Problem erkannt und die Bibliothek Hystrix entwickelt, die Entwickler bei der Implementierung von Resilience Patterns wie „Fail Fast“ und „Graceful Degradation“ unterstützt. In einer Microservice-Architektur vergleichbar mit Netflix kann die Anzahl von abhängigen Services nochmal deutlich ansteigen und Hystrix in einem solchen Szenario seine Stärken ausspielen. Überraschungen kann es aber auch bei Hystrix geben. Um diesen entgegenzuwirken bietet dieser Talk Erfahrungen und Beispiele aus bereits angepassten Anwendungen für die Integration von Hystrix. Eine Demo mit den kleinen Diensten zeigt, wie kleine Ursachen große Ausfälle auslösen können. Mit Hystrix im Einsatz dagegen werden die Folgen durch automatische Behandlung der Fehler minimiert.
Event: JAX 2016, 19.04.2016
Speaker: Gerrit Brehmer
Mehr Tech-Voträge: https://www.inovex.de/de/content-pool/vortraege/
Einführung in die funktionale Programmierung mit ClojureSascha Koch
Diese Präsentation ist im Rahmen eines Treffens der Java User Group Bielefeld entstanden.
Ich habe eine Einführung in die funktionale Programmierung an Hand des Lambda Kalküls gegeben. Anschließend haben wir uns die Programmiersprache Clojure angeschaut und einige Beispiele durchgesprochen.
Anschließend hat Daniel Rosowski noch funktionale Programmierung mit Guava und Java 8 vorgestellt: http://de.slideshare.net/DanielRosowski/real-lifefp
Präsentation zum Thema "Powerful mostly unknown Javascript-Features", gehalten von Entwicklern der Softwareagentur App Aware: Sascha Hameister und Aron Homberg
digitalSTROM Developer Day 2011: digitalSTROM bindet auch externe Komponenten...digitalSTROM.org
dSS-Entwickler Patrick Stählin ging auf das Konzept zur Einbindung externer Komponenten ein, das beliebig auf jegliche Hard- und Software mit programmierbaren Schnittstellen anwendbar ist. Die Einbindung erfolgt jeweils über die JSON oder SOAP-Programmierschnittstelle des dSS, die es erlauben, digitalSTROM-Komponenten zu simulieren oder mittels Software virtuelle Geräte zu implementieren. So kommunizieren diese im digitalSTROM-Netzwerk und können in Szenen integriert und mit einem digitalSTROM-Taster oder der iPhone App aufgerufen werden. Stählin führte das Konzept anhand des VLC-Mediaplayers vor, der nun zum Beispiel beim Klingeln an der Tür die Musik kurz unterbrechen kann. Der entstandene Javascript Code kann nun mit geringem Aufwand an andere Mediaplayer angepasst werden.
Provisionierung von Dockerhosts und -Containern mit Terraform, Ansible und LXD auf Blech und Cloud
Lästige und aufwändige manuelle Serverinstallation kann auf einfache Art durch automatisierte Provisionierung und Konfiguration der Infrastruktur ersetzt werden. Dieser Vortrag zeigt einen Ansatz, bei dem die Definition der Infrastruktur in voll maschinenlesbarer und ausführbarer Form in einem git repo anstatt in den Köpfen der (oder des) Engineers vorhanden sind.
Es wird gezeigt, wie das Verfahren sowohl auf Blech (d.h. auf lokalen physischen Maschinen) als auch in der Cloud angewendet werden kann, und somit eine grosse Übereinstimmung zwischen Test-/Integrations- und Produktionsinfrastruktur erreicht wird.
Die vorgestellten Werkzeuge sind terraform und ansible für Provisionierung und Konfigurationsmanagement, sowie lxd (nur lokal) und docker für System- und Applikationscontainer. Die vollständige Codebasis ist auf github verfügbar, so dass alle TeilnehmerInnen auch sofort mit eigenen Experimenten loslegen können.
Lange Wartezeiten und mangelnde Responsivität unserer Webapplikation führen zu unzufriedenen Benutzern, was sich in hohen Absprungraten und Abwanderung zur Konkurrenz oder einfach der Weigerung, die Applikation zu verwenden, niederschlägt. Das Problem einer langsamen Applikation lässt sich jedoch leider nicht ganz so einfach lösen. Wichtig für eine nachhaltige Lösung ist das Verständnis der Abläufe im Browser. Aus diesem Grund beschäftigen wir uns hier mit Konzepten wie dem Critical Rendering Path und einigen Charakteristiken der JavaScript-Engines. Im Zuge dieses Vortrags werden einige der häufigsten Problemstellungen von Webapplikationen analysiert und Lösungsansätze und Best Practices zur Behebung der Performanceprobleme vorgestellt.
Testgetriebene Entwicklung mit Jasmine und Karma hat sich mittlerweile schon als defacto-Standard etabliert. Routinen ohne Abhängigkeiten lassen sich damit ohne Probleme testen. Die Schwierigkeiten beginnen jedoch schon, wenn es um die Auflösung von Abhängigkeiten geht. In diesem Vortrag werden verschiedene Strategien und Werkzeuge vorgestellt, mit denen Abhängigkeiten zu Objekten und Funktionen oder zum Server abgedeckt werden können. Aber nicht nur Abhängigkeiten stellen Schwierigkeiten bei der testgetriebenen Entwicklung dar, auch der Umgang mit Fixtures ist bei der testgetriebenen Entwicklung mit JavaScript relevant. Abgerundet wird dieser Vortrag mit einigen Best Practices für die testgetriebenen Entwicklung mit JavaScript.
Reaktive Applikationen mit Scala, Play und AkkaMarkus Klink
Dieser Vortrag stellt mit Play2, Scala und Akka einen Technologiestack vor, der es ermöglicht relativ einfach eine skalierbare Webarchitektur aufzubauen, die mit dem Web und nicht gegen das Web arbeitet. Insbesondere der Einsatz von Akka als flexible Messagingplattform bietet dabei einige Vorteile gegenüber konventionellen Thread basierten Lösungen in Bezug auf die horizontale Skalierung der Applikation.
Hands-on Hystrix - Best Practices und Stolperfalleninovex GmbH
Ausfälle im Betrieb kennt jeder – und dennoch ist man selten ausreichend darauf vorbereitet. Allerdings könnten viele dieser Ausfälle deutlich abgemildert oder gar gänzlich verhindert werden. Netflix hat das Problem erkannt und die Bibliothek Hystrix entwickelt, die Entwickler bei der Implementierung von Resilience Patterns wie „Fail Fast“ und „Graceful Degradation“ unterstützt. In einer Microservice-Architektur vergleichbar mit Netflix kann die Anzahl von abhängigen Services nochmal deutlich ansteigen und Hystrix in einem solchen Szenario seine Stärken ausspielen. Überraschungen kann es aber auch bei Hystrix geben. Um diesen entgegenzuwirken bietet dieser Talk Erfahrungen und Beispiele aus bereits angepassten Anwendungen für die Integration von Hystrix. Eine Demo mit den kleinen Diensten zeigt, wie kleine Ursachen große Ausfälle auslösen können. Mit Hystrix im Einsatz dagegen werden die Folgen durch automatische Behandlung der Fehler minimiert.
Event: JAX 2016, 19.04.2016
Speaker: Gerrit Brehmer
Mehr Tech-Voträge: https://www.inovex.de/de/content-pool/vortraege/
Einführung in die funktionale Programmierung mit ClojureSascha Koch
Diese Präsentation ist im Rahmen eines Treffens der Java User Group Bielefeld entstanden.
Ich habe eine Einführung in die funktionale Programmierung an Hand des Lambda Kalküls gegeben. Anschließend haben wir uns die Programmiersprache Clojure angeschaut und einige Beispiele durchgesprochen.
Anschließend hat Daniel Rosowski noch funktionale Programmierung mit Guava und Java 8 vorgestellt: http://de.slideshare.net/DanielRosowski/real-lifefp
Präsentation zum Thema "Powerful mostly unknown Javascript-Features", gehalten von Entwicklern der Softwareagentur App Aware: Sascha Hameister und Aron Homberg
digitalSTROM Developer Day 2011: digitalSTROM bindet auch externe Komponenten...digitalSTROM.org
dSS-Entwickler Patrick Stählin ging auf das Konzept zur Einbindung externer Komponenten ein, das beliebig auf jegliche Hard- und Software mit programmierbaren Schnittstellen anwendbar ist. Die Einbindung erfolgt jeweils über die JSON oder SOAP-Programmierschnittstelle des dSS, die es erlauben, digitalSTROM-Komponenten zu simulieren oder mittels Software virtuelle Geräte zu implementieren. So kommunizieren diese im digitalSTROM-Netzwerk und können in Szenen integriert und mit einem digitalSTROM-Taster oder der iPhone App aufgerufen werden. Stählin führte das Konzept anhand des VLC-Mediaplayers vor, der nun zum Beispiel beim Klingeln an der Tür die Musik kurz unterbrechen kann. Der entstandene Javascript Code kann nun mit geringem Aufwand an andere Mediaplayer angepasst werden.
Provisionierung von Dockerhosts und -Containern mit Terraform, Ansible und LXD auf Blech und Cloud
Lästige und aufwändige manuelle Serverinstallation kann auf einfache Art durch automatisierte Provisionierung und Konfiguration der Infrastruktur ersetzt werden. Dieser Vortrag zeigt einen Ansatz, bei dem die Definition der Infrastruktur in voll maschinenlesbarer und ausführbarer Form in einem git repo anstatt in den Köpfen der (oder des) Engineers vorhanden sind.
Es wird gezeigt, wie das Verfahren sowohl auf Blech (d.h. auf lokalen physischen Maschinen) als auch in der Cloud angewendet werden kann, und somit eine grosse Übereinstimmung zwischen Test-/Integrations- und Produktionsinfrastruktur erreicht wird.
Die vorgestellten Werkzeuge sind terraform und ansible für Provisionierung und Konfigurationsmanagement, sowie lxd (nur lokal) und docker für System- und Applikationscontainer. Die vollständige Codebasis ist auf github verfügbar, so dass alle TeilnehmerInnen auch sofort mit eigenen Experimenten loslegen können.
Lange Wartezeiten und mangelnde Responsivität unserer Webapplikation führen zu unzufriedenen Benutzern, was sich in hohen Absprungraten und Abwanderung zur Konkurrenz oder einfach der Weigerung, die Applikation zu verwenden, niederschlägt. Das Problem einer langsamen Applikation lässt sich jedoch leider nicht ganz so einfach lösen. Wichtig für eine nachhaltige Lösung ist das Verständnis der Abläufe im Browser. Aus diesem Grund beschäftigen wir uns hier mit Konzepten wie dem Critical Rendering Path und einigen Charakteristiken der JavaScript-Engines. Im Zuge dieses Vortrags werden einige der häufigsten Problemstellungen von Webapplikationen analysiert und Lösungsansätze und Best Practices zur Behebung der Performanceprobleme vorgestellt.
Testgetriebene Entwicklung mit Jasmine und Karma hat sich mittlerweile schon als defacto-Standard etabliert. Routinen ohne Abhängigkeiten lassen sich damit ohne Probleme testen. Die Schwierigkeiten beginnen jedoch schon, wenn es um die Auflösung von Abhängigkeiten geht. In diesem Vortrag werden verschiedene Strategien und Werkzeuge vorgestellt, mit denen Abhängigkeiten zu Objekten und Funktionen oder zum Server abgedeckt werden können. Aber nicht nur Abhängigkeiten stellen Schwierigkeiten bei der testgetriebenen Entwicklung dar, auch der Umgang mit Fixtures ist bei der testgetriebenen Entwicklung mit JavaScript relevant. Abgerundet wird dieser Vortrag mit einigen Best Practices für die testgetriebenen Entwicklung mit JavaScript.
Wie kann ich die Browser Tools zum Auffinden von Fehlern und Schwachstellen in meinem Sourcecode benutzen? Dieser Talk stellt die wichtigsten Features vor.
Folien zum Vortrag JSF 2 Kompositkomponenten von Michael Kurz auf der JAX 2012 in Mainz.
Die dazugehörenden Beispiele sind unter https://github.com/jsflive zu finden.
Vortrag zum Thema "Ladezeiten Verbessern - CSS und JavaScript Komprimierung". Entwickelt wurde die Präsentation für die Vortragsreihe im Rahmen der WebDevFulda-Treffen.
Eine Sammlung von Best Practices für Applikationen mit AngularJS. Der Vortrag stellt Strukturen und Konventionen vor, mit denen sich auch umfangreiche Applikationen wartbar und erweiterbar halten lassen.
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdAOE
Sep 08, 2012
Continuous Delivery und Autoscaling von Enterprise Web-Applicationen in der Amazon Cloud
In diesem Vortrag zeigen wir am Beispiel des neuen Angrybird-Onlineshops, der zu Spitzenzeiten bis zu 10 Bestellungen pro Sekunde aufnehmen kann und dabei hochverfügbar ist, wie eine automatisch skalierende Cloud Infrastruktur sowie die nötigen Konzepte aussehen können.
Wir beschreiben die Herausforderungen und unsere Lösungen, um den Shop für ein Multi-Server-Setup vorzubereiten und zu betreiben. Spezielle Anforderungen an eine solche Architektur sowie die Integration von Reverse Proxies (Varnish), die Nutzung eines CDNs, verschiedene Cache-Strategien und weitere Optimierung sind ebenfalls Bestandteil dieses Vortrags. Außerdem stellen wir unsere automatisierte Cloud-Deployment-Strategien vor, angefangen von den Entwicklungsumgebungen, über den continuous Integration Server und unser Testing Framework bis hin zum A/B-Deployment in der Cloud.
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
Serverseitige Web-Technologien waren lange Zeit das Mittel der Wahl für Java-basierte Webanwendungen. Der Trend jedoch geht immer mehr zu JavaScript-basierten und damit Clientseitigen Web-GUIs. Wir werfen dazu einen Blick auf Google's AngularJS und erläutern an plastischen Beispielen seine Kernkonzepte und Funktionsweise. Was zeichnet AngularJS für die Realisierung der im Java-Umfeld häufig vertretenen, datengetriebenen Anwendungen besonders aus und wie fühlt sich die Entwicklung damit im direkten Vergleich dazu an?
Ein konkretes Fallbeispiel aus der Praxis, bei dem wir durch den Wechsel von einer JSF/Portlet-basierten Portal-Lösung hin zu einem AngularJS-basiertem Ansatz bei identischem JEE-Backend und Funktionalität Performance-Gewinne im Bereich von Zehnerpotenzen realisieren konnte, zeigt dabei auf, daß sich dieser Paradigmentwechsel durchaus lohnen kann!
Um Bilder und Grafiken "bereinigte" Version des Vortrags bei der JUG Ostfalen.
Nahezu jede große Website – egal ob das Backend in Java, PHP, Ruby oder Python programmiert wurde – verwendet im Browser JavaScript als Sprache. Software-Artefakte, die in JavaScript erstellt wurden, werde zunehmend wichtiger, da Logik in letzter Zeit tendenziell wieder vom Server zurück in den Browser wandert. JavaScript-Entwicklung ist im Alltag des Enterprise-Entwicklers angekommen. Teils muss er als Backend-Entwickler JavaScript-Code überarbeiten, der z.B. von einer Webagentur erstellt wurde, teils muss er auch selbst JavaScript-Artefakte erzeugen oder ein ganzes Framework oder eine Library in JavaScript schreiben oder pflegen.Der erste Teil des Vortrags richtet sich an Enterprise-Enwickler (meist mit einem Java-EE-Hintergrund), die sich für JavaScript interessieren, sich schnell darin einarbeiten wollen und Tipps suchen, dieses Ziel zu erreichen. Dabei werden einige Grundlagen der Sprache vorgestellt. Dieser Teil des Vortrags soll eher Lust auf Mehr machen als fundamentales Wissen in aller Tiefe zu vermitteln.Enterprise-Entwicklung ist in der Regel Teamarbeit. Eine große Codebasis mus wartbar bleiben. Im zweiten Teil des Vortrags werden Techniken und Tools vorgestellt, die dabei helfen können, eine geeignete Codequalität zu erreichen und zu wahren
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
node.js erlaubt die Ausführung von Javascript auf dem Server. Zusammen mit YUI3 gibt es jetzt auch noch einen echten DOM und plötzlich macht alles Spass :-)
Xpages Anwendungen lassen sich recht leicht per Drag & Drop und ein wenig Code erstellen. In den meisten Fällen reicht dies auch aus, wenn es um die Arbeit mit wenig Datensätzen geht und die Anwendung selber nicht sonderlich kompliziert ist. Dringt man aber tiefer in die Programmierung ein, so wird man nicht selten mit Performanceproblemen konfrontiert.
Die Session zeigt auf, wo in einer Anwendung ( und auch ausserhalb ) die Performancefresser stecken und wie man diesen auf die Schliche kommt. Die Installation des OpenNTF Xpages Toolkit und die Anwendung der Toolbox werden an einem praktischen Beispiel erläutert. Dabei wird aus einer anfänglich nicht performanten Anwendung Schritt für Schritt eine performante Applikation.
Agenda:
Performance, was kann bremsen ?
Java vs. JavaScript
Daten vorbereiten, ViewNavigator vs. GetNextDocument
Stringbuilder vs. Concat
Phase Listener
Partial Refresh / Partial Execute
Variable resolver
Production-ready Infrastruktur in 3 WochenAndré Goliath
Es gibt sie doch noch: Projekte die man auf der grünen Wiese starten darf - incl. Infrastruktur. Nur AWS als Cloud Provider ist gesetzt. In dieser Session gebe ich nach den ersten Wochen Einblicke und Lessons Learned, wie wir vom Zustand eines weißen Blatt Papiers auf ein Account- und Infrastruktur-Setup gekommen sind, mit dem wir zumindest mal sofort loslegen können ohne die üblichen „Abkürzungen“ bei Qualität und Featureumfang zu gehen. Ein wesentlicher Teil davon ist das Tooling von gruntwork.io, welches in diesem Kontext kurz vorgestellt wird. [Disclaimer: Wir sind auch nur normale Kunden mit einer gruntworks-Subscription ohne weitere Connections dorthin – diese Session wird also explizit keine gruntwork.io Werbeveranstaltung, auch wenn sich das inhaltlich nicht 100%ig vermeiden lässt]
Wie skaliert man Software as a Service Applikationen in der Windows Azure CloudPatric Boscolo
Skalierung heißt eine Applikation möglichst vielen Benutzern mit der selben Funktionalität zur Verfügung zu stellen. In dieser Präsentation beschäftigen wir uns mit den unterschiedlichen Vorgehensweisen um Applikationen erfolgreich zu skalieren.
Frameworks wie Next.js und Nuxt versuchen, Client und Server wieder näher zusammenzubringen und setzen dabei auf die großen SPA-Frameworks React und Vue. Die leichtgewichtige Bibliothek htmx dagegen versucht, das gleiche Ziel auf ganz andere Weise zu erreichen. Muss es denn immer eine SPA sein? Reicht nicht auch in vielen Fällen deutlich weniger Overhead? Wir haben schließlich HTML als Strukturelement und CSS für das gute Aussehen. Genau diesen Ansatz greift htmx auf und erweitert die Fähigkeiten der HTML-Struktur. Serverkommunikation und Eventhandling erreichen mit dieser Bibliothek eine ganz neue Dimension.
Aber was bedeutet das für unsere tägliche Arbeit? Setzen wir in Zukunft alle neuen Applikationen nur noch mit htmx um, oder migrieren wir unsere Vue-Codebasis auf htmx? Diesen und vielen weiteren Fragen widmen wir uns in diesem Vortrag, nicht nur in der Theorie, sondern auch am praktischen Beispiel.
Angular ist die Komplettlösung für die Umsetzung von Webapplikationen im Frontend. Ein so umfassendes Werkzeug hat allerdings auch seine Schattenseiten: Die Einstiegshürde ist relativ hoch. Dieser Vortrag stellt die wichtigsten Elemente des Frameworks wie Komponenten, Direktiven und Services vor. In einem praktischen Beispiel werden die verschiedenen Elemente von Angular Schritt für Schritt zu einer kompletten Applikation zusammengefügt. Damit lernen Sie nicht nur die Elemente des Frameworks kennen, sondern gleichzeitig die wichtigsten Architekturpatterns und zahlreiche Best Practices.
Node.js is a lightweight but yet capable platform for creating powerful web applications. The core of Node.js is kept small and restricted to a limited functionality that is extended by a vast ecosystem. With the right combination of packages you are able to build full-featured web applications. There is nearly no limit in features starting with simple problems such as authentication or logging over web interfaces with REST or GraphQL to a whole application based on a microservices architecture. In this talk I will introduce you to some commonly used packages and show you how to use them by example.
Node.js and microservices go hand in hand. This comes mainly from the design of Node.js. It is a specialised small platform with an enormous package environment. The NPM ecosystem provides a lot of packages you can use to build your microservice. The two most popular frameworks for this job are Express and Seneca. In this talk I will show you how you can communicate synchronously and asynchronously with your microservices and how easy it is to put your Node.js application into a docker container.
Nobody likes to wait for web pages to load in the browser. The longer it takes, the more dissatisfied the users become. Slow web pages lead to a higher bounce rate and the loss of customers. To solve this kind of problems can be very hard sometimes. Before you even start to optimise your page, you have to understand the workflows a browser performs in order to display a page on the screen. In this talk you will get some insights in the critical rendering path and the javascript engine of your browser that help you to find performance problems and solve them. I will show you also some tools and best practices that make your life easier when it comes to performance.
Features einer Applikation werden häufig implementiert, weil die Verantwortlichen vermuten, dass diese Funktionalitäten einen Mehrwert für die Benutzer der Applikation bieten. Je nach Umfang wird mehr oder weniger Geld investiert. Ohne weitere Unterstützung sind und bleiben es jedoch Vermutungen. Eine bessere Lösung bieten hier A/B-Tests. Features werden kostengünstig in einer oder mehreren Varianten umgesetzt und mit einer Kontrollimplementierung verglichen. Die Umsetzung, die sich als die beste herausstellt, wird überarbeitet und bleibt in der Applikation erhalten. Diese Vorgehensweise lässt sich sehr gut in node.js-Applikationen integrieren. Mithilfe von A/B-Tests können Sie Ihre Applikation an den Anforderungen Ihrer Benutzer ausrichten.
Typescript zur Applikationsentwicklung nutzen. Hier werden die wichtigsten Features der Sprache kurz vorgestellt und am konkreten Beispiel deren Einsatz gezeigt.
In diesem Vortrag werden drei zentrale Fragen gestellt (und beantwortet):
Wie bringe ich meine Idee schnell auf den Markt?
Wie finde ich heraus, ob meine Idee gut ist?
Wie kann ich auf geänderte Anforderungen reagieren?
Wie erstelle ich Webapplikationen mit Node.js. Vorgestellt werden verschiedene Frameworks wie Express.js oder Koa. Außerdem wird auf Skalierung eingegangen.
Translate your angular application with angular translate by Pascal Precht. It's a module consisting of filters, services and directives for translating various strings.
3. Sebastian
• Sebastian Springer
• aus München
• arbeite bei MaibornWolff GmbH
• https://github.com/sspringer82
• @basti_springer
• JavaScript Entwickler
9. Engine Optimierung
let arr = ['Peter', 'Paul', 'Mary'];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
} // 1.734ms
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
} // 0.079ms
Bei einem zweiten Durchlauf
10. Optimierung
Die Optimierung von JavaScript-Quellcode ist nicht euer
Problem! Die meiste Arbeit nimmt euch hier die Engine ab.
Die Optimierung des Quellcodes bringt relativ wenig und geht
meistens auf Kosten der Lesbarkeit.
Also: Das Big Picture im Auge behalten!
11. Was zählt?
Die Zeit bis der Nutzer die ersten
Informationen sieht und mit der Seite
interagieren kann.
13. Critical Rendering Path
Der Prozess zwischen dem Empfang der HTML-, CSS- und
JavaScript-Dateien und der Darstellung der Information im
Browser.
14.
15.
16. Critical Rendering Path
1. Der Browser lädt die angeforderte HTML-Datei.
2. Der Browser liest die HTML-Datei ein und sucht nach
Bildern, CSS und JavaScript.
3. Die Bilder werden heruntergeladen.
4. Die CSS-Dateien werden heruntergeladen.
5. Die JavaScript-Dateien werden heruntergeladen.
18. Download von Dateien
Ein Browser hat nur eine beschränkte Anzahl von parallelen
Verbindungen zu einem Server.
Firefox: 6
Chrome: 6
Internet Explorer: 13
22. Render Blocking CSS
Jede CSS-Datei blockiert die Darstellung der Seite für kurze
Zeit.
Je mehr CSS verwendet wird, desto länger dauert die
Blockade.
23. Render Blocking CSS
Kein @import verwenden - lieber alles in eine Datei.
Weniger CSS im Critical Rendering Path verwenden, z.B.
media-Attribut im style-Tag.
Wenn sonst nichts hilft: Inline CSS.
24. Render Blocking JavaScript
Alles JavaScript, das nicht direkt zum initialen Pageload
benötigt wird, kann nachgeladen werden.
Z.B. über ein generiertes Script-Tag beim load-Event.
oder lazy loading Funktionalität des Modulloaders (z.B.
webpack)
25. App Shell Architecture
Minimales HTML, CSS und JavaScript
als Grundlage für das User Interface.
• lädt schnell
• kann gecacht werden
• zeigt dynamischen Inhalt an
27. Der Benutzer bewegt sich in einer Applikation. Die
Applikation bleibt über längere Zeit im Browser geöffnet.
Daten werden bei Bedarf nachgeladen.
Es erfolgen keine Pageloads.
28. Der State der Applikation wird im Speicher gehalten.
Die Repräsentationen vieler Objekte liegen im Speicher.
Der Speicherverbrauch steigt über die Laufzeit an.
34. Hidden Classes
Um den Zugriff auf Eigenschaften zu beschleunigen, wird
nicht ein Verzeichnis mit allen Eigenschaften verwendet,
sondern pro Objekt Hidden Classes erzeugt, die auf den
korrekten Speicherpunkt verweisen.
36. function Point(x, y) {
this.x = x;
this.y = y;
}
var p1 = new Point(2, 4);
p1
Hidden Class
C0
37. function Point(x, y) {
this.x = x;
this.y = y;
}
var p1 = new Point(2, 4);
p1
Hidden Class
C0
x: offset 0
Hidden Class
C0 Wird Eigenschaft x hinzugefügt,
verwende C1.
38. Hidden Class
C1
x: offset 0
function Point(x, y) {
this.x = x;
this.y = y;
}
var p1 = new Point(2, 4);
p1
Hidden Class
C2
x: offset 0
y: offset 1
Hidden Class
Wird Eigenschaft y hinzugefügt,
verwende C2.
41. JIT Compiler
V8 kompiliert JavaScript bei der ersten Ausführung in
Maschinencode.
Die passenden Hidden Classes werden bestimmt und der
Code entsprechend gepatcht. Auch alle zukünftigen
Verwendungen des Objekts werden mit der Hidden Class
versehen und bei Bedarf von der Engine korrigiert.
42. JIT Compiler
# ebx = the point object
cmp [ebx,<hidden class offset>],<cached hidden class>
jne <inline cache miss>
mov eax,[ebx, <cached x offset>]
p1.x
44. Garbage Collection
V8 verschiebt das Memory Management möglichst in
ungenutzte Idle Time des Prozessors, um den Impact auf die
Darstellung zu minimieren.
Der Garbage Collector prüft regelmäßig den belegten
Speicher und löscht nicht mehr verwendete Informationen.
Nicht mehr verwendet heißt: keine Referenz mehr auf ein
Objekt.
47. Garbage Collection
Je weniger Objekte verschoben werden müssen, desto
schneller ist die young generation Garbage Collection.
48. Garbage Collection
Überschreitet der old generation space ein bestimmtes Limit,
wird der Bereich mit einem mark-and-sweep Collector
aufgeräumt.
Aktive Objekte werden markiert und anschließend alle nicht
markierten Objekte gelöscht.
Ein kompletter Durchlauf kann 100 ms dauern. Die
Applikation wird in dieser Zeit angehalten.
V8 kann diesen Prozess auch inkrementell in 5 ms-Schritten
durchführen.
51. Repaints & Reflows
Repaint: Der Browser überprüft alle Elemente auf ihre
Sichtbarkeit, Farbe, Abmessungen und andere visuelle
Eigenschaften und aktualisiert die relevanten Teile des
Bildschirms.
52. Repaints & Reflows
Reflow: Der Browser berechnet das Layout der Seite.
Reflows für weitere Elemente können ausgelöst werden
(Kinder, benachbarte Elemente, im DOM folgende Elemente).
Danach wird ein Repaint ausgelöst.
53. Auslöser für Reflows
• Einfügen, Entfernen oder Aktualisieren eines DOM Elements
• Verändern des Inhalts einer Seite
• Verschieben eines Elements
• Animationen
• Abmessungen auslesen
• CSS-Eigenschaften ändern
• Klassennamen eines Elements ändern
• Stylesheet hinzufügen oder entfernen
• Fenstergröße ändern
• Scrollen
54. Vermeiden von Reflows
• Folgen von einzelnen Styleänderungen vermeiden
• Operationen über Klassennamen zusammenfassen
• Operationen außerhalb des DOMs durchführen und
danach einhängen
• Styles in Variablen cachen
• Für Animationen besser fixe Positionierung
wählen
57. Memory Leaks
Machen unsere Applikationen langsam, führen zu Abstürzen
und hohen Latenzen.
Ein Memory Leak tritt auf, wenn Speicher nicht mehr
gebraucht wird, aber nicht zur Garbage Collection
freigegeben wird.
59. Memory Leaks
var theThing = null;
var replaceThing = function () {
var originalThing = theThing;
var unused = function () {
if (originalThing)
console.log("hi");
};
theThing = {
longStr: new Array(1000000).join('*'),
someMethod: function () {
console.log(someMessage);
}
};
};
setInterval(replaceThing, 100);
http://info.meteor.com/blog/an-interesting-kind-of-javascript-memory-leak
62. JavaScript Animationen
Bei einer Animation wird nach einer bestimmten Zeit eine CSS-
Eigenschaft eines Objekts verändert. Ist die gewählte
Zeitspanne gering genug, entsteht eine mehr oder weniger
flüssige Animation.
63. function move(elem, to) {
var left = 0;
function frame() {
left++;
elem.style.left = left + 'px';
if (left === to) {
clearInterval(id)
}
}
var id = setInterval(frame, 10);
}
document.getElementById('outer').onclick = function () {
move(this.children[0], 500);
};
<div id="outer" class="outer">
<div id="inner" class="inner"></div>
</div>
HTML
CSS
64. Nachteile
JavaScript wird über die CPU ausgeführt. Muss sich also die
Ressourcen mit vielen anderen Programmen teilen.
GC-Cycles können zu unschönen Effekten führen, da die
Ausführung angehalten wird.
Bei hoher CPU-Last sind die Animationen nicht mehr flüssig.
66. CSS-Animationen
CSS-Animationen werden durch die GPU berechnet und
belasten die CPU nicht.
CSS-Animationen erscheinen flüssiger als JavaScript-
Animationen.
Der Browser kann die Animationen optimieren (z.B. bei nicht
sichtbaren Tabs).
68. CSS-Animationen
Wenn Transitionen nicht reichen, kann man über Animationen
mit @keyframes noch wesentlich mehr herausholen.
Es gibt auch Generatoren wie z.B. http://cssanimate.com/
70. Prefetching
Sorgt dafür, dass der Browser gewisse Seiten bereits vorlädt,
um sie schneller laden zu können.
Chrome und IE unterstützen auch Prerendering, bei dem die
Seite bereits vorgerendert wird.
<link rel="prefetch" href="users.html" />