Es ist 2018 und endlich haben wir eine echte Layouttechnik für CSS. Deren Verbreitung ist sehr hoch. Wir schauen uns zu Anfang die Möglichkeiten von Flexbox an und experimentieren dann mit praxisnahen Beispielen.
Dieser Workshop vermittelt die wichtigsten Basics von Node.js angefangen vom internen Aufbau über das Modulsystem bis hin zu Best Practises im Umgang mit der Plattform. Wir beschäftigen uns sowohl mit den Boardmitteln, die Node.js schon von sich aus mitbringt, als auch mit den Modulen, die sich per NPM installieren lassen. Als praktisches Beispiel bauen wir eine voll funktionsfähige Kommandozeilen-Applikation, auf die das Gelernte angewendet werden soll. Zur Erleichterung der täglichen Arbeit mit Node.js werden außerdem zahlreiche Werkzeuge und Hilfsmittel wie beispielsweise der Debugger oder NVM vorgestellt.
Mit React-Anwendungen kommen die Buzzwords. Isomorph, Functional, Components, Progressive Web-Apps und Static Type Checking sind nur ganz wenige.
In diesem ganztägigen Workshop bringen Hans-Christian Otto und Elmar Burke Licht ins Dunkel und die Teilnehmer werden beim Bau einer Anwendung begleitet die React und TypeScript einsetzen wird. Der Workshop richtet sich an all jene, die bisher wenig bis gar keine Erfahrung mit React haben und Lust auf Neues besitzen.
JavaScript ist durch den anhaltenden Boom von Web-Anwendungen zu einer der wichtigsten Sprachen der letzten Jahre geworden. Immer mehr und immer größere Anwendungen werden mit JavaScript entwickelt und gewartet werden. Doch eignet sich JavaScript dafür überhaupt? Unsere Erfahrung zeigt hier ganz klar: jein. JavaScript hat seine Stärken, aber auch ausgeprägte Schwächen, die gerade im Bereich professioneller Anwendungsentwickler zum Tragen kommen. TypeScript verspricht hier Besserung. In diesem Workshop fangen wir bei den Grundlagen an: Was ist TypeScript. Wie unterscheidet es sich von EcmaScript und welche Vorteile bringt das. Wie ist das Typ-System aufgebaut und wie wird mit dem EcmaScript Module System umgegangen. Wir schauen uns aber auch fortgeschrittene Themen wie Generics, Decorator, Union-Types und einiges mehr an. Danach ist jeder fit mit TypeScript loszulegen.
Angular ist das aktuelle Single-Page-Framework von Google. Es vereinfacht die Implementierung selbst großer Webanwendungen, die nicht nur im Browser, sondern auch als App auf Ihrem Smartphone oder dem Desktop ausgeführt werden können. Sie haben von Angular schon viel gehört und möchten wissen, wie damit entwickelt wird? Setzen Sie das Vorgängerframework AngularJS ein und planen den Umstieg? Oder haben Sie Angular bereits bei Projekten im Einsatz und möchten die Grundkonzepte besser verstehen? Dann sind Sie bei diesem ganztägigen Workshop genau richtig. Christian Liebel (@chris_liebel) von Thinktecture und David Müllerchen (@webdave_de) von HQLabs GmbH rollen die Angular-Story komplett von vorne auf: Lernen Sie einige Tricks und Kniffe kennen. Anhand vieler Aufgaben lernen Sie den Unterschied zwischen Komponenten, Direktiven, Pipes und Services kennen. Sie erfahren, wie Komponenten untereinander kommunizieren können, Benutzereingaben mithilfe von Formularen erfasst oder Anwendungssichten über das Routing gezielt adressiert und parametrisiert werden. Eben von 0 auf 100!
Webtechnologien funktionieren. Sie sind mächtiger und umfangreicher denn je. Und dennoch sind wir mit ihnen auf das Web beschränkt. Doch dank Electron können wir uns von diesen Einschränkungen befreien und auf den Desktop wandern. Electron ist ein Framework zur Entwicklung nativer cross-platform Anwendung mittels Webtechnologien.
In dieser Session lernen sie nicht nur, was Electron genau ist, sondern außerdem, wie sie es nutzen können um sich vom Web zu lösen und mit JavaScript, HTML, CSS und Co. eine Desktop-Applikation zu bauen. Ihr Trainer Jakob Westhoff beleuchtet hierbei nicht nur die Grundlagen, sondern wird ihnen auch die unterschiedlichen Frameworks und Helferlein vorstellen, welche Ihnen die Entwicklung mit Electron ein vielfaches leichter machen.
Schauen auch sie über den Tellerrand und brechen aus den Beschränkungen des Browsers aus.
Mit React-Anwendungen kommen die Buzzwords. Isomorph, Functional, Components, Progressive Web-Apps und Static Type Checking sind nur ganz wenige.
In diesem ganztägigen Workshop bringen Hans-Christian Otto und Elmar Burke Licht ins Dunkel und die Teilnehmer werden beim Bau einer Anwendung begleitet die React und TypeScript einsetzen wird. Der Workshop richtet sich an all jene, die bisher wenig bis gar keine Erfahrung mit React haben und Lust auf Neues besitzen.
Die Reactive Extensions von Microsoft setzen ihren Siegeszug über alle Entwicklungsplattformen fort und machen auch vor JavaScript nicht halt. Das “Observerpattern done right” vereinfacht die asynchrone Programmierung und hilft, Applikationen flexibler zu gestalten, indem die Daten in einer Applikation als kontinuierlicher Fluss von Informationen modelliert werden. Dieser Workshop stellt eine Einführung in die einzelnen Bestandteile von RxJS dar und zeigt mit einer Vielzahl kleiner, in sich geschlossener Übungen, wie Observer, Operatoren oder Subjects verwendet werden können. In einem weiteren praktischen Beispiel werfen wir einen Blick auf den Einsatz von RxJS in Angular. Angular setzt an vielen Stellen selbst RxJS ein, sodass Sie früher oder später bei der Entwicklung von Angular-Applikationen mit der RxJS-Bibliothek in Berührung kommen werden.
Angular ist das aktuelle Single-Page-Framework von Google. Es vereinfacht die Implementierung selbst großer Webanwendungen, die nicht nur im Browser, sondern auch als App auf Ihrem Smartphone oder dem Desktop ausgeführt werden können. Sie haben von Angular schon viel gehört und möchten wissen, wie damit entwickelt wird? Setzen Sie das Vorgängerframework AngularJS ein und planen den Umstieg? Oder haben Sie Angular bereits bei Projekten im Einsatz und möchten die Grundkonzepte besser verstehen? Dann sind Sie bei diesem ganztägigen Workshop genau richtig. Christian Liebel (@chris_liebel) von Thinktecture und David Müllerchen (@webdave_de) von HQLabs GmbH rollen die Angular-Story komplett von vorne auf: Lernen Sie einige Tricks und Kniffe kennen. Anhand vieler Aufgaben lernen Sie den Unterschied zwischen Komponenten, Direktiven, Pipes und Services kennen. Sie erfahren, wie Komponenten untereinander kommunizieren können, Benutzereingaben mithilfe von Formularen erfasst oder Anwendungssichten über das Routing gezielt adressiert und parametrisiert werden. Eben von 0 auf 100!
Es sollte im Eigeninteresse eines jeden Seitenbetreibers sein, möglichst viele Menschen zu erreichen. Diese Erkenntnis führte zu responsive Websites. Barrierefreiheit (Accessibility) führt hingegen seit vielen Jahren ein Nischendasein und wird oft als ungewünschter Kostenfaktor betrachtet.
Ich führe Sie ein in die vielen Aspekte der Barrierefreiheit und zeige Ihnen viele Einzelaspekte, die Sie im täglichen Entwicklungsprozess berücksichtigen können, ohne unnötige Kosten zu erzeugen. Wir schauen uns auch an, wie Sie selber ein paar Analysen vornehmen können.
Seit Jahren ist das Thema Micro-Services unter Backendentwickler*Innen ein Top-Thema. Viele Micro-Service-Architekturen lassen dabei das Thema „Frontends“ außen vor, was wiederum in vielen kleinen, lose gekoppelten Backend-Services mit einem großen, monolithischen Frontend resultiert. Micro Frontends sollen genau dieses Problem lösen, indem der Ansatz der vielen kleinen Anwendungen auch in den Browser wandern soll. Wir diskutieren verschiedene Ansätze, um Micro-Frontends umzusetzen, insbesondere im Hinblick auf neue Herausforderungen, die sich dadurch stellen.
Die Grundlagen von Angular sind vermittelt – nun geht es an den täglichen Einsatz in Ihren Projekten! Christian Liebel zeigt Ihnen auf Basis seiner Erfahrungen aus etlichen Kundenprojekten, wie Sie weiteres Optimierungspotenzial für Ihre Anwendungen entfalten können: Lazy Loading, Change-Detection-Strategien, NgZone, Immutables, Observables, Server-Side Rendering, und der Production-Build der Angular CLI sind nur einige Maßnahmen, um aus Ihrer Angular-Anwendung noch einmal deutlich mehr Performance herauszuholen, als Sie es zur Entwicklungszeit bereits gewohnt sind.
Progressive Web Apps haben nichts mit Angular, React oder irgendeinem anderen konkreten Framework zu tun, denn eine schnelle, offlinefähige Webapp kann man mit jedem beliebigen Toolset bauen. Wirklich wichtig sind allein die allen PWAs zugrunde liegenden Webstandards wie Promises, Service Workers und Offline-Datastores. Um genau diese PWA-Basistechnologien geht es in diesem Workshop - keinerlei Kenntnis in irgendeinem bestimmten Framework ist nötig!
Teil 1 des Workshops "Wir bauen eine Progressive Web App" befasst sich mit den Hintergründen, Technologien und Patterns hinter PWAs, komplett unabhängig von konkreten JS-Libraries. Wie funktionieren Service Workers wirklich? Welche PWA-Patterns sind wichtig? Welche frameworkunabhänigen Libraries helfen im Alltag? Gerüstet mit dem Wissen um diese und viele weitere Grundlagen ist es ein leichtes, mit einem selbst gewählten Toolset eine eigene PWA zu entwickeln... zum Beispiel in Teil 2 dieses Workshops.
React wird sehr häufig mit Redux eingesetzt. Doch was ist das eigentlich? Redux ist ein Konzept zur Verwaltung des Anwendungsstatus', einem der größten Probleme in Anwendungen. Anstatt alles verteilt zu speichern wird in Redux der Status in einem Ort bearbeitet und auch nur von einer Funktion, den so genannten Reductern, bearbeitet. Das erleichtert nicht nur das Debugging, auch wird die Datenebene der Anwendung strikt von der Anzeigelogik getrennt.
In diesem Workshop wird an praktischen Beispielen verdeutlicht, wie man mit React und Redux Anwendungen baut, in der State kein Problem mehr ist.
Einen Unittest für eine einfache Funktion zu schreiben, sollte für keinen JavaScript-Entwickler ein Problem darstellen. Aber wie geht man mit Abhängigkeiten um, wie verkürzt man die Laufzeit seiner Tests und wie testet man asynchrone Funktionen richtig?
Auf diese Fragen und noch viele weitere liefert dieser Workshop eine Antwort. Sie lernen Werkzeuge und Bibliotheken wie Jasmine, Karma oder Jest und deren Einsatz am praktischen Beispiel kennen und erfahren außerdem mehr über Patterns und Konzepte, die Sie beim Testen anwenden können.
Sei es, um eine große Geschäftsanwendung in kleinere Teile zu zerlegen oder um allgemeine Funktionen Projekt-übergreifend nutzen zu können: Jeder Angular-Entwickler wird früher oder später Pakete entwickeln müssen. Dieser Workshop zeigt anhand einer Fallstudie, wie Sie diese Herausforderung meistern können. Sie erfahren anhand einer Fallstudie, wie ein npm-Paket aufgebaut ist und auf was beim Zusammenspiel mit Angular geachtet werden muss. Best Practices, Lessons Learned aus der Praxis aber auch das vom Angular-Team veröffentlichte Angular Package Format finden dabei Berücksichtigung. Sie lernen den Monorepo-Ansatz als eine Möglichkeit zum strukturieren großer Anwendungen kennen und sehen, wie man Pakete über eine Haus-interne sowie über die öffentliche npm-Registry verteilen kann. Außerdem sehen Sie, wie Sie die von Ihren Paketen angebotenen Building-Blocks anpassbar gestalten können. Zur Abrundung werden Möglichkeiten zum dynamischen Laden von Modulen und somit zum Realisieren eines Plugin-Systems präsentiert.
Progressive Web Apps (PWA) sind ein heißes und topaktuelles Thema in der Webentwicklung. Dank einer ganzen Reihen von Technologien und Vorgehensweisen aus dem PWA-Umfeld lassen sich Websites und Webanwendungen mit einigen zentralen und relevanten Features ausstatten, die bisher ausschließlich nativen Anwendungen vorbehalten waren: Offlinefähigkeit, Push Notifications, schnelles Startverhalten und installierbar – samt Homescreen-Icon. Christian Liebel zeigt Ihnen, wie Sie solche PWAs mit Angular erstellen und somit sanft und sacht die Schlucht zwischen reinen Web-Sites, Web Apps und hybriden/nativen Apps schließen können.
Theoretisches Wissen rund um Service Workers und Co schön und gut, aber am Ende geht nichts über praktische Erfahrung. Der Teil 2 des Workshops "Wir bauen eine Progressive Web App" bietet eine Möglichkeit, diese praktische Erfahrung zu sammeln. Gemeinsam basteln wir einen Prototyp einer kleinen, offlinefähigen mobile-first PWA - entweder auf Basis einer Vorlage oder ganz nach dem persönlichen Geschmack mit dem Framework der Wahl.
Im Teil 2 des Workshops "Wir bauen eine Progressive Web App" geht es komplett um die praktische Anwendung des in Teil 1 gelernten. Es gibt keine wirren Slides und langweiligen Vorträge, sondern vom Trainer unterstützte hands-on Entwicklung am konkreten Beispiel! Bringen Sie Ihren Laptop mit und vielleicht - wenn Sie mögen - ihre eigene Idee für eine kleine Progressive Web App.
Einen Unittest für eine einfache Funktion zu schreiben, sollte für keinen JavaScript-Entwickler ein Problem darstellen. Aber wie geht man mit Abhängigkeiten um, wie verkürzt man die Laufzeit seiner Tests und wie testet man asynchrone Funktionen richtig?
Auf diese Fragen und noch viele weitere liefert dieser Workshop eine Antwort. Sie lernen Werkzeuge und Bibliotheken wie Jasmine, Karma oder Jest und deren Einsatz am praktischen Beispiel kennen und erfahren außerdem mehr über Patterns und Konzepte, die Sie beim Testen anwenden können.
Router sind der Dreh- und Angelpunkt der meisten Single Page Anwendungen. Die offizielle Implementierung für Angular kommt mit einigen äußerst interessanten Konzepten. Sie unterstützt Child-Routes für hierarchische Views und Aux-Routes zur Organisation mehrerer paralleler Routen. Daneben können Anwendungen mit Guards ins Routing eingreifen und so das Aktivieren bzw. Deaktivieren von Routen verhindern. Außerdem können Resolver Daten im Zuge eines Routen-Wechsels laden und unter Nutzung von Routing Events kann sich die Anwendung über die Aktionen des Routers auf dem Laufenden halten. Um die Startgeschwindigkeit bei großen Anwendungen zu erhöhen, kann der Router auch einzelne Anwendungsteile erst bei Bedarf nachladen (Lazy Loading). In diesem Workshop erfahren Sie anhand einer durchgängigen Beispielanwendung mit praxisnahen Use Cases, was sich hinter diesen Konzepten verbirgt ein und wie Sie sie in Ihren Projekten nutzen können.
"Tests? Dafür haben wir keine Zeit." Den Satz dürfte jeder Software-Entwickler so oder so ähnlich sicher schon einmal gehört haben. In diesem Workshop möchte der Trainer näher bringen warum die Aussage falsch ist, wie mit Test Driven Development (TDD) strukturierter vorgegangen werden kann und was sinnvolle Tests sind.
Erleben Sie im Speaker Panel spannende Diskussionen zwischen den Trainern, die einen tiefen Blick hinter die Kulissen der JavaScript- und HTML5-Welt geben. Nutzen Sie auch die Möglichkeit in lockerer Atmosphäre ihre offenen Fragen des Tages zu stellen und mit den Trainern ihre Erfahrungen auszutauschen. Das sollten Sie nicht verpassen!
Das CSS Grid-Layout-Modul ermöglicht die intuitive Erstellung von Layouts über Rasterdefinitionen und wird in den aktuellen Versionen der wichtigsten Browsern unterstützt. Im Workshop lernen Sie die neue Layouttechnik nutzen inklusive praktischer Einsatzmöglichkeiten und Fallbacklösungen.
Dieser Workshop vermittelt die wichtigsten Basics von Node.js angefangen vom internen Aufbau über das Modulsystem bis hin zu Best Practises im Umgang mit der Plattform. Wir beschäftigen uns sowohl mit den Boardmitteln, die Node.js schon von sich aus mitbringt, als auch mit den Modulen, die sich per NPM installieren lassen. Als praktisches Beispiel bauen wir eine voll funktionsfähige Kommandozeilen-Applikation, auf die das Gelernte angewendet werden soll. Zur Erleichterung der täglichen Arbeit mit Node.js werden außerdem zahlreiche Werkzeuge und Hilfsmittel wie beispielsweise der Debugger oder NVM vorgestellt.
Bootstrap, Foundation oder Material Design - all das sind uns bekannte UI-Frameworks. Doch was haben sie gemeinsam? Genau, sie bieten eine UI-Basis an, um unsere HTML5-Anwendungen "entwicklerhübsch" darzustellen. Werden auf dieses Basis UI-Komponenten entwickelt, sind sie meist stark mit den Ideen, Konzepten und dem Design des Frameworks verheiratet. Eigene, oftmals durch Corporate Identity vorgegebene UI-Semantiken, Bedien- und Designkonzepte lassen sich oft nur schwer in ein bestehendes Framework integrieren. Die Portier- und Wiederverwendbarkeit leiden darunter. Moderne Konzepte, wie Web Components, Shadow DOM und Custom-HTML-Elemente können helfen, eigene wiederverwendbare und gutaussehende UI-Komponenten zu entwickeln. In dieser Session wollen Jörg Neumann und Manuel Rauber ein Konzept zur Entwicklung von Web Components mit dem Angular-Komponentenmodell vorstellen und zeigen, mit welchem Workflow man vom Design bis hin zur stylisch umgesetzten App kommt.
Der Traum von einer einzigen Codebasis für alle Clientplattformen: Er lebt immer noch. In dieser Session zeigt Ihnen Christian Weyer, wie weit dieser Traum mit HTML5/JavaScript und aktuellen Cross-Plattform-Werkzeugen Wirklichkeit werden kann. Auf Basis moderner UI-/UX-Konzepte lassen sich Oberflächen für Desktops, Tablets und Smartphones entwerfen – mit einer Codebasis. Mischt man diesen Ansatz mit Tools wie Cordova und Electron, so kann man mit Single-Page-Applications-(SPA-)Frameworks wie Angular echte Anwendungen für alle relevanten Plattformen und Devicegrößen bauen, Mobile und Desktop: Windows, Linux, macOS, iOS, Android und Co. – und natürlich den Browser. Sehen Sie all dies in Action!
In gepflegter Science Fiction kommen oft Raumschiffe und Aliens vor,
ohne wirklich das Thema zu sein – eigentlich geht es darum, mit
frischen Mitteln oder aus anderen Perspektiven eine Geschichte über
die Gegenwart zu erzählen. Genau so verhält es sich mit neuen
JavaScript-Features. Diese mögen (wie Raumschiffe und Aliens) für sich
genommen schon einen ziemlichen Coolness-Faktor haben, aber wichtig
ist doch die Frage: was machen sie mit unserem Code? Wie lassen sie
sich gewinnbringend einsetzen und welche alten Patterns werden
plötzlich überflüssig?
Dieser Workshop listet keine neuen ECMAScript-Features in isolierten
Demos auf, sondern konzentriert sich darauf, was die neue
Funktionalität mit (ehemaligen) Best Practices macht und warum einst
etablierte Sprachfeatures wie Funktionsdeklarationen und For-Schleifen
in modernem JavaScript eigentlich nichts mehr zu suchen haben.
Widerspruch und Diskussionen sind ausdrücklich willkommen!
Node.js wurde für das Web entwickelt, aus diesem Grund ist auch der häufigste Einsatzzweck der Plattform die Entwicklung von Webapplikationen. In diesem Workshop werden wir gemeinsam Schritt für Schritt eine Webapplikation erzeugen, an der sich Benutzer anmelden können und Daten verwalten können. Zu diesem Zweck binden wir eine Datenbank an und sehen uns die asynchrone Verarbeitung von Informationen an. Auf häufige Problemstellungen wie beispielsweise das Logging oder den Umgang mit HTML-Templates wird ebenfalls eingegangen. Als Basis für die Beispielapplikation kommt das Web Application-Framework Express mit einer Reihe von Middleware-Komponenten zum Einsatz.
Seit dem initialen Release von Ionic Anfang 2015 hat sich im Bereich der Web-Technologien viel geändert. Neben Progressive Web Apps und native APIs im Browser wurde auch der Standard von Javascript, ECMAScript selbst in großen Schritten weiterentwickelt. Heute haben wir mit Typescript einen tollen Superset von Javascript und schreiben damit moderne und zeitgemäße Angular Anwendungen. Ionic geht mit Ionic 4 einen Schritt weiter und portiert das eigene Framework komplett auf den Standard der Web Components um unabhängiger von Frameworks zu werden. Damit wird es möglich sein, mobile Apps mit Ionic unabhängig von einem spezifischen Framework zu entwickeln. Der Workshop vermittelt die Grundlagen, den Einstieg und ein tiefergehendes Wissen im Umgang mit Ionic und Angular für mobile Apps. Er gibt aber gleichzeitig auch einen Ausblick auf die kommende Version und wie sich das Tool rund um mobile Apps auf Basis von Web Components ändern wird.
Immer wieder wird das Testing im Frontend auf die lange Bank geschoben. Dabei ist es für eine moderne Business-Applikation auch im Frontend unausweichlich vernünftige Tests zu schreiben. Bei der Entwicklung von Angular gehörte die Testbarkeit von Anfang an zum Konzept. In diesem Workshop zeigt Fabian Gosebrink wie man seine Angular Applikationen auf Herz und Nieren testen kann. Es wird ein Blick auf die Tools und auf die verschiedenen Möglichkeiten von Testing geworfen, damit am Ende kein Fall mehr ungetestet bleibt.
Das neue CSS Grid-Layout ermöglicht flexible Layouts, wie sie vorher nicht möglich waren – aber es erfordert auch ein Umdenken bei der Herangehensweise und geschicktes Jonglieren mit den vielen neuen Eigenschaften. Im Workshop lernen Sie fortgeschrittene Techniken kennen und erproben das neue Grid-Layout-Modul an Praxisbeispielen.
The normal, traditional software development flow takes a lot of time: Planning, building, feature freeze to find some bugs, deploy it and begin to fix a lot more bugs, right after you will see, that the product didn't fit and you have to do all the things again.
In this session, Niek Kruse will show how he is doing lean development and which tools are the right ones for this kind of product development.