Ionic is a framework for building fast and powerful mobile, desktop, and web apps with web technology. Traditionally, Ionic has been built on top of one framework: Angular. But recently, Ionic added support for React, and aims to bring the same great development experience to the React ecosystem. In this talk, we’ll look at how an Ionic React app works and how this changes the React ecosystem (surprise, it's because of Web Components).
Bringing Ionic (and Web Components) to React
AI Generated Video Summary
1. Introduction to Ionic React
Hey, everyone. My name is Mike Artington. I'm a developer at Ionic, and I want to talk to you about bringing Ionic over to React, and then go over some of the fun challenges that we faced along the way. If you have any questions, feel free to reach out afterwards.
Now, that is kind of a vanity metric. Doesn't really mean anything. Just that people are using Ionic and having a lot of success. As well as being used inside of the app stores, there's millions of developers all around the world using Ionic today and being very successful.
2. Ionic React Navigation and Deployment
In tabs two, we have a standard React component with an Ion button for routing. It allows for independent navigation and stack maintenance. Another example is linear navigation, where one place loads routes. A music player app demonstrates loading songs and albums from Apple Music, with search functionality. Ionic and React provide simplicity and high-quality components. You can ship as a progressive web app and add native projects for iOS or Android. Reuse web skills and write for any platform.
Here in tabs two, we have yet another standard React component. If you've been using React for any time, this should feel pretty familiar to you. One piece that does stand out is this Ion button on line 28. Here, we're wiring up a route link using the router link property. In our app, we can navigate to the tab two by clicking the tab two button, and then click the go to detail page to navigate to detail. What's interesting here is that tab two is now independent from all the other individual tabs, creating a stack navigation that can be maintained through different tab changes.
In another example, we have what we call linear navigation, where there is one place for your app to load routes. Here, we have a music player app that is loading songs and albums off of Apple Music. And we can even search against Apple Music using our search page component and typing in a query. Now, this app is an example of a Progressive Web App deployed to a browser. If we wanted a native iOS app, the same code base can be deployed to a native iOS project and load it up and run on your phone or simulator. If this sounds interesting to you and you want to try it out yourself, you can simply install the Ionic CLI using NPM or Yarn and then run Ionic start to create your app. Our CLI will prompt you for an app name and then your framework of choice as well as a starter template to get you going.
Wrapping up, Ionic and React make a great pair together. You get the simplicity of building apps with React, plus the high quality components that you get from Ionic. You can ship as a progressive web app and then when you want to target iOS or Android, you can add those native projects as you need them. This really gives you the ability to reuse your existing web skills and learn once to write for any platform. Thank you.
Q&A Session on Mux and React Native Web
That's a lot of knowledge in just 20 or 28 minutes. Let's move on to the Q&A session. The first question is for Matt and Claire. What market are you targeting, and why would someone use Mux instead of Twitch or YouTube? They explain that Mux is a developer-facing product, while Twitch and YouTube are more consumer-facing. If you're a streamer, use Twitch or YouTube. If you're building a platform, Mux is a better fit. Next, Jen answers a question about using a div as a button in the React Native web team. She explains that putting HTML inside a button is not semantic, so a div can be used to wrap the content and make it an accessible button. It's important to consider accessibility when making these decisions.
Well, that's a lot of knowledge in just 20 or 28 minutes it was. Four great topics.
I would like to invite all the lightning talk speakers with me on the stage to do the last round of Q and A of the day.
Hey, everyone. Hello. Hey. Good morning, evening, night, whatever it is for you. Yeah, I'm going to go straight into the questions. I'm going to start with the first question for Matt and Claire. What market are you targeting, and why would someone use Mux instead of Twitch or YouTube? Yeah, it's a valid question. We're a developer-facing product, so we're purely just APIs for developers to build into their platform, as opposed to Twitch and YouTube, which are much more consumer-facing products. So if you're a streamer just looking to go live, without writing any code whatsoever, those are great platforms you should probably use them. If you're trying to build a platform, we're probably a better fit there. Okay, so it's more about the target audience, I guess, and that you have more control over what you're doing. Yeah, I would think about it a little bit like... A bad analogy that I mentioned in Slack is, they're more like the PayPal or Venmo, we're more the Stripe, if you're thinking about it in terms of payment APIs. Okay, thank you.
Next question is for Jen. What are the reasons why someone like the React Native web team would want to use a div as a button? The reason is that putting HTML inside of a button is not actually semantic HTML. So they may want to wrap that content, for instance, a card or a block of an image and text into a div and make that an accessible button instead of putting a button around it. Yeah. So if you have a completely clickable card with different elements inside it, you can't do that semantically within a button. Correct. So in that case, you'll want to make an accessible div. But you should want to at least. Perhaps. I said, if you don't, Jan is going to come and get you. I will very kindly tap you on the shoulder and make suggestions. How about that? Yeah, but tap doesn't work. Then I might have it.
Compliments and Farewell
Martin Van Houten gives a compliment about Match. It's always nice to hear positive feedback. Ionic supports native apps, similar to React Native, but also allows for a mix of web UI and custom native views. The formal part is now over, and the speaker thanks the audience for joining.
Yeah, yeah. Not a question, but just for you, a nice tap on the shoulder from Martin Van Houten. Not really a question. I just wanted to say, match looks awesome. Well, that's always nice to hear. Thank you very much. I hope that after you try it, you'll feel the same and not hate me. Well, actually, at the company I work for, Albert Heijn, we are using it. And I have to say it's been a pleasure, so thanks a lot.
Oh, you're my neighbor. I can come visit you. That'd be nice. Mike, does Ionic support native apps, similar to React Native? Or is it like a Cordova standard app where it's a web UI instead of a native app? So it's kind of a mix of both. The majority of the UI is displayed in a web view, but you can integrate with custom native views or activities on Android and kind of mix which one gets displayed in the web view or the native view or even just overlay the native view on top of the web view. So you get kind of the best of both worlds. That feels powerful.
Okay, thanks, guys, and my lady, for these great talks. For the people watching, they are also going to be in the Zoom rooms for questions, but the formal part is now over. I'm going to say goodbye to you for a little bit. So thanks for joining. Thank you. Thank you.