Professional Angular: coding Robust, Reactive and Performant Component-Based Applications and Libraries

Carlo Bonamico

DATE Wednesday 28th of November 2018

LOCATION Spazio Cantoni - Via Giovanni Cantoni 7

Take a look at the Special Package:
“1 Workshop + Conference Ticket”: we offer 15% DISCOUNT on the total price!

Click here to know how to obtain these discounts.

LANGUAGE
Italian

LEVEL
Advanced

DURATION
The workshop is full-day (8 hours) from 9:00 to 18:00, with one hour lunch break.

CHECK IN 8:30 – 9:00

PRICES

– 180 € until the 13th of September;
– 220 € until the 25th of October;
– 260 € until the 22nd of November;
– 280 € until the 27th of November at 5 pm

Take a look at the Special Package:
“1 Workshop + Conference Ticket”: we offer 15% DISCOUNT on the total price!

Click here to know how to obtain these discounts.

CARLO BONAMICO
Carlo’s passion for Software began with a C128, then grew with Linux, Java/JavaScript, web & enterprise apps, and now cloud & security.After a PhD and research experience at the University of Genova and the CNIT National Telecommunications Research Consortium, and an exciting time at startup Eptamedia, he’s now a Solution Architect and Senior Trainer at NIS s.r.l.. His personal communication style as an architect and trainer, both technically precise and able to present in an engaging way complex topics to an heterogeneous audience has been appreciated online and at many events from Devoxx to Codemotion.

ABSTRACT

You have adopted Angular for your projects because you experienced first-hand its productive and robust approach to HTML5 Application development, and the advantages of a Component-Oriented design based on Encapsulation and Separation of Responsibilities. However, to fully exploit the Power of Components, you need to aggregate them in a consistent and modular set, and to take advanced of advanced concepts. In this workshop we first share our experience in building several Component Libraries, from API Design concepts to advanced Component interaction patterns, from packaging and documentation to refactoring & interoperability. We then move to addressing advanced Angular topics such as Dynamic Templating, Reactive features, Change Detection and Performance, which are key to implementing challenging applicaitons with world-class User Experiences with Angular.

TABLE OF CONTENTS

Component-Based Design
– issues and challenges in developing complex / large HTML5 applications
– advantages of a Component-Based approach

Designing a Component Library
– principles of API design
– basic component patterns
– “”smart””, “”dumb”” and “”stateless”” components
– how to interconnect multiple collaborating Components to achieve complex UI interactions
– separating responsibilities with Directives
– separating responsibilities with ng-content composition
– layout vs ui components
– Decorator components
– using components as a DSL

Implementing a Component Library
– Custom Form inputs and ControlValueAccessor
– custom Validators
– data oriented components (Combo, Table, etc…)
– lifecycle callbacks
– Dynamic Templating (e.g. Grid Cells)
– refactoring

Distributing a Component Library
– packaging with ng-packgr and Angular CLI
– documentation with Compodoc
– interoperability with other libraries

Reactive Angular
– thinking in Event Streams
– basic operators
– what’s new in RX.js 6.x
– create your own operators
– Typical Use Cases: managing selections, data refresh, errors and warnings, loading indicators
– Advanced UI Interaction: a use case

Change Detection: what you need to know
– basic change detection
– potential performance issues
– OnPush Strategy vs managing @Inputs and @Output
– immutable inputs

Designing for Performance
– make more components
– align component boundaries with your application logic and change patterns
– use stateless Pipes

Testing and Tuning Angular Performance
– with Browser Developer Tools & Augury
– logging Change Detection
– other tools

References & Useful Resources

TRAINING OBJECTIVES

The workshop will make you understand:
– the challenges in developing large/complex Angular applications and reusable Component Libraries
– the advantages of a Component-based approach to the UI
– the differences between various types and roles of UI components
– basic Reactive Programming concepts applied to Angular
– how Angular manages Change Detection and how to take this into account to achieve stellar performance

After the workshops you will be able to:
– design a complex UI by splitting it into separate, reusable components
– design an easy to use and modular Component API
– implement and package a reusable Component Library in Angular 4.x and later
– exploit rx.js and Reactive Programming concepts to simplify the implementation of complex UI iteractions
– create complex interactions by having multiple components talk to each other
– when needed, fine-tune application performance

WHO THE WORKSHOP IS DEDICATED TO?

Angular Developers who master the basics of the framework and would like to learn an effective approach to design, implement, and fine-tune complex real-world Angular Applications or Component Libraries in a robust, modular and future-proof way.

PREREQUIREMENTS

Good knowledge of HTML5 and of the DOM. Practical experience in Javascript and Angular 2/4/5/6 development (you should be able to write/compile/test/debug by yourself an Angular application including multiple interacting Components, Services, Routing, Data Binding, Sending Http requests). Working knowledge of Angular syntax, @Component, @Input, @Output, [(ngModel)] is required as these topics will NOT be explained in the workshop.

HARDWARE AND SOFTWARE REQUIREMENTS

Your own laptop

Web Browser (Chrome or Firefox)

Text Editor (Sublime, Atom, Visual Studio Code,…) and/or IDE (Eclipse, NetBeans, Intellij Idea or WebStorm, Visual Studio,.. )

The Open Source Visual Studio Code editor is recommended to participants who have never used a JS-specific editor or IDE https://code.visualstudio.com/Download

nodejs 8.x

Optional but useful: – git client

WARNING
Seats are limited.
The workshop will be held only if the minimun number of attendees is reached.

Take a look at the Special Package:
“1 Workshop + Conference Ticket”: we offer 15% DISCOUNT on the total price!

Click here to know how to obtain these discounts.

Back to workshops list