JavaScript für klassische OO-Entwickler

In diesem Workshop werden die Teilnehmer in alle für Enterprise-Entwickler (Java, C#) wesentlichen Spracheigenschaften von JavaScript eingeführt. Es werden Themen wie Objekte, Funktionen und prototypische Vererbung besprochen. Auch neue Konzepte wie ES6-Klassen und Module werden behandelt. Der Workshop enthält zudem kleine Übungen am eigenen Rechner. Bringen Sie dafür einen Laptop mit, auf dem ein aktueller Chrome-Browser installiert ist.

Vorkenntnisse: Objektorientierte Programmierung.

Lernziele: Moderne JavaScript-Klassen und -Module schreiben und (über Transpiler) verwenden.

Technische Voraussetzungen: Bitte bringen Sie einen Laptop mit. Als Webbrowser sollten Sie bevorzugt die neueste Version von Chrome einsetzen. Installieren Sie vor dem Workshop zudem die aktuelle LTS-Version (4.4.3) von Node.js. Windows-Nutzer sollten zudem Git und Python in der Version 2.7 auf dem Rechner haben. Interessierte können sich schließlich eine Trial-Lizenz von Webstorm installieren. Falls Sie ein Gerät Ihrer Firma verwenden, überprüfen Sie vorher bitte, ob Sie über Administrator-Rechte (Software muss installiert werden) verfügen. Klären Sie auch, ob übermäßig penible Sicherheitssoftware installiert ist (es werden Ports geöffnet). Corporate-Proxies, über die man in der Firma kommunizieren muss, die aber in einer anderen Umgebung entsprechend nicht erreicht werden, bereiten bisweilen Probleme.

Entwickeln mit AngularJS

AngularJS ist das aktuell erfolgreichste Webframework und erscheint demnächst in Version 2. Die Entwickler versprechen bessere Performance, bessere Kompatibilität zu Webstandards und leichtere Erlernbarkeit – das Framework befindet sich jedoch aktuell noch in der Betaphase.
Somit steht man vor der Frage: Warten oder heute schon mit AngularJS 1 das Projekt beginnen? Genau hier setzt der Workshop an. Ab Version 1.5 nähert sich das Framework immer weiter den Konzepten von Angular 2. In diesem Workshop vermitteln wir Ihnen, wie AngularJS 1 grundlegend funktioniert, und zeigen die aktuellen Best Practices und Möglichkeiten mit Hinblick auf ein mögliches Upgrade auf Angular 2.

Einstieg in Node.js

Sie wollten schon immer wissen, wie man Applikationen in Node.js schreibt? Dann ist dieser Workshop genau das Richtige für Sie.
Von der Kommandozeile über Webapplikationen bis hin zu installierbaren Desktopapplikationen lässt sich mit Node.js nahezu alles umsetzen – man muss nur wissen wie.
In diesem Workshop lernen Sie den Aufbau einer Node.js-Applikation und zahlreiche Best Practices im Umgang mit der JavaScript-Plattform kennen. Außerdem werden Themen wie Architektur, Design Patterns und Qualitätssicherung behandelt.
Zu jedem Thema gibt es praktische Beispiele, die Sie auch selbst mit- und weiterentwickeln können. Und natürlich bleibt genügend Zeit, um Ihre Fragen zum Thema Node.js zu beantworten.
Die Voraussetzung zur Bearbeitung der Beispiele ist ein auf Ihrem Rechner installiertes Node.js mit NPM und idealerweise eine Entwicklungsumgebung wie Webstorm.

Vorkenntnisse: JavaScript.

Don't be the next Ashley Madison: Penetrationstests für Entwickler

Sicherheit in Webanwendungen ist ein alter Hut. Dazu hat jeder schon genug Artikel gelesen und Vorträge gehört. Könnte man meinen.
Doch die Realität zeigt ein anderes Bild. Fast täglich tauchen neue Meldungen über gehackte Webseiten auf. Wie aber lassen sich Flüchtigkeits- und Anfängerfehler finden, ohne auf ein teures Audit durch Spezialisten zurückzugreifen? Wie kann man als Entwickler selbst ein Gespür für sicherheitskritische Stellen im Code entwickeln?
In diesem Workshop wird anhand einer JavaScript-Demoanwendung gezeigt, wie man die eigene Anwendung einem Security-Check unterzieht und sich so mit Hilfe frei verfügbarer Materialien langsam an die Denkweise von Hackern herantasten kann.

Vorkenntnisse: HTML-, JavaScript-, HTTP-, Java- und SQL-Grundlagen.

Lernziele: Eigene Anwendungen bzw. Anwendungen von Kollegen einem grundlegenden Security-Check unterziehen und die gängigsten Fehler finden können.

Technische Voraussetzungen: Die Teilnehmer benötigen einen Laptop mit installiertem VirtualBox sowie die Rechte, neue virtuelle Maschinen anlegen beziehungsweise importieren zu können. Circa 5 GByte Speicher sollten für die virtuellen Maschinen frei sein. Den Rest erledigen wir im Workshop gemeinsam.

Ein Ein- und Überblick in die disruptive Welt der WebRTC Data Channels

Von WebRTC hat schon jeder gehört und die meisten sind davon fasziniert. Nicht zu unrecht, denn WebRTC schüttelt den Telekommunikationsmarkt durcheinander. Von der kostenlosen Technik können eigentlich alle profitieren, die eine Webseite oder einen Internetdienst betreiben. Wir zeigen, wo WebRTC überall verwendet wird und welche neuartigen Dienste sich realisieren lassen. Anhand eines einfachen Beispiels zeigen wir, wie Sie WebRTC in Ihren Webdienst einbauen können, welche Stolpersteine es gibt und welche Open-Source-Projekte helfen, das Beste aus WebRTC herauszuholen.

Vorkenntnisse: HTML5-Konzepte, Client/Server-Architekturen, P2P-Anwendungen.

Lernziele: Die Zuhörer sind in der Lage, bei ihren Projekten abzuwägen, ob WebRTC für sie sinnvoll ist. Zudem lernen Sie den Funktionsumfang von WebRTC kennen und erfahren die Grundlagen zur Verwendung von WebRTC-APIs und Tools.

Babel: ES7 and beyond

Alle modernen Webbrowser beherrschen den JavaScript-Sprachstandard ES5. Auch der Nachfolger ES2015 wird zumindest weitestgehend unterstützt. Doch wie steht es um ES2016, ES2017, ES2018 und weitere zukünftige Versionen? Die Antwort verwundert wenig: Kaum ein Webbrowser weiß mit den Neuerungen umzugehen. Das gilt selbst für Features, wie async/await, die bereits ausgereift sind. Dabei würden gerade sie die Entwicklung deutlich erleichtern! Das Open-Source-Projekt Babel.js schafft Abhilfe: Es übersetzt zukünftig gültigen Code in eine bereits heute ausführbare Variante. Dadurch lassen sich Fortschritt und Kompatibilität verbinden. Golo Roden zeigt, wie das geht und was es dabei zu beachten gilt.

Vorkenntnisse: Grundkenntnisse in ES2015 und Interesse an neuen Sprachmerkmalen. Erfahrung im Umgang mit Gulp, Grunt & Co. sind hilfreich, aber nicht zwingend erforderlich.

Lernziele: Überblick über die Möglichkeiten, künftige Sprachmerkmale heute schon nutzen zu können – sogar in älteren Webbrowsern.

Vom No- zum Full-Stack-Entwickler mit dem MEAN-Stack

Echte Full-Stack-Entwickler sind sehr selten. Aufgrund ihrer breiten Skill-Sets werden sie jedoch sehr häufig gebraucht, insbesondere in kleineren Unternehmen und Start-ups. Durch die Microservices-Bewegung werden solche Allrounder auch in größeren Projekten immer wichtiger. Eine Microservices-Architektur erlaubt es den Teams, Services in einem Technologie-Stack ihrer Wahl umzusetzen, frei nach dem Motto "using the right tool for the job".
Der MEAN-Stack soll der einfachen und schnellen Entwicklung von Webanwendungen oder -services vom Frontend bis zum Backend dienen. Neben einer kurzen Einführung in das Thema werden Einsatzszenarien aufgezeigt und die Vor- und Nachteile im Vergleich zu anderen Technologie-Stacks erläutert.

Vorkenntnisse: Grundlegende HTML- und JavaScript-Kenntnisse.

Lernziele: Ein Verständnis für die wichtigsten Aspekte des MEAN-Stacks entwickeln und in der Lage sein, seinen Einsatz zu bewerten.

Erste Schritte mit Angular 2: Components, Directives, Templates

AngularJS ist eines der bekanntesten JavaScript-Frameworks. Die neue Version, Angular 2, befindet sich zurzeit in der Beta-Phase. Sie baut auf den Erfahrungen und positiven Eigenschaften von Angular 1 auf und soll schneller und moderner sein. Doch man braucht kein Vorwissen in Angular, um Angular 2 schon heute zu verwenden. Das Framework wurde komplett neu geschrieben, ist konzeptionell einfacher und verwendet eine neue Syntax. Dieser Talk ist eine Einführung in das Framework: wir lernen Components kennen, werfen einen Blick auf die Template-Syntax, Pipes und Directives und sehen uns Dependency Injection an.

Vorkenntnisse: Grundlagen in JavaScript und HTML.

Lernziele: Der Talk soll die Teilnehmer mit den wichtigsten Konzepten von Angular 2 vertraut machen. Er gibt einen Einblick in die TypeScript- und ES2015-Syntax.

Keynote: Dismantling Monoliths: using microservices and continuous delivery at the BBC

Not all projects can be greenfield. As developers we are often handed legacy code that we need to extend and improve upon. The BBC is no different.

I am going to discuss the methods that the BBC are using to migrate their legacy products from monolithic to microservice based architectures, with examples of how BBC Knowledge and Learning have enhanced the user experience whilst never once disrupting service.

AngularJS-Projekte sicher auf Angular 2 migrieren

Angular 2 kommt … und es macht alles anders! Ist das wirklich so? Was hat das für meine AngularJS-Anwendung zu bedeuten? Was kann ich tun, um mich heute schon auf einen sanften Umstieg vorzubereiten? Ich habe verschiedene Möglichkeiten der Migration von AngularJS auf Angular 2 in Projekten ausprobiert und teile meine Erfahrungen mit euch.

Enter Frontend Localization – Fallstricke und Lösungsansätze

Seit Jahren formatieren wir Zahlen, Datumsangaben und Preise für alle möglichen Locales in unserem Backend. In den meisten Backend-Sprachen ist die Unterstützung für die Lokalisierung und Formatierung bereits Bestandteil der Standardbibliotheken. Aber wie sieht es eigentlich im Frontend aus? Wie werden Texte übersetzt? Können wir die Zahlen in allen Locales formatieren? Leider nein. Und warum ist das eigentlich so schwer? Es sollte doch einfach sein, wenn es im Backend auch funktioniert. Der Vortrag zeigt Probleme, die auftreten, wenn das Frontend für andere Sprachen oder Kulturkreise anzupassen ist. Das Gute ist, dass viele Bibliotheken, die wir bereits benutzen, uns bei der Problemlösung helfen können.

Vorkenntnisse: Kein spezielles Vorwissen notwendig.

Lernziele: Ein Verständnis für die Herausforderungen guter lokalisierter Software schaffen.

Progressive Web Apps

Moderne Web-Applikationen werden immer mächtiger und können zunehmend nativen Applikationen die Stirn bieten. Insbesondere im mobilen Umfeld spielt dies eine große Rolle, da sich so hohe Entwicklungsaufwände vermeiden lassen. Schließlich sind Web-Applikationen auf den verschiedenen mobilen Plattformen gleichermaßen lauffähig. Dennoch besitzen Web Apps gegenüber nativen Apps Einschränkungen. In diesem Vortrag soll gezeigt werden, wie neue Standards diese Probleme lösen und so Applikationen ermöglichen, die nicht mehr von nativen Apps zu unterscheiden sind. Die daraus resultierende App wird dann häufig als Progressive Web App bezeichnet.

Vorkenntnisse: Grundverständnis des Web

Lernziele: Der Vortrag soll den Hörern einen allgemeinen Überblick über Technologien verschaffen, die in modernen Web-Applikationen zum Einsatz kommen. Des Weiteren soll ein Verständnis für ihre Notwendigkeit geschaffen werden.

Data-Flow-Patterns in Angular 2

Angular 2 enthält viele neue Konzepte zum Umgang mit Events und Daten innerhalb der Applikation. Durch die Integration von Reactive Extensions (RxJS) in das Framework können Entwickler auf eine mächtige Library zurückgreifen, die den Umgang mit asynchronen Operationen (wie Events und XHR) wesentlich erleichtert und die Performance der Applikation deutlich verbessern kann. Weitere Performancesteigerungen sind darüber hinaus durch den Einsatz von Immutable-Datenstrukturen (Immutable.js) möglich. Der Vortrag vermittelt die Grundlagen und Vorteile von RxJS und Immutable.js im Zusammenspiel mit Angular 2.

Vorkenntnisse: Grundlegende Kenntnis der neuen Features von ES2015. Es ist kein Vorwissen über Angular 2, RxJS oder Immutable.js notwendig.

Lernziele: Data-Flow-Konzepte in Angular 2 kennenlernen, Basics von RxJS und Immutable.js verstehen und praktisch umsetzen können.

Developer's guide to accessible DOM scripting

People use technology in different ways, by clicking, typing, tapping, watching and listening. Whether we use vanilla JavaScript, JavaScript libraries or JavaScript frameworks, we want people to be able to use the things we build. It helps to understand the relationship between DOM scripting and browser accessibility mechanics. With practical (JavaScript and ARIA) code examples, and accessibility tools for popular JavaScript frameworks like AngularJS and Ember.js, this developer's guide to accessible DOM scripting is all about coding like you give a damn!

Previous knowledge: Basic HTML, JavaScript and ARIA.

Learning objectives: Learn techniques and tools for building accessible interfaces with JavaScript.

E2E-Tests - Ein Leben nach Page Objects

Spricht man in Projekten das Thema E2E-Tests an, kommen schnell Probleme wie Wartbarkeit, Datenflut und unzureichendes Reporting auf den Tisch. Unter den richtigen Voraussetzungen und im Verbund mit anderen Testarten, schaffen diese Tests aber zum einen eine schön automatisierte Oberfläche und zum anderen auch einen Nutzen für das jeweilige Projekt. Mit Selenium hat die Nutzung von Page Objects allgemeinen Einzug in die Testautomatisierung gehalten, die bei richtiger Nutzung erheblichen Wartungsaufwand vermeiden. Doch auch die besten Page Objects brauchen zum Steuern der Oberfläche Daten, deren Verwaltung und Aktualisierung im Laufe eines Projektes schweißtreibend werden kann.

Vorkenntnisse: grundlegende Kenntnisse in JavaScript und Protractor

Your code will explode

JavaScript applications are becoming more complex. The likelihood, that your code breaks in production, gets higher with every line of code, and every new member on your team. After all, we're humans and make mistakes. It's absolutely natural. In this talk we travel back in time to the summer of 1962, on a mission to fix the most expensive (NASA) software bug in history in a live coding session (bring your space helmets!). On our mission you'll be introduced to the concepts of unit testing. You'll learn how to utilise unit tests to easily shield yourself from making mistakes and how large tech companies use automated test suites to safely ship code into production multiple times per day.

Previous knowledge: Basic programming knowledge.

Learning objectives: This talk is intended to be a showcase with a live-coding session how unit tests are useful. We'll start by showing what unit tests are and how to create them and end by demoing continuous integration.

Insights – User Experience Design

"Was hat sich der Designer dabei wieder gedacht?" Diese Frage hat sich vermutlich jeder Entwickler schon einmal gestellt, denn kaum ein innovatives Softwareprojekt kommt heutzutage ohne ein agiles, interdisziplinäres Team aus. Eine fruchtbare Zusammenarbeit entsteht jedoch erst durch intensiven Austausch und Verständnis für das jeweils andere Fachgebiet. Bettina gibt Einblicke in bewährte Vorgehensweisen aus dem User Experience Design und führt anhand konkreter Beispiele durch typische Projektphasen wie Konzeption, Design, Implementierung und User Review. Parallel werden mögliche Schnittstellen zwischen Design und Entwicklung aufgezeigt und unterschiedliche Modelle der Zusammenarbeit beleuchtet.

Web Components – das unbekannte Wesen aus dem Browser

Web Components sind nichts Neues, sind sie doch seit 2013 in der Entwicklung durch Browser-Vendors und das W3C. Nach dem anfänglichen Hype um 2014 herum wurde es zunächst stiller um Web Components – stagnieren sie also oder sind sie gar Geschichte? Nein, keinesfalls! Der Vortrag gibt eine Kurzeinführung und ein ausgiebiges Update zum aktuellen Stand der Entwicklung und zeigt Möglichkeiten auf, bereits heute von Web Components zu profitieren und sie in aktuellen Projekten zu verwenden.

Vorkenntnisse: HTML, JavaScript-Grundlagen.

Lernziele: Verstehen, was Web Components sind und wie man sie heute einsetzen kann.

Don't be the next Ashley Madison: Penetrationstests für Entwickler

Sicherheit in Webanwendungen ist ein alter Hut. Dazu hat jeder schon genug Artikel gelesen und Vorträge gehört. Könnte man meinen. Doch die Realität zeigt ein anderes Bild. Fast täglich tauchen neue Meldungen über gehackte Webseiten auf. Wie lassen sich Flüchtigkeits- und Anfängerfehler auch ohne ein teures Audit von Spezialisten finden? Wie kann man als Entwickler ein Gespür für sicherheitskritische Stellen im Code entwickeln? In diesem Talk wird anhand einer Demo-Anwendung gezeigt, wie man die eigene Applikation einem Security-Check unterzieht und sich so mit Hilfe von frei verfügbarem Material langsam an die Denkweise von Hackern herantasten kann.

Vorkenntnisse: Grundlagen in HTML, JavaScript, HTTP, Java, SQL.

Lernziele: Überblick über das Security-Thema.

Reactospective

Seit dem React-Vortrag im letzten Jahr wurde hart an dem Projekt gearbeitet. Dieser Vortrag gibt einen Rückblick über alles Wissenswerte, geht etwas intensiver auf die Eigenheiten von React ein und zeigt, wie wichtig Tests für Komponenten sind. Und auch wir von HolidayCheck haben nach vielen Tausend Unit-Tests, der Einführung eines vollautomatisierten Docker-Deployment-Prozesses und der parallelen Entwicklung in vielen agilen Teams an mehreren Standorten einiges gelernt.

Vorkenntnisse: React mal gehört/gesehen haben.

Lernziele: Motivation für React und Testgetriebenes Entwickeln, Insights.

Continuous Integration for Fun and Profit

Agile Continuous Integration verspricht mithilfe von Pipelines die Entwicklung und Auslieferung von Software signifikant zu verbessern. Der Weg zur finalen Implementierung kann jedoch mit einigen unvorhergesehenen Aufwänden gepflastert sein. So werden wir uns einige hilfreiche Methoden und Tools zur Umsetzung solcher Pipelines mit dem Fokus auf Continuous Integration ansehen, um unseren agilen Entwicklungsprozess abzurunden und dadurch Zeit für die wichtigen Dinge im Alltag zu gewinnen.

Vorkenntnisse: Grundverständnis von Softwarentwicklung

Lernziele: Wir werden die Hintergründe von Continuous Integration/Delivery diskutieren und sehen uns ein Beispiel aus der Praxis an, das vor allem die Vorteile von CI/CD hevorheben soll.

React mit GraphQL und Relay: Data-Binding 2.0

Mit GraphQL und Relay hat nun auch Facebook ein einfaches Data-Binding-Konzept, so wie es AngularJS oder andere Frameworks schon lange anbieten. Oder ist es doch etwas ganz anderes? Wie unterscheidet es sich davon oder auch von der React-Flux-Architektur? Ist es letztlich eine Vereinfachung? Das Konzept entkoppelt durch Generalisierung der REST-Schnittstelle zwischen Client und Server und sieht eingebautes intelligentes Caching der Abfragen vor. Das hilft, um die Entwicklung des Clients/Servers zu beschleunigen und die Schnittstelle robuster zu gestalten. Aber wie jede Abstraktion bringt auch sie Komplexität und Einschränkungen. Welche Lösungsansätze gibt es dagegen?

Vorkenntnisse: Grundlegende React-Kenntnisse, Grundlagen der React-Flux-Architektur.

Backend-less Development revisited

It's obvious that SPA interfaces rely on RESTful APIs. But does it always have to be like this? Tight-coupling between interfaces and APIs result in great development issues. Backend-less development is an emerging approach of decoupling the two sides, enabling them to be developed independently. In this talk, I will cover: The costs and the benefits of mocking the entire API, the three possible architectural approaches in doing so, simulating business logic in mocks using plain JavaScript and JSON, mock engine examples in Angular.js and sinon.js, and the technical and business aspects of separating frontend and backend. Mock your API and make your frontend truly independent!

Previous knowledge: Just JavaScript basics, client-server model and SPA architecture in general.

Learning objectives: The aim is to explain the concept: how it works technically (on three different levels), based on examples. Moreover, the business context will be introduced: costs vs benefits as well as when, why and how.

Serverless Mobile Applications mit dem Omnis Studio JavaScript Client

Mit der JavaScript-WebClient-Technologie von Omnis Studio lassen sich dynamische und skalierbare Web-Applikationen sowohl für Desktops als auch für Mobile Devices entwickeln. Dank der für Android und Apple iOS verfügbaren JS-Wrapper ist es möglich, diese mit geringem Aufwand in den jeweiligen Stores zu vertreiben. Dabei hat man die Wahl zwischen standardmäßig serverbasierten und auch Serverless Standalone-Apps, die als HTML/ JS-Applikation komplett auf dem Mobilgerät laufen und nur bei Bedarf, etwa zur Synchronisation erfasster Daten, eine Serververbindung herstellen. Der Vortrag beschreibt die Architektur einer solchen Applikation unter Verwendung des Omnis Synchronisation Servers.

Vorkenntnisse: Grundlagen der Web-Entwicklung, OO-Programmierung, SQL, SQLite

Lernziele: Verständnis des Aufbaus und der Architektur von Serverless Mobile Applications mit Omnis Studio.

ReactNative

HTML5, CSS und JavaScript: Diese Kombination wurde uns allen einst als die Lingua Franca – als die universelle Sprache – für sämtliche Anwendungen versprochen: sowohl im Web als auch auf mobilen Devices. Doch „hybride” Apps werden immer unbeliebter, hauptsächlich wegen schlechter Performance. Die erste Generation von Tools (PhoneGap / Cordova, SenchaTouch, …) war gut. Allerdings hatten alle Werkzeuge das gleiche Grundproblem. Dieses versucht Facebook jetzt zu lösen. ReactNative ist ein relativ neues JavaScript-Framework, das einmal mehr verspricht, das Entwickeln von mobilen Apps mit Webtechnologien zu ermöglichen. Ob dies gelingt, wird sich dem Zuhörer während des Vortrags eröffnen.

Vorkenntnisse: Erfahrung in der Webentwicklung.

Lernziele: ReactNative verstehen und einordnen können.

Wir drucken das Internet. Wir meinen es ernst. Und es ist sinnvoll.

„Warum will man das Internet ausdrucken? Und warum um Himmels Willen sollte man es im Browser machen?” Das ist die normale Reaktion eines Entwicklers, wenn er mit dieser Anforderung konfrontiert wird. Und so ähnlich war auch unsere Reaktion, als unser Kunde uns bat, sauber gelayoutete PDF-Dokumente mit JavaScript zu erzeugen. Für unseren Kunden müssen diese vertragsrelevanten Dokumente zu jedem Zeitpunkt – online und offline – verfügbar sein. Die einfache, im Browser integrierte Druckfunktion reicht uns nicht aus. Also haben wir uns hingesetzt, die Ärmel hochgekrempelt und die JavaScript-Bibliothek pdfmake eingesetzt. Wie erwartet, sind wir dabei auf einige Hürden gestoßen: kontextsensitive Seitenumbrüche, Textfluss um Bilder, Einbinden von verschiedenen Schriftarten, … nicht wirklich der Traum eines Entwicklers. Aber nach einigen Stunden Entwicklung, vielen Unit-Tests, langem Kopfzerbrechen und einigen Tränen können wir nun PDFs erzeugen, die sich sehen lassen. Damit ihr nicht das Gleiche erleben müsst, fasse ich euch in diesem Talk unsere Erfahrungen, Erkenntnisse und amüsantesten Fehler zusammen. Keine Sorge, ein paar Herausforderungen stehen noch aus und laden zum Mitarbeiten ein.

Vorkenntnisse: Grundlegende JavaScript- und CSS-Kentnnisse.

Lernziele: Grundprinzipien der PDF-Erzeugung innerhalb von JavaScript-Anwendungen verstehen, Erfolge, Herausforderungen und Misserfolge des Projekts nachvollziehen.