Bringing Ionic (and Web Components) to React

Hey, everyone. My name is Mike Ardington. 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 face along the way. If you have any questions, feel free to reach out afterwards. For those who don't know, Ionic is a framework for building cross-platform apps using HTML, CSS, and JavaScript. You write your app using our components, and you get a native iOS, native Android, or desktop app or progressive web app, all from the same code base. Roughly 20% of all the apps in the app stores are using Ionic to some degree. 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. Now a little history lesson, Ionic had been historically tied to one specific framework from its very beginning. And as frameworks kind of come and go, and JavaScript as an ecosystem matures, we constantly heard from our developers that they wanted to use more than just that one framework. And to be honest, we were interested in seeing, can we bring Ionic to other frameworks as well? But we constantly were afraid of having to rewrite our components to yet another framework that could or could not last for the next five years. Now fast forward to last year in 2019, Ionic had had years of stable releases. And JavaScript as an ecosystem had matured to a point where there was a lot less turn through different frameworks and different standards. And we were feeling pretty ambitious that we could create another binding for a different framework and support something more than just what we were historically tied to. So in about six months time, we ended up creating an entire collection of React components based on our original Ionic component set. These are all components that you can import and add into your standard React project and followed React best practices internally for how to manage component state and provide all the different interactions that people would expect. More interestingly, we were able to integrate with React Router and start to create a higher order component that could create animations and transitions automatically for you without developers having to wire that up themselves. Now that leads us to Ionic React, which has hit its stable release a few months ago, but brings Ionic to even more developers out there. So let's take a look at what Ionic React looks like. Here in my editor, I just have a standard React project, and I'm going to open up my root app component. Now we have a collection of different components that we are importing from Ionic React, as well as a wrapper for React Router and our various components that we can route to. We also include the core Ionic CSS, as well as our own custom theme in variables.css. Now further down in our app, we have our core app component with a IonRouterOutlet, which acts as a placeholder for all of our different routes. For example, we can route to tab one, tab two, tab two slash detail, as well as tab three. We can wire up how we route to those components by looking at the different tab buttons inside of our app. So let's open up one of the components for this tab interface. 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 loaded 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. Well, that's a lot of knowledge in just 20 or 28 minutes it was. Four great topics. I would, yeah, I would like to invite all the lightning talk speakers with me on the stage to do the last round of Q&A of the day. Hey everyone. Hello. Hey there. Hey. Hello. 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 do that semantically within a button. Correct. So in that case, you'll want to make an accessible div. Well, you should want to at least. Perhaps. And can I say, if you don't, Jen 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 to. Yeah, yeah. Another question, but just for you a nice tap on the shoulder from Martin van Houten. Not really a question, just want to say Mesh 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 Hein, we are using it. And I have to say it's been a pleasure. So thanks a lot. Oh, I can come visit you. Yeah, it would be a pleasure. 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 where 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, either 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. OK, thanks. Thanks guys and my lady for these great talks. For the people watching, they're 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. Bye bye.