The term Progressive Web App (PWA) refers to a group of technologies, such as service workers and push notifications, that can bring native-like performance and user experience to web apps. PWAs are interesting because in some ways they represent a coming of age for the web. The Angular Service Worker makes it easy to build snappy web apps that load instantly on any device, even without an internet connection. Take advantage of the searchability, shareability, and no-install-required-ability of the web without compromise. During this 100 % hands-on session we’ll have a look on recent tools and guides from the Angular team to help us build Progressive Web Apps. We’ll have a look at Angular CLI and plugins/libraries for App Shell, Service Worker, and Application Manifest supporting us in fast and easy creation of installable, offline-capable, mobile-network-friendly apps.
Course overview: Introduction to PWA and Workshop Setup; introduction to Angular Service Worker; create an installable mobile web app with Angular CLI; make the App Installable with Web App Manifest; App Shell Architecture; add an app shell component to the App; deep dive into Service Workers; add basic offline capabilities with Service Worker; adding Splash Screen; sending Push Notifications; questions and answers.
Angular, Google’s popular application framework for modern web-based solutions, brings component orientation, static type checking, and a breath-taking performance. By leveraging the single-page application architecture as well as modern web standards, it makes the creation of ambitious and enterprise-scale applications very easy. This workshop shows the possibilities of Angular and introduces it with an example application. It shows all its building blocks and discusses architectural decisions one has to deal with when building maintainable enterprise applications.
You’ve heard about it. Maybe you even started looking at it, but you abandoned when you saw that you needed to relearn all you thought you know. When starting to do your first steps in React, the learning curve can seem really steep. In this workshop, the attendees will be guided through the fundamental concepts behind React and will learn how to build a full application using that technology. Covering packaging with webpack, routing, form manipulation and authentication, this workshop will get the attendees up to speed with the latest trendy framework that React is.
When you are planning to implement a single-page application there is no way around Vue. At least you should consider using it in favor of the big established frameworks such as Angular or React. Vue is a very lightweight but yet capable framework you can use to solve even complex problems. In this workshop we are going to develop an application based on Vue, starting with the initialisation of the project with the Vue CLI to managing the application state with Vuex and navigating through the application with the router to debugging the application with the DevTools.
There is plenty of time to try it out by yourself and work on various exercises to get used to Vue.
At the end of this day, you'll know how and when to use Vue and the ecosystem that was built around the library.
Angular apps are getting more performant with each new version of the framework - thanks to the huge number of internal optimizations. But the main responsibility for the eventual app performance is on us developers. Let's go through the main points on how we could help the framework to build and the browser to perform our app better.
WebAssembly (WASM) is challenging JavaScript's monopoly in the browser. Many higher-level languages are currently evaluating whether WASM is a way for them to conquer the web client. .NET is spearheading this movement. In 2017, we saw the first .NET prototypes running on WASM. Based on that, Blazor, the new .NET- and WASM-based Single-Page-App (SPA) framework, has appeared. The .NET community is thrilled but Blazor could be interesting for developers new to .NET, too. Rainer Stropek engaged early in the Blazor open source project. Join him in this fast-paced, demo-heavy session and see what's behind this new contender in the world of browser development.
Mobile First was yesterday, Offline First is the new motto. With this credo, Progressive Web Apps (PWA) not only come very close to native smartphone applications, they also increase the user experience when there is no or very poor internet connection and they no longer have to be delivered via App Stores.
For years, users were taught to go to the app store, download and install the native app. How can we get them to move on and get engaged with the new user experience PWAs can deliver? This talk focuses on the user experience and acceptance of PWAs and gives guidance on how developers can get users to understand that new technology.
For every JavaScript and Angular developer there is an invisible but well-known border – the Same Origin Policy. A well known issue that is also present in modern frameworks like Angular.
To overcome this border Angular gives us something called a “proxy-config” so you can re-route calls for your middleware. With this concept you can use a complete development infrastructure with your frontend, instead of mocking everything.
But what happens after the development? JSONP or CORS? Why not adapt what we have in our development stage? Use an express server as proxy config and get behind the border.
Every month, we hear about a new data breach and billions of user passwords are being shared as we speak. How can we stop this? There is a simple solution: Let’s stop using passwords! From email links to biometrics, more and more technologies are available to help developers handle different types of credentials. During this presentation, the attendees will learn about some of the alternatives and how to implement them in the context of an OAuth flow.
Azure Functions, Microsoft’s serverless offering, allows developers to focus on their code and not be concerned about infrastructure or DevOps. And thanks to a slew of built-in integrations, it's also easy to have your functions get and send data to various services or even be triggered by events in those services. One such integration is with Azure Cosmos DB, the multi-model, globally distributed NoSQL data service. Cosmos DB exposes data as documents that you can access via SQL, JavaScript MongoDB, or Cassandra as well as graph and key-value store. In this session, you'll see how easily you can build an API from a set of Azure Functions that interact with Cosmos DB documents and some other services. We’ll go all cross-platform with Visual Studio Code and Node.js.
Modules are an essential part of any non-trivial JavaScript application which requires more than a single code file. And while modules have been a standard part of JavaScript Since ES2015, it has taken browsers a while to support them. During this time, developers have turned to tools such as webpack, Rollup, and Browserify. These solutions have completely changed the way we write and deploy our web applications. But now that browsers are starting to support ES2015 modules, it's a good time to examine if these solutions are still relevant. In this session I will show why built-in browser support for ES2015 modules is a game changer, and how, when combined with additional new JavaScript features and network protocols, it can revolutionize the way we package and deploy web applications. I will explain in detail the benefits and limitations of browser support for ES2015 modules and highlight their advantages over existing JavaScript packaging solutions.
Big monolithic applications have had their days. What’s needed instead are smaller maintainable applications, aka micro apps, that can be developed and deployed independently by different teams. In this session, you'll learn how to implement micro apps in the world of Angular. By using several examples, we evaluate different approaches including web components, packages, hyperlinks or even iframes. As an alternative, we will also talk about the majestic monolith and see how monorepos can help here. At the end you will know your options and which approach works where.
Node.js has become a very popular platform for writing servers, in the web and the enterprise field. As it becomes present in more production systems, many developers encounter performance problems and need to understand how to optimise their server-side performance.
What are the layers that we need to optimise in our engine? On which layers we should focus?
In this talk, I will give you tools to know where you should start looking for problems in your Node.js server. I will go through general performance tips, demo some profiling in Node.js, and talk about Node.js and JavaScript code optimisations that you should do. By the end of this session, you will have the tools to know where to start investigating your performance problems, and how to attack them.
Async programming is a must for scalable server apps and snappy web apps running in the browser. JavaScript has long been known for its “callback hell” when it comes to async. However, times have changed. JavaScript has learned new tricks and with TypeScript you can add type safety. In this session, Rainer Stropek speaks about server- and client-side async programming using TypeScript. He starts with type-safe promises. Based on that, he demonstrates the use of async/await without loosing backwards compatibility to old ECMAScript versions. Finally, Rainer closes with samples for using type-safe RxJS with TypeScript and Angular.
A few years ago, Google and Microsoft partnered up to work together on Angular and TypeScript. This partnership has helped TypeScript support two important features: decorators and reflect-metadata. Decorators are one of the cornerstones of our Angular code and, along with the reflect-metadata API, play a key role in the inner workings of Angular. These two features are based on active TC39 proposals and their importance goes beyond Angular. Once accepted into the Javascript standard, they can open the door for developers to implement exciting new features that were not possible to implement before. In this talk, we'll understand how decorators work, how to write our own custom decorators and take advantage of the reflect-metedata API to make your Angular code cleaner.
In Serious Games werden Ziele, Regeln, Herausforderungen und Interaktionen genutzt, um die Motivation für Lernaktivitäten zu steigern. Lernen ist fester Bestandteil von Spielen und basiert auf Exploration und Erfahrung. Diese Motivation kann im Usability Engineering dazu genutzt werden, um langfristig die Benutzerfreundlichkeit von Applikationen zu steigern.
Ich werde in meinem Vortrag die Theorie der Adaptivität aus dem Bereich der Serious Games vorstellen, welche verwendet werden kann um die Motivation bei der Nutzung mobiler Applikationen zu erhöhen. Diese Theorie haben wir in verschiedenen mobilen Anwendungen bereits erfolgreich eingesetzt.
Basierend auf diesen Anwendungsfällen zeigt sich, dass die Verwendung dieser Theorie den Aufwand für die Generierung von Anwendungen nächster Generation reduziert und langfristig die Benutzerfreundlichkeit steigert.
Ich werde darüber hinaus ein wissenschaftlich untersuchtes und industriell erprobtes Framework vorstellen, das in langjähriger Forschungsaktivität entstanden ist. Dieses Framework besteht aus einem Prozess und einer konzeptuellen Architektur, welche die Theorie der Adaptivität unterstützt.
In Franz Kafka's famous German novel, Gregor Samsa awoke to find himself transformed into a gigantic insect-like creature. Julie Lerman was more fortunate. After decades of designing software based on the needs of the data to be stored, she woke up to the beauty of Domain-driven Design. On the IJS keynote stage, she will share some of big ideas from DDD about client collaboration, strategic design and tactical patterns to help you find a smoother path for solving complex software problems.
Web development is exciting nowadays! We get new innovative technologies on a regular basis. While this is awesome it can also be overwhelming - especially when you have to maintain a product for the long term.
Web Components and Micro Apps provide a remedy for this dilemma. They allow for decomposing a big solution into small self-contained parts that can be maintained by different teams using the best technology for the requirements in question. Come to this keynote and find out how this idea helps with writing applications that can evolve over a decade and more.
You have just released your Node.js application and now it’s not performing as expected? No need to worry. Node provides you with a handful of tools to measure every performance aspect such as memory, computing time, and so on. In this talk I’ll show you how to deal with the code in your application when it comes to performance problems and how to use the tools you’ve got. We will also cover some best practices that help you to write applications that perform.
We all love programming. But programming is not an end in itself. And how do we actually know, what we should program? For that we need a tool to learn about the domain.
Domain Storytelling (www.domainstorytelling.org) means that we let our users tell us stories about their work. While listening, we record the stories using a pictographic language. The experts can see immediately if we understand their story. After very few stories, we understand the language of our users and can build a domain model from them and implement them in PHP or JavaScript.
Vue.js is the new up and coming framework that has reached the same popularity on Github as React. Vue enables you to start easily with just script tags and upgrade to ES6 modules and Vue CLI when ready. It’s component centric and really lightweight. This talk will cover all the fundamentals of Vue and Vuex as the centralised state management made especially for Vue.js .
Node.js has become more and more, and lots of enterprise and B2C application implement their server with Node.js. It is becoming importent to know what are the possible vulnerabilities in your Node.js server. In this talk, I will give some security tips in Node.js. I will show you what code can be vulnerable using built in Node.js functionality, and I will talk about the alternatives. I will also present several packages that can help you find vulnerabilities in your code and in your dependencies much more quickly , and pass your penetration testing much faster. As a developer, after this talk you will be able to write a more secure code in Node.js.
Techniques to organize JavaScript code as modules started nearly from the beginning of the JS history and went from separate files, AMD/CommonJS formats to bundlers/transpilers. Today, all the modern browsers support native JavaScript modules and they are halfway to Node.js. That means it’s a perfect time to start using them. This requires extending and optimizing the techniques we are bundling the JavaScript (aka ECMAScript, or ES) modules with today, changing the workflow and the way the code is executed. Also, it makes the new tools to develop and debug the ES modules. Today it's possible to load script synchronously, on demand and publish them to production, making sure all the code is still fully functional.
Expect to hear about the main differences of the native modules (comparing to the bundlers/transpilers approach), how they work, and their features; how the browser/Node.js engines load and execute them and why it took so long for ES modules to be implemented in the JS engines; how to use native JS modules in production today; the benefits, performance overview, pros/cons, and conclusions; an overview of future perspectives and a number of examples/demos.
In this talk, we are going to look at what web components are, why we need them and how we can construct them according to best practices. In order to do this we will see several examples, and each example will be tackled with its own approach. Through these examples we will be able to see the pros and cons of different ways of structuring web components.
Our journey will take us through different design patterns for developing web components such as MVC, MVP and MVVP. On this road we will discuss services and singletons, encapsulation, inheritance vs. composition and much more. Even though these concepts can sometimes be hard to grasp or even boring, we will explain them in a simple and fun way.
We all know that you never write the perfect code the first time, there are always iterations. So, your goals should be: write code that is easy to understand, easy to refactor and easy to test! Also, it should often be easy to reuse but only when necessary (not all components need to be reusable but we will see more about that in our talk). We want to help you achieve this.
The main use-case for using dynamic components is when we can decide only in run-time which component is loaded. They’re also the only solution when we want to embed Angular components in non-Angular ones. In many cases, replacing in-template components with dynamic ones is beneficial to performance and code quality. In this talk we’ll learn how to create and use dynamic components, and discuss several types of usages.
To build software, we use great technologies, programming languages, and tools. And we have a lot of fun programming in this technical environment. But we must not forget that the most important point for a successful project is not the technology but the *domain*! To understand the domain we need a common language with the domain experts. Also, if we don't reflect the domain model in the software and its architecture, it will not help our users doing their work.
It is easy for developers to fall into the trap of focussing on technology instead of the domain. To prevent you from this, I will show in this talk how Domain-Driven Design (DDD) can help you to gather the domain knowledge and transform it into a Ubiquitous Language. To do this we use techniques like Interviews, Domain Storytelling, and Event Storming.
In practice it is not easy to decide how to divide up the domain and develop microservices for it. Here the DDD pattern Bounded Context can help us. It shows us where vertical cuts can be made.
Using these tools together with the Building Blocks of DDD enables us to build an architecture that represents the domain and makes our users happy.
It's easy to just build an app with no real architecture in mind. For the most part, Angular as a framework ensures that you don't drive off the road. However, as your application grows it becomes more and more apparent that you need to organise your code in a better way. The application state grows and suddenly it's everywhere and you realise you don't know anything about anything. This is where NGRX comes in to bring order to the chaos. NGRX ensure that your data flows in one direction and that you always know who did what to your state. Are you curious on what NGRX is and how to get started with its paradigms, libraries and tools? Then this session is for you.
Many developers are stuck in the world of old-school IPv4, which is an easy and comfortable place to be. But IPv4 is not much longer for this world - major network allocations have already run dry, and broadband and 4G mobile networks are steadily expanding the availablility of native IPv6 connectivity. This talk helps you learn what IPv6 is, what you need to do to get your services working on IPv6 (it's not as scary as you might think!) and related changes you need to make in your PHP apps and databases to accomodate IPv6.
Within the next ten years, blockchain technologies will be a given in our software projects in the same way databases are today. In this session, Ingo Rammer presents the technical foundations of current blockchain technologies - without any hype or fancy crypto currencies which border more on tulip mania than on serious software engineering. You will learn about the basic elements, types and operations modes of today's blockchains; about the fundamental differences between public and private/permissioned networks. And you'll face the reality of smart contracts: that they are neither smart nor contracts, but simply rules to validate transactions in a reliable, distributed way - and a powerful base for projects spanning multiple organizations. After this session, you'll have a solid basic understanding to evaluate whether your use cases can be supported by blockchain-based technologies.
A talk about voice control advises the speaker to demonstrate the power of his voice – and that’s what this talk is going to do. But why deal with voice control anyway? Is it just because of the hype around digital assistants such as Alexa, Cortana, or Siri? I will argue that there is a general technological trend towards a unified interface. With the Internet of Things and household robots, we enter a world of ubiquitous computing that is not well suited for visual interfaces. This also applies for robots that will be directed mostly through voice commands. For me, the question of an acoustic interface arose in a blended learning context at Carnegie Mellon University, where we realized that human-computer interaction is often contaminated by over-complex visual interfaces. Using a live demo, I will demonstrate how to get rid of these obstacles. The basic insight is: Human language is the most complex API imaginable. Rethinking programming and interface design is a challenge that opens new and unforeseen opportunities.
Event sourcing is attracting more and more attention. This is partly due to the growing interest in domain-driven design (DDD) and CQRS, to which event sourcing fits conceptually well. But like everything else, it is not a panacea: There are scenarios for which event sourcing is excellently suited, and others where it is not appropriate. Golo Roden examines the scenarios involved and discusses the advantages and disadvantages, identifies risks and dangers, but also opportunities and possibilities. If you are not sure if event sourcing is the right approach for your application, this session is for you!
ReasonML is a functional programming language that has gained a lot of popularity and excitement among the React community in the recent year. In this talk, we’ll have a brief introduction to the language, how it has evolved, and the toolchain behind it; we’ll introduce the exciting features ReasonML offers; we’ll learn how to leverage them to build React components in a safer and simpler way using ReasonReact; and we’ll demonstrate some real code examples to showcase methods that can help you start using it - whether you’re starting a new project or considering it for an existing one.
In this talk you'll get an overview of Reactive Extensions and see its usage in a live-coding session.
First you will get an introduction into Rx and its history. After covering the basic concepts and terminologies, we will get a better understanding of observables and learn how to use marble diagrams for documentation.
In the live-coding session I create a morse code generator to demonstrate real-time stream processing in a playful way. You will get basic knowledge in morsing and a lot more over RX.
I will show you: how to create observables, common operators to transform streams, different ways to combine streams, subscription handling, error handling, exposing observables, andhow to use subjects to control streams.
After the session you'll have enough knowledge to start using Rx in any language, not only in JavaScript.
Web development changed dramatically during the last years. With the enormous amount of JavaScript libraries and the new HTML5 standard, it is much easier to create web apps today. When building a web app, you will probably want to reuse some of the web components you built. But how can you do that with the current state of HTML? One of the new and emerging web standards is Web Components. The Web Components standard enables you to create reusable web components that include HTML, CSS and JavaScript. On the other hand, crafting raw components can be cumbersome. This is where Stencil comes into place. In this session you will become familiar with Stencil, a compiler that generates standard-compliant Web Components.
The frontend community shifted from simple websites with jQuery to complex Single Page Applications with Angular, React and so on. With this community getting bigger and "older" there's another kind of problems that we need to solve. How to manage Legacy frontend codebases. But when we can call a frontend codebase “legacy” and how we can manage it in a safe way? During this talk we are going to see how we applied the StranglerApplication pattern to make an AngularJS 1.2 Application in a shiny new codebase that our team really love.
How should I structure my angular app to stay scalable? I want to show you some nice tricks and explain how to split your app into several modules and components. So you don't have to be scared, it's just Angular.
Developers are known to have an inner drive to always find better solutions to their problems, but there is a predominant dilemma going on in today’s tech market: Developers are keen to learn new programming languages and frameworks while companies aren’t willing to invest heavily into knowledge with ever decreasing half-life. This dilemma can be resolved. Spoiler: New technology is not always the answer.
Numerous software projects fail not only because of the chosen technologies, but above all because of the lack of interdisciplinary communication. Developers and domain experts speak different languages and do not understand each other. In recent years, domain-driven design (DDD) has increasingly established itself as an approach to solving the problem. But how does DDD work and how does it relate to event sourcing and CQRS? The three concepts are often mentioned together, but are in fact independent of each other – but under certain circumstances they can complement each other very well. In the session you unravel the weave together with Golo Roden. He will also show you how to develop a cloud application with JavaScript based on DDD, event sourcing and CQRS.
Using Angular and WebSockets, we will be turning physical motion into virtual motion in order to perform actions in our browser (navigation, event firing, etc). We will see the integration process step-by-step, resulting in a simple web application using WebSockets, Angular and a plain WebSocket client/server Node.js server. Once we launch this application on our phone, it will start sending device motion data from our phone to the browser, using the brand new device event APIs to capture our device’s acceleration, orientation and motion, and our Node.js server to perform the transmission. The browser will receive the motion data, and it will translate it into events and actions on the big screen. Tools that are going to be used are the WebSockets API, Angular, RxJS and a little Node.js server. Observable sequences will help us subscribe and listen to incoming messages, firing events in the process. The presentation will be interactive (users connected to the same network will be able to send data with their phone, too).
Animations in our web apps are usually an after-thought, however, with Material Design Google has taught us that meaningful motion can improve the UI, help create context, and give direction. Angular has an amazing animations module which does most of the legwork for us in creating and managing these animations. This talk will cover how easy it is to get started with making your apps feel alive.
Web applications leverage the power of computers and wi-fi connections to give their users a fast, fluent experience. Nevertheless, a huge portion of web activity is done on mobile devices, which require different capabilities, such as minimizing data usage and power consumption. Native mobile applications also leverage the devices’ features to add functionality and engage the users. Modern web technologies and rapid browsers’ advancement allow us to use most of these features from within web apps and adjust them for slow connectivity and offline usage, while keeping their advantages over native apps. Moreover, we can run these applications on desktop browsers and enjoy the same enhancements. In this talk Shmuela will present the wonderful world of possibilities with Progressive Web Applications, and how to easily achieve these enhancements in an Angular application.
Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript (preserves compatibility with pure JavaScript) and combines elements of OOP (Object-oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming). In this talk you'll learn why Nest.js could increase your productivity and how to unlock your full potential as a JavaScript/TypeScript developer.
Web development changed dramatically during the last years. Today, more than ever, when you are building your front-end you will probably want to reuse components across your application. But HTML elements are very limited, so what can we do?
In this full day workshop, we will deep dive into ways you can componentize your front-end. We will start by presenting the new HTML5 Web Components standard. Later on, we will explore delve into Stencil compiler, which can help you to build web components faster and with ease. At the end of the day we will see how to work with different data flow patterns to make components interaction.
Numerous software projects fail. This is not only due to the technologies chosen, but often above all to a lack of interdisciplinary communication. Developers and professionals speak different languages and do not understand each other. Golo Roden shows in this workshop how event-driven development not only lays the foundation for better maintainable software, but also reduces the language gap. The participants develop a software from the idea to the finished implementation. This way exactly what the customer really wanted is created.
"How do we get great designers? Great designers design, of course" (Fred Brooks). "So how are we supposed to get great architects, if they only get the chance to architect fewer than a half-dozen times in their career?" (Ted Neward).
In 2012 Ted Neward came up with a great idea how to solve these problems: Architecture Kata - starting with just a couple of requirements, small teams can try to get an architecture vision within a short time. It is a process that helps you learn how to get started and what to focus on. It points out how important it is to understand the requirements before you start coding. This workshop will show you how this can be used to train methods like event storming within your teams, or how to train developers without the risk of a real project that could fail. Architecture Katas are a way to learn from each other and give you a safe way to learn from your mistakes.