D.R.Y_out_your_Angular_Apps.pdf

Angular provides us with ways to make reusable code within our applications. What happens when we want to make use of this code in another application? In this session we will cover how to take an existing piece of reusable logic and abstract it to a shared Angular package.

We’ll start with our story of how we leveraged shared packages across multiple client systems at our current company. Then we will demonstrate, with a real example, how you can package and distribute your Angular code.

A full example will be provided at the end of the course that contains everything we discussed in the session, and uses an automated pipeline to test and build your code.

Transcript

1. D.R.Y. out your Angular Apps
2. HELLO! We are John Graham and Chris Camac. You can find us at @JohnGrahamDev and @PilgrimSecret 2 ▪ Presentation template by SlidesCarnival ▪ Photographs by Unsplash
3. “Angular provides us with ways to make reusable code within our applications. What happens when we want to make use of this code in another application? 3
4. Why are we doing this? ▪ You’ve built functionality that you want to share with other Angular applications. ▪ You want to have consistency among common functional components. ▪ Updates to common components can be managed with semantic versions. 4
5. What are the benefits of a package? ▪ Prevents the need for a Mono-Repo. ▪ Easy to create with tools like ng-packagr ▪ Angular Package Format 5
6. DEMO 2 implementations become 1 6
7. ngx-package-starter ng-packagr Pre-configured with the initial setup required for ng-packagr to bundle your package Unit Test Built in unit testing structure with code coverage. CI Azure pipelines ready with built in yml that handles coverage reporting and testing. 7 https://github.com/milestechnologies/ngx-package-starter https://github.com/milestechnologies/ngx-keyboard-shortcuts
8. But wait there’s more…. 8
9. What is solves ▪ A lot of our enterprise apps are CRUD ▪ Saves time configuring forms ▪ Keeps data definitions and UI in sync ▪ Data drives forms ▪ Automates the mundane Dynamic Forms What it Does ▪ Read DB schema to create an entity configuration ▪ Render dynamic form components from the configuration ▪ Centralize your validation and form logic 9
10. Dynamic Forms The evolved form of Packages 10
11. References ▪ Ngx - Package starter ▪ Developer Learning Tracker ▪ Strike It ▪ Angular Dynamic Forms 11
12. THANKS! Any questions? You can find us at: @JohnGrahamDev &@PilgrimSecret JGraham@milestechnologies.com CCamac@milestechnologies.com 12