Adventures in Angular AiA 221: Angular Schematics from the Ground Up with Brian Love & Kevin Schuchard
Dec 25, 2018
01:07:05
Panel:
- Charles Max Wood
- Joe Eames
- Aaron Frost
- Alyssa Nicoll
Special Guests: https://twitter.com/brian_love?lang=en & https://twitter.com/KevinSchuchard In this episode, the panelist talk with today’s special guests Brian Love & Kevin Schuchard! Brian and Kevin work at https://www.briebug.com – check out their employee profiles https://www.briebug.com/briebug-development-team/! The panelist and guests talk about schematics, Angular, AST, and much more!Show Topics:0:00 – https://devchat.tv/get-a-coder-job/ 0:50 – Chuck: Hello! Our panel today is Joe, Aaron, Alyssa, and myself. We have two guests today, and we are going to talk about schematics. Let’s dive into that!1:46 – Guest: Schematics is a library that is coming out of Angular and the Angular Team.The guest gives a definition of Angular Schematics. 2:26 – Alyssa.2:31 – Kevin: The functionality that you are hoping for depends on the CLI that you are on.3:00 – Alyssa: Sorry for diving into the juicy stuff but we forgot to talk about your introductions!3:19 – The guests talk about their backgrounds and introduce themselves to the panel and the listeners. 3:49 – Alyssa.3:54 – Guest continues.4:21 – Panel: Crazy and busy!4:28 – Alyssa.4:31 – Kevin: I am Senior Developer, and I have worked here for a few years. I have had the opportunities to write some schematics for the company and some of my own schematics.4:53 – Alyssa: Aren’t you so proud that you are a “Senior Developer”?!5:10 – Guest and panelists go back-and-forth. 6:23 – Guests: We want people to be familiar with schematics and start their journey with schematics.6:50 – Panel: It’s kind of trippy isn’t that right?7:00 – Guest: Yeah there are hurdles to learning schematics at first – for sure.7:22 – Alyssa: What is AST?7:29 – Guest gives a definition of AST and goes into much detail about this. 10:00 – Alyssa: I think I understand, now, what AST is. Thanks.Alyssa asks the guests a question. 10:14 – Guest answers the question about AST. 10:51 – Guest continues. 11:27 – Panelist is talking about the AST and schematics. 12:03 – Guest: You can read the whole file and using the AST you can figure out where you went to enter the text.12:25 – Alyssa asks a question. 12:28 – Guest: We are not the developers of schematics, but we are just here to share our knowledge. I want to be super clear here.13:39 – Panelist talks about schematics, CLI, and AST. 14:18 – Guest: You don’t have to know all about AST and everything there is to know to get into it. You can build schematics w/o getting into AST. Just to be clear.14:39 – Alyssa asks a follow-up question. 14:41 – Guest continues. 15:57 – Guest: AST has been around for a while – it’s not a new thing it’s kind of an old thing.Guest talks about tools (Code Shift) that Facebook has built that is related to this topic. 17:22 – Guest: Yeah AST has been around for a while.17:28 – Alyssa asks a question about Code Shift. 17:36 – Guest.18:21 – Panel and guest go back-and-forth. 19:51 – Alyssa: You said you really don’t need to get into AST to do schematics – right? (Yes.)Alyssa asks a question. 20:19 – Guest: There are two pieces with schematics and that’s adding of new files and you can decide which pieces of the templates you want to be compiled.21:58 – Chuck: For schematics you mentioned you could drop strings in.Chuck asks a question.22:29 – Guest answers the question with a hypothetical situation. 23:09 – Chuck: I read the article you wrote and I have a question about your article. Tell me about the tree?23:29 – Guest talks about the tree or aka the host. 25:40 – Guest: The tree is a virtual kind of context and it’s not committing all of the changes to the file system. Whether that is adding, deleting, or updating these files.26:10 – Chuck: Makes sense to me.26:15 – Guest continues talking about schematics. 26:53 – Alyssa: https://yeoman.io is a replacement for schematics?27:05 – Guest: It’s a lightweight alternative. 27:33 – https://angularbootcamp.com 28:10 – Chuck: How does one build a schematic?28:16 – Guest answers the question. 30:34 – Panel: What’s the latest thing you’ve built? Talk about that, please.30:40 – Guest: It’s a schematic and took what we’ve learned to set you up for a starter project. It starts with a blank project.32:57 – Panel: You are just talking some lessons learned and you are saying this is how Kevin says to do it. You’ve packaged that up33:26 – Guest: Yep I have found things that work and there isn’t any magic but put these practices together and made a repository to help testing and making schematics.33:55 – Panel and guests go back-and-forth. 34:20 – Chuck: Let’s say I’ve built this schematic and Frosty wants to share it with his friends. How do we do that? How do you share it? Is there some component that you’ve built?35:06 – Guest: It depends on what you are doing with it.36:14 – Chuck: For mass production, though?36:25 – Guest: I think Chuck is wondering about discoverability. Guest continues and he mentions https://github.com/prettier/prettier, extensions, among other things. 37:18 – Guest: I think it’s my favorite about schematics and it’s Kevin’s.37:40 – Guest.38:20 – Guest continues talking about schematics and https://www.ng-conf.org 38:57 – Guest talks about libraries.40:12 – Chuck: Anything else? Do you NPM install it and it’s just there?40:29 – Guest: There are 2 ways to go about it.53:05 – https://www.freshbooks.com END – https://www.cachefly.com Links:
- https://vuejs.org
- https://jquery.com
- https://angular.io
- https://www.javascript.com
- https://www.python.org
- https://reactjs.org
- https://www.cypress.io
- Yhttps://yeoman.io
- http://groovy-lang.org
- https://github.com/prettier/prettier
- https://www.ng-conf.org
- https://brianflove.com
- https://www.linkedin.com/in/kevinschuchard
- http://blog.briebug.com/building-an-angular-schematic-for-jest-testing
- https://brianflove.com/2018/12/12/angular-schematics-tutorial/
- https://www.kevinschuchard.com/blog/2018-11-20-schematic-sandbox/ + starter project
- https://github.com/schuchard/schematic-starter
- https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2
- https://leanpub.com/angular-schematics
- https://github.com/angular/angular-cli/tree/master/packages/schematics/angular 1
- https://github.com/angular/material2/tree/master/src/lib/schematics 2
- https://astexplorer.net/
- https://www.eventbrite.com/e/evening-of-angular-2019-tickets-52323800897
- Example Schematic project with Sandbox: (Written by Kevin)
- https://github.com/briebug/jest-schematic
- https://github.com/schuchard/prettier-schematic
- https://github.com/briebug/ngrx-entity-schematic
- https://github.com/blove/schematics
Sponsors:
- https://angularbootcamp.com/
- https://www.cachefly.com
-
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
- Charles Max Wood
- Joe Eames
- Aaron Frost
- Alyssa Nicoll
Special Guests: https://twitter.com/brian_love?lang=en & https://twitter.com/KevinSchuchard In this episode, the panelist talk with today’s special guests Brian Love & Kevin Schuchard! Brian and Kevin work at https://www.briebug.com – check out their employee profiles https://www.briebug.com/briebug-development-team/! The panelist and guests talk about schematics, Angular, AST, and much more!Show Topics:0:00 – https://devchat.tv/get-a-coder-job/ 0:50 – Chuck: Hello! Our panel today is Joe, Aaron, Alyssa, and myself. We have two guests today, and we are going to talk about schematics. Let’s dive into that!1:46 – Guest: Schematics is a library that is coming out of Angular and the Angular Team.The guest gives a definition of Angular Schematics. 2:26 – Alyssa.2:31 – Kevin: The functionality that you are hoping for depends on the CLI that you are on.3:00 – Alyssa: Sorry for diving into the juicy stuff but we forgot to talk about your introductions!3:19 – The guests talk about their backgrounds and introduce themselves to the panel and the listeners. 3:49 – Alyssa.3:54 – Guest continues.4:21 – Panel: Crazy and busy!4:28 – Alyssa.4:31 – Kevin: I am Senior Developer, and I have worked here for a few years. I have had the opportunities to write some schematics for the company and some of my own schematics.4:53 – Alyssa: Aren’t you so proud that you are a “Senior Developer”?!5:10 – Guest and panelists go back-and-forth. 6:23 – Guests: We want people to be familiar with schematics and start their journey with schematics.6:50 – Panel: It’s kind of trippy isn’t that right?7:00 – Guest: Yeah there are hurdles to learning schematics at first – for sure.7:22 – Alyssa: What is AST?7:29 – Guest gives a definition of AST and goes into much detail about this. 10:00 – Alyssa: I think I understand, now, what AST is. Thanks.Alyssa asks the guests a question. 10:14 – Guest answers the question about AST. 10:51 – Guest continues. 11:27 – Panelist is talking about the AST and schematics. 12:03 – Guest: You can read the whole file and using the AST you can figure out where you went to enter the text.12:25 – Alyssa asks a question. 12:28 – Guest: We are not the developers of schematics, but we are just here to share our knowledge. I want to be super clear here.13:39 – Panelist talks about schematics, CLI, and AST. 14:18 – Guest: You don’t have to know all about AST and everything there is to know to get into it. You can build schematics w/o getting into AST. Just to be clear.14:39 – Alyssa asks a follow-up question. 14:41 – Guest continues. 15:57 – Guest: AST has been around for a while – it’s not a new thing it’s kind of an old thing.Guest talks about tools (Code Shift) that Facebook has built that is related to this topic. 17:22 – Guest: Yeah AST has been around for a while.17:28 – Alyssa asks a question about Code Shift. 17:36 – Guest.18:21 – Panel and guest go back-and-forth. 19:51 – Alyssa: You said you really don’t need to get into AST to do schematics – right? (Yes.)Alyssa asks a question. 20:19 – Guest: There are two pieces with schematics and that’s adding of new files and you can decide which pieces of the templates you want to be compiled.21:58 – Chuck: For schematics you mentioned you could drop strings in.Chuck asks a question.22:29 – Guest answers the question with a hypothetical situation. 23:09 – Chuck: I read the article you wrote and I have a question about your article. Tell me about the tree?23:29 – Guest talks about the tree or aka the host. 25:40 – Guest: The tree is a virtual kind of context and it’s not committing all of the changes to the file system. Whether that is adding, deleting, or updating these files.26:10 – Chuck: Makes sense to me.26:15 – Guest continues talking about schematics. 26:53 – Alyssa: https://yeoman.io is a replacement for schematics?27:05 – Guest: It’s a lightweight alternative. 27:33 – https://angularbootcamp.com 28:10 – Chuck: How does one build a schematic?28:16 – Guest answers the question. 30:34 – Panel: What’s the latest thing you’ve built? Talk about that, please.30:40 – Guest: It’s a schematic and took what we’ve learned to set you up for a starter project. It starts with a blank project.32:57 – Panel: You are just talking some lessons learned and you are saying this is how Kevin says to do it. You’ve packaged that up33:26 – Guest: Yep I have found things that work and there isn’t any magic but put these practices together and made a repository to help testing and making schematics.33:55 – Panel and guests go back-and-forth. 34:20 – Chuck: Let’s say I’ve built this schematic and Frosty wants to share it with his friends. How do we do that? How do you share it? Is there some component that you’ve built?35:06 – Guest: It depends on what you are doing with it.36:14 – Chuck: For mass production, though?36:25 – Guest: I think Chuck is wondering about discoverability. Guest continues and he mentions https://github.com/prettier/prettier, extensions, among other things. 37:18 – Guest: I think it’s my favorite about schematics and it’s Kevin’s.37:40 – Guest.38:20 – Guest continues talking about schematics and https://www.ng-conf.org 38:57 – Guest talks about libraries.40:12 – Chuck: Anything else? Do you NPM install it and it’s just there?40:29 – Guest: There are 2 ways to go about it.53:05 – https://www.freshbooks.com END – https://www.cachefly.com Links:
- https://vuejs.org
- https://jquery.com
- https://angular.io
- https://www.javascript.com
- https://www.python.org
- https://reactjs.org
- https://www.cypress.io
- Yhttps://yeoman.io
- http://groovy-lang.org
- https://github.com/prettier/prettier
- https://www.ng-conf.org
- https://brianflove.com
- https://www.linkedin.com/in/kevinschuchard
- http://blog.briebug.com/building-an-angular-schematic-for-jest-testing
- https://brianflove.com/2018/12/12/angular-schematics-tutorial/
- https://www.kevinschuchard.com/blog/2018-11-20-schematic-sandbox/ + starter project
- https://github.com/schuchard/schematic-starter
- https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2
- https://leanpub.com/angular-schematics
- https://github.com/angular/angular-cli/tree/master/packages/schematics/angular 1
- https://github.com/angular/material2/tree/master/src/lib/schematics 2
- https://astexplorer.net/
- https://www.eventbrite.com/e/evening-of-angular-2019-tickets-52323800897
- Example Schematic project with Sandbox: (Written by Kevin)
- https://github.com/briebug/jest-schematic
- https://github.com/schuchard/prettier-schematic
- https://github.com/briebug/ngrx-entity-schematic
- https://github.com/blove/schematics
Sponsors:
- https://angularbootcamp.com/
- https://www.cachefly.com
-
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.