I never thought it was so easy to create an application. Start using nx and you will be able to create an application in a few hours. This workshop will guide you through the setup and will build a basic application, with Authentication, CRUD operation and create a deployable product of it. We will set up tools to help your development process, like Swagger. If there is some time left we will easily integrate a WebSocket and maybe some microservices.
According to statistics from NPM, React has a market share of 60 percent. That’s reason enough to take a look at the frontend library created by Facebook. In this workshop, we dive into the world of React and develop a fully-fledged application. From using JSX to building and architecting component hierarchies, to the Hooks API, you’ll learn all the important facets of the popular library. You will also get an insight into the React universe, which includes application navigation, testing, and advanced methods for state management.
After this workshop you will have a basic understanding of the features and patterns of React and you are able to work on applications written in React on your own.
There is a stereotype of programmers as being antisocial and difficult, and unfortunately many of us take on this attitude as if it comes with the job – but it doesn’t have to be this way! I know it from experience, because I’ve been an angry, judgmental know-it-all, and I’m ready to tell you how I completely changed my attitude and refactored my life.
In this talk I’ll explain how anger and fear are the root causes of our aggressive behavior, how these feelings manifest as judgmental comments online, bullying in the workplace and ultimately keep the tech community toxic and stunted. I’ll show you how embracing compassion, respect, and empathy will make you a better programmer and a happier person.
Design Systems is something every UX team is working on, planning to work on, or at least is talking about. But what does it mean for a developer to implement a new design system for the company products? Is it also better for the developer? In this talk, I will share my experience in implementing a design system. How do you share design tokens in the organization? How do you create a component library and separate the visual layer from business logic? How do you keep sync between design and code? I will try to answer these questions, using code examples and relevant tools.
Are your apps fast and stable when the network isn’t? Let’s take a deep dive into progressive web apps and the offline first approach!
I'll show you some tricks on how to handle offline state and manage your app and its resources in various network conditions. We'll build fast and reliable apps using Angular and PWA features. During my presentation, I will show how to build PWA using Angular with Offline First approach. I'll introduce into fundamentals of this strategy and show how to manage app’s resources in various network conditions, how to use PouchDB and CouchDB for data sync and make an app fast and reliable.
Data storage and data access are subjects of this talk. CQRS is quite a simple pattern to split responsibilities when working with data, but incredibly complicated papers have been written about it! Event Sourcing can be viewed as a natural extension of CQRS, though in reality a decision for or against it is independent and comes with its own consequences. Oliver uses practical examples in this talk to demonstrate implementation and combination of both patterns.
Progressive Web Applications (PWAs) are the state of art of modern web solutions. In this session we will analyze PWAs from different perspectives and describe which tools we can use to develop them with ease. By choosing the proper caching strategies it is possible to drastically improve the performance of our web site, providing data even without a valid network connection. We will then proceed seeing how to overcome the limitations of the Cache API in order to create a truly seamless experience. In addition, push notifications will be presented as a powerful mechanism to retain and re-engage our users.
Security is hard. Using the same password for everything is easy.
Over the years, we've made it easier for users to do the right thing, from email-based verification to one-time passwords via email and security tokens. But nearly all these solutions require you to have your mobile phone, or security device with you. And if you're overseas, you might have additional problems.
Let's look at mechanisms for biometric authentication with web applications. There are a few out here, and this talk will help you understand the options and implementation, together with a live demo.
Biometric security? Because you rarely leave your face and voice at home!
Where do you store your credentials and secrets? In .env files or in environment variables, or even worse, in config files? Are your primary AWS keys shared amongst developers? Do you still have SSH keys from former employees on your servers?
If your answer is "yes" to one or more of these questions you probably haven't heard the term "secrets management". In this talk, we will look into managing secrets in development and operations and expose the problems related to them. I will give you an overview of the current state of techniques to mitigate these problems and we'll take a brief look at how an open source tool like Hashicorp Vault can provide a solution to managing secrets in the years to come.
No setup, no frameworks, no builds, and no transpilations. With feature-rich and standard compliant browsers, the "bare metal" strategy becomes not only viable but also extremely productive. In this session, I will create a web app "from scratch" with web standards like Web Components, ES6+, plain old CSS, and (almost) without any use of external dependencies. Challenging questions before, during and after the session are very welcome.
Purchasing experience on the mobile web is broken! Every time you want to do payment on a mobile device you get stuck with the payment form, tapping n clicks and filling endless forms.
Imagine if you can make only one click and that ’s it - your payment is done. Yes, that is possible and you need only a few lines of code. In this talk, I will give you an introduction to new Web Payment API works and how you can improve your users’ experience with it.
Do you TDD or BDD? Why not both? Come learn the “Double Loop” workflow and discover how you can use both Behavior Driven Development and Test Driven Development to write well designed, tested and documented code. Double Loop works for lone engineers, small teams or entire product departments. I’ll cover the steps you’ll take in the workflow as each role as well as tools for executing Double Loop.
So you’ve finally secured your APIs. It uses JWT because everyone else does. But is it secure? JWTs are the new great thing that everyone is talking about, but you need to use them correctly. During this talk, we will see how we can use various attacks to hack into OAuth systems that use JWTs as a token mechanism. From token validation to brute forcing HS256, by seeing the attackers’ point of view the attendees will learn how to better defend themselves and make more secure servers.
For sure, Progressive Web Apps (PWA) are one of the hottest topics on the web today. A PWA should feel like a real app, including the ability to show push notifications. In this talk, Thinktecture’s Christian Liebel (@christianliebel) will show you how to implement push messaging in your PWA or website using the Push API, including a look at helpful libraries and third-party services. As a part of Google’s Project Fugu, push notifications will get even better thanks to the advent of the Badging API and Notification Triggers.
The growth of internet usage in developing countries has been very uneven, with adoption focussing mainly in urban centres. But this is a trend that is rapidly changing in areas like South Asia and Africa. As billions of users get added to this ecosystem by 2020, many of them using technology for the first time, it brings with it a ton of new challenges. As the internet expands to accommodate a larger user base in Asia, huge gaps are created between what the consumers want and what engineers build as a digital solution.
This talk focuses on exploring how we can give the best performance for users from these areas by considering their usage patterns and behaviours, with a special focus on mobile performance
How can we build websites for illiterate people?
How can we improve the performance of our websites in spite of terrible infrastructure?
How can we come together to make the best digital experience we can for the people who have only started embracing the internet recently?
An organization with a primary digital product that lacks even basic data security practices is living in a Utopian world where people leave their safe open and never expect a burglar to walk in. With the advent of SaaS, companies are relying more on more on third-party services for CDNs, analytics, recommendations, loyalty, advertisements, email marketing, etc. But not so much effort is being put in ensuring what data is being shared with these third-parties. As an example: The URL is the most commonly tracked piece of information, the innocent choice to structure a URL based on page content can make it easier to learn a users’ browsing history, address, health information or more sensitive details. They contain sensitive information or can lead to a page that contains sensitive information. But just by adding a simple code snippet in our webpage, for analytics, fonts, etc is enough to leak sensitive data. This talk will focus on creating awareness among developers: How websites are leaking sensitive data with third-parties, how can we audit our apps, to detect such leaks and how we can prevent leaks of sensitive data to third-parties.
WordPress is still the most popular and powerful content management system with a massive, robust community behind it. In this talk, I’ll show you how to use WordPress as a headless CMS, and build a modern and performant front-end for it using Angular.
In vielen React-Applikationen hat sich der Trend etabliert, die Global-State-Managementlösung (meist Redux oder MobX) zu verwenden – als Allheilmittel für alles, was auch nur im entferntesten mit State zu tun hat. Aber während der Gedanke insbesondere angesichts unzähliger Tutorials naheliegt: irgendwie fühlt es sich meist unhandlich an. Außerdem arbeiten wir damit "an React vorbei" und machen oft genug React-interne Performanceoptimierungen kaputt.
Zum Glück gibt es für viele Anwendungsfälle inzwischen bessere Lösungen, mit denen wir den Herausforderungen einer modernen React-Applikation beikommen können – am Ende bleibt ein globaler State, den man auch guten Gewissens so nennen kann.
Der Talk stellt verschiedene Arten von State in einer modernen React-Applikation vor und analysiert, welche Spielweisen besser nicht in den globalen State gehören (natürlich auch: wohin denn dann?). Beispiele, wo der globaler State weiterhin eine wichtige Rolle spielt und wie wir ihn klüger nützen können, runden den Vortrag ab.
Unlike classic web applications, single page applications have an application state – and this must be managed to avoid inconsistencies and data binding cycles. That’s why developers of single page applications have to deal with state management. In this session, you’ll learn more about this topic and see how you can integrate state management into your Angular applications to make them maintainable long-term.
Cornelia Rauch talks about different state management principles and patterns as well as their advantages and disadvantages. Live demos will introduce different frameworks to help you manage the complexity of your application. At the end, you’ll know the principles behind state management and have all the tools you need to develop a long-term solution for your application.
When developing any SPA application you like the fact that you get apps that are fast and snappy. There are other problems though. Your app might take longer to load than usual and your search engine is struggling to crawl your app and your SEO suffers for it.
The solution to this for Vue.js is called Nuxt.js. Nuxt.js is a higher level framework on top of Vue.js that allows you to easily create Universal apps. Universal apps that are pre-rendered on the server and thereby have a much smaller bundle and has static files the search engine can crawl without a problem.
Let's explore how you build apps with Nuxt.js and what properties and methods you have at your disposal to make this an enjoyable experience.
Additionally Nuxt.js allows you to share code between server and client, sounds exciting right?
In order to start out with machine learning, you typically would need to learn Python, TensorFlow, Jupyter Notebook, etc. But what if we could run our machine learning straight in the browser? This can be done through Tensorflow.js. In this session, you will get an introduction so that you can use it in your own projects.
It's unusual to develop applications that have no identity requirements nowadays. Whether it's securing access to resources, synchronising data between devices, or providing a customised experience, any new project will soon need that login form.
While you might start out with a simple login form and a backend user directory, these soon grow into their own beasts, when requirements call for multi-factor authentication, or machine-to-machine authorisation functionality.
These requirements and associated maintenance costs are often at odds with the desire to focus on building new features that actually bring your users value, or fixing bugs that currently bring them pain.
In this talk, you will learn about OAuth, OpenID Connect, and JSON Web Tokens; how they work, and how they can simplify your projects. We'll also cover the ways in which you can run your identity management services and the pros and cons of each.
Node.js is one of the most popular frameworks for writing server side applications now, and machine learning is rapidly gaining popularity. More and more problems are being solved by using machine learning tools. The use of machine learning solutions is spreading, and it is not limited to researchers. Software developers are also starting to gain ML knowledge and skills. In this talk, I will give you an intro to machine learning in Node.js. We will go over some machine learning fundamentals, the useful libraries that you can work with when writing an ML server in Node.js, and architecture tips about how you should design your server according to the nature of machine learning systems combined with Node.js capabilities. After this session, you will have a good basis to get into the area of Machine Learning and how to write and design your server.
You've got strange characters like "�" or "Ã¶" displayed in your application? Yes, handling non-English characters in application code, files and databases can be a challenge, to say the least. Whether that’s German umlauts, Cyrillic letters, Asian glyphs or emojis: It's always a mess in an international application. In this session, you will see why that is and how handling characters evolved in computing. You will also see how handling characters in applications and databases can be done less painfully. And don't worry when EBCDIC, BOM or ISO-8859-7 are Greek to you and your Unicode is a bit rusty: We’ll have a look at them, too.
Node.js has become more and more, and lots of enterprise and B2C applications implement their servers with Node.js. It is becoming important to know what the possible vulnerabilities in your Node.js server are. In this talk, I will give some security tips regarding 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 more securecode in Node.js.
Join us to learn the most villainous code smells you will find in most Angular applications, along with an elegant solution for each one of them. In this talk, we will share some of the pitfalls Angular developers easily fall into, why they emerge, and how you can prevent them from happening again. This talk touches base on: • Component Logic • Architecture • Conventions and Standards • Module Separation • RxJS The content of this talk also takes into account a survey conducted with Angular experts worldwide, who shared the code smells they considered risky. Join us and find out the results!
Behind every great tool is a great library. Schematics is the unknown hero behind Angular CLI and also some upgrade tools. Ever wondered how scaffolding a component really happens or how you could insert some code in just the right place in the code file? Wonder no more. This session is about showing what Schematics can do and how you can build your own Schematics that will scaffold or change code in existing files or something else. It does everything to your bidding.
Angular offers many possibilities when it comes to the separation and architecture of your application. There is often code that you not only want to reuse within your application but also make available to other applications in your organization or via package managers such as npm over the Internet. This is where Angular's libraries come in. In this talk, Fabian Gosebrink will explain how to create Angular Libraries, what the Angular Package format is good for, and how we can move code from an existing application to an Angular library in order to reuse the code across multiple applications. This makes the maintainability and architecture of Angular applications child's play.
The world of virtual reality allows us to build new 3D interactive spaces that we can fill with anything we want - like the art of the great Renaissance masters. More into Cubism? With a quick click - now the gallery is full of a completely different genre. With new AR features, we can actually build the gallery in our own space - and just as easily swap out the art - all in our browser! In this talk, we’ll walk through the steps to build a virtual ARt gallery, with web technology available today, but also take a peek at the new WebXR technology that is coming to our browsers soon!
Participating in conferences and learning from experts is great, but as a community, we are missing a lot when it’s the same faces every year, everywhere. We have to do our best to include everyone from a diverse background as speakers and learn from their experiences. This talk will prove you have what it takes to become a speaker yourself and will give you practical advice to start your career as a speaker. We will talk about overcoming impostor syndrome and eliminating self-doubt like “I don’t know what to talk about” and “I can’t talk in front of people”.This is a fun, inspiring talk, and by the end of it, you will discover the super-hero speaker in you, bursting already with ideas for your first talk.
Testing JSX components can be quite tricky, especially if they include GraphQL queries. What if I told you it is possible to both test your GraphQL queries and mutations, while also testing the way they interact with your JSX components? This talk will show how you can push your testing principles to the next level by writing unit tests and integration tests that will use the type system of GraphQL. Not only can you drastically increase your test coverage after this talk, you'll know for sure that your data is flowing correctly through your application.
What do you do when you've just released your Node application but it’s not performing as expected? No need to worry. Node provides you with a hand full 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 to help you write applications that perform.
Ivy, Angular’s eagerly awaited ground-braking compiler, is primarily associated with smaller bundles and therefore better performance. However, Ivy has much more to offer, and many smart concepts provide the foundation for some much-anticipated future features.
See how Ivy improves your application beginning with Angular 9 and find out how its potential can impact your future architecture. We use a case study to explore a possible future without NgModules, the use of dynamic components or higher-order components, zone-less change detection, and new possibilities for lazy loading and plug-in systems.
In the end, you understand Ivy's potential and how to start preparing for it today.
Optimizing image content for every browser and device size can be difficult. Random cropping of images can lead to losing context and features (sometimes as extreme as lopping off the heads of your subjects). In this talk I will present how AI can be used to identify the important content in each image, allowing for smart cropping of images. This allows us to optimize images further than previously possible, shrinking page size and speeding up page load times.
For a microservices architecture to be succesful it is crucial to have the right boundaries between the microservices. But where are the right boundaries? We would like to present a tool that helps us answer this question.
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 immediately see if we understand their story. After very few stories, we understand the language of our users and find different areas of the domain. Each of these areas (called a subdomain) is a good candicate to become a microservice in our architecture.
In this talk we show how to find subdomains and which heuristics can help us.
Structural directives are a powerful feature in Angular that allows us to dynamically change a component view structure. As with directives, a structural directive is used as an attribute on an element in the component template and the logic is implemented in the directive’s controller class. An asterisk denotes a structural directive and is the fairy dust for the magic that happens behind the scenes. Angular has a DSL (microsyntax) for the string assigned to a structural directive that allows us to interact with the directive in a natural and expressive language. In this talk, we will look at "<ng-template>", "TemplateRef", view containers, and "ViewContainterRef", the building blocks of structural directives. We will also look at the microsyntax and have a go at creating custom structural directives.
Nest is a powerful web framework for Node.js, which allows you to easily build efficient and scalable applications. Nest is built with well-known libraries – Express and socket.IO. Let’s create a fully working app together!
These days it is an obvious choice to set up applications using reusable components. But how do you make sure that your component library does not become a giant mess when your application grows and your team scales? How do you make sure that the so carefully constructed design is maintained over time? And most importantly, how do make sure that everyone is onboard and uses it properly? Luckily, this is where design systems save the day! In this hands-on session I will explain how to effectively set up a design system in order to design and (re-)build applications faster, and how design systems should be used in order to allow scaling and flexibility in your application and team. You will learn how concepts like integration testing, component composition, design tokens and atomic design can help you in this process. On top of that I will show you how to use your design system as a NPM package in your application, and why a common language within a team is the foundation of any design system.
In this talk, we will discuss why Serverless has become a more and more common approach as Cloud becomes the default place to host your apps. Serverless not only lets you focus more on the code and deliver more business value, but it promotes a new way to think about your apps and how they communicate, namely with events or messages. To add to that, Serverless represents a very cost-effective option since you are only billed for the time they carry out work. That makes them ideal for seldom ran tasks and a great candidate for startups trying to keep costs low.
Did I mention that they are fully managed and you don't need to worry about virtual machines, web servers, or another hosting? Just code and create value for your business.
Monorepos allow to subdivide huge enterprise applications into tiny and maintainable libraries. However, this is only one side of the coin: Prior to this, we need to find criteria for slicing our application into those tiny parts. Also, we must establish rules for the communication between them.
To provide a solution, this session looks into strategic Domain-driven Design. Using an Angular based case study, we investigate the idea of the ubiquitous language, the bounded context, and context mapping. After this, you learn how to implement those ideas for Angular using a monorepo. Along the way, we also discuss approaches for reducing coupling between the specific parts of our monorepo.
At the end you have both, a technical solution as well as an appropriate methodology to build sustainable Angular solutions.
It’s difficult to work on a project nowadays that does not support Docker. Surely, it is market standard and when we have more and more Dockerfiles it becomes hard to manage all dependencies and all possible environment setting.
In this talk I’ll present how it is possible to use only one Dockerfile per project and continue creating safe, small and multi-environment images. Also, I’ll introduce the multi-stage technique and how we can use it together with docker-compose to maximize our development experience. Finally, we’ll end up with a better build time, clean images that contain just what’s really needed and control almost everything.
I separated this talk in 3 parts:
Part 1: how I use ephemeral docker in my machine to execute commands
Part 2: how I use docker to develop software in a multi-environment space
Part 3: how I build, test and deploy images using CI/CD
A Progressive Web App with React isn't finished just by integrating a Service Worker. That task is completed automatically for you on the initialization of the project. However, the actual work begins just after this point. The PWA can be installed on a target device in just a few steps. With the right architecture, it is finally possible to make the application work completely offline. This requires the data that the components of your application need to be stored locally and kept in sync with the server. In addition to these aspects, the browser provides numerous other interfaces that bring the application closer to native apps. In this presentation, we will take a look at the steps that make an ordinary browser application a fully-fledged PWA.
In a snap, Angular Elements exposes Angular components as framework-independent web components. But it is only later, that the really interesting questions arise:What options are there for bundling Angular Elements and how does one deal with dependencies? Which polyfills do we need and when, and how can we lazy load Angular Elements on demand? How can Ivy help us and where are its limitations? What should be considered when using zone.js to change tracking and how to use content projection?
This session answers these questions in order to help you benefit from Angular Elements in your projects.
Software development is model building. We rebuild a part of the world as a program and improve it by doing so. A traditional approach is to reproduce the domain as accurate in every detail as possible – building the company-wide canonical domain model. But is this the actual goal of models? If we look close enough, we will see that a model is the exact oposite—a model is actually an abstraction of the reality in which only the essential parts are transferred. The inessential is left out of the model. What parts of the reality are essential or inessential is defined by the context.
A simple model is easier to understand than a complicated one. Therefore, it is a good idea to break a complex reality (i.e. domain) into multiple simple models. Exactly this effect is what the strategic design of DDD takes advantage of. Here instead of one complex company-wide model we build several small models that are easy to understand.
In this talk we look into bounded context and the other tools that are available to to divide the domain into clearly separated models.
As front-end developers, we strive to build fast and fluid web apps. But how can you find performance problems or memory leaks? How do you profile a web app or an Angular oriented app? In this session, you will get to know how the browser works. Then, you will learn how to use that information to profile web apps and Angular oriented apps.
Angular developers are lucky to have several options for handling service workers in their progressive web applications. The first option is 100% native to Angular and created by the Angular team: Angular Service Worker (ngsw). The second alternative is a framework-agnostic library called Workbox. Both approaches are robust, convenient, and unique! In this session, we’ll go through the pros and cons of implementing a PWA with Angular Service Worker and Workbox, as well as the main features of each choice and the necessary application lifecycle management requirements. When we’re through, every attendee will be able to determine which approach is easier to start with, which library is simpler to use, and which resulting PWA is more convenient to maintain.
In this interactive workshop, you will develop a critical understanding for planning and implementing large enterprise applications with Angular. You will explore and work with approaches to structure huge applications like npm packages, Nx and the monorepo approach and micro apps. After this, you will deal with component design and reusable web components. For this, you will use several proven concepts and Angular Elements. In addition, this workshop will enable you to develop a well-articulated understanding for advanced authentication and authorization solutions that allows for single sign-on and can be used to integrate with existing identity providers like Active Directory.
The Web platform is amazing. It is becoming more and more performant and feature-rich while keeping its universal nature. We call the web apps we build using the latest browser APIs "progressive", allowing us to achieve a totally new level of user experience. In this workshop, we’ll focus on what Angular, as a framework, contributes to the PWA concept. During the full day of training, you will learn about: PWA concept pillars, Service Worker API fundamentals, current platform’s PWA support (and workarounds when needed), and Workbox library – the industry standard in the automation of PWA tasks. I will share lots of practical tips & tricks, both technical and UX, review real-life PWA examples, explain how to avoid common pitfalls, and how to deal with edge cases. On the practical side, I will teach you how to build a Progressive Web Application. We start from the “regular” application, and in the form of discrete, documented steps, you will learn how to add PWA features one-by-one using Workbox. As a result, everyone will have a fully-featured, installable PWA ready to delight its users with its offline experience, optimized networking, and push notifications.