Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
In my startup we've just went trough a rewrite or our product,
going from an EXPO React Native + NextJS solution to an Ionic / CapacitorJS with React VITE solution.
Honestly, we couldn't have made a better move. We are moving so much faster and we're having no problems at all with code sharing.
It's a multiplatform app by nature, so in February this year I picked for us the Create T3 Turbo template (https://github.com/t3-oss/create-t3-turbo) with a React Native Web strategy to share as much code as possible....
In the end this wasn't the right call. There are libs like Solito that can help with code sharing between the React Native and the React world but honestly it's a pain to deal with the unpredictability of making something work in both infrastructures. Sure you could still share 80% of your code and make it work instantly on both, but those 20% are no small deal...
Now that we moved to Ionic/Capacitor we are probably sharing something crazy like 98% of the codebase, cus it's all WebView wizardry.
When we made that move I was ready to make some sacrifices in the name of Code Sharing... after all React Native is awesome, right? We'd stop using the industry standard and sure there would be consequences, right?
OMG what a good surprise to see how seamless is the app experience in the Ionic ecosystem. CapacitorJS is now in a super mature state and I'm sure there is nothing you can do in React Native you can't do in Capacitor. I invite anyone to do the research on your own or be welcome to start a thread in the comments about this... you can do native bridges, access native capabilities with the plugins (like Camera, Geolocalization...)
It's crazy
In a blind test I can't tell if an app was made in Ionic, that's how good it is... for sure YOU have already used an app made with Ionic and didn't even realize.
So here lies the question.... Why Theo doesn't talk about Ionic?
Web DEVs are cheaper, DX is easier, UX is the same, code sharing is insane
18 Replies
Curious about the initial setup experience? RN was just too much for us (Expo vs without, TS vs JS, platforms). It was just to create a prototype, so we ended up using Flutter. Not an awesome experience, but straightforward docs. Also PWA are great for some cases
@100xdev , I have some experience in Flutter and in my opinion Flutter's initial setup is pretty much unbeatable, it's very very good and easy.
I've considered Flutter for our application but it was a
no-go for some reasons, specially how poorly it performs on the Web.
Answering your question, I think the initial setup of Ionic / Capacitor is pretty ok...
The thing with these JS Frameworks initial configurations, be it React Native, Capacitor or another thing is that it feels almost mandatory to have some familiarity with the tools 😐️ ..... there are way too many options to choose from.... and the tooling is not as beginner friendly as Flutter's
Sometimes we JS devs take for granted how hard it is to properly configure a Node project.
It's like going to a store of a very specific niche, like carpentry, electronics, and not knowing the specific names of the components you need for your project... senior devs have already been to that store so many times that they forgot how disorienting it was for the first time....
Ok, enought rant hahaha
Setup Tips
- Always pick Typescript ... always
- Understand the differences between a Framework that does SSR (Server Side Rendering) , like NextJS, and a simpler alternative (Like VITE) that bundles everything to be rendered on the client side.... I picked VITE cus Mobile Apps usually are more like an SPA
- Unlike Flutter, that has it's own ecosystem for almost everything, research your specific needs to pick good libraries... usually the docs of the current libraries you are using have some recommendations ( like Ionic is meant to be used with React Router, Zod has a section of libraries that have good integrations with it for Form Validation, for example )
Initial Setup
If you just want a plain App up and running you can use the starter instructions from the docs:
https://ionicframework.com/docs/react
And with just these you'll have a working app:
Or use Capacitor starter:
https://capacitorjs.com/docs/getting-started
You could also add Ionic and Capacitor to an existing project that is closer to what you want. That's what I did and it's not hard. I picked a project that already had a tRPC, client and server setup and just followed the docs section on "Adding Capacitor to your Web App" and Ionic's "Adding To An Existing React App"
One last thing, @100xdev , PWA's come for free in a Capacitor setup... so nice
You can also with little effort generate an Electron App for Linux, Windows or MacThanks for the insights! That's really useful. I haven't considered it before. I had seen some native vs RN vs Flutter vs Ionic comparisons that claimed Ionic's mobile perf was less than ideal, so I just didn't look into it enough
but being able to just add it into your existing React project is crazy
Especially when you already have a lot of UI components and don't want to rewrite them for RN, Flutter, SwiftUI, or whatever
Yeah, I've seen some comparisons too and I don't understand why Capacitor sometimes get's a bad rap or isn't mentioned at all
Maybe a couple of years ago it may have been a riskier bet but now it's been very well battletested, specially by web devs that aren't React devs. If you want to make your Capacitor app in Vue, Angular, Svelte, you can...
So it's an honest question 😅
Why Theo doesn't talk about Ionic? hahaha
One small comment about this "amazing possibility" of turning your website into an App in one afternoon with CapacitorJS
Yes it is possible, but unless your site was very well crafted for a mobile app like experience, prepare to face some rough edges. That's not an Ionic/Capacitor's fault, it's simply the fact that Mobile Apps and Websites are different. You could have an app that looks like a website, but that's not what people are expecting. Mobile App's navigation are usually different / more robust, the Design is usually different...
Maybe this even explains some of the bad rap about this Tech, it can be used in a lazy way and you'll get subpar results.
If the product was conceived as a Multiplatform Mobile App from day Zero, that's a whole another story... you'll get better results for sure.
Although "turn your website into an app" is an awesome selling point and it's TRUE, it can't be oversold / exaggerated 🙃
Yes it’s much easier to make this mistake here vs with SwiftUI for example. I’ve used Target’s app not knowing it’s built in Ionic
yes! hahaha
Also, the job market and popularity could be a reason why people like Theo don’t talk about it. I like Svelte & SvelteKit, but if someone asks for my advice, it’s safer to recommend React & Next.js, which are more likely to help the person land a job
Yeah, that's a great point
But he's also not afraid of pushing forward some more controversial opinions when he believes they are better.
I'm super grateful to him because it happened to me many times that I listened to him once and thought: "This guy is crazy" .... and after experimentation I was like "He is not so crazy after all" hahaha
Sometimes Theo is not talking to the guy who's studying to get a job, sometimes he's talking to Tech Leads or people who run startups and maybe are willing to take some risks... ( although I think the risks involved in a tech like Capacitor in 2023 are pretty negligible )
Totally agree! Exactly my thoughts. I avoided tRPC, then avoided Tailwind, and once I tried them, I regretted not listening to Theo and at least giving them a try
And yes, I see that sometimes, especially with less risky decisions like logging tools and auth, and I don't see him talking about anything outside the React world. I wish he made some content on other cool tech like this and Svelte
genuine question, what's the point of having an exact clone of your desktop site as a native app vs a mobile site?
Thats a great question, @davey_d !
An installed app has some privileges that websites don't have
Like access to the filesystem, easier camera access, and also It's a performance thing
If you research what facebook went trough it is very interesting. They were trying to make a great UX only as a mobile site in the beginning of the 2010s
It was Not as good as the native apps Apple was delivering with the iPhone revolution, so they were forced to develop an app and deal with those aditional codebases (later Android too)
Thats the same dilema you are pointing out here. Should your product be an App or a Mobile Site? It depends... depends a lot
A product like facebook is much better as an app, it gives you more convenience, performance and UX
But a simple service like an ecommerce shouldnt be an app (as a rule of thumb)
People dont want to install another app in their phones.... and the tecnhical advantages that I mentioned will make little to no difference
a lot of people associate ionic and capacitor with angular and angular isn't talked about much around here (but this doesn't answer why it might not be a topic with theo).. but IMO its one of the most underrated pieces of tech out there.. although to me, it feels weird to use react with ionic knowing react native exists esp for apps. I'd only want to use ionic/capacitor if I was working with devs who were familiar with angular
also, lets not forget he has a stake in many things in the react/next/vercel/react native land...
That’s perfectly fine, and of course Ionic isn’t always the right choice. I find it kinda cool but still think RN is much better (at least in terms of support).
Theo talks about RN being the best, so I’d love to hear his take on why it’s better than Ionic. That still counts as “talking about it”
He did talk about Ionic after all hahaha
https://youtu.be/tTGWfXPKxf4
Theo - t3․gg
YouTube
My Final Flutter Video
I'm genuinely so tired of Flutter. Every time it comes up, I feel like I'm going insane. I'm still waiting to have a good experience in a Flutter app. Until then, I'll be sticking with React Native.
Please be kind in the comments. I'm sorry for my harshness in this video, I just want to be done once and for all.
ALL MY VIDEOS ARE POSTED EARLY ...
Great writeup!
Honestly, I think SSR is way oversold in the tech influencer space. CSR is perfectly adequate, far simpler, and cheaper for most use cases. Depends what you're doing obviously...if you're creating a content heavy site then SSR may be more beneficial, but then I'd question why not go with something like Astro.
The desktop replacement apps, CSR all the way.
Angular is actually getting to a decent place. Signals are ironing out a lot of the issues I had with it. Not sure what the state of AnalogJS is these days, but that was my last pain point: webpack sucks. If it works well with Vite nowadays then I'd honestly consider Angular again for a heavyweight application of moderate to large scale.
Working with Vue now and it's currently my go to, as it has IMO the best reactivity primitives of any framework out there (basically SolidJS signals with the option of having deeply reactive proxies). Creating reactive and performant applications is a breeze. The only pain point I'm running into is that I'm actually missing Angular's modules. Having the ability to encapsulate module internals was actually really useful in hindsight
But now I'm shifting over to NX and am using index.ts in the root of my libs to encapsulate internals and declare a public api for each lib
@theexodu5 , I don't know if you saw Theo's inverview with Evan You ( creator of Vue and Vite )
You'll probably like it very much, it's interesting to see 2 very intelligent people clashing about SSR being the best default paradigm. Evan You is not convinced that should be the case and Theo seems pro React Server Components to a far extent.
I honestly don't know who has the best take on the subject, I guess the test of time will show
Here, have fun:
https://www.youtube.com/live/q85fNQA071k?feature=share
Theo - t3․gg
YouTube
Vite & Vue with Evan You (He Made Both)
RENDERATL IS GONNA BE DOPE USE MY LINK FOR 10% OFF https://renderatl.com/theoCHECK OUT EVAN ON TWITTER https://twitter.com/youyuxiALL MY VIDEOS ARE POSTED EA...
(Solid also has deeply reactive proxies)
Ahh my mistake! I do plan on trying solid soonish, just haven’t had a chance to do a side project yet. Just read the docs from a hobbyist perspective.