› ›

use a JS transpiler with static type-checking?

procjohnprocjohn
edited December 2017 in p5.js Programming Questions

I have a likely good candidate problem for solving with p5.js. My issue is that I have not enjoyed my attempts to learn JS in the browser. I'm talking general JS, not Processing specifically. The constant errors which are not flagged, leading to programs that do... nothing, no error, no clue what's wrong.

A lot of this could be fixed with static types, with a JS transpiler such as Dart or Scala.js.

My question is, first of all, is p5.js easier to use and debug than my previous JS experiences? (I'm just making a wild guess here that it might, although I wouldn't know why.. you tell me).

Second, can p5.js be accessed from a JS transpiler? How would I go about doing that?

Tagged:

Best Answer

Answers

  • GoToLoopGoToLoop
    edited December 2017

    If you want types, replace JavaScript (JS) w/ TypeScript (TS): ~O)
    http://www.TypeScriptLang.org/play/

    You're gonna need to import the "d.ts" type file for p5.js though. :-\"
    Check what's the TypeScript's current state below:
    https://GitHub.com/processing/p5.js/pull/2279

  • procjohnprocjohn

    Are any other transpilers supported? Dart, Scala.js, Rust, etc.?

  • GoToLoopGoToLoop

    AFAIK, in order to use Dart, Processing needs to be re-written on it. :-<
    Same for the other 2 languages you've cited above. 8-|

    TypeScript (and CoffeScript and others too) belongs to a diff. category.
    They're not directly compilable. They have to be transpiled to JS in order to run. :(|)

  • GoToLoopGoToLoop
    edited December 2017
    • The other alternative is to use Processing's default Java Mode, which is naturally strongly typed.
    • And then transfer it to Pjs library: http://ProcessingJS.org/
    • Which is gonna transpile the Java Mode syntax to JS in order to run on browsers. \m/
    • But then, your code's gotta stick to Processing's API. No libraries are allowed: :-O
      http://ProcessingJS.org/reference/
  • GoToLoopGoToLoop

    Take a look at this forum thread below, which got the same sketches for both Java & JS syntaxes: :bz

    https://www.Reddit.com/r/processing/comments/7dqqvh/openprocessing_converting_code_written_in_java_to/dq0ecac/

  • procjohnprocjohn

    Thanks, GoToLoop. I have several projects in mind that will run in the browser, so I'm hoping to find a good JS transpiler that may serve all my needs, and will be the only one I have to master. I'm not sure what you mean by the difference between TypeScript and the others I mentioned. Dart and Scala.js also generate JavaScript which can be run in the browser. I think that I'm asking, generally, if a language can transpile to JS, is that all I need to know in order to know that it can use P5.js?

  • GoToLoopGoToLoop
    edited December 2017 Answer ✓

    I'm not sure what you mean by the difference between TypeScript...

    TypeScript can use any JS libraries directly. \m/
    Although for a much better experience, we do need a library's corresponding ".d.ts" file. :-j

    Dart and Scala.js also generate JavaScript which can be run in the browser.

    Dunno much about Scala.js. But AFAIK, it doesn't seem Dart can directly use JS libraries. :-&

    Maybe that changed recently. But you've gotta check that out for yourself. :-??

  • blindfishblindfish

    @procjohn - TypeScript would be a good choice: for better or worse it's becoming the de-facto flavour of typed JS and is used by established frameworks like Angular (we're even using it with React on a work project). That means you're more likely to find useful documentation and relevant discussions and that others have already tried what you want to achieve.

    TypeScript tells some white lies about JS and tricks you into thinking it has real classes (as does ES6); and you have to get used to lots of compile-time errors; but it sounds like that's what you're looking for ;)

    In terms of debugging did you not get on with Chrome's dev tools? It's very rare for a script to fail without logging something to the console; and the browser has some idea where the failure originated... catching errors at run-time might seem inefficient; but with good tooling you should be watching your page update on the fly as and when you save...

  • procjohnprocjohn
    edited December 2017

    @blindfish - I don't know if I was using the full power of the dev tools. In the case of the problems I was having, there was no message logged to the console.

    Can either of you give me an example ts script using p5.js? I have fiddled with it a bit, trying to get a Processing sketch working, but I don't know enough about JavaScript or TypeScript or p5.js to have any clue why it's not working.

    EDIT: I think I'm going to start a separate thread asking for examples of using p5.js with TypeScript.

Sign In or Register to comment.