FelipeEmos
FelipeEmos
Explore posts from servers
SSolidJSTTCTheo's Typesafe Cult
PostsComments
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
@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
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
He did talk about Ionic after all hahaha https://youtu.be/tTGWfXPKxf4
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
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
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
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 )
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
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
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
Yeah, that's a great point
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
yes! hahaha
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
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 🙃
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
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
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
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 Mac
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
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: 
$ npm install -g @ionic/cli
$ ionic start myApp tabs --type react

$ ionic serve █
$ npm install -g @ionic/cli
$ ionic start myApp tabs --type react

$ ionic serve █
Or use Capacitor starter: https://capacitorjs.com/docs/getting-started 
$ npm init @capacitor/app
$ npm init @capacitor/app
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"
31 replies
TTCTheo's Typesafe Cult
Created by FelipeEmos on 8/9/2023 in #questions
Why Theo doesn't talk about Ionic/CapacitorJS? [Capacitor vs React Native]
@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 )
31 replies
TTCTheo's Typesafe Cult
Created by Gabe! on 7/11/2023 in #questions
Recommendations for a t3 starter pack equivalent for an ionic app?
Hi, @pixelpax, I am also very akin to t3 and I'm leading a project using Ionic / Capacitor JS In the end we decided to move out of the NextJS ecosystem because it was not helping. For example Ionic's navigation uses React Router, which is not how NextJS deal with routes. So it was super worth it to simply use a VITE React project and bootstrap our needed dependencies, like React Router. You gotta ask yourself if you really need all those SSR bloat from NextJS if you are building a Mobile App, which is probably a simple SPA We ended up with a Monorepo with 2 separate projects, a server and a client with all the good stuff, tRPC and Prisma. Things are working out great! Much better than a React Native + React Native Web stack, in my opinion. You could try using a template similiar to this one if you want a similar setup: https://github.com/kuubson/react-vite-trpc Regarding AUTH, there's nothing as easy as a NextAuth setup, but unfortunatelly that won't work here. NextAuth has given me headaches to trying to make it work outside of Next and, because the Capacitor / Ionic nature of having to be deployed in a different URL when you build the actual Native APP, you will have to do some custom CORS setup Otherwise the server won't trust the client's Native App. So.... I suggest going for a more hands on solution, which will take you a little more time to setup but will definitely help you in the long run We went with Lucia Auth and we're having a great time: https://lucia-auth.com/
2 replies
TTCTheo's Typesafe Cult
Created by Kirik on 8/5/2023 in #questions
'id' does not exist in type 'UseTRPCMutationOptions<{ id: string; title?: string | undefined; ...
If you are using ESLint, I also recommend turning on the following rule: 
"react-hooks/rules-of-hooks": "error",
"react-hooks/rules-of-hooks": "error",
It will show you an error if you try to use hooks in a scatchy way... There are some ways of using hooks that this rule is not capable of saying it's valid, but of course if this rule says it's good and doesn't throw you an error... then you are for sure in a nice spot 🙂
7 replies
TTCTheo's Typesafe Cult
Created by Kirik on 8/5/2023 in #questions
'id' does not exist in type 'UseTRPCMutationOptions<{ id: string; title?: string | undefined; ...
You are welcome.... But @instancer_kirik , be mindful this is not a Javascript thing... this is a React thing. If you are in the mood, I highly suggest you take a time to study how hooks work under the hood. Hooks shouldn't work, that's the catch. React deals with them in a very special way and that's why we always need to name our hooks starting with use, like useQuests could be your custom hook. Hooks have the power to persist data across renders.... that's not something common to functions, that's something common to classes and objects. So in order for hooks to do what they do it's mandatory to call them always in the same order, usually on the top of your component ( which guarantees that ), but never on a conditional basis ( like inside a if or a for loop )
7 replies
TTCTheo's Typesafe Cult
Created by Kirik on 8/5/2023 in #questions
'id' does not exist in type 'UseTRPCMutationOptions<{ id: string; title?: string | undefined; ...
Hi, friend I don't know if this will fix you problema but what you are doing here is very problematic: 
const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {
    
    try {
       // DOWN HERE
       api.quests.update.useMutation({
        id: quest.quest.id, // ISSUE HERE
        title: data.title,
        rating: data.rating,
        rating_denominator: data.rating_denominator,
        reward_xp: data.reward_xp,
        goal: data.goal,
        target: data.target,});
      onClose();
    } catch (error) {
      setUpdateError('Failed to update quest');
    }
  };
const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {
    
    try {
       // DOWN HERE
       api.quests.update.useMutation({
        id: quest.quest.id, // ISSUE HERE
        title: data.title,
        rating: data.rating,
        rating_denominator: data.rating_denominator,
        reward_xp: data.reward_xp,
        goal: data.goal,
        target: data.target,});
      onClose();
    } catch (error) {
      setUpdateError('Failed to update quest');
    }
  };
Hooks should be called in a predictable order and in the main flow of your component function. In other words, do not call a hook inside a function, inside a if statement or inside a for statement.. You gotta try something like the following: 
const { mutateAsync } = api.quests.update.useMutation();

const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {
    
    try {
        await mutateAsync({
        id: quest.quest.id, // ISSUE HERE
        title: data.title,
        rating: data.rating,
        rating_denominator: data.rating_denominator,
        reward_xp: data.reward_xp,
        goal: data.goal,
        target: data.target,});
      onClose();
    } catch (error) {
      setUpdateError('Failed to update quest');
    }
  };
const { mutateAsync } = api.quests.update.useMutation();

const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {
    
    try {
        await mutateAsync({
        id: quest.quest.id, // ISSUE HERE
        title: data.title,
        rating: data.rating,
        rating_denominator: data.rating_denominator,
        reward_xp: data.reward_xp,
        goal: data.goal,
        target: data.target,});
      onClose();
    } catch (error) {
      setUpdateError('Failed to update quest');
    }
  };
7 replies