Structural directives are a really exciting feature in Angular. An asterisk followed by a directive name denotes a structural directive. In this talk we will look at the the various parts of structural directives, the <ng-template> tag provided by Angular that lets us define embedded views, the DSL or microsyntax of the binding expression of a structural directive. How to instantiate embedded views using ViewContainerRef API and using the NgTemplateOutlet directive. How to pass context to the templates.
In talking about structural directives we will look at the some of the abstractions provided by Angular: views, view queries and view containers, embedded templates, their code representation ViewRef, ViewChild, ViewContainerRef, TemplateRef and see how view containers can be used to manipulate the structure of a view.
Coming from a monolith, most companies have already made the switch to or are planning to move to a microservices architecture. In terms of frontend development, we are often still developing small monoliths. This talk will focus on an opinionated view on how Angular can be leveraged to create and promote the use of small reusable pieces of (UI) logic on top of a microservice architecture using Nx from Nrwl!
The OWASP top 10 is one of the most influential security documents of all time. A couple of years ago, these 10 security issues impacted almost every web application. However, today, the web application landscape has vastly changed, and so has security.
In this talk, we explore the relationship between the OWASP top 10 and Angular applications. We will see how some issues are barely relevant in an Angular world. We will discover that Angular addresses some issues out of the box. Moreover, we will learn which issues require the most attention in an Angular application.
Design patterns are what drives sensible architecture, and this applies to code organisation, component and module architecture, all the way through to state management. Let’s see how they all work as individual patterns, and explore their implementation in code. Once we know how the moving pieces work, we can easily fit them together to build solid apps that head in the same direction.
Augmented Reality is opening up new and exciting possibilities for users. Today we are able to develop pure web experiences that work on mobile devices. While it is exciting, it is a brand new technology. Creating Augmented Reality experiences involves several APIs, WebRTC, WebGL and more.
Let’s look at how we can make it easier to create Augmented Reality experiences with declarative Angular components. We will go over the performance considerations as well as the “Hello AR!” example code and resources.
Thought hacking was hard? It’s not, it’s easy and I’m going to show you how! In this episode of CSI Belgium we’ll investigate a series of hacking stories and break them down step-by-step to see exactly how they did it. By the end you’ll walk away a little bit more scared and a lot more prepared with some great practices you can apply immediately to your own applications.
All too often developers are left completely puzzled when the browser renders CSS in ways they didn’t expect. It’s not dark magic though and as developers we know that computers are just parsing our instructions. While many talks discuss how to fix common bugs, this talk will focus on the why by taking a deep dive into browser internals to see how our styles are parsed and rendered.
Nearly all Angular applications must communicate with HTTP-based APIs. To make this task easier, Angular 4.3 introduced the new HttpClient.
This session looks at its possibilities. It shows how to use not only JSON but also other text-based formats like XML or CSV.
Furthermore, you will see how to deal with binary streams and how your application can get progress information when doing file up- and downloads.
In addition, we will look at Interceptors that allow to implement cross-cutting concerns like security checks, logging, or caching.
Finally, you will see how to protect from XSRF attacks and what the HttpClient holds in store for testing.
We have at least two very interesting options to create an Angular PWA. First, the native Angular Service Worker (NGSW) by the Angular team, super-powered by Angular CLI and some extra ng-pwa-tools. Second, the all new framework-agnostic Workbox library by the Google Chrome team.
What's easier to set up for your Angular app? What has wider functionality? What's faster and more robust? Let's go exploring, coding and testing! You will have 100% full overview of these two approaches after my session, but the final decision is yours!"
When you’re building Angular applications, you will need to figure out how to manage your user’s sessions. Back in the days, this used to be simple. But now, there are many different options, all with specific advantages and disadvantages. How can you make a sensible choice, and how will that impact the security of your application? This talk will lay it out for you. You will learn how to assess your past choices, and how to substantiate future decisions.
TypeScript provides a powerful compiler we use most of the time for transpiling codebase in our projects. But it also has hidden features that can help us with so many fantastic tasks.
this talk we will learn how the compiler works, and how we can use it for statical analysis (Codelyzer, TSLint), context aware replacement, code visualization (ngrev), documentation (Compodoc, TypeDoc) or language service plugin (Angular Language Service).
Libraries are the building blocks of every serious application. As such, a healthy ecosystem of reusable tools and libraries are extremely important for the success of a frontend framework.
In this talk we will learn how to contribute to the Angular ecosystem by learning how to build and release Angular libraries like a pro. We will explore their structure, learn about bundling techniques and formats and finally about semantic versioning & continuous, automated deployment to NPM.
Traditionally, AngularJS has been used for building rich single-page applications.
Nowadays, Angular has become a universal framework, running inside the browser, in the backend and even powering your mobile apps.
The new Angular version unlocks some interesting use-cases that were not previously possible. In this talk, we are going to see how to set up angular-universal together with fuse-box for building scalable, high-performance static web sites, such as a blog or a landing page that can be easily deployed to gh-pages or Firebase Hosting.
Did I mention hot-reloading, offline support and Progressive Web Apps?
When it comes to putting stuff on the screen in Angular webapps, HTML+CSS is usually the most appropriate medium. But it’s not the only game in town. Alternative APIs such as SVG and Canvas can provide a lot of extra power when you need it for those dazzling visualizations, UI effects, games, and artistic apps. In this talk we’ll look at how SVG and Canvas graphics can be created with Angular and what we have to keep in mind as we do it.
Angular 2 applications can lazily load modules to improve start-up performance. This session shows by example how to optimize solutions using this approach. Potential pitfalls are described and information is presented about asynchronously preloading modules with both builtin and user-generated strategies to speed up lazy loading.
From writing the AngularJS sources in your favorite code editor to running the application in a production environment, involves a considerable amount of steps. There are the basic steps of transpiling, packing up your files, minification, etc. And to make sure that we have a quality app, we add some unit testing and code coverage to the mix, optionally performing some performance testing. By the way, we need to perform the actual production deployment too.
In this session we'll look at a practical example of how to setup a fully automated release pipeline, so that you can focus on writing code rather than operating a deployment infrastructure.
React and Angular share a lot of architectural decisions and have inspired each other as well. They are both component oriented, have automated changed detection and can render both on the server as well as on the client side. However, there are also quite a few differences in how they work and which philosophy they follow. Based on advanced practical examples we will look at the most interesting differences between those two frameworks. This can help you understand your Angular framework even better and gives you insights into what strengths and what weaknesses it has in certain scenarios.
Modern web applications have constantly growing requirements and their complexity grows exponentially. Some of the biggest challenges in front of us are state management, testability and flexibility. Given the dynamic business environment we need to make sure our projects' design uses well known patterns most developers are familiar with. In this talk I’ll introduce a scalable Angular 2 application architecture, which answers the following requirements: testability, predictable state management, scalable communication layer and modular and robust design.
GraphQL was developed internally at Facebook in 2012. Its main goal was to allow Native Mobile teams to quickly build new products and collaborate within the large Facebook ecosystem without disrupting existing Data Services. In this talk we are going to introduce GraphQL and how we can use it together with the Apollo Client in Angular 2.