Matthew Chestnut is a Senior Consultant at ThreeWill. He has over 25 years of software development experience around enterprise and departmental business productivity applications. He has a proven track record of quality software development, on-budget project management and management of successful software development teams.
Danny serves as Vice President of Client Development at ThreeWill. His primary responsibilities are to make sure that we are building partnerships with the right clients and getting out the message about how we can help clients.
In this Podcast, Insights on Using Vue.js Framework on a Web Development Project, we discuss…
| Min | Topic |
| 3:35 | Nuxt |
| 6:14 | No Sequel Database |
| 6:58 | Entity Framework Core |
| 9:13 | Element UI |
| 10:56 | Cypress |
| 11:19 | Linting |
| 14:38 | Development Sustainment |
Transcript
| Danny Ryan: | It’s Friday, September 27th and today I sit down with Matthew Chestnut and we go through the latest web-based technologies that he’s using on projects including the Vue.js Framework. Cool testing tools, a lot of great stuff and he covers some neat insights like creating developer run books. I hope you’ll enjoy this.
|
| Hi and welcome to the Work Together Better podcast. This is your host Danny Ryan. This is ThreeWill’s official podcast about enterprise collaboration: how people, process, and technology combined to help organizations, departments and teams work together better.
| |
| I’m here today with Matthew Chestnut, senior consultant for ThreeWill and I’m going to expand my vocabulary exponentially today with all of these new terms that you’re going to teach me, Matthew. I don’t know if I would say I’m excited. I’m interested to learn more about what you’re doing here for the project. Welcome, Matthew.
| |
| Matthew Chestnut: | It’s good to be back, Danny. It’s been a little while since we’ve had one of these chats.
|
| Danny Ryan: | It has. It has. Did we not do one last quarter?
|
| Matthew Chestnut: | No, I’ve been good and I’ve been writing up some blog posts over the last few quarters. So I thought it’s time for us to catch up again.
|
| Danny Ryan: | Nice. Well I appreciate my time that I get to have with you and today’s going to be a doozy. You’re getting professional. When you show up with show notes, you’re ready to kick it to the next level. I see the words and I’m going to mess up the pronunciation, but I’ll give it my best. Okay, Matthew?
|
| Matthew Chestnut: | Well, I wanted to make certain that I knew what I was going to talk about and I figured, well, if it’s going to help me, it’ll probably help you as well.
|
| Danny Ryan: | So just to give some people some context, we are doing some cutting edge app development. I’m assuming a lot of these are just sort of like what is, what’s the latest and greatest-
|
| Matthew Chestnut: | It’s the de rigor. It’s the stuff that’s hot today.
|
| Danny Ryan: | It’s the du jour. I’d like to go through some of these different… It looks like some of them are different frameworks, some of the different tools that you’re using on this project for a really innovative company that we all know, that I’m not going to say the name of, but a really great innovative… This is a health related company, which has got to be cool for you. Right?
|
| Matthew Chestnut: | Oh, absolutely.
|
| Danny Ryan: | That’s nice. I think the atmosphere and you’re going to have an impact on people’s health, I think that’s a nice little side component to what you’re doing as well.
|
| Matthew Chestnut: | Definitely a vibrant company.
|
| Danny Ryan: | Yes. Awesome. Awesome. Awesome. So let’s jump into it. The first one is pronounced Nuxt.
|
| Matthew Chestnut: | Well it’s Nuxt, actually. I’m going to even back up and tell you how we even got here.
|
| Danny Ryan: | Please. Give me the backstories.
|
| Matthew Chestnut: | So here at ThreeWill we’ve done app development for quite some time and we focused on SharePoint and a variety of application platforms. Well these days in this whole world of how you develop software for the client side, for the browser, what framework do you use as developers to produce a product easily, quickly that works, et cetera. SharePoint, which is a framework, an application environment that we’ve used for quite some time, uses the react framework, which is a framework that’s been around for quite some time. I’ve done some work with the angular framework, which is another one of the big three. This time we’re using Vue Framework and all these words that we’re going to be talking about are part of the Vue family and its Vue as in Vue.JS Framework. Vue JavaScript.
|
| So what we’re looking at here with this Nuxt is kind of a framework on top of a framework, if you will. It’s a meta framework, a super framework. The whole idea is it bundles some of the capabilities of Vue.js Framework, which is not the same type of framework is angular. With angular you get this all in one, all-encompassing thing with routing and all this other bits. With the Vue.js Framework, you have to pick and piece and put some of this stuff together and that’s what Nuxt is.
| |
| Danny Ryan: | Nice. So as you were going onto this project, you know we were… one of the cool things is we’re working with someone who used to work at ThreeWill and you know… I consider someone who is very technology savvy, very stays up and is well-versed on the latest technologies and I think going into this project one of the nice things was he was able to… Was he created almost like created a framework that you guys wanted to use for the project. Or how did that, how did that actually… What happened in reality, I guess?
|
| Matthew Chestnut: | That’s pretty much it. He’s very technically-oriented. He’s a very smart fellow. He did work with us for quite some time a while back. He came up with a a prototype if you will, a design, which was very helpful because he cut through all this stuff that sometimes we have to do as a consulting company to explain to the customer why we’re going to do it a certain way and what tools we’re going to use. In this situation it was reversed. It was dictated to us, we’re going to use this particular technology and it all made sense.
|
| We’re using some of the other things, like for example, we’re using the .net standard framework. We’ve been accustomed to… I guess five years ago, six years ago and old time .net. Everything was the standard .net framework, which was Microsoft Windows-specific type code. Then we came along with .net core, which gave us the capability of running code written against that API in a cross platform way on Linux, what have you.
| |
| Now .net standard is the latest and greatest, if you will. It’s just a well-known API that you as a developer, me as a developer, can be guaranteed that if we write to this standard, this .net standard, it’ll run on all the platforms it supports. So that was a new thing for us and it really, as a developer, it’s not that big a deal to switch these frameworks and these libraries because we just make a different choice when we’re setting up our development environment. But it was good place to start from because we knew if this particular application had to go elsewhere, it would work.
| |
| Danny Ryan: | Nice, so it makes it… That makes it more portable to be able to be hosted in different types of cloud environments then?
|
| Matthew Chestnut: | That’s correct.
|
| Danny Ryan: | Okay.
|
| Matthew Chestnut: | The other thing we did differently on this one is we’re using a no SQL or no sequel database. In this particular situation, we’re using MongoDB. Now this is a completely different environment for a lot of things that we deal with. We’re typically in a relational database world. Sequel server, for example, is a classic example of a relational database where the different entities, the different tables, the different sets of data have relationships to one another so that they can be enforced at the database level. So if you try to do something that would be quote “illegal” because it is breaking the integrity of the data, the database will catch it for you.
|
| But that comes with a bit of a penalty in the sense that the number of transactions that you can do is lessened because of the more work the database server has to do. We’re using, in this example, a Mongo database, which is more document-centric as opposed to row-centric and table-centric if you will. It gives us the ability to read and write data very quickly. Once again, this was technology that was given to us by the architect and that’s what we’re using. It’s working out great because of entity framework core.
| |
| Danny Ryan: | Gotcha. What other things are in play here as well?
|
| Matthew Chestnut: | Well, the thing that gives us the ability on an entity framework core is theoretically from the API level, we write a particular type of query and it’s backend or database agnostic. So the idea there is if we did need to switch it out to SQL server, we could because it would just plug in a different connector. We’re kind of insulated from a developer standpoint in that regard. Although I’ll admit as a database person who’s done database work forever and using management studios of various flavors to get to and read the data, to be able to find data, select data, enlist it, update it, insert it. The whole language is completely different in this no SQL world because guess what? There’s no SQL. There’s no insert statements, right? That’s what the name means, so you have to do it a slightly different way. But once I understood the tools, then it’s a relatively straightforward.
|
| Danny Ryan: | Is there another language you’re writing?
|
| Matthew Chestnut: | It is. It ends up being JSON. It ends up being almost like a bunch of rest calls. You have a client, a tool that you use to interact with the database and you just paste in a blob of well-formed JSON, which has perhaps a filter attached to it or maybe some update statements or insert statements and that is what you send to the engine and the engine knows what to do with it.
|
| Danny Ryan: | Interesting.
|
| Matthew Chestnut: | Yeah, it is interesting. It’s a different mindset. The fact that I’m so relational-oriented in the sense that, oh gosh, I can’t do this or that because I will break this or that. This is so much easier because I just send data to it. It says, thank you very much. I’ll do something with it.
|
| Danny Ryan: | Very nice. What other things are involved here?
|
| Matthew Chestnut: | Well just in the technology stack we’ve got the Nuxt, which is a super set of the Vue Framework components, Vue-X, which is state management. Once again with angular you kind of get all this wrapped into one. With the Vue.js Framework world you have to put individual components together. The state management is reading data, writing data, knowing where you are in the application, the ability to maintain what state am I in right now?
|
| A couple of other bits were using Element UI, which is a another set of client side visual libraries used for developing items in the browser. A challenge with that particular one, the developers are in China, which is fine. Most of their stuff is in English, but that’s what I say, is “most of it.” Sometimes you dive down pretty deep and it starts getting into Chinese characters with some of the documentation so it can get little tricky in that regard. That’s yet another new thing in this world that’s fast-changing is sometimes you have to be able to use Google translate, for example, to understand what some of these comments are.
| |
| Danny Ryan: | All of these… It’s web-based UI, right?
|
| Matthew Chestnut: | It’s all web-based UI. Yeah, it’s all running in the browser.
|
| Danny Ryan: | It’s all running in the browser.
|
| Matthew Chestnut: | Then a couple of other things, some other neat technology that we’re using for this is a thing called Storybook, which is a way to… it’s a application in and of itself that integrates with the development environment, that gives us the ability to prototype discreet UI elements… a text box, a dropdown, a what have you, a radio button set… and then you can use it in their little IDE, which gives you the ability to test it and see what it looks like and then you can then use these components in the application itself.
|
| It gives us the ability to, at a very fine level, set up how a particular thing would look on the screen and then use it on the screen later.
| |
| Danny Ryan: | Nice. So you can prototype it out but then eventually use that as the… It’s not a throwaway prototype.
|
| Matthew Chestnut: | That’s correct. It’s not a throwaway. We’re taking the design elements provided by the UX person and we take that design and we put it into Storybook and we make our component in Storybook look like the UX component that was given to us by the designer. Then we just consume that in the application and it works great.
|
| Danny Ryan: | What are you doing for testing?
|
| Matthew Chestnut: | Ah, Cypress is another. You know, there’s tons of testing tools but Cypress is the one we’re using this time. We’re just getting started with this, making certain that our base elements, base components have some testing wrapped around it. We don’t have a full testing in there yet, but we’re starting to backfill the testing bits so that we can have some unit testing and some integration testing, et cetera.
|
| Another thing I like and this was pre-setup, is using a lint component. Now lint is the type of thing, if you think about it in clothing, you’re getting the lint off your clothes, all the cruft and stuff you don’t care about. Well in this particular example, we’re using lint to take a look at our JavaScript to make certain that we’re not doing silly things like leaving semi-colons off or using the wrong type of quotation or apostrophe for delimiting strings. The idea behind the lint is JavaScript is so flexible in the sense that it doesn’t do strict compile time checking necessarily. Lint will help us. It makes it more standard. It lets us know if we’ve got too much white space in a file or if the lines are too long. That’s built into the continuous integration parts, this lint bit, so that we can guarantee that the code will look similar regardless of the developer.
| |
| Danny Ryan: | Is that a new term? It’s like “linting,” is that a new term?
|
| Matthew Chestnut: | It’s relatively new. Yeah.
|
| Danny Ryan: | Okay.
|
| Matthew Chestnut: | It came from somewhere not long ago. I used to use this for something else, but it’s slipped my mind. But linting is something that’s been around a while, but it’s definitely been used in the JavaScript world.
|
| Danny Ryan: | It deals with the fact that you’re not compiling… You’re not going to find compilation issues so therefore you can use this in order to address things. Before you deploy it, you’re able to go and… Do you like set up certain standards for it?
|
| Matthew Chestnut: | Well there’s certain rules. Absolutely.
|
| Danny Ryan: | Yeah.
|
| Matthew Chestnut: | There’s a set of rules and you know, it really goes along with the new ECMAScript, which I can’t remember what the standard is now. Is it five, is it six, I don’t recall. But the idea being is now there’s new ways to declare variables and depending on how you declare the variable and where you declare the variable will determine how many idiosyncrasies, if you will, you’ll find where the code just doesn’t run right. You get some really weird bugs. This helps with that for certain.
|
| Danny Ryan: | What else? What are other… Anything else that we’ve missed so far?
|
| Matthew Chestnut: | Let’s just talk about this. I think we’ve talked about this in the past, Danny, it’s where… what do I expect as a new person on a project? What do I expect to be given to help smooth the transition? I come from an application development background where we had a standard set of applications that we sold for 10, 13 years. We got accustomed to when we’re onboarding a new developer, these are the X number of steps you had to do. In this example, just like any other example, we had a series of steps that we had to do that may not have been all fully documented simply because it evolves. As the product evolves or as a new project evolves, sometimes all the steps aren’t there.
|
| So one of the things that I’ve learned to do is we use OneNote. We use Microsoft 365 in our sharing of internal information. We just come up with a run book on our own. I’m working with grant Lewis, who I’ve worked with in the past. We probably worked together for the last nine months, it seems, on various projects. We’re sharing notes about, this is what I had to do to get this particular component to run. It’s that developer run book if you will, so that if you are onboarding a new developer and you want to give the developer the best opportunity to get productive quickly, we follow these instructions just to make it easier to get started.
| |
| Danny Ryan: | It’s interesting you say that because we’re like… Austin and I have what we call, what? A marketing playbook. I’m pulling you into the conversation here. It has similar purpose as well, so it basically get can get somebody up and running on what we’re doing within marketing.
|
| Matthew Chestnut: | At ThreeWill we have sustainment projects. You know that’s one of the offerings we have. In sustainment, sometimes the original person who wrote the application may not be available because they’re on another project. So we have to get another person up and running pretty quickly. We use this concept in our sustainment practice to make certain that anyone could hit the ground running with a given application and be productive.
|
| Danny Ryan: | So how is this, and I know it’s earlier on in the project, but I imagine this is probably going to impact how you look at… when you go back to a more of a standard type of project for us, you’d probably want to look at these different technologies, see how they play into what we’re doing. I imagine there’s going to be some things that you talk with Pete about and with the different folks about, well we should look at this as being that when you’re talking about standards of what we use on projects. I imagine this is going to impact some of that and you’ll have some good takeaways from that.
|
| Matthew Chestnut: | Well this is the third leg of the three legged stool, if you will. React, angular, and now Vue.js Framework. Those are the big players in the market. SharePoint and React are very closely knit with the SharePoint framework, so we’ve got a lot of experience with SharePoint and react. We’ve done a lot of work with angular. Now this I think might be our first Vue project, so definitely we’ll do some lunch-and-learn, some sharing of knowledge once we get some some content under our feet with this particular project. We’ll share it amongst our other developers because that way we can let everyone know. Here I am, I’m a guy that’s done JavaScript for quite some time and all we’re doing is having a different flavor of things that wrap around it. The ultimate thing that gets written from this is JavaScript running in a browser and it’s all HTML and JavaScript. Now how you get there, it’s slightly different, but the result is the same.
|
| Danny Ryan: | Awesome. How are things progressing on the project? Are things coming up, coming together? I know we had some aggressive schedules and deadlines and things. Does it feel like you’re progressing like you’d like to or?
|
| Matthew Chestnut: | You always feel ignorant at the beginning of the project when you never used the technology before.
|
| Danny Ryan: | Right.
|
| Matthew Chestnut: | You say it should be easier than this, but quite frankly it has progressed very well. A lot of this information about these frameworks is readily available. Knowing where to look is a help and the challenge sometimes is that it changes so quickly. You have to be cognizant of the version of the thing you are working on because sometimes version one is vastly different than version two and you got to be careful to be looking at the proper version of the information so that you’re getting the right information. But, it’s going quite well.
|
| Danny Ryan: | Oh, awesome. Awesome. Anything else that you’ve picked up from this project that you’d like to share?
|
| Matthew Chestnut: | Well, I just want to say I hope the next time I talk to you I’ll have even more buzzwords to share and we’ll have some more success stories to share with you as well.
|
| Danny Ryan: | I would love that too, especially as you look at next quarter… It’s be early, yeah, I guess at the end of this year, so you should probably have an update.
|
| Matthew Chestnut: | It’ll be a nice Christmas present for you.
|
| Danny Ryan: | I would love to do that. I’d love to do talk about what happened on the project and find out from you. Also just sort of one of the things I love about these projects is it’s pushing us in a certain area and what are we taking away from it. I love how much sharing goes on inside of ThreeWill of what you’ve learned, sharing it with other people and we’re all learning together.
|
| Thank you for taking the time to put together some notes on this and sharing what you’re up to. I know you’re busy. We’re exciting about seeing the project progressing and really appreciate you leading up the project for us and all that you’re doing. Thank you so much, Matt.
| |
| Matthew Chestnut: | You’re welcome. It’s all about keeping the customer happy and delivering on time. So if we can do those two things, we’ll be successful.
|
| Danny Ryan: | Awesome. Thank you everybody for listening and have a wonderful day. Thank you. Bye bye.
|
| Thank you for listening to the Work Together Better podcast. We’re available on SoundCloud, iTunes, Stitcher, and Tune In. If you’re looking for a partner to help you craft a modern digital workplace on the Microsoft cloud, please come by and see us at threewill.com. That’s the number three spelled out, W-I-L-L.com. Thank you and have a great day.
|
