search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.52k stars 2.87k forks source link

Implement TypeScript in New Expensify #16665

Closed roryabraham closed 1 month ago

roryabraham commented 1 year ago

Proposal: Utilize TypeScript to reduce bugs in NewDot

đź“„ Link to the design doc

docs.google.com/document/d/1LNcgYeYyovQ88gNjLIgBqBReLtbLAbxeAbna9QKxeAQ/edit#

🖇️ Other links

Strategy

Our strategic roadmap for the next couple years is Reunification – moving all of our existing users from OldDot to NewDot, and it’s going to look like a completely new product. During this transition period, there’s an increased risk for churn, and stability of the platform is more important than ever. Any lines of defense between our customers and bad code will pay dividends during any tumultuous times to come.

Problem

JavaScript has been very popular for front-end development for a long time, and over the years it has evolved with new developer-friendly features that make it easier to GSD. Overall, it’s pretty great. However, it is still plagued by one fundamental problem: runtime errors stemming from incorrect types. This common class of problem leads to bugs, ranging in severity from showing weird things on the screen to crashing the whole app.

While there are many bugs that can be caused by incorrect types, the most common example of a runtime type safety error is Cannot access property X of undefined. A quick GitHub search reveals that over the last couple years we have introduced hundreds of this type of bug into the NewDot codebase, each of them stemming from this same root cause – attempting to access a property on a variable whose value is undefined. When this occurs, the app crashes.

Solution

Let's commit to adopting TypeScript in New Expensify, an awesome superset of JavaScript that gives us the benefits of using a compiled language like C++! That way, type errors can be caught at compile-time instead of run-time, and a whole class of common bugs will be eliminated from our product. #BugZero here we come.

Furthermore, let’s engage the near-limitless capacity of our open-source community to do it in parallel to our existing roadmap, without pausing any other feature development in the meantime.

Tasks

MelvinBot commented 1 year ago

Triggered auto assignment to @puneetlath (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

roryabraham commented 1 year ago

Here's a high-level overview of what I'm imagining for the rollout plan:

flowchart LR
    A(Setup TypeScript for E/App source code)
    X(Setup TypeScript for GitHub Actions)
    Y(Setup TypeScript for Jest)

    B(Laying Foundation)
    C(Materials and Plumbing)
    D(Construction)
    E(Finishings)

    F(Implement TypeScript in GitHub Actions)
    G(Implement TypeScript for Jest tests)

    subgraph Main App
        A --> B --> C --> D --> E
    end

    subgraph GitHub Actions
        direction LR
        X --> F
    end

    subgraph Jest
        Y ----> G
        C --> G
    end

    H(Setup TypeScript in react-native-onyx)
    I(Implement TypeScript in react-native-onyx)

    subgraph react-native-onyx
        direction LR
        H --> I
    end

Most of this is pretty self-explanatory, but I'll go into some extra detail for the rollout plan for the main source code.

We can use deprank to determine the number of dependencies and dependents on a file-by-file basis.

roryabraham commented 1 year ago

Posted a second predesign here yesterday

roryabraham commented 1 year ago

Started working on a doc here: https://docs.google.com/document/d/1LNcgYeYyovQ88gNjLIgBqBReLtbLAbxeAbna9QKxeAQ/edit#

neil-marcellini commented 1 year ago

I'm going to help Rory with this by asking external agencies to collaborate on a pre-design / writing the doc, and then making sure the process is going well.

neil-marcellini commented 1 year ago

I didn't get to this today.

neil-marcellini commented 1 year ago

I posted to the Callstack and Software Mansion Slack channels asking for proposals on how they would plan and implement this project.

https://expensify.slack.com/archives/C03UK30EA1Z/p1684525440666989 https://expensify.slack.com/archives/C04878MDF34/p1684525456740769

melvin-bot[bot] commented 1 year ago

@neil-marcellini, @roryabraham Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

neil-marcellini commented 1 year ago

I got a reply from Callstack and SWM wants a day or two to post something.

neil-marcellini commented 1 year ago

I created #typescript-new-expensify and invited CK and SWM. @hayata-suenaga is helping out now too!

I still need to read through the proposal that software mansion already wrote, and then I’ll let them know that we’re waiting for their joint proposal and ask on an ETA for that. Maybe Hayata could tackle that?

hayata-suenaga commented 1 year ago

@neil-marcellini thank you for adding me to this issue

I thought you asked for proposals separately from Software Mansion and CallStack. Do they know they have to produce a joint proposal?

hayata-suenaga commented 1 year ago

okay CallStack is willing to collaborate

  1. Proposal: We will review the proposal published in March by Fabio and other proposals and comments from contributors to gather the most relevant information and update the proposal and plan in cooperation with SWM

from Tomek

hayata-suenaga commented 1 year ago

and Software Mansion is saying they're already in touch with CallStack

This is our proposal on how to tackle migration, and we are already in touch with Callstack to compile a common one

From Michal

hayata-suenaga commented 1 year ago

@neil-marcellini do you know if we have access to the collaboration channel between CallStack and Software Mansion?

I have no idea how they're communicating with each other, but I think we should have access to their communication channel.

Also, just curious. Why have we decided to use two agencies for the this migration project instead of just one?

hayata-suenaga commented 1 year ago

I just realized we forgot to consider the migration of expensify-commons in this diagram

react-native-onyx has a dependency for expensify-commons so I think we have to migrate this repo first

roryabraham commented 1 year ago

I don't think there were any plans to migrate expensify-common, because:

Anyways, TypeScript can import and use JS-only libs, so we definitely don't have to migrate expensify-common to TypeScript before react-native-onyx or E/App

hayata-suenaga commented 1 year ago

ah we're just using two Str methods inside react-native-onyx we can even remove them and expensify-common dependency during the migration from onyx

hayata-suenaga commented 1 year ago

we're also using only Str util class and ExpensiMark in App. we can definitely remove expensify-common them down the line from App, too.

there might be extra setup necessary to use a library that doesn't have a type declarations though. I guess vendors will gonna figure out that one for us (but it might be just simpler to copy Str and ExpensiMark out of expensify-common to App although this might be a little bit of scope cleep).

mountiny commented 1 year ago

Also, just curious. Why have we decided to use two agencies for the this migration project instead of just one?

Because we are closely working with both of them and they both have lots of experience and this project has quite a bit of config/ setup decisions made so its ideal if they can both (ideally also Margelo will review the plan) with agree on the next steps. Everyone will be happy with the set up in future ad they can have their say now.

hayata-suenaga commented 1 year ago

@aleqsio presented a list of suggestions on slack on how we type data in Onyx.

I think the second choice there is the best one

keep all top-level keys in Onyx fully optional and handle it gracefully which will be way easier with TS

hayata-suenaga commented 1 year ago

Fábio (technical lead) from Callstack is working on finalizing the formal proposal and examining the shape of Onyx data.

for setting up the TS tooling for react-native-onyx and writing down the ts guideline, we decided to wait for BĹ‚aĹĽej (technical lead) from SWM. They'll become available on Thursday.

neil-marcellini commented 1 year ago

I posted an update in the channel to make it clear that the next step is to finalize the high level of the doc and get it reviewed. I also finally reviewed their proposal document.

hayata-suenaga commented 1 year ago

I also provided the time estimation for the reviews to take. It usually takes around one week for a review to be completed right?

vendors probably want to know when they can start working so that they can allocate their team members accordingly

hayata-suenaga commented 1 year ago

waiting for BĹ‚aĹĽej (tech lead from SWM) to review the high level portion of the design doc. Once they think it's fine, we can them it for the internal view.

melvin-bot[bot] commented 1 year ago

:wave: Hello Generalist Track Team - you have been assigned to review this High Level Design Doc. Please, treat this as a priority. Review this Stack Overflow for some tips on reviewing a design doc. Once you are done, simply press the Add "Reviewed Doc" comment button in the right hand side K2 pannel or follow these instructions.

hayata-suenaga commented 1 year ago

đź”—đź”— đź”— The link for the design doc is here: https://docs.google.com/document/d/1LNcgYeYyovQ88gNjLIgBqBReLtbLAbxeAbna9QKxeAQ/edit#

maddylewis commented 1 year ago

I have read and reviewed this Design Doc!

mountiny commented 1 year ago

I have read and reviewed this Design Doc!

NickTooker commented 1 year ago

I have read and reviewed this Design Doc!

iwiznia commented 1 year ago

I have read and reviewed this Design Doc!

puneetlath commented 1 year ago

I have read and reviewed this Design Doc!

Gonals commented 1 year ago

I have read and reviewed this Design Doc!

Julesssss commented 1 year ago

I have read and reviewed this Design Doc!

flaviadefaria commented 1 year ago

I have read and reviewed this Design Doc!

JmillsExpensify commented 1 year ago

I have read and reviewed this Design Doc!

hayata-suenaga commented 1 year ago

All the required reviews are done for the high level 🎊

Now the next step is:

hayata-suenaga commented 1 year ago

Links

PauloGasparSv commented 1 year ago

I have read and reviewed this Design Doc!

flodnv commented 1 year ago

I have read and reviewed this Design Doc!

MarcFillari commented 1 year ago

I have read and reviewed this Design Doc!

AndrewGable commented 1 year ago

I have read and reviewed this Design Doc!

twisterdotcom commented 1 year ago

I have read and reviewed this Design Doc!

neil-marcellini commented 1 year ago

I "reviewed" the detailed design (as an author) and left a few comments. I think Hayata will address those and then send the detailed section out as soon as the high level review is complete.

melvin-bot[bot] commented 1 year ago

:wave: Hello Generalist Track Team - you have been assigned to review this Detailed Design Doc. Please, treat this as a priority. Review this Stack Overflow for some tips on reviewing a design doc. Once you are done, simply press the Add "Reviewed Doc" comment button in the right hand side K2 pannel or follow these instructions.

hayata-suenaga commented 1 year ago

đź”—đź”— đź”— Detailed section link

https://docs.google.com/document/d/1LNcgYeYyovQ88gNjLIgBqBReLtbLAbxeAbna9QKxeAQ/edit#bookmark=id.ajb40umaoatw

flaviadefaria commented 1 year ago

I have read and reviewed this Design Doc!

isabelastisser commented 1 year ago

I have read and reviewed this Design Doc!

Li357 commented 1 year ago

I have read and reviewed this Design Doc!

danielrvidal commented 1 year ago

Is this a super high priority? It looks like it was created with a Daily tag for everyone to review in one day, which normally we reserve for things that are impacting the next couple waves. So I just wanted to make sure this applies to this too as the urgency in the doc talks about no timeline.

francoisl commented 1 year ago

I have read and reviewed this Design Doc!