Tomáš Trajan
I ❤️ building useful things! It involves code & design 🛠 Passionate about #Frontend, #typescript, #Angular, #Material #Design ! Obviously the bright Future 🌞
Angular Schematics
How to leverage
to empower Developers of Enterprise
Frontend Apps & Libraries
@tomastrajan
by
Text
TOMAS TRAJAN
SOFTWARE ENGINEER, BLOGGER, SPEAKER, TRAINER...
@tomastrajan
🔗 medium.com/@tomastrajan
BLOGGER
@tomastrajan
🔗 github.com/tomastrajan
✅ best practices
✅ Angular Material components
✅ NgRx state management
✅ theming support
✅ 30+ contributors
✅ unit / e2e testing
OSS DEVELOPER
1500+
⭐
@tomastrajan
@releasebutler
MAKER OF
@tomastrajan
SPEAKER & Co-ORGANIZER
@tomastrajan
@tomastrajan
WHAT ARE WE GOING TO LEARN?
@tomastrajan
WHAT ARE ANGULAR SCHEMATICS ?
@tomastrajan
BENEFITS OF USING SCHEMATICS
HOW DO WE USE SCHEMATICS ?
@tomastrajan
HOW TO CREATE CUSTOM SCHEMATICS
@tomastrajan
HOW TO USE CUSTOM SCHEMATICS WITH ANGULAR CLI
@tomastrajan
HOW ARE WE GOING TO LEARN
IT ?
@tomastrajan
@tomastrajan
LIVE CODING !
IS NOT DEAD...
@tomastrajan
WHAT DID WE LEARN ?
@tomastrajan
- ng new (workspace)
- ng generate (apps, libs, ...)
- how to use 3rd party schematics
- potential use cases for custom schematics
- how to specify defaults
- how to execute Angular CLI just for specific project in the workspace
@tomastrajan
Angular CLI
- using schematics cli
- generate schematics project
- how to run custom schematics
- schematics concepts ( Rule, Tree, Options, ...)
- implement simple schematics
- use templates
- use schematics options
@tomastrajan
CUSTOM SCHEMATICS
- how to make custom schematics work in Angular CLI workspace (workspace / path setup)
- how to use x-prompt for options
- create crud-resource schematics
- conditional templates
@tomastrajan
CUSTOM SCHEMATICS EXAMPLE
- create schematics in Angular CLI lib project
- setup schematics build (tsconfig, copy assets)
- implement ng-add schematics
- implement schematics to generate lib entities in project
@tomastrajan
CUSTOM SCHEMATICS IN LIB
@tomastrajan
RESOURCES
- Angular CLI official docs
- Official schematics docs
- GitHub repo of library using ng-add and generate "model" schematics
- Schematics productivity tips blog post
- In-depth guide to custom Schematics
@tomastrajan
GET IN TOUCH
npx tomastrajan
@tomastrajan
ANGULAR WORKSHOPS
www.tomastrajan.com
@tomastrajan
THANK YOU FOR YOUR ATTENTION!
FOLLOW ME
@tomastrajan
GET IN TOUCH
PERSONAL
MEETUP
Angular Schematics
By Tomáš Trajan
Angular Schematics
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. Providing built-in library specific schematics enables us to cut on the learning curve that is needed to get developers productive with our new shiny lib!
