SESSIONS

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.

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.

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!

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.

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.

Building Mobile Apps with Angular and NativeScript

NativeScript is a free and open source JavaScript framework for building native iOS and Android apps. Add to that Angular with TypeScript and you will get a truly amazing combination. But I know what you’re thinking: another way of building apps? What makes NativeScript special? Here are a few cool things:

· Direct access to native APIs—no plugins required. Want to create a file on Android? Run new java.io.File()—in JavaScript!
· Completely native performance through the use of a JavaScript bridge natively available on all three mobile platforms.
· 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.

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.

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.

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.

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.

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.

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
1. ngrx
2. ngrx-enitty
3. ngrx-data
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.

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.

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)

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!

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)
- Monorepo

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 Testing

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 consumers

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.

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.

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.

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!

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?

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.

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!

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.

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 workflow

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 development

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."

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

Target Audience
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!

Requirements

• - 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

Target Audience
You already know some GraphQL and are curious about Fullstack Serverless Applications. You are also curious about learning new features and tooling.

Requirements
Basic to Intermediate understanding of GraphQL and JavaScript. Bring your own laptop, fully charged, and a rested mind.

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.