Learn about the latest trends in Angular and frontend web technologies in an inspiring, open meet and connect with our speakers and other like-minded, passionate developers.
5 Tips to Improve User Experience with NgRx
The responsiveness of the apps is one of the critical factors of how the users perceive them. Some of the sources of slowness are waiting for API responses and unhandled errors when they fail.
NgRx is the state management solution, and because of the way it is designed, it can help to improve User Experience in many such areas. In particular, I’ll talk about: error handling, store as a cache, and optimistic updates.Slides
ABC: Angular, Bazel, CLI
Angular has been used for very large projects (>100 engineers) inside Google, and the development workflow is very different from the external CLI solution.
As part of the convergence effort, ABC aims to leverage the powerful features of Bazel and deliver the same kind of performance for massive parallelism and scalability to Angular users.Slides
Advanced patterns in RxJS - Operating heavily dynamic UI’s with RxJS
The web changed a lot in the past years, more and more applications provide UI's that are heavily interactive and often also include some background tasks.
RxJS serves a very elegant way to compose events and async actions, make your code more robust and extensible.
Let's explore advanced techniques with RxJS!Slides
Angular Material or Bootstrap? Stop asking the question!
Angular Material AND Bootstrap for your next Angular application? It doesn't make sense, does it? The first time I talked to my colleagues about combining the two, they laughed at me. But now, they love the approach because it works like a charm.
In this session, we will see how we can leverage the best parts of both libraries to build beautiful, maintainable, and responsive Angular applications with very little CSS.Slides
Automated Testing for the Modern Web
End-to-end tests are a crucial part of the testing pyramid, yet they are often overlooked entirely. They are notorious for being hard to set up, flaky when they run, and slow to debug.
Why is running end-to-end tests so unreliable? Is there a way to write useful end-to-end tests quickly without the hair-pulling frustration?
In this talk, we'll delve into Cypress.io - a new, refreshing approach to testing web applications. We’ll examine Cypress’ anatomy and show what makes it a better fit for testing modern, Angular web applications. Using this new tool, your tests can react to your application’s events in real time, read or alter web traffic on the fly, and programmatically interact and control your application while testing. You will walk away with the means to have your tests reliably run and quickly execute, giving you the ability to test your applications while you develop for the first time.Slides
Beyond TypeScript Metadata: Dependency Injection in Angular and Nest
Dependency Injection framework is a core and inherent feature of both Nest and Angular. DI simplifies creating scalable, testable, and maintainable applications by giving us flexible and efficient abstractions. However, did we ever think how this mechanism works underneath? In this talk, we’ll compare how Nest and Angular DI systems differ from each other as well as dive into the basics of the metadata reflection API in TypeScript.Slides
Building Mobile Apps with Angular and NativeScript
· Cross-platform libraries for common use cases. Need to call a JSON API? Run http.getJSON
· Style native apps using CSS. Yep, that’s actually a thing.
Curious about how it all works? Come learn! Architectures will be explained; apps will be built; and fun will be had by all.Slides
Build Web Components with Angular Elements
Angular provides awesome features to develop scalable enterprise applications with re-usable components. Sharing re-usable components between different teams or projects that uses different libraries or frameworks becomes painful. In order to solve this problem Angular Elements allows you to write custom elements a web standard specification in Angular way. This enables you to reuse existing Angular Components inside React, Vue, Ember and vanilla js.Slides
Collect, Combine, and Cache RxJS Streams for User-Friendly Results... Without a Subscription
RxJS is one of those technologies we use every day, but there is always a bit more to learn. In this session, we focus on specific use cases:
- Collecting data from a backend server
- Combining data streams with other data streams to handle foreign key and aggregate relationships
- Caching the streams in a service so they can be readily reused
- And producing user-friendly data for display
- All without a single subscription
Join me for this talk as we get to know another side of RxJS.Slides
Comparing Angular Forms
Forms are probably the most sensitive part of your web app. They are the main way we get data from the user. They seem simple enough, you just add an ngForm to your template, user clicks Submit and you have data. But there's more to them than that, and we're going to talk about that in this session. We'll try building forms in multiple ways, comparing the way they do validations, development and change detection, while coding it all.Slides
Complexity Management with NgRx
One of the biggest challenges building out large Angular applications is the management of complexity, but where does this complexity come from? Both state management and control flow are some of the largest contributors to unwieldy, hard-to-maintain code. Learn how the design of NgRx helps you manage this complexity by exploring the architectural underpinnings of functional, reactive Angular applications.Slides
Cool interaction made Simple with Angular Material CDK
Angular Material and the CDK were built to make it easy to build great looking and great feeling applications more quickly. Watch me live-code an application using CDK and schematics.Slides
From NgRx to NgRx-entity to NgRx-data
State Management is very important in Angular development, ngrx is one of the most used libraries. By using ngrx, there are a lot of advantages in development/test, but we also need to pay the learning cost for several new concepts (Store/Selector/Effect/Action/...), we also need to write a lot of boilerplate code for those extra layers.
In this talk, we will use sample application to introduce how to use
to implement it, through that, I will introduce the mechanism of ngrx-entity and ngrx-data. I will also like to share my thought when I am using ngrx-data in practical project.Slides
GraphQL at Any Level of Your Stack
After a very short introduction about GraphQL, we’re going to dive deep into how it’s being used today and what me and The Guild have learnt from all those years of having GraphQL as a main part of our stack. We will also rethink current most used solutions and see how they compare to GraphQL.Slides
How We Build NG-MY Website: Performance, SEO, Customized CLI Build, Animation, Modern CSS
In this talk, we will share about some techniques we apply in building NG-MY website, so you can easily apply these techniques in your website too! Here is what we will cover:
- Making Angular website performant & SEO friendly
- Customize Angular CLI Build prerender website
- Apply Animation to make your site cooler
- Modern CSS with CSS Variables
- Feature Flagging & Continuous Integration / Deployment (CI/CD)Slides
Ivy Renderer for Dummies
What is exactly Ivy Renderer? What features will affect the way we build apps? How can we benefit for this technology? In this presentation I will cover these and other fundamental questions while demonstrating all the features available today!Slides
Large Scale Angular Applications
On the BlueWeb project, which is a project to completely rewrite the B2C web applications of Air France and KLM, we have been using Angular since the early days. We started our project on Angular 2.0.0-rc.2. We are using this in combination with GraphQL on the server side, quite an interesting setup. Since AirFrance-KLM is one of the biggest airlines groups in the world, it is quite an important and big platform for the company.
There’s multiple ways to split a big Angular project, we’ve tried multiple different solutions within Air France KLM and over the years the project has changed and evolved in the set-up.
- Single App (single repo)
- Micro Front End Architecture (multi repo)
With our story we want to show you what we have learned and show the multiple options there are and what to consider when building a large scale Angular app and not to make the same mistakes as we have made.
In a talk we gave at GraphQL Summit San Francisco in 2017 you can see where we started (https://www.youtube.com/watch?v=T2njjXHdKqw). Also we recently shared a blogpost on medium on how we deal with upgrades in Angular. This blogpost was shared by all the big Angular contributers and also mentioned by Brad Green during NgAtlanta. You can read the post here: https://medium.com/airfrance-klm/how-we-upgraded-a-website-with-half-a-billion-annual-users-to-angular-7-in-less-then-a-day-71de33a1108e
As you can see we can’t stretch enough on how important it is to stay with the latest Angular release. And also why it doesn’t have to be scary for big companies to work with these new technologies and how it enables you to roll out a new version of your application on a daily basis as long as your mindset and set-up is correct. We can talk about why companies should be releasing smaller chunks but more regularly and how to get there:
- Branching strategies
- Automated Testing
- Mobile Device TestingSlides
Leverage Angular Schematics to Empower Developers of Frontend App & Libraries
In development, we often want to extract reusable parts of logic into self contained libraries. Modern tooling provided by Angular CLI enables us to provide amazing developer experience for the users of our libraries.
Libraries can be added seamlessly, while automating all the necessary setup work.
More so, providing built-in library specific schematics enables us to cut on the learning curve that is needed to get developers productive straight from the start by generating code which follows intentioned patterns and best practices.
In this talk, we're going to explore:
1. What are Angular Schematics
2. Why and how to use them
3. Best practices and tips for using default Angular schematics
4. How to build simple schematics for our custom library
5. How to make our library "ng add" - able to make it seamless for the consumersSlides
Machine Learning and AI for Angular Developers
You have no doubt heard about the wonders of Machine Learning. Thanks to Machine Learning we now have algorithms that let programs detect objects in images, translate text and speech from one language to another, make recommendations of products someone might purchase, and detect diseases from a person’s picture.
These capabilities have previously been the realm of Data Scientists working with rooms full of hardware. But now this power is available to us to use in our Angular applications.
In this talk you will learn how Machine Learning works, and how we can use machine learning in our code to enhance the capabilities of our applications.Slides
Protractor: The Hacker Way
This talk will bring you the dark secret of the Protractor end-to-end test framework and share the tips and tricks to fill your hacker's mind.Slides
Scaling Frontend Development using Micro-frontends
As Single Page Applications take over the world, we are introduced with yet another complexity: their size. Over time we have created patterns to manage complexity on our backends, one of the popular ones being microservices. This pattern is now being adopted by frontends under the name of micro-frontends. In this talk I will introduce the concept and dive into how does one get about implementing a micro-frontend architecture for their project.Slides
Upgrading your AngularJS App, Without the Tears
Many of us eagerly awaited the release of Angular 2. We updated our apps to Angular 1.6. We wrote components. And, when the time came, we wrapped our apps in ng-upgrade, and everything worked fine, and we all started writing Angular 2. We were all happy.
But what about everyone else? What about the people who are still running Angular 1.4? In ES5? With… JSPs? Fear not! There absolutely is hope. Using a real app as an example, we're going to take a look at the steps involved in preparing your app, the actual upgrade process, and strategies for improving the app in the future. We're going to take that dusty old Maven app and turn it into a shining example of modern web development!Slides
Why should You Care about Functional Reactive Programming
Functional reactive programming has been around for many years. There are so many reasons make people keep talking about it.
In this talk, we are going to talk about
1. What is functional reactive programming good at?
2. Why should you care about it and adopt it?
3. How can we use it with RxJS in Angular?
4. How about Ramda?Slides
Bringing Angular to Life with Animations
My web app is looking a little dull… When and how can I give it a little pop of life? We’ll be exploring how to create animations and micro-interactions that will wow (or at least subtly amuse) your users. Our toolkit will include CSS animations, Angular animations, and external animation libraries.Slides
Common Angular Gotchas
Knocking your head against unexpected issues while building your projects on Angular? We all did at some point!
In this talk, I will share about a few common mistakes that I've made (probably you as well!) when working in Angular and how to resolve or avoid them!Slides
Fun and Games with Angular
Angular is great for developing enterprise software. Does it always have to be about business though? If we are comfortable with the framework, maybe we can apply our knowledge on something a little more goofy every once in a while. Let's go for a spin and explore how we can use the tools that we're familiar with to develop some simple games in the browser. As it were, Angular is powerful enough to support games that are not so resource-intensive. In this lightning talk, we will look at how games can be created with Angular, including a short demo.Slides
Release Confidently: Automate Angular Deployment Workflow
The Continuous integration and continuous delivery (CI/CD) pipeline is one of the best practices for delivering code changes more frequently and reliably.
In this talk, I will share about:
- how to automate deployment
- how to setup and running automated testing across different browsers
- tips on setting up Angular deployment workflowSlides
Using Nx: Angular CLI Power-ups for Modern Development
Nx is an open source toolkit for building ambitious enterprise applications. Nx fully integrates with modern tools (Angular, React, Cypress, Jest, Prettier, Nest, etc) you already use and love. Nx sets up these tools, allows you to use them seamlessly, at the same time help you enforce your organization’s standards and community best practices.
In this talk, we will give a short overview about:
- What is Nx?
- How Nx provides can help you scale your enterprise developmentSlides
Writing Compound Components in Angular
Compound components is an advance technique to which components are used together such that they share an implicit state that let’s them communicate with each other in the background. In this talk, I will show you how to apply this technique in Angular.
Quoted by Kent C. Dodds - "Think of compound components like the and elements in HTML. Apart they don't do too much, but together they allow you to create the complete experience. The way they do this is by sharing implicit state between the components."Slides
Meet & Chat
Mamak Chat: Office Hours
Mamak is the Malaysian version of cafe, the place where conversation happens. There will be Mamak Chat after each session. You can discuss topics of your interest further with other participants and also the speakers! Good ideas come from conversation, so let's have a chat or... join and listen what's others have in mind.
Building your First Custom Angular Schematics
In this workshop we will shortly recapitulate what are Angular Schematics and how to use them and then we proceed to create our first custom Angular Schematics!
Topics we will be covering:
- - creating Angular Schematics project
- - generating files
- - using templates
- - specifying, validating and passing in options
- - testing schematics
- - integrating schematics with Angular CLI workspace
- - adjusting existing code with AST
- - integrating schematics with existing libraries (build process)
- - adding ng-add support
You are already using provided Angular Schematics (default or from 3rd party libraries like @angular/material or ngrx) and want to take it step further by creating custom schematics for your own library or in your own company because you like to make your fellow developers more productive!
- - Basic to Intermediate understanding and hands on experience with standard Angular CLI workspace (you know how to generate components, and use different generate options)
- - Basic to intermediate understanding of Typescript
Building your First Fullstack Serverless App with Angular
In this workshop we will be introducing AWS Amplify a modern toolchain, libraries and UI components to build Fullstack Serverless Apps. You will be building a fully featured Application from development to production.
Topics we will be covering:
- - Introduction to AWS Amplify
- - Designing a GraphQL API
- - Building the client and running queries and mutations
- - Adding real-time subscriptions and handling notifications
- - Adding off-line support
You already know some GraphQL and are curious about Fullstack Serverless Applications. You are also curious about learning new features and tooling.
Deploy Dockerized Angular Application to Azure
In this hands-on lab, you will learn how to implement a solution with a combination of Azure Resource Manager templates and Azure DevOps to enable continuous delivery with several Azure PaaS services.
At the end of this workshop, you will be better able to implement solutions for continuous delivery with Azure DevOps in Azure, as well create an Azure Resource Manager (ARM) template to provision Azure resources, configure continuous delivery with Azure DevOps, configure Application Insights into an application, and create an Azure DevOps project and Git repository.
RxJS Level UP - Essentials in reactive programming with RxJS
This training will improve your RxJS skills!
RxJS is more popular than ever. It is backed into the Angular core and also used in frameworks like React, Vue, and others! This doesn't surprise as it leverages a powerful and elegant way to work with sync as well as async collections.
In this workshop, you will bring your basic knowledge to the next level. We will learn about the patterns, operator combinations, and concept in RxJS!
This workshop is provided by angular-college.com. You'll learn:
- - Promise vs Observables
- - Execution context and observables
- - Subscription handling, explicit, implicit and single subscription management
- - Error handling and tricks to encapsulate errors
- - Custom configurable pipes
- - Patterns and examples of operator combinations
- - The most important Higher order operators in comparison
- - Best usage of higher order operators
As the last exercises, we will solve several examples in the Rx-way.