VoV 034: Mike Hartington & Michael Tintiuc : "Ionic and Vue"

Panel: Charles Max WoodChris FritzDivya SasidharanJoe EamesJohn Papa Special Guest: Mike Hartington and Michael Tintiuc In this episode, the panel talks with Mike and Michael who are developers of Ionic. The panel and the guests talk about the ins-and-outs of the framework and talk about the pros and cons, too. Listen to today’s episode to hear how they discuss how Ionic is compatible with Vue and Angular. Finally, they talk about various topics, such as Cordova and Capacitor. Show Topics: 1:19 – Mike H. gives his background. He uses JavaScript every day. 1:30 – Michael T. gives his background. 1:53 – Chuck: Yes, today we are talking about Ionic. Why are we talking about that on a Vue Podcast? 2:08 – Let’s talk about what Ionic is first? 2:16 – Guest gives us the definition / background of what IONIC is. 2:32 – Guest: We have been tied to Angular (back in the day), which were Ember and jQuery bindings. We have come a far way. (He talks about web components.) Guest: We spent a year diving into web components and interweaving that with Angular. Now we are exploring other framework options. Now we are looking at Ionic with Vue. 3:34 – Chuck: I have played with Ionic, and it’s fairly to use. It’s exciting to see it come this way. I’m curious what does that look like b/c Angular and Vue aren’t the same. 4:10 – Guest explains and answers Chuck’s question. 4:50 – Chuck: Is it like using...under the hood? 4:58 – Guest: No. (He goes into detail.) 5:08 – I didn’t know that Stencil was built by that team. 5:19 – Guest: We built a 2nd project. 5:28 – Guest: There are 24 hours in a day. 5:39 – Panel: How is Ionic different than other options? 5:59 – Guest: It’s comparable to Frameworks 7. The components that you generate are all web0based. The component that you put in is the same for the web or Android. You can have 100% code reuse. 6:35 – Panel: It’s actual CSS? 6:41 – Guest: It’s full-blown CSS. If you wanted to do CSS animations then whatever the browser can support. 6:56 – Panel: Advantages or disadvantages? 7:04 – Guest: It’s easier to maintain. If you are making the next Photo Shop...(super heavy graphics) maybe web and web APIs aren’t the right way to go. 8:23 – You have access to less intense stuff? 8:34 – Guest: Yes. 8:39 – Question. 8:46 – Guest: 2 different approaches to this. 1 approach is CORDOVA and the other is CAPACITOR. 9:42 – Anything that has been built with Ionic? 9:47 – Guest: App called Untapped? Or the fitness app, SWORKIT! MarketWatch is another one. We have a whole showcase page that you can check out. 10:57 – Few apps out there that use Ionic for everything. 11:06 – Panel: I have done work with Ionic in the past. I found a sweet spot for business apps. There are things behind enterprise walls that customers can use but necessarily others. We have decided to go native and found that Ionic wasn’t a good fit. How do you feel? 11:51 – Guest: We do hear that a lot. People want to make a quick app and then... 12:20 – Panel: We chose Ionic in this project b/c we had to get it out in less than 6 weeks and the team knew JavaScript. Nobody knew Ionic besides me. After that, nothing broke and that’s a huge praise. 12:55 – Guest: I will take that good praise. 13:01 – Panel: How is it used with Vue? 13:07 – Guest: The Vue work that we’ve been doing...here are the core components. Recently we have been working with Michael and integration. They have been working on opensource. 13:45 – Michael: It was one of the first apps in Beta and Vue. It all started out as a passionate project for the opensource initiative. We wanted to build something new and use the emerging Vue.js. At the time I had no idea. It sounded cool, though, and at the time I wrote a small CUI program. I decided to make an app out of that. I wanted to meet the clients’ needs and the new tech. I went online and I saw some tutorials and I thought they had figured it out. I thought we were screwed but I guess not. Most of the things are out of the box. But the problem is that the routing was sketchy and it wouldn’t update the URL and it had to be delegated to the framework. The app is called BEEP. I cannot disclose what it means. Joking. I added to the state that everything... I tore through the screen to figure out how it works. Then it clicked. You have to extend the Vue’s official router...and then you’re done. You do a MPM install and then you call a couple of APIs and then you are done. Not even a single line of code. You have Ionic’s out of the box animations, and in our app we have a dancing... You spend a week and you’re done so I won’t use anything else. 17:35 – Panel: That’s an impressive turnaround! 17:42 – Panel: It just goes to show you that the code in Vue is so approachable to anyone. If you know a little bit of JavaScript then you know what is kind of going on. It’s pretty clean. Especially the Vue Router. 18:11 – Panel: Vue Core – some parts that can be hairy. 18:43 – We are component authors. We just need to know here is a component and here are some methods that it needs to know. 19:04 – Oh yeah, totally – I was talking more about... 19:14 – That’s what I thought for those 2 weeks cause I was looking at... 19:24 – Chuck: How do you get the Vue stuff in that and not the Angular? 19:41 – Guest answers the question. 20:20 – Panel: What was the hardest part to integrate? 20:28 – Michael: I wrote my own router. It was too much for me to write. I thought it was going to take me ages. So it took the longest to come to the idea to extending Vue’s router. I thought writing less code is the best. It took me 2 weeks to come to that conclusion. It was related to how... 22:21 – Question. 22:28 – Michael: You can use Vue router like if you used a different package. 22:40 – Panel: It is using the other router history or if you are using Hash API; since it’s all web technology? 23:03 – Guest: People don’t see the URL. 23:10 – We can teach them to pass... 23:25 – Panel: I have been interested in Ionic...when you sprinkle in some native stuff. Local databases. Getting that wasn’t too bad to work. The trick was testing that. 24:04 – Guest: A lot of manual work, unfortunately. It’s a lot of set-up work. You can do test functions but actually have that end-to-end test...can I make sure that is working correctly? A lot of manual testing. There are some cloud base platforms but I haven’t checked them out for an easier way. 25:06 – It was an Ionic issue it was... I think some of the Cloud services to better nowadays. 25:25 – Guest: It was painful to get it setup. Why do I need Clouds? 25:42 – Advertisement – Get A Coder Job! 26:19 – Let’s talk about native features. How does one do that in Vue? 26:29 – Guest talks about Vue, Capacitor, and Cordova. 27:27 – Guest: Let’s talk back to the Beep app. Lots of this stuff is really easy, as Mike was saying. That’s what I like to do – being a both a developer and a library writer. 28:00 – Panel: Imagine Slash from Guns and Roses. 28:14 – Chuck: They get this idea that it’s Java so I can share. Chuck asks a question. 28:30 – Guest: All of it. You might want to change some of the UIs. If it looks good on mobile then you can adapt that as the main app and swap that out for the traditional designs and something else. 29:03 – Panel: I can’t just drop in the same dibs for my styles on my desktop and magically look like a mobile app. 29:23 – Guest: That’s where you are wrong. Ionic does this really well. We have painstakingly made this be a thing. The guest talks about screen width, layouts, and other topics. 30:10 – Guest: It’s the same code. 30:18 – Panelist gives a hypothetical situation for the guests. 30:36 – Guest answers the question. Guest: You will have to refactor from desktop to mobile. 31:54 – Chuck. 32:10 – Michael: It’s about continuity. 32:39 – Panel: Building a Vue app we can use the Ionic Vue project to reuse that work that you did to get that back button working. 32:59 – Michael: That’s the whole point. So you guys don’t even have to think about it. So you don’t have to fiddle around with bugs. 33:17 – Panelist. 33:22 – Michael. 33:33 – Mike: Eventually we want to do a full fledge Vue project they just install Ionic Vue and it will integrate the package. 33:55 – Michael: You use the UPI and that’s it. 34:03 – Panel: Beyond the hardcore 3D sky room games are there any other reasons why I wouldn’t want to use Ionic? 34:30 – Mike: I can’t think of anything. More important question is what is your team’s experience? I wouldn’t go to a bunch of C+ devs and say: Here ya go! I wouldn’t do that. You have to figure out the team that knows Java an